디자인 스타일 가이드 (페이블 제안 v0.1)

원본: KKIRI_DESIGN_STYLE_GUIDE.md

작성: 페이블 · 2026-09-06 · 팀 억지타협업소
목적: 본서비스 디자인과 UI/UX 기획을 시작할 때 팀이 같은 언어로 화면을 만들 수 있게 하는 기준. 색·글자·간격·형태·컴포넌트·문구·접근성을 토큰과 규칙으로 고정한다.
전제: 쏠의 「디자인 벤치마킹」(2026-09-05)이 제안한 콘셉트 봉인된 원탁과 역할 색 4종을 그대로 받아, 그 위에 실제로 화면을 그릴 수 있는 수준의 시스템으로 확장한다. 콘셉트 논쟁을 다시 열지 않는다.
근거: 현재 목업 OUTBOX/KKIRI/mockup/styles.css, 쏠 KKIRI_DESIGN_BENCHMARK.md, 근거 노트 RESEARCH/KKIRI_DESIGN_BENCHMARK_SOURCES_2026_09_05.md, 요구사항 KKIRI_REQUIREMENTS_AND_POLICY.md. 명도 대비 수치는 이 문서 작성 시 sRGB 상대 휘도 공식으로 직접 계산했다(§3-4).

0. 한 장 요약

1. 브랜드 원칙 3가지

디자인 결정이 갈릴 때 이 순서로 판단한다.

1. 비공개가 먼저 보인다. 사용자가 답하는 모든 화면에는 「이 답은 아무에게도 보이지 않아요」가 눈에 들어와야 한다. 익명성은 설정 항목이 아니라 화면의 상태다. (근거: 문제 정의 H1 — 가까운 사이일수록 침묵이 크다)
2. 선호와 절대 조건은 다른 크기로 보인다. 후보를 탈락시키는 선택(상한·거부)은 일반 선호보다 크고, 색이 다르고, 결과를 문장으로 즉시 보여 준다. 작은 체크박스에 거부권을 두지 않는다.
3. AI는 말을 지어내지 않는다. 대리인의 가상 대사, 사람 흉내를 내는 캐릭터, 정밀해 보이는 소수점 점수를 화면에 두지 않는다. 시스템이 실제로 한 일(제외한 후보 수, 지켜진 조건 수, 비교한 후보 수)만 보여 준다.

이 세 가지에 어긋나면 예쁘더라도 채택하지 않는다.

2. 시각 콘셉트 — 봉인된 원탁을 화면 언어로

쏠의 콘셉트를 세 가지 시각 모티프로 고정한다. 로고·아이콘·로딩·결과 화면이 모두 이 세 모양에서 나온다.

로고 심볼은 교집합 모티프 하나로 만든다. 현재 목업의 검은 정사각형 안 「끼」 글자는 임시 표식으로 두고, 심볼 제작은 P2다(쏠 §7 P2와 동일).

금지: 뇌·악수·말풍선 이모지, 사람 얼굴 캐릭터, 로봇 일러스트. 「AI가 사람 대신 말한다」는 인상을 만들기 때문이다.

3. 색

3-1. 기본 토큰

3-2. 역할 색 (의미를 가진 색)

색은 장식이 아니라 「이 정보가 누구 것인가」를 말한다. 역할을 벗어난 데 쓰지 않는다.

원칙: 한 화면에 역할 색은 최대 2가지. 보라(내 것)와 청록(우리 것)이 한 화면에 같이 있는 것은 정상이다(결과 화면). 거기에 녹슨 주황이 더 들어오면 그 화면은 「탈락·경고」가 주제일 때뿐이다.

3-3. 주 버튼 색

주 버튼은 역할 색이 아니라 잉크색(--ink) 바탕에 흰 글자다. 이유는 두 가지다. 역할 색을 버튼에 쓰면 「보라 버튼=내 것」 규칙이 흐려진다. 그리고 검은 버튼은 종이 바탕 위에서 가장 대비가 높다(17.85:1).

예외: 최종 재확인 3버튼은 의미가 곧 색이므로 동의=청록 테두리, 조건부=잉크 테두리, 재조율=녹슨 주황 테두리를 쓴다(§8-9).

3-4. 명도 대비 검증 (WCAG 2.1 AA 기준: 본문 4.5:1, 큰 글자·UI 경계 3:1)

현재 목업의 #7057ff/#fbfaf8는 4.48:1로 미달, 배지 #ff7657/흰색은 2.63:1이다(쏠 근거 노트와 동일). 본서비스에서는 두 값을 쓰지 않는다.

3-5. 다크 모드

