형태 | CoUI
본문으로 건너뛰기
LogoCoUI

형태

CoUI 모서리 반경과 선 굵기 — CoreRadius · CoreStrokeWidth 가 단일 출처입니다.

목차

Figma Foundation · 04. Shape · 값은 coui_core 가 정본입니다.

이 페이지는 모서리와 선 굵기를 고르는 곳입니다. 반경 19단계(radius0–radius64, radius9999)와 선 굵기 10단계(stroke0–stroke8, 그 사이의 소수 단계 stroke0_5 · stroke1_5 포함)는 coui_core 의 CoreRadius · CoreStrokeWidth 가 정하고, Flutter / Web 이 같은 이름을 읽습니다.

모서리는 요소의 역할이 정합니다 — 역할 다섯 단 CoreRadiusRole 을 먼저 고르고, 역할로 답할 수 없는 값(완전 원 · 각진 모서리 · 역할에서 파생된 안쪽 모서리)만 primitive 를 직접 고릅니다. 역할은 원시값의 이름 별칭일 뿐이라 CoreRadiusRole.panel 은 radius12 와 같은 값이고, 서페이스 프리셋과 Web 변수가 둘을 똑같이 움직입니다. "이 필드의 모서리는 얼마인가" 는 그 컴포넌트의 CoreXxxStyle 기본값을 보면 답이 나옵니다.

토큰 축 전체는 디자인 토큰 을 보세요.

언제 쓰나#

토큰을 고르세요

  • 크기를 고르는 컨트롤(버튼 · 입력) 모서리 → 그 크기의 높이 × 0.25 (xs radius6 · sm radius8 · md radius10 · lg radius12 · xl radius14 · xl2 radius16). 컴포넌트 크기 행이 이미 적고 있으니 덮을 때만 고릅니다
  • 크기가 없는 컨트롤 · 카드·칩 모서리 → CoreRadius.radius8 근처. 패널 안의 행 → 패널 모서리에서 패딩을 뺀 CoreRadius.radius6 (패널 12 − 패딩 6). 알약·아바타 → radius9999
  • 테두리·디바이더·언더라인 → CoreStrokeWidth.stroke1 (기본) / stroke2 (강조)
  • 네 모서리를 따로 줄 때 → CoreBorderRadius.all(CoreRadius.radius8) 또는 .only(...)

쓰지 마세요

  • BorderRadius.circular(12) / rounded-[12px] 처럼 사다리 밖 숫자 — Web 은 --coui-radius-* 를 우회해 서페이스 프리셋이 그 컴포넌트만 비껴갑니다
  • 1.5px 를 숫자로 박은 보더 — 활성 경계는 stroke1_5 토큰입니다(키보드 포커스 링이 아니라 포커스 받은 입력 · 열린 셀렉트 · 오류 테두리 · 꺼진 Checkbox / Radio 틀). 사다리 밖 숫자는 Web 에서 --coui-stroke-width-* 를 우회합니다

중첩된 모서리는 바깥이 안쪽보다 커야 합니다. 카드 radius12 안의 썸네일은 radius8 이하가 자연스럽습니다. radius9999 는 크기가 아니라 완전 원/알약 의도입니다.

coui_core 맵#

쓰는 이름의미
CoreRadius.radius8반경 primitive (logical px). 19단계
CoreRadius.radius9999pill / circle. 높이의 절반으로 읽힘
CoreRadius.scale.radius8Web Tailwind 키 ('radius8')
CoreStrokeWidth.stroke1선 굵기 primitive. 10단계 (0·0.5·1·1.5·2·3·4·5·6·8)
CoreBorderRadius.all(...)네 모서리 도메인 타입. Style 필드에 넣음

근거 명세: design/design-tokens/border-radius/CoUI_Border_Radius_Token_Specification.md (v1.0), design/design-tokens/stroke-width/CoUI_Stroke_Width_Token_Specification.md (1.0). 우선순위는 디자인 소스.

