효과 | CoUI

효과

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.5)
키보드 포커스 링 → CoreFocusRing (폭 · 오프셋 · 색이 한 세트)

쓰지 마세요

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

coui_core 맵#

쓰는 이름	의미
`CoreShadow.sm` … `xl3` · `inset` · `none`	시맨틱 그림자. 대부분 2-layer
`CoreOpacity.opacity50`	primitive 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`	눌린 버튼, 오목한 입력

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

투명도 — `CoreOpacity`#

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

시맨틱	값	primitive
`hover`	0.03	`opacity3`
`focus`	0.08	`opacity8`
`pressed`	0.12	`opacity12`
`disabled`	0.4	`opacity40`
`scrim`	0.5	`opacity50`

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

포커스 링 — `CoreFocusRing`#

슬롯	값
`ringWidth`	2px
`ringOffset`	폭과 같음 (2px)
`ringOpacity`	1
`ringColor`	`CoreColors.focusRing` (primary 가 아님)
`ringOffsetColor`	`CoreColors.surface`

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

사용법#

CoreCardStyle(
  boxShadow: CoreShadow.sm,
)

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

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

함께 보기#

디자인 토큰 — 축 전체 맵
형태 — 반경 · 선 굵기
레이어링 — 무엇이 위에 오는가
애니메이션 — 전환 시간 · 이징
Figma 라이브러리 — 정본 파일

효과

효과#