Files
viberoom-web/docs/01_ui_guidelines.md
corpi ecb17a485a docs(session): add restart-safe recovery workflow
Context:

- codex cli 중단 후에도 작업 품질과 맥락을 안정적으로 복구하기 위해

Changes:

- docs/00~07, 90 문서 세트 추가/정리

- commit convention 문서 및 .gitmessage-session.txt 템플릿 추가

- scripts/session/recover-context.sh 추가

- package.json에 session:recover 스크립트 추가

Validation:

- npm run session:recover

Session-State: session recovery docs, template, and script are in place

Session-Next: apply this commit format to feature and refactor commits

Session-Risks: legacy commits before this change do not include session trailers
2026-02-27 13:27:20 +09:00

1.5 KiB

01. UI Guidelines

디자인 톤

  • 기본 톤: 감성, 저자극, 차분함
  • 금지 톤: 과한 대비, 과한 번쩍임, 과도한 채도, 공격적인 카피
  • CTA는 명확하되 조용한 위계로 구성한다.

컬러/표현 원칙

  • 다크 + 글래스 분위기를 유지한다.
  • 포인트 색상은 1차 액션에만 제한적으로 사용한다.
  • 2차/3차 액션은 outline/ghost/텍스트 링크로 무게를 낮춘다.

CTA 위계 규칙

  • Primary: 사용자 목표를 즉시 달성하는 액션 1개만 강조
  • Secondary: 대안 액션, 가시성은 유지하되 무게는 낮춤
  • Tertiary: 텍스트 링크 또는 작은 아이콘 액션
  • 데스크탑에서는 불필요한 풀폭 CTA를 지양한다.

반응형 규칙

  • 모바일: 터치 우선, 충분한 높이/패딩, 필요 시 풀폭 CTA 허용
  • 데스크탑: 내용폭 기반 컴팩트 CTA 그룹 권장
  • 텍스트 길이에 따라 버튼 폭이 과도하게 늘어나지 않게 min-w + px를 사용

마이크로카피 규칙

  • 실시간/확정처럼 보이는 문구를 신중히 사용한다.
  • 초기 데이터가 비어도 어색하지 않은 카피를 기본값으로 사용한다.
  • 숫자 기반 과장 표현보다 분위기/큐레이션 중심 문구를 우선한다.

접근성/상호작용

  • 아이콘 버튼은 sr-only 텍스트를 제공한다.
  • 포커스 링을 유지한다.
  • 실제 미구현 기능은 토스트로 피드백하되, 실제 동작처럼 오해되지 않게 (더미)를 명시한다.