P0 범위 밖. 다만 토큰을 의미 단위(--paper, --ink, --private-fg)로 잡아 두면 값만 바꿔 대응할 수 있으므로, 구현 시 색을 직접 쓰지 않고 토큰만 쓴다.

4. 타이포그래피

4-1. 글꼴

font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", sans-serif;
font-feature-settings: "tnum" 1;   /* 숫자 폭 고정 */

• Pretendard는 SIL Open Font License라 상업 서비스 웹폰트로 쓸 수 있다. 가변 글꼴 하나만 로드해 굵기 400·600·700·800을 쓴다.
• 영문 전용 브랜드 서체는 두지 않는다. PRIVATE AGENT CONSENSUS 같은 영문 표어는 보조 문구로 내리고 같은 글꼴 12px 대문자 자간 0.08em으로 처리한다.

4-2. 크기 단계

규칙:

• 한 화면에 Display 또는 Title은 하나. 질문 화면 제목은 2줄(약 20자) 안에 끝나게 쓴다.
• 본문 설명 한 문단은 2줄을 넘기지 않는다. 넘으면 항목으로 쪼갠다.
• 숫자(인원·시간·금액·집계)는 tabular-nums로 폭을 고정한다. 값이 바뀔 때 레이아웃이 흔들리지 않게 한다.
• 최소 본문 크기 14px. 12px는 배지와 법적 안내에만.
• 데스크톱(≥960px)에서는 Display 40/48, Title 32/40으로 한 단계 올린다. 나머지는 유지.

5. 레이아웃·간격

5-1. 간격 단위

4px 기준. 실제로는 아래 값만 쓴다.

4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64

5-2. 화면 폭과 역할

브레이크포인트: 모바일 기본, ≥700px에서 바탕이 #EBE7E2로 바뀌고 480px 카드가 종이 위에 놓인 형태(현재 목업 방식 유지), ≥960px에서 2열 전환. 최대 콘텐츠 폭 1120px.

5-3. 하단 고정 CTA

질문·재확인 화면의 주 행동 버튼은 화면 하단에 고정한다. 콘텐츠가 버튼 뒤에 가려지지 않게 본문 하단 여백 = 버튼 높이 56 + 32. 키보드가 올라오면 버튼이 키보드 위에 붙는다.

6. 형태 — 반경·테두리·높이

6-1. 반경 3단계

현재 목업은 거의 모든 요소가 17~24px 반경이라 계층이 없다. 3단계로 나눈다.

6-2. 테두리

• 카드 기본: 1px solid var(--line). 그림자 없음.
• 선택됨: 1px solid var(--private-600) + box-shadow: 0 0 0 2px var(--private-100). 테두리를 두껍게 바꾸지 않는다(레이아웃 점프 방지).
• 거부권 선택됨: 같은 방식에 --veto-*.
• 입력 필드: 1px solid var(--line-strong), 포커스 시 --private-600 + 2px 링.

6-3. 높이(그림자)

「실제로 화면 위에 떠 있는 것」에만 그림자를 준다.

현재 목업의 .genre 카드 그림자와 .agent 부유 그림자는 제거 대상이다.

7. 아이콘·일러스트·모션

7-1. 아이콘

• 선 아이콘 1.5px 굵기, 20px 기본, 24px 버튼 안. Lucide 계열처럼 굵기가 균일한 세트 하나로 통일한다.
• 이모지는 제품 UI에서 쓰지 않는다. 목업의 🏢·🏖·🍻·🧠·🤝·💬는 전부 선 아이콘으로 교체한다.
• 의미 아이콘 3종은 고정한다: 자물쇠(비공개), 겹친 원(합의·조율), 방패(반드시 지킬 조건).

7-2. 일러스트

• 사람·로봇·얼굴을 그리지 않는다. 봉인 카드·교집합·원탁의 점 세 모티프의 기하 도형만으로 구성한다.
• 후보 카드(장소·일정)에 사진을 넣는 것은 P2. 넣더라도 사진은 조건 정보(일정·비용·이동·충족 조건) 아래에 둔다(쏠 §5-E와 동일: 사진 매력도가 순위 판단을 왜곡하지 않게).

7-3. 모션

금지: 무한 반복 부유(현재 .agent float), 회전, 점 세 개 깜박임 대신 진행 단계 텍스트로 대체. prefers-reduced-motion: reduce에서는 전환을 fade만 남긴다.

8. 컴포넌트 규격

8-1. 버튼

• 비활성: 배경 #C9C5C0, 글자 흰색. 비활성 이유를 버튼 위 Small 텍스트로 쓴다(「아직 답하지 않은 질문이 있어요」).
• 로딩: 글자를 「보내는 중」으로 바꾸고 spinner 없이 opacity 0.7. 버튼 폭은 유지.
• 터치 영역 최소 44×44.

