참고 구현 — 한 손님용 앱 시안에서 가져온 원칙

이 문서는 **손님용 앱 기본 예시**(`mood.md` 1-1, `layout.md` 10절)가 나온 참고 구현에서 무엇을 원칙으로 가져왔고 무엇을 가져오지 않았는지 적습니다. 형식은 `reference-impl.md` 12절을 따릅니다. 시안의 파일 주소 · 노드 · 제품 이름 · 브랜드 값은 두지 않습니다. 규칙의 정본은 각 문서(`layout....

이 문서는 손님용 앱 기본 예시(mood.md 1-1, layout.md 10절)가 나온 참고 구현에서 무엇을 원칙으로 가져왔고 무엇을 가져오지 않았는지 적습니다. 형식은 reference-impl.md 12절을 따릅니다. 시안의 파일 주소 · 노드 · 제품 이름 · 브랜드 값은 두지 않습니다. 규칙의 정본은 각 문서(layout.md · patterns.md · token-usage.md · mood.md)이고, 이 문서는 출처와 반면교사만 남깁니다. 예시는 교육 · 병원 · 커머스 · 사내 도구로 옮겨 적었습니다.

0. 읽기 전에 — 시안의 상태#

사람끼리 직접 만나 거래하는 서비스의 손님 앱(모바일)과 운영 콘솔(데스크톱)을 한 파일에 그렸습니다. 진입 · 홈 · 지도 · 대화 · 내 정보 · 콘솔 묶음마다 기본 화면과 로딩 · 빈 화면 · 오류 · 권한 거부 같은 상태 화면이 나란히 있었습니다.
라이트로 그렸고, CoUI 라이브러리 인스턴스(Button · Badge · Alert · AppBar · NavigationBar · Toast · ChatBubble · TextField · Checkbox · Avatar · Table)와 시맨틱 색 변수를 대부분 썼습니다. 이 서비스에만 있는 카드 · 행 · 요약은 도메인 컴포넌트였습니다.
그래서 앞의 참고 구현(reference-impl.md, 다크 전용 · 원시 값)과 달리 관계와 부품 선택을 함께 가져올 수 있었습니다. 값은 여전히 가져오지 않습니다.

1. 가져온 원칙 — 한눈에#

원칙	시안에서 본 것	이 스킬의 자리
손님 화면과 운영 화면은 출발점이 다르다	같은 파일 · 같은 CoUI 인데 손님 앱은 하단 탭과 카드, 콘솔은 사이드바와 표였습니다. 면 규칙 · 주 행동 하나 · 그림자 없는 카드는 둘이 같았습니다	`mood.md` 1-1
홈은 워드마크 + 맥락 한 줄 + 제목, 상단 바 없음	홈 맨 위에 서비스 워드마크와 알림 아이콘, 그 아래 「이름 + 지금 준비 중인 일」 한 줄과 서비스가 약속하는 일 한 줄	`layout.md` 10-1 · 10-2
홈은 내 것 → 둘러보기	내 거래 카드(가로로 넘김 + 점 표시)가 먼저, 그 아래 주변 상대 목록	`layout.md` 10-2
숫자 카드 — 라벨 왼쪽, 값 오른쪽 크게, 기준은 구분선 아래	거래 카드의 두 금액이 같은 크기로 위아래, 희망 조건은 구분선 아래 한 줄, 상태 칩은 왼쪽 위	`layout.md` 10-3
흐름을 끝내는 행동은 맨 아래, 조건 전에는 비활성	등록 · 온보딩 화면의 폭 가득 주 행동, 체크 전에는 비활성으로 보임	`layout.md` 10-4
섹션 머리는 제목 + 개수 + 오른쪽 하나, 아래에 걸린 조건	「내 거래 2」 + 「관리」, 「주변 상대」 + 정렬, 그 아래 「내 조건과 맞는 사람만 보여요」 + 강조색 조건 값	`layout.md` 10-5
이용 전 확인은 Alert 를 쌓고 체크 한 번	권장 · 금지 · 규정 세 가지를 success · warning · info Alert 로 쌓고 체크박스 하나 + 비활성 주 행동	`patterns.md` 1절 예외
실패는 실패한 섹션만	홈의 주변 목록만 오류 상태로 바뀌고 내 거래 카드와 머리는 그대로	`patterns.md` 4절
내 정보는 신뢰를 숫자로	프로필 패널 안 숫자 세 칸 띠, 묶음 라벨 있는 목록 패널, 탈퇴는 보조 글자로 맨 끝	`layout.md` 10-6
짧은 흐름은 「단계 1 / 3」 + 막대	온보딩 맨 위 강조 글자 + 세 칸 막대 + 두 줄 큰 제목	`layout.md` 10-7
보조 행동은 옅은 면, 주 행동만 진하게	카드 안 「수정하기」, 대화 요약 카드의 행동들이 옅은 면 버튼	`token-usage.md` 6절
상태 칩은 Badge 톤	「진행 중」「인증됨」「안전 장소」가 tonal Badge	`token-usage.md` 7절
처리할 일 KPI 한 장만 눈에 띄게	콘솔 KPI 넷 중 「처리 대기」만 옅은 오류 면, 나머지는 흰 패널. Stat 에 톤이 없어 이 스킬은 Badge 로 대신하고 Stat `tone` 을 CoUI 후보로 둡니다	`layout.md` 2-2
차트는 지금 값만 진하게	7일 막대 중 오늘만 강조색, 지난 날은 옅은 강조 면	`layout.md` 2-2
일부만 보이는 목록의 link 에 건수	콘솔 패널 끝 「전체 보기」에 남은 건수	`layout.md` 2-3
신뢰 신호는 흐름 안에	대화방 맨 위에 거래 요약 카드 고정 + 행동 셋, 메시지 위 위험 경고 한 줄, 이름 옆 인증 칩	고유 요소 예시(`cc-blueprint/rules/figma-direction.md` §D1 ⑤)
로고는 서비스 자산 컴포넌트	브랜드 가이드 페이지에 로고 컴포넌트 세트(형태 × 배경색)와 쓰는 법 · 잘못된 쓰임이 있고, 화면에는 인스턴스만	`layout.md` 10-1

2. 신뢰 신호 — 고유 요소로 옮기는 법#

손님용 앱 결에서 고유 요소 셋(cc-blueprint/rules/figma-direction.md §D1 ⑤)을 정할 때 가장 많이 나오는 자리가 「손님이 걱정하는 순간」입니다. 시안은 그 순간마다 신호를 흐름 안에 두었습니다.

대화 · 예약 · 결제 직전 — 무엇을 하기로 했는지 요약 카드를 화면 맨 위에 고정하고, 그 거래에서 할 수 있는 행동을 카드 안에 둡니다. 예: 병원 진료 대화 맨 위 「10월 28일 오후 2시」「내과」 + 「예약 바꾸기」.
위험이 있는 순간 — 경고를 설정 화면이나 약관이 아니라 그 순간의 화면 안에 한 줄로 둡니다(Alert warning, 또는 대화 위 옅은 경고 줄). 예: 커머스 중고 거래 「직거래 전에 입금을 요구하면 사기일 수 있어요」.
상대를 믿어도 되는지 — 이름 옆 인증 Badge, 행 메타에 쌓인 기록(「거래 48회」「응답 5분」, 자리 둘). 예: 교육 강사 목록 「경력 인증」 + 「수업 120회」.

신호는 장식이 아니라 정보입니다. 지우기 시험(cc-designer:critique-restraint)에서 지우면 손님이 잃는 것이 있어야 합니다.

3. 반면교사#

코드에 없는 변형 — 피그마 라이브러리에 손으로 더한 Button tonal 을 화면에 썼습니다. 코드에는 아직 없어 구현하면 다른 버튼이 됩니다. 이 스킬은 코드에 들어올 때까지 다른 보조 행동과 같은 변형으로 두고 구현 gap 으로 기록합니다(token-usage.md 6절).
톤과 채움이 다른 배지 — 인증 칩이 Tone=info 인데 채움은 강조 면으로 바꿔 두었습니다. 톤이 뜻이므로 강조 면이 필요하면 Tone=primary 를 고릅니다. 인스턴스 채움을 바꾸는 것은 다시 칠하기입니다.
원시 색이 남은 노드 — 홈 · 콘솔에 변수에 묶이지 않은 채움이 몇 개씩 있었습니다. 대부분 도메인 컴포넌트 안이었습니다. 도메인 컴포넌트도 CoUI 변수만 씁니다(patterns.md 8절 2번).
글자 안의 화살표 — 「전체 보기 (3건) →」「JPY → KRW」처럼 글자에 화살표를 넣었습니다. 이 스킬은 장식 기호를 글자에 넣지 않고, 방향은 자리 둘이나 아이콘으로 말합니다(copy.md 4 · 8절).
프로토타입 핫스팟 프레임 — 탭 바 위에 빈 「Hotspot」 프레임을 따로 얹어 연결했습니다. 화면을 고치면 핫스팟이 어긋납니다. 연결은 탭 항목 · 버튼 같은 실제 요소에 겁니다.

4. 가져오지 않는 것#

면 배치 — 시안은 회색 바탕 위 흰 카드였습니다. 이 스킬의 면은 token-usage.md 2절의 부품 기본값(흰 페이지 · 회색 Card)이고, 제품이 시안처럼 고르면 앱 테마 한 곳에서 바꿉니다.
값 — 브랜드 색과 배경 허용색, 로고 비율 · 보호 여백 수치, 모서리 · 여백 숫자, 프레임 폭. 값은 모두 CoUI 토큰과 cc-blueprint 플랫폼 크기로 다시 고릅니다.
그 서비스만의 결정 — 거래 한도 금액, 본인인증 시점, 지도 탭의 존재, 자동 번역, 후기 항목 이름. 서비스마다 다시 정합니다.
화면 · 섹션 이름 체계 — 시안은 섹션을 「시연 · 묶음」, 프레임을 「번호 화면 · 상태」로 지었습니다. 이 스킬은 cc-blueprint 계약(섹션 = 화면, 프레임 {플랫폼}-{상태}, figma-file.md 2 · 3절)을 그대로 둡니다. 「상태 화면을 기본 화면 옆에 나란히」라는 배치만 같습니다.
도메인 컴포넌트 자체 — 거래 카드 · 상대 행 · 거래 요약 · 장소 카드. 새 서비스는 같은 원칙으로 자기 도메인 컴포넌트를 짓습니다.