레이아웃
본문은 최대 960 너비로 가운데에 두고, 간격은 자리마다 정해진 토큰을 써요. Figma에서는 모든 묶음을 auto layout으로 만들어요.
화면 구조
헤더와 사이드 내비는 화면 전체 너비를 쓰고, 960 규칙은 본문 영역에만 적용해요. (그림은 비율만 맞춘 축소본이에요)
헤더화면 전체 너비 · 높이 56
사이드 내비너비 240
본문최대 960 · 가운데 정렬 · 좌우 space/4 · 위아래 space/10
간격 기본값
- 섹션 사이
space/6 - Card 안쪽 padding / Header·Body·Footer 사이
space/5 / space/4 - 폼 필드 사이
space/4 - 라벨 ↔ 입력란 ↔ 도움말·에러
space/2 - 버튼 묶음 사이
space/2 - 목록 항목 안 (아바타 ↔ 텍스트)
space/3 - 제목 ↔ 바로 아래 설명
space/1
에러 표시
입력란 테두리를 border/danger로 바꾸고, 설명 자리에 고치는 방법을 caption + text/danger로 써요. 라벨 색은 바꾸지 않아요. Field가 이 묶음을 처리해요.
https://로 시작하는 주소를 입력하세요.
Figma auto layout
- 자식이 둘 이상이면 auto layout절대 좌표 배치는 쓰지 않아요. 레이어 구조는 코드 DOM과 같게 맞춰요(Card → Header / Body / Footer).
- padding·gap은 space 변수에 바인딩0도 space/0에 바인딩해요. 테두리는 stroke/default, 안쪽 정렬이에요.
- 크기 규칙텍스트는 Hug, 늘어나야 하는 요소는 Fill, 컨트롤 높이는 Fixed(space/7·8·10).
- Light로 그리고 Dark로 확인화면은 Light 모드로 그리고, 마지막에 복제해 Semantic 모드를 Dark로 바꿔 한 번 확인해요.