8-2. 선택지 카드 (한 화면 한 질문)

• 폭 100%, 최소 높이 62, 좌우 패딩 18, --r-md, 텍스트 Body L 좌정렬.
• 왼쪽 선택 표시: 단일 선택은 라디오 원 20px, 순위 선택은 숫자 원 24px(--private-600 바탕).
• 선택 상태: 테두리 --private-600, 배경 --private-50, 글자 --private-700.
• 선택지는 최대 5개. 넘으면 칩 그리드로 바꾼다.

8-3. 3상태 응답 (선호 / 양보 가능 / 어려움)

Doodle·Loomio 3상태 문법을 끼리 의미로 고정한다. 모든 조건 질문의 기본 응답 형식이다.

세 상태는 아이콘·글자·색 세 가지로 동시에 구분한다. 색만으로 구분하지 않는다.

8-4. 상한·거부권 선택 (체크박스 대체)

현재 목업의 상한 켜기 체크박스를 2칸 의미 선택으로 바꾼다.

선택한 5만원은…
┌──────────────────────┐ ┌──────────────────────┐
│ 가능하면 맞춰 주세요  │ │ 반드시 넘지 말아 주세요│
│                      │ │ 이 값을 넘는 후보는 제외돼요│
└──────────────────────┘ └──────────────────────┘

• 두 칸 같은 크기, 높이 72 이상. 오른쪽 선택 시 테두리·글자 --veto-*, 배경 --veto-50, 방패 아이콘.
• 선택 즉시 아래 한 줄: 「지금 후보 6개 중 2개가 제외돼요」(엔진이 계산한 실제 수. 계산 불가 시 문장 생략).

8-5. 상태 배지

--r-pill, 높이 24, Caption 700, 좌 아이콘 12px.

8-6. 진행 표시

• 질문 진행바: 높이 4, --private-600 단색(그라데이션 제거), 위에 4/7 · 약 1분 남음 Small.
• 조율 진행: 4단계 세로 목록. 완료 ✓ 청록, 진행 중 ● 보라 + 「~하는 중」, 대기 ○ 회색. 각 단계는 시스템이 실제로 한 일을 숫자와 함께 쓴다(「절대 조건과 충돌하는 후보 2개 제외」).
• 원탁의 점: 원 둘레 점 n개(3~8). 채워진 점만 청록. 이름·순서 정보를 주지 않는다(누가 먼저 답했는지 추론 방지 — 점 채우는 위치는 시계 방향이 아니라 무작위 고정 시드).

8-7. 카드 종류

8-8. 「이렇게 이해했어요」 확인 카드

자유서술을 AI가 조건으로 바꾼 뒤 보여 주는 카드. 필수 구성:

1. 상단 Caption 「AI가 이렇게 이해했어요」 + 자물쇠 배지
2. 조건 칩 목록(선호=보라, 반드시=녹슨 주황)
3. 버튼 2개: [맞아요] Primary · [수정할게요] Secondary

이해 실패 시 배경 --veto-50, 「조건으로 바꾸지 못했어요. 한 가지만 다시 적어 주세요」.

8-9. 최종 재확인 3버튼

세로로 쌓고 각 높이 72. 집계는 동의 3 · 조건부 1 · 재조율 0으로만.

8-10. 토스트·시트

• 토스트: 잉크 바탕, 흰 글자 Small, --r-sm, 하단 24px, 3초 후 자동 소멸. 되돌리기가 필요한 행동(답변 삭제)은 토스트 안에 되돌리기 링크.
• 바텀 시트: --r-lg 상단만, 높이 2 그림자, 상단 손잡이 바. 초대 공유·계산 기준 보기·조건 입력에 쓴다.

9. 상태 패턴

10. 카피·목소리

10-1. 톤

• 「~해요」체. 「~하세요」 명령형은 버튼 안에서만.
• 짧게. 한 문장 25자 안팎, 설명 문단 2줄.
• 사람에게 말하듯. 「입력하십시오」가 아니라 「적어 주세요」.
• 시스템이 한 일을 주어로. 「AI가 후보 2개를 제외했어요」(O) / 「대리인 B가 반대했어요」(X).

10-2. 쓰지 않는 말

10-3. 고정 문구

11. 접근성 체크리스트

구현 전 화면마다 확인한다.

