효과 | CoUI
본문으로 건너뛰기
LogoCoUI

효과

CoUI 그림자 · 투명도 · 포커스 링 — CoreShadow · CoreOpacity · CoreFocusRing 가 단일 출처입니다.

목차

Figma Foundation · 05. Effect · 값은 coui_core 가 정본입니다.

이 페이지는 깊이 · 상태 투명도 · 키보드 포커스 링을 고르는 곳입니다. 세 갈래는 coui_core 의 CoreShadow · CoreOpacity · CoreFocusRing 이 정합니다. 상태 표현은 색을 새로 만들지 않고 같은 전경을 투명도로 겹칩니다 — 모드가 바뀌어도 규칙이 같습니다.

캔버스 설명문과 코드 숫자가 다를 수 있습니다. 숫자가 갈리면 코드를 따르세요. 토큰 축 전체는 디자인 토큰 을 보세요.

언제 쓰나#

토큰을 고르세요

  • 카드·팝오버·모달의 떠 있음 → CoreShadow.sm / md / lg …
  • hover · focus · pressed 오버레이 → CoreOpacity.hover 등 시맨틱, 또는 CoreStateLayer.subtle / .strong 램프
  • 비활성 컨트롤 → CoreOpacity.disabled (0.4)
  • 모달 스크림 → CoreOpacity.scrim (0.6)
  • 키보드 포커스 링 → CoreFocusRing (폭 · 오프셋 · 색이 한 세트)

쓰지 마세요

  • BoxShadow / shadow-[…] 리터럴 — 다크의 그림자 세기와 서페이스 스타일의 굽힘이 비껴갑니다
  • hover 에 opacity10 을 직접 박기 — 시맨틱 hover 는 3% (opacity3) 입니다. 캔버스 사본이 5/10/15 로 남아 있어도 킷이 그리는 램프는 3/8/12 입니다
  • 포커스 링 폭만 바꾸고 오프셋·색은 그대로 두기 — 세 값이 한 계약입니다

coui_core 맵#

쓰는 이름의미
CoreShadow.sm … xl3 · inset · none 시맨틱 그림자. xs · sm 은 2-layer, md 부터는 1-layer
CoreShadow.darkStrength다크 테마가 그림자 알파에 곱하는 배수 (4)
CoreOpacity.opacity50primitive 0.0–1.0 (21단계)
CoreOpacity.hover / focus / pressed / disabled / scrim 상태 시맨틱
CoreStateLayer.subtle밝은 면 램프 3 / 8 / 12 %
CoreStateLayer.strong채운 면 램프 8 / 12 / 16 %
CoreFocusRing.ringWidth · ringOffset · ringColor 포커스 링 세트

근거 명세: design/design-tokens/shadow/CoUI_Shadow_Token_Specification.md (v1.1), design/design-tokens/opacity/CoUI_Opacity_Token_Specification.md (1.0). 우선순위는 디자인 소스.

그림자 — CoreShadow#

높이(elevation)입니다. none 을 빼고 8단계 + inset 1개. Dart 식별자 제약으로 spec 의 2xl / 3xl 은 xl2 / xl3 입니다. Web CSS 키는 다시 2xl / 3xl 입니다.

토큰쓰는 곳
none그림자 없음
xs입력, 작은 버튼
sm카드 기본, AppBar elevated
md토스트, 카드 hover
lg메뉴 · 팝오버 · 셀렉트 판, 서랍, 명령 팔레트
xl모달, 다이얼로그
xl2전체 화면 오버레이
xl3극적인 깊이
inset눌린 버튼, 오목한 입력

md 부터는 떠 있는 판의 그림자라 한 겹이고(오프셋 0 · 스프레드 0), 라이트의 알파는 md 0.10 · lg 0.125 · xl 0.125 입니다. 다크 테마는 같은 모양에 알파만 CoreShadow.darkStrength 배(최대 1)로 그립니다 — 어두운 면에서는 같은 검정이 거의 보이지 않기 때문입니다. 그 곱셈은 컴포넌트가 아니라 테마가 합니다.

고대비·강제 색상 모드에서는 그림자가 사라질 수 있습니다 — 경계는 형태 의 stroke 가 남깁니다. 접근성 계약은 접근성 을 보세요.

투명도 — CoreOpacity#

primitive 는 0–100% 사다리입니다. 컴포넌트가 직접 고르는 값은 시맨틱 다섯입니다.

시맨틱값primitive
hover0.03opacity3
focus0.08opacity8
pressed0.12opacity12
disabled0.4opacity40
scrim0.6opacity60

CoreStateLayer.subtle 은 위 hover/focus/pressed 와 같고, 채운 컨트롤은 strong(8/12/16)을 씁니다. 램프는 hover ≤ focus ≤ pressed 여야 합니다 — 포커스된 컨트롤을 hover 해도 변화가 읽혀야 하기 때문입니다.

포커스 링 — CoreFocusRing#

슬롯값
ringWidth2px
ringOffset폭과 같음 (2px)
ringOpacity1
ringColorCoreColors.focusRing (primary 가 아님)
ringOffsetColor투명 — 간격에 컨트롤 뒤의 배경이 보인다
opaqueOffsetColor CoreColors.surface — 배경을 모르는 컴포넌트만 간격을 이 색 밴드로 칠한다

색을 primary 에 묶지 않습니다 — 브랜드 슬롯이 중성으로 풀리면 링이 본문 글자와 같아져 키보드 위치가 사라집니다.

링과 컨트롤 사이 간격은 기본이 투명입니다. 배경을 아는 자리에서 칠한 밴드는 컨트롤에 붙은 두 번째 테두리로 읽히고, surface 가 아닌 컨테이너 위에서는 틀린 색이 됩니다. 콘텐츠나 사진 위에 떠 있거나 반전 표면 위에 놓여 배경을 알 수 없는 컴포넌트(Fab · Carousel 내비게이션 · Toast · CodeSnippet 복사 버튼 · solid Banner · Chip 닫기 버튼 등)만 opaqueOffsetColor 밴드를 켜서 링 + 밴드의 두 색 인디케이터(W3C C40)로 대비를 확보합니다.

사용법#

CoreCardStyle(
  boxShadow: CoreShadow.sm,
)

CoreStateLayer.subtle.hover   // 0.03
CoreOpacity.disabled          // 0.4

그림자를 Style 에 넣는 필드는 컴포넌트마다 이름이 다릅니다 (boxShadow, panelBoxShadow, …). 값은 항상 CoreShadow.* 리스트입니다.

함께 보기#