스케일#

반경 — CoreRadius#

구간토큰간격
Smallradius0 … radius162px
Mediumradius20 … radius364px
Largeradius40 … radius648px
Fullradius9999알약·원

radius0 과 radius9999 는 크기 사다리가 아니라 의도(각 / 완전 원)입니다. 서페이스 프리셋이 값을 옮길 때 이 둘은 자리에 남습니다.

반경 역할 — CoreRadiusRole

역할px무엇
part4컨트롤 안이나 옆의 작은 요소 (체크박스 상자 · 키 캡)
control8누르거나 입력하는 요소, 목록의 행. 크기 사다리를 고르는 컨트롤은 높이 × 0.25
panel12화면 위에 떠서 목록 · 선택지를 담는 면 (메뉴 · 팝오버 · 토스트), 인라인 알림
surface16화면에 놓이는 카드 · 큰 컨테이너 (서랍 패널)
modal20열려 있는 동안 화면의 가장 바깥 상자이고 아래를 막는 면 (대화상자)

어느 요소가 어느 역할인지는 컴포넌트 이름이 아니라 "이건 어느 종류의 면인가" 한 질문이 정합니다. 안쪽 모서리는 바깥 모서리에서 패딩을 뺀 값이라 — 패널 12 안의 행 6 이 패딩 6 으로 동심입니다 — 역할이 아니라 파생값입니다.

선 굵기 — CoreStrokeWidth#

토큰px쓰는 곳
stroke00선 없음
stroke0_5 0.5 헤어라인 — 기기 픽셀 한 줄. 글줄 안에 놓이는 표시(Kbd 키 캡)가 보이는 테두리 색을 가질 때의 가는 테두리 (기본 키 캡은 테두리 색이 투명이라 폭 0)
stroke11기본 보더, Divider, 테이블
stroke1_5 1.5 활성 경계 — 포커스 받은 입력 · 열린 셀렉트 · 오류 테두리 · 꺼진 Checkbox / Radio 틀. 키보드 포커스 링은 아니다
stroke22선택 카드, 활성 탭 언더라인
stroke33강한 강조. 포커스 링에 가깝게
stroke44장식·섹션 디바이더
stroke5 5 라디오 lg · xl 의 켜진 고리 — 구멍 지름이 8 · 10 이 되는 굵기
stroke66강한 섹션 강조
stroke88최대. 특수 장식만

실사용은 대부분 stroke1 / stroke2 에 몰립니다. 포커스 링 자체는 효과 의 CoreFocusRing 이 한 세트로 묶습니다.

stroke0_5 · stroke1_5 의 _ 는 소수점입니다. Dart 식별자도 Figma 변수 이름도 . 를 쓸 수 없어서, 코드 · Figma 변수(stroke/0_5) · CSS 변수(--coui-stroke-width-0_5) 모두 같은 0_5 로 적습니다. 값은 한 가지인데 그리는 폭은 플랫폼이 정합니다 — Flutter 는 0.5 그대로, Web 은 1배 화면에서 1px, 2배 이상 화면에서 0.5px 입니다(--coui-stroke-width-0_5). 1배 화면의 0.5px 선은 같은 색의 1px 선보다 훨씬 옅게 번져 색이 말하는 것보다 흐려지기 때문입니다. 표면 프리셋의 선 굵기 하한은 이 단계에도 닿습니다.

사용법#

// Flutter / Web — Style 슬롯에 primitive
CoreButtonStyle(
  borderRadius: CoreBorderRadius.all(CoreRadius.radius8),
  borderWidth: CoreStrokeWidth.stroke1,
)

// pill — 높이와 상관없이 양 끝이 반원
CoreBadgeStyle(
  borderRadius: CoreBorderRadius.all(CoreRadius.radius9999),
)

// Chip 은 반경을 적지 않고 모양을 고릅니다
Chip(shape: CoreChipShape.pill)

함께 보기#