• ☐ 본문 텍스트 대비 4.5:1 이상, UI 경계 3:1 이상(§3-4 표의 조합만 사용)
• ☐ 색만으로 의미를 전달하지 않는다(3상태 응답·배지는 아이콘+글자 동반)
• ☐ 터치 영역 44×44 이상, 선택지 사이 8px 이상
• ☐ 포커스 링 2px --private-600 가시(키보드 탐색)
• ☐ 진행바·원탁의 점에 aria-valuenow 또는 텍스트 대체(「7명 중 3명 완료」)
• ☐ 조율 진행 4단계는 aria-live="polite"로 읽힌다
• ☐ prefers-reduced-motion에서 교집합 모션은 정지 이미지로 대체
• ☐ 320px 폭에서 가로 넘침 없음(문서 사이트 검토에서 이미 한 번 잡힌 문제)
• ☐ 글자 크기 200% 확대에서 하단 고정 CTA가 본문을 가리지 않음

2026-09-06 추가: 이 9줄을 WCAG 2.2 AA 전 항목 · 컴포넌트별 ARIA 명세 · 화면별 검사 항목 · 검사 도구와 인수 기준으로 넓힌 문서는 KKIRI_ACCESSIBILITY_STANDARD.md(https://kkiri-plan.pages.dev/docs/accessibility-standard)다. 이 체크리스트는 그 문서 §2의 부분집합으로 계속 쓴다.

12. 토큰 (복사해서 쓰는 CSS)

:root {
  /* 바탕·글자 */
  --paper: #FAF8F4;
  --surface: #FFFFFF;
  --surface-sunken: #F3F0EA;
  --surface-dark: #1A1714;
  --ink: #1A1714;
  --ink-muted: #6B6560;
  --ink-disabled: #A8A29B;
  --ink-inverse: #FFFFFF;
  --line: #E6E1DA;
  --line-strong: #8C8680;

  /* 역할 색 */
  --private-700: #4F38C9;  --private-600: #684DEB;  --private-50: #EFEBFF;  --private-100: #DCD4FF;
  --consensus-700: #0B5C56; --consensus-600: #0F766E; --consensus-50: #E3F3F0;
  --veto-700: #9A2E10;     --veto-600: #B93815;     --veto-50: #FCEDE7;
  --wait-700: #7A4F00;     --wait-600: #B7791F;     --wait-50: #FFF3D6;
  --info-700: #1D4ED8;     --info-600: #3B6FE0;     --info-50: #E6F0FF;

  /* 형태 */
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow-1: 0 4px 16px rgba(26,23,20,.06);
  --shadow-2: 0 12px 40px rgba(26,23,20,.14);

  /* 간격 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* 글자 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", "Noto Sans KR", sans-serif;
  --t-display: 800 34px/40px var(--font);
  --t-title:   800 28px/34px var(--font);
  --t-heading: 700 20px/28px var(--font);
  --t-body-l:  500 18px/28px var(--font);
  --t-body:    400 16px/25px var(--font);
  --t-small:   600 14px/20px var(--font);
  --t-caption: 600 12px/16px var(--font);
  --t-number:  800 56px/56px var(--font);

  /* 모션 */
  --m-fast: 150ms; --m-base: 240ms; --m-slow: 1200ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}
body { font: var(--t-body); font-feature-settings: "tnum" 1; color: var(--ink); background: var(--paper); }
@media (min-width: 960px) {
  :root { --t-display: 800 40px/48px var(--font); --t-title: 800 32px/40px var(--font); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-base: 0ms; --m-slow: 0ms; }
}

13. 현재 목업 → 본서비스 전환 표

14. 우선순위와 미결

적용 순서

• P0 (기획·목업 즉시): §3 색 토큰, §8-4 상한 선택, §8-6 조율 진행, §8-9 재확인 버튼, §10 금지어. 발표 설득력에 직접 닿는 것.
• P1 (본서비스 1차): §4 타이포 단계, §5-2 데스크톱 2열, §6 반경·높이, §8 나머지 컴포넌트, §9 상태 패턴, §11 접근성.
• P2: 로고 심볼, 후보 카드 사진, 다크 모드, 장르별 시각 템플릿.

민수님 판단이 필요한 것

1. 주 버튼 색 — 잉크(검정)로 갈지, 보라를 브랜드 주색으로 밀어 버튼까지 보라로 갈지. 이 문서는 잉크를 권한다(§3-3). 보라를 택하면 「보라=내 비공개」 규칙을 「보라=끼리」로 바꿔야 하고, 합의(청록)와의 대비 서사가 약해진다.
2. 내 리포트 보관 기간 문구 — 요구사항 정의서 §7 미결과 같은 항목. 문구 자리는 잡아 두었다(§10-3).

이 두 가지 외에는 이 문서의 값을 그대로 쓰면 된다. 쏠이 이 요청에 별도 안을 내면, 겹치는 항목(역할 색 4종·봉인된 원탁)은 이미 같은 값이고 다른 항목은 이 표 형식으로 합치면 된다.