화면 구성 · 여백

이 문서는 CoUI 로 만드는 서비스 화면의 뼈대를 정합니다. 셸, 페이지 순서, 본문의 데이터 표현, 상세 · 설정 · 만들기 흐름, 여백 리듬, 모서리 · 그림자 위계, 글자 크기 4단계를 다룹니다. 값은 CoUI 토큰 이름과 부품 이름으로만 적습니다. 색을 어느 자리에 쓰는지는 token-usage.md, 알림 · 빈 상태 · 진행 · 실패 · 확인 대화상자는 patterns.md, 피그마 페이지 · 섹션 · 프레임 이름은 figma-file.md 가 정합니다. CoUI 에 없는 것은 「CoUI 에 없음」 과 가장 가까운 CoUI 방법을 함께 적고 「CoUI 후보」 로 표시합니다. 이 문서는 숫자를 고르지 않습니다. 어느 CoUI 토큰을 어느 자리에 쓰는지만 정하므로, CoUI 가 바뀌면 화면도 함께 따라갑니다.

표기: 피그마 변수 이름을 먼저, 괄호 안에 Dart 이름을 적습니다. 예: space/24 (CoreSpace.space24). 피그마에서 간격은 cc-blueprint/rules/coui-library-consumption.md §2 대로 Primitives 의 space/* 를 묶습니다. 이 스킬은 밀도를 standard 하나로 두므로 Semantic/ Dimension 의 standard 값과 같습니다. /cc-blueprint:design 은 밀도 · 재질 모드를 저절로 고정하지 않고 Step 0.4 레버(cc-blueprint/rules/figma-direction.md §D2)에서 고른 값만 고정합니다. 그래서 레버 DDR 에 테마 밀도 standard · 형태 · 재질 defaultStyle · 깊이 평면 · 강조 면적 기본 을 적고, 이유를 「coui-product-style 하우스 스타일」로 둡니다.

이 문서의 1~9절 셸과 페이지 순서는 운영 도구 기본 패턴이다. 손님이 폰으로 쓰는 앱은 10절의 손님용 앱 기본 예시에서 출발한다(mood.md 1-1). 그 밖의 소비자 앱·제품 사이트는 SKILL.md 「구성 선택의 범위」를 우선해 실제 작업/데이터에 맞는 위계·구성 단위를 정한다. CoUI 토큰과 API를 유지하면서 KPI 생략, 카드 없는 시간축, 개체 프로필과 기록 조합, 데이터 시각화, 설명용 이미지 등을 선택할 수 있다. 출처 없는 지표를 채우지 않는다.

셸은 CoUI Scaffold 로 짓습니다. 배치는 cc-blueprint/rules/figma-composition-patterns.md §C4 콘솔 셸을 따릅니다. 사이드바가 왼쪽에 있고, 상단 바는 사이드바 옆 메인 칸 위에 놓입니다. CoUI Scaffold 는 headers 를 사이드바까지 덮는 전체 폭 띠로 그리므로, 사이드바가 있는 데스크톱 · 태블릿은 두 겹으로 짓습니다. 셸 Scaffold(sidebar: NavigationBar) 의 child 에 페이지 Scaffold(headers: [AppBar], child: 본문) 을 넣습니다. 셸 안에 페이지 Scaffold 를 넣는 것은 CoUI 가 정상 조립으로 두는 방법입니다. 사이드바가 없는 모바일은 한 겹으로 headers(상단 바) · child(본문) · footers(하단 탭)입니다. 피그마에서 사이드바는 §C4 대로 자연 높이 · 위 정렬로 둡니다.

• 모드는 저절로 바뀌지 않습니다. NavigationBar.mode 는 화면이 폭을 읽고 고릅니다(Breakpoint · ResponsiveContainer). 세 모드가 같은 items 를 받으므로 메뉴 데이터는 하나입니다.
• 메뉴 묶음(주요 / 운영 / 관리)은 CoreNavigationBarItem.label('운영')(머리글) · .divider() · .gap(크기) 로 나눕니다. 첫 묶음은 머리글 없이, 그 아래 묶음에만 머리글을 둡니다. 묶음 접기는 CoUI 에 없음 → 묶음을 셋 넘기지 않습니다(CoUI 후보: NavigationBar 묶음 접기).
• 사이드바 항목의 개수 배지는 항목의 badge 슬롯입니다 — CoreNavigationBarItem.destination(icon:, label:, badge: Badge(form: CoreBadgeForm.count, child: Text('12'))). 사이드바에서는 행 끝에, 레일 · 하단 탭에서는 아이콘 위 모서리에 그려지므로 세 모드가 같은 items 를 씁니다. 피그마는 NavigationBarItem 의 Show count.
• 모바일 하단 탭에는 「주요」 묶음만 올립니다. 나머지는 「더보기」 탭 하나로 모아 탭 수를 4~5개로 맞춥니다.
• 상단 바 안: leading 에 맥락(워크스페이스 전환 · 현재 경로), child 또는 trailing 에 전체 검색(Command 를 여는 TextField), trailing 끝에 지금 역할 칩(Badge outlined · sm)과 아바타. 역할 칩 규칙은 patterns.md.
• 사이드바 맨 아래 한 자리는 계정 · 플랜 상태 같은 조용한 정보입니다. 주 행동 버튼을 두지 않습니다.
• 상단 바 아래 선은 부품 기본값 그대로 둡니다. 상단 바와 페이지가 같은 면(color/surface)이라 AppBar 의 아래 선(showDivider 기본 켜짐, color/outline-variant)이 경계입니다. elevated 는 꺼진 채로 둡니다. 셸은 떠 있지 않습니다.
• 페이지 바탕은 Scaffold 기본값(color/surface) 그대로입니다. 면의 층(페이지 → 카드 · 패널 Card 기본 → 떠 있는 판)은 token-usage.md 2절이 정본입니다. 제품이 다른 바탕을 고르면 앱 테마(CoreScaffoldTheme) 한 곳에서 바꿉니다.
• 사이드바는 NavigationBar 기본값 그대로 둡니다. 면(color/surface-container-low)과 본문 쪽 가장자리 1px color/outline-variant 경계선을 부품이 함께 그리므로 선을 따로 긋지 않습니다. 「선과 면 대비를 겹치지 않는다」의 유일한 예외입니다(token-usage.md 2-2).
• 피그마에서는 태블릿을 그리지 않습니다. 프레임은 Web-Default · Mobile-Default 두 벌입니다(cc-blueprint/rules/figma-workflow.md).

위에서 아래로 페이지 머리 → 요약(KPI 최대 4개) → 본문(표 · 목록 · 카드) → 필요하면 오른쪽 보조 패널. 블록 사이는 6절 값(데스크톱 · 태블릿 space/24, 모바일 space/20)입니다.

맥락 한 줄 · 제목 · 오른쪽 행동 최대 2개. CoUI 기준 릴리스(coui_flutter 0.163)에는 PageHeader 부품이 없어 도메인 컴포넌트 PageHeader 로 CoUI 재료를 조립합니다(patterns.md 8절). 다음 릴리스(coui_flutter 0.164)부터 CoUI PageHeader(eyebrow · title · description · actions)가 들어옵니다 — 그 릴리스로 올린 앱과, 그 릴리스로 다시 그려 게시한 라이브러리에서는 도메인 컴포넌트를 만들지 않고 CoUI 것을 씁니다.

• 슬롯 이름은 AppBar 의 것을 그대로 씁니다 — header(맥락 한 줄) · title(제목) · subtitle · trailing(행동). 상세 머리에서는 leading(뒤로 가기)도 씁니다(3절).
• 안쪽: 맥락 한 줄은 메타 글자(Body/Small, color/on-surface-variant) 또는 Breadcrumb, 제목은 Headline/Medium 글자, 행동은 Button 인스턴스입니다. 바탕은 채우지 않고 페이지 바탕 위에 둡니다.
• AppBar(variant: medium) 를 페이지 머리로 쓰지 않습니다. 아래 선까지 셸의 상단 바와 같은 띠라 바가 두 겹으로 읽히고, 제목 기본 스타일이 Title/Large 라 9절의 페이지 제목과 다릅니다. 피그마에서는 인스턴스 안 글자 스타일 바꾸기가 허용 범위 밖이고(cc-blueprint/rules/coui-library-consumption.md §7), 높이도 112 로 고정됩니다. 코드에서는 Basic(title: Text(…).headlineMedium, subtitle: …, trailing: …) 조합으로 같은 슬롯을 만들 수 있습니다.
• 오른쪽 행동: 주 행동 Button primary 하나를 맨 오른쪽에, 그 왼쪽에 outline 하나. 셋 이상은 DropdownMenu 로 접습니다.
• 맥락 한 줄은 문장 하나이거나, 값이 둘이면 글자 노드 둘로 자리를 나눕니다. 한 글자 노드 안에서 「 · 」 · 「→」 로 값을 잇지 않습니다(copy.md 8절). 예: 교육 「2026년 봄학기」 + 「수강생 128명」(자리 둘), 병원 「오늘 접수가 42건이에요」, 커머스 「이번 주 주문 1,284건」, 사내 도구 경로 Breadcrumb(「결재」 › 「3분기 예산」).
• 그 전까지 피그마에서는 900 components 의 promote/PageHeader 로 둡니다(patterns.md 8절 6번). 슬롯 이름은 위와 같고, CoUI PageHeader 로 옮길 때 header → eyebrow, subtitle → description, trailing → actions 로 바뀌고, 상세 머리의 뒤로 가기(leading, 3절)에 해당하는 칸은 없습니다.

• Stat(label, value, change, changeType) 한 장이 KPI 하나입니다. 데스크톱 한 줄 4장 같은 폭, 태블릿 · 모바일 2 × 2. 사이는 6절 「같은 줄 패널 사이」 값(데스크톱 space/24, 태블릿 · 모바일 space/16)입니다.
• 단위는 unit(v2부터 — coui_flutter 0.163) 칸에 둡니다(「1,284」 + 「명」, copy.md 7절). 그 전 판이면 value 글자에 붙여 넣습니다. 숫자가 아닌 상태도 KPI 가 됩니다(「정상」 「점검 중」).
• 비교 · 기준 시각 같은 설명 한 줄은 description 칸에 둡니다. 증감은 change + changeType(positive · negative, 증감이 없는 비교는 neutral).
• Stat 기본 변형은 filled(color/surface-container, 선 없음)라 페이지 바탕 위에서 면으로 드러납니다 — 테마로 바꾸지 않습니다(token-usage.md 2절). outlined 는 카드 면의 톤이 바탕과 같아지는 자리에만 씁니다.
• 추이가 필요하면 TrendChart 를 Stat 아래 패널에 둡니다. 막대 · 점마다 색을 줄 수 있으면 강조색(color/primary)은 「지금」 값 하나(오늘 · 이번 달)에만 두고 지난 값은 color/primary-container 로 내립니다. 모든 막대가 진하면 지금이 어디인지 읽히지 않습니다.
• 처리할 일 KPI — 「사람이 지금 처리해야 할 일」(처리 대기 신고 · 승인 대기 · 미확인 접수)이 0 이 아니면 그 한 장만 눈에 띄게 합니다. Stat 에 톤 축은 CoUI 에 없음 → 지금은 Stat 면은 그대로 두고 description 에 「가장 오래된 건 8시간 전」 같은 긴급도를 적고, 라벨 옆에 Badge(tone: CoreBadgeTone.destructive) 하나를 둡니다. CoUI 후보: Stat tone(옅은 상태색 면 + 짝 글자색). 여러 장을 색으로 칠하는 것은 「색색의 KPI 카드」(mood.md 4절)입니다.
• Stat 값 글자는 부품 기본값 Headline/Large 입니다. 글자 4단계 밖의 유일한 예외이고, 페이지 제목보다 큽니다(9절).

데이터 표현 규칙:

패널 머리는 패널 제목(Title/Medium) + 오른쪽 Link(variant: CoreLinkVariant.muted) 하나(「전체 보기」)입니다. 카드가 목록의 일부만 보여 주면 링크에 전체 건수를 붙입니다(「전체 보기(3건)」). 머리와 내용 사이는 6절 「패널 안 요소 사이」 값(데스크톱 space/16, 태블릿 · 모바일 space/12)입니다.

표(Table)

• 카드(Card 기본 면) 안에 둡니다. 행 구분선(color/outline-variant) · 바깥선(0) · 머리 행(투명 — 카드 면)은 Table 기본값 그대로이고 다시 묶지 않습니다(token-usage.md 2절).
• 첫 열은 이름(+ 고정폭 ID), 상태 열은 칩, 맨 끝 열은 DropdownMenu 행 메뉴. 셀 글자는 부품 기본값입니다 — 머리 행 Label/Medium · 메타 글자색, 본문 행 Label/Large.
• 정렬 표시 · 페이지 나누기 · 빈 표는 CoUI Table 에 없음 → Pagination 을 표 아래에, 빈 표는 같은 자리에 EmptyState. CoUI 후보: Table 정렬 표시 · 빈 표 슬롯.

목록(Listing + Basic)

• 한 줄 = Basic(title: 제목, subtitle: 메타, trailing: 상태 칩). 상태 칩은 오른쪽입니다(patterns.md). itemBorder 는 끈 채로 두고 행은 여백으로 나눕니다.
• 평상시 행은 카드 면 그대로입니다. 표의 머리 · 호버 · 선택 행은 Table 기본값 그대로입니다. 선택 · 호버 면을 그리지 않는 부품(Listing 의 행)만, 그 행에 표의 선택 행과 같은 color/surface-container-high(카드 면에서 한 단계)를 깝니다 — 코드는 OutlinedContainer(containerStyle:) 의 배경 토큰으로. 패널 안에 또 경계 있는 면을 두지 않습니다(cc-blueprint/rules/figma-slop-tells.md §S1).

카드(Card)

• 카드 격자는 패널 안에 넣지 않고 페이지 바탕 위에 바로 놓습니다. 카드 하나가 패널 하나입니다.
• 기본 변형 filled 는 color/surface-container, 선 없음 — 흰 페이지 위에서 면으로 드러납니다. 테마로 바꾸지 않습니다. outlined(color/surface + color/outline-variant 1px)는 카드 면의 톤이 바탕과 같아지는 자리에만 씁니다(token-usage.md 2절). 이미지가 카드 폭을 채우는 카드도 filled 입니다. 카드를 다른 카드 · 패널 안에 두지 않습니다(카드 안 카드, §S1).
• 누를 수 있는 카드(onTap)는 호버에 그림자 medium 이 기본입니다. 페이지 안 패널은 그림자를 쓰지 않으므로 카드 테마(CoreCardTheme(style: CoreCardStyle(hoverElevation: CoreCardElevation.none)))로 끕니다.
• 슬롯 순서: media(미리보기) → header(이름 + 상태 칩) → body(메타) → footer(행동 2개 이하, outline · ghost). 마지막 자리에 「새로 만들기」 카드를 둘 수 있습니다.

• 폭은 layout/400 (CoreLayout.layout400) 하나로 고정합니다. 360~400 중 360 은 CoUI 에 없음 → layout/400 으로 충분해 CoUI 후보는 두지 않습니다. 화면마다 폭을 바꾸지 않습니다. 본문 패널과 사이는 space/24.
• 태블릿에서는 본문 아래로 내립니다. 모바일에서는 별도 화면이나 탭으로 뺍니다.
• 안에는 고른 행의 상세, 이름과 값을 나란히 둔 요약(Basic 행), 다음 할 일을 둡니다. 주 행동 버튼은 두지 않습니다. 한 화면의 주 행동 하나는 페이지 머리에 있습니다.

• 머리: 2-1 의 PageHeader 에 leading 뒤로 가기(Button ghost 아이콘)를 더해 씁니다. title 에 대상 이름 + 상태 칩, subtitle 에 고정폭 메타(ID · 버전, 9절), trailing 에 버튼 2개 이하.
• 탭: Tabs 의 variant: underline, size: md. 기본값이 pill 이므로 꼭 적습니다. 개수는 CoreTabItem.badge 에 Badge(form: count).
• 탭 아래 본문은 2절과 같은 규칙입니다(블록 사이는 6절 값, 오른쪽 보조 패널 layout/400).
• 예: 커머스 「주문 상세」 탭 = 「품목」 「결제」 「배송」 「기록」, 병원 「환자 상세」 = 「접수」 「진료」 「처방」, 교육 「강의 상세」 = 「수강생」 「과제」 「출결」.

• 셸 사이드바 옆에 둘째 NavigationBar(mode: sidebar) 를 하위 메뉴로 둡니다. 폭 layout/240, 맨 위 머리글 「설정」(CoreNavigationBarItem.label). 항목이 다섯 미만이면 하위 메뉴 대신 Tabs underline.
• 본문 칼럼 최대 폭 720 은 CoUI 에 없음 → layout/640 (CoreLayout.layout640) 으로 고정합니다. 두 칼럼 입력 폼이 좁으면 CoUI 후보 layout/720.
• 칼럼 안: 제목 → 한 줄 설명 → 패널 세로 쌓기(6절 「블록 사이」 값). 패널 하나가 설정 묶음 하나입니다. 되돌리기 어려운 동작(계정 삭제 · 해지)은 맨 아래 패널에 따로 두고, 버튼은 Button destructive. 확인 대화상자는 patterns.md.
• 입력 칸은 TextField 입니다. 패널 안 입력 칸의 채움은 color/surface-container, 경계는 부품 기본값(color/outline)입니다(token-usage.md 2 · 3절).

• 확인 전에는 아무것도 만들지 않습니다. 확인 화면에 그 사실을 한 줄로 적습니다(「확인하기 전에는 만들지 않아요」).
• 네 단계는 화면 넷입니다. 피그마에서는 섹션 넷(섹션 = 화면)이고, 현재 위치는 페이지 머리 아래 Steps(vertical: false) 로 보입니다.
• 예: 교육 「반 만들기」, 사내 도구 「배포」, 커머스 「쿠폰 발행」, 병원 「예약 열기」. 모두 같은 네 단계입니다.

모든 값은 space/* 사다리 위에 있고 4의 배수입니다. 피그마 Primitives 의 space/N, 코드 CoreSpace.spaceN.

• 사다리에 없는 값(18 · 22 · 30)은 쓰지 않습니다. 다른 시안의 수치를 옮길 때는 가장 가까운 사다리 값으로, 같은 거리면 작은 쪽으로 옮깁니다(18 → 16, 22 → 20, 30 → 28).
• 부품 안 여백(버튼 · 입력 · 표 셀 · 알림)은 부품 기본값입니다. 손대지 않습니다.
• 기본은 standard이며, 제품의 브랜드 테마가 밀도를 정했으면 라이브러리의 지원 밀도 모드를 선택하고 DDR에 적습니다.

CoUI 역할 CoreRadiusRole 은 part 4 · control 8 · panel 12 · surface 16 · modal 20 입니다. 피그마에는 역할 이름 변수가 없으므로 숫자 변수(radius/16 등)를 묶습니다.

• 이름 주의: 이 문서의 「패널」 은 CoUI surface 역할(16)입니다. CoUI 의 panel 역할(12)은 떠 있는 판입니다.
• 「대화상자가 가장 크다」 는 부품 기본값으로 성립합니다(Dialog 20 > Card 16). 화면 쪽에서 대화상자 모서리를 따로 키우지 않습니다.
• 화면 쪽에서 직접 모서리를 묶는 곳은 패널 컨테이너(radius/16)뿐입니다. 나머지는 인스턴스가 가져옵니다.
• 위계는 이 표에서 「대화상자(20) > 패널 · 카드(16) > 떠 있는 판(12) > 컨트롤(8 · 크기 행) > 부분(4)」로 읽습니다. 페이지 바탕 위의 Card 는 패널 하나이고(2-3), 모서리는 부품 기본값 그대로입니다. 위계는 어느 부품을 어느 층에 두느냐로 지키고, 화면 쪽에서 모서리 값을 바꾸지 않습니다.

떠 있는 것만 그림자입니다. 부품이 이미 들고 있으므로 화면 쪽에서 효과 스타일을 더하지 않습니다.

• Card 의 호버 그림자는 2-3 대로 끕니다. AppBar.elevated · Scaffold.floatingHeader 는 쓰지 않습니다.
• Dark 에서 코드는 그림자 세기를 키워 그리고(CoreShadow.darkStrength, 색은 두 모드 모두 검정) 피그마는 라이트 세기로 그립니다 — CoUI 몫이므로 화면 쪽에서 손대지 않습니다(CoUI 이슈 — 다크 프레임의 그림자가 라이트 세기로 그려진다).

한 화면에 직접 놓는 글자는 네 역할만 씁니다. 부품 안 글자(버튼 · 입력 · 표 셀 · 알림 · 배지)는 부품 기본값이며 세지 않습니다. 색은 token-usage.md.

• 크기는 지금 CoUI 의 값을 옮겨 적은 참고입니다. 정본은 cc-designer:design-system 4절의 역할 표(coui 소스에서 생성)이고, 이 표는 역할만 정하므로 CoUI 가 크기를 바꾸면 화면도 따라갑니다.
• 피그마 Semantic/ Typography 모드: Web-* 프레임은 Desktop, Mobile-* 프레임은 Mobile. 코드에는 Desktop 한 벌만 있어 휴대폰 프레임의 display · headline 이 앱보다 작게 그려집니다(Headline/Medium 은 Mobile 20 · 앱 28, Headline/Large 는 Mobile 24 · 앱 32). 앱에서 크기를 맞추지 않습니다 — 알려진 차이입니다(CoUI 이슈 — 휴대폰 · 태블릿 글자 단계, cc-flutter:figma-to-coui F7).
• Label/* 는 부품(버튼 · 배지 · Stat 라벨 · 표 셀)이 씁니다. 화면에 직접 놓지 않습니다.

고정폭#

• 코드 · ID · URL · 버전 · 주문번호 · 경로는 고정폭입니다. 고정폭은 코드 역할로 씁니다 — 피그마 Code/XS · Code/SM · Code/MD 텍스트 스타일(서체 font/family/Geist Mono, 줄 상자 21px 고정), 코드 Text('ORD-2041').codeMd. 메타 크기(13)의 고정폭은 Code/MD 입니다.
• 본문 · 메타 역할 위에 고정폭 서체만 덧씌우지 않습니다(코드의 .bodySmall.mono, 피그마의 글꼴 가족만 바꾸기) — 크기 · 줄 상자 · 자간이 코드 격자에 앉지 않습니다.
• 고정폭 서체에는 한글이 없습니다. 앱은 한글 구간을 본문 서체로 그리고, 피그마는 편집기가 고른 서체로 그립니다. 소비 파일에서는 CoUI 플러그인의 「한글 구간 칠하기」(브랜드 탭)로 그 구간을 본문 서체로 맞추고, 글을 고친 뒤에는 다시 돌립니다.
• 문장 안 낱말에는 쓰지 않습니다. 값에만 씁니다. 코드 블록은 CodeSnippet, 키는 Kbd.

손님이 폰으로 쓰는 앱(예약 · 주문 · 거래 · 수강 신청)의 출발점입니다. 면 · 선 · 주 행동 하나 · 상태색 · 그림자 · 장식 없음은 1~9절과 같고, 셸 · 화면 순서 · 행동 자리 · 숫자 표현이 다릅니다. 프레임은 Mobile-*, 여백은 6절의 모바일 칸입니다. 언제 고르는지는 mood.md 1-1.

Scaffold 한 겹 — headers(상단) · child(본문) · footers(하단 탭 또는 하단 행동). 면은 token-usage.md 2절의 부품 기본값(흰 페이지 · 회색 Card) 그대로입니다. 제품이 회색 바탕 + 흰 카드를 골랐으면 그 결정은 앱 테마 한 곳에서 바꿉니다(token-usage.md 2절).

• 탭은 넷이 기본입니다 — 홈 · 이 서비스의 핵심 대상(지도 · 일정 · 강좌) · 대화 또는 내역 · 내 정보. 「더보기」 탭 대신 「내 정보」가 설정 · 고객센터 · 약관을 묶습니다(10-6).
• 홈에는 AppBar 를 두지 않습니다. 홈의 제목 자리는 「지금 이 사람에게 무엇이 있는지」를 말하는 데 씁니다. 워드마크 · 알림 행은 제품 쪽 컴포넌트입니다(로고는 CoUI 자산이 아니므로).
• 하위 화면의 오른쪽 글자 행동은 AppBar 기본 글자색 그대로 둡니다. 주 행동이 아니라는 뜻입니다.

위에서 아래로 맥락 한 줄 + 제목 → 내 것(내 예약 · 내 주문 · 내 거래, 카드) → 둘러보기(주변 · 추천 · 새 소식, 목록). 업무 도구의 「머리 → 요약 → 본문」이 손님용 앱에서는 「인사 → 내 것 → 남의 것」입니다.

• 맥락 한 줄은 이 사람의 지금 상황입니다 — 이름 + 진행 중인 일(「민지님, 내일 오후 2시 진료가 있어요」). 메타 글자. 제목은 서비스가 이 화면에서 약속하는 일 한 줄(Title/Large). 날씨 인사 · 감탄 · 느낌표는 쓰지 않습니다(copy.md 4절).
• 내 것이 여럿이면 가로로 넘기는 카드(Carousel + DotIndicator)로 한 장씩 보이고 다음 카드의 가장자리를 남깁니다. 없으면 그 자리에 EmptyState(variant: compact) 와 첫 행동 하나.

거래 · 예약 · 주문 한 건을 담는 Card 한 장입니다.

• 맨 위 줄: 왼쪽 상태 칩(Badge 상태 톤 — 「진행 중」 「예약 확정」), 오른쪽 등록 · 예약 시각(메타).
• 값 줄: 왼쪽 라벨(본문, color/on-surface-variant) · 오른쪽 값(Title/Large). 짝인 값(줄 돈 · 받을 돈, 정가 · 결제액)은 같은 크기로 위아래에 둡니다. 단위 · 통화는 값에 붙입니다(copy.md 7절).
• 기준 줄: 카드 안 Divider 아래 기준 값 한 줄(희망 조건 · 환불 기한).
• 행동: 맨 아래 보조 행동 하나, 폭 채움(「수정하기」). 회색 카드 위라 outline 이고, 흰 카드면 secondary 입니다(token-usage.md 6절). 카드 안에 주 행동을 두지 않습니다.
• 목록 행에 숫자가 있으면 오른쪽 끝에 값(Title/Medium) + 그 아래 기준 · 단위(메타). 「무엇을 · 얼마에」가 행 오른쪽에서 먼저 읽힙니다.
• 입력 화면에서 금액 · 수량이 핵심이면 입력값을 Display/Small 로 크게 보여 주고, 단위 선택은 값 오른쪽 sm 버튼(「KRW 변경」)으로 둡니다. 실시간 기준값(시세 · 재고 · 남은 자리)은 그 아래 한 줄에 Status 점 + 기준 시각과 함께 둡니다. 카드 안에 면을 또 깔지 않습니다.

입력 · 확인 · 결제처럼 흐름을 끝내는 화면의 주 행동은 화면 맨 아래 BottomActionBar(coui_flutter 0.164 부터)에 둡니다. 엄지가 닿는 자리이고 스크롤해도 사라지지 않습니다. 0.163 이면 Scaffold.footers 에 폭 채운 Button(variant: primary, size: xl) 과 위 Divider 로 같은 배치를 만듭니다.

• primaryAction 은 Button(variant: primary, size: xl) 하나. 보조가 필요하면 secondaryAction 에 ghost. 동의 · 수수료 같은 한 줄 안내는 description.
• 위 구분선 · 면 · 기기 아래 안전 영역은 부품이 그립니다. 화면 쪽에서 선을 더 긋지 않습니다.
• 조건이 아직 안 됐으면(필수 입력 · 체크 전) 숨기지 않고 비활성으로 둡니다. 무엇을 하면 켜지는지 바로 위 화면 안에 보여야 합니다(이용 전 확인 목록, patterns.md 1절).
• 탭 바가 있는 화면에는 두지 않습니다. 탭 첫 화면의 행동은 본문 안 카드 · 섹션의 행동입니다.

• 왼쪽에 섹션 제목(Title/Medium)과 개수를 붙여 씁니다(「내 예약 2」).
• 오른쪽에 하나만 — 그 묶음을 다루는 Link(variant: CoreLinkVariant.muted)(「관리」) 또는 정렬 바꾸기(ghost 글자 버튼 + 아래 화살표 아이콘 → 아래에서 올라오는 시트, 「거리순」).
• 결과가 조건으로 좁혀졌으면 머리 아래 메타 한 줄로 조건을 말하고, 걸린 조건 값만 강조 글자(color/primary-text)로 둡니다(「내 조건과 맞는 곳만 보여요」 + 「서울」 「오늘」, 값마다 자리 하나). 빈 결과가 나왔을 때 무엇을 바꾸면 되는지 이미 보고 있습니다.

• 맨 위 프로필 카드: Avatar(머리글자) · 이름 + 인증 Badge(primary 톤) · 메타 한 줄. 그 아래 같은 카드 안에 숫자 세 칸 — 이 서비스에서 이 사람이 쌓은 기록(거래 수 · 약속 지킴 · 받은 후기, 수강 수 · 출석률 · 수료). 칸 사이는 여백으로 나누고 면을 또 깔지 않습니다.
• 그 아래 묶음 카드를 세로로: 묶음 라벨(메타) + 행(본문). 행 오른쪽 값은 보조 글자, 진행 중인 것만 강조 글자(「진행 중 2건」).
• 마지막 묶음 맨 끝에 로그아웃 · 탈퇴. 탈퇴는 destructive 가 아니라 보조 글자 행입니다. 위험은 다음 화면의 확인 단계가 말합니다(patterns.md 5절).

가입 · 첫 등록처럼 세 단계 이하 흐름은 화면 맨 위에 「단계 1 / 3」(메타 크기 강조 글자, color/primary-text) + 단계 막대, 그 아래 큰 제목(Title/Large)은 두 줄까지.

• 단계 수만큼 나뉜 막대는 CoUI 에 없음 → Progress(value: 지금 단계 / 전체) 한 줄로 대체합니다. CoUI 후보: Progress 단계 나눔. 네 단계 이상이거나 단계 이름이 필요하면 5절의 Steps 입니다.