bookquote

책귀 디자인 시스템 — 마스터 문서

버전: 1.1.0 작성일: 2026-05-09 업데이트: 2026-05-09 — Flutter 스택 전환 (React Native + Expo → Flutter) 대상 독자: 메인 작업자 (Flutter 구현 세션)

1. 브랜드 정체성

앱 이름: 책귀 (冊-)

“책귀신”에서 온 말. 책을 너무 좋아해서 헤어나오지 못하는 사람. 영문 표기: Chaekgwi (또는 Bookworm 포지셔닝 — 결정 필요)

브랜드 톤 키워드 (7개, 우선순위 순)

  1. 정제된 (refined) — 모든 결정의 1순위 필터. “이게 충분히 정제됐나?”
  2. 진솔한 (sincere) — 꾸밈없이 좋은 문장 하나를 보여준다
  3. 지적인 (intellectual) — 책 읽는 사람에 대한 경의
  4. 따뜻한 (warm) — 차갑지 않게. 한국 문학의 온도
  5. 미니멀한 (minimal) — 인용구가 주인공. 나머지는 보조
  6. 한국적인 (Korean sensibility) — 한글 타이포그래피 우선, 한국 문학 감성
  7. 차분한 (calm) — 자극적이지 않게. 오래 봐도 피로하지 않게

피해야 할 것 (명시적 금지)

2. 브랜드 컬러 시스템

컬러 결정 근거

Primary — Ink (잉크 계열) #1C1917 (거의 검정, warm black)

Secondary — Paper (종이 계열) #FAFAF8 (따뜻한 흰색)

Accent — Copper (구리 계열) #B87333

왜 amber/terracotta 대신 copper인가?

3. 타이포그래피 결정 근거

Noto Serif KR — 인용구 전용

선택 이유:

피한 이유 — 고려했다가 제외한 폰트들:

Pretendard — UI/라벨 전용

선택 이유:

Libre Baskerville — 영문 인용구 보조

선택 이유:

4. 5개 템플릿이 만드는 결의 스펙트럼

차갑고 강함 ←————————————————→ 따뜻하고 부드러움
     T3(모노)  T1(미니멀)  T2(따뜻)  T4(표지발췌)  T5(타이포)
      ▲            ▲          ▲           ▲           ▲
   대비·힘       중립·여백   감성·온기   책의 색·감정  시·집중

중요한 설계 원칙: 5개가 각기 다른 극으로 당긴다. 모두 “예쁜” 방향은 같지만 도달하는 방법이 다르다. 사용자가 자신이 표현하고 싶은 감정에 따라 고른다.

템플릿 → 페르소나 정합성

템플릿 민지 (28, 마케터) 한지영 (31, 디자이너)
T1 미니멀 “자연스럽다. 과하지 않아서 부담 없이 올릴 수 있다” “깔끔. 폰트 좋으면 쓸 만”
T2 따뜻 “인스타 스토리에 올리기 좋을 것 같다. 따뜻해 보여” “폰트·여백 조합이 핵심. 자칫 촌스럽다”
T3 모노 “강하다. 임팩트 있는 문장에 쓸 것 같다” “Co-Star 스타일. 요즘 감성. 마음에 든다”
T4 표지발췌 “책 표지가 배경이 된다? 신기하다” “이게 진짜. 책 컬러로 자동 팔레트 — 내가 원하던 것”
T5 타이포 “시처럼 되는 거? 짧은 문장에 쓸 것 같다” “대담한 시도. 폰트·행 배치가 전부”

결론: T4가 한지영(디자이너) 최선호, T1이 민지(마케터) 기본 선택. T3는 Z세대 이수연(대학생) 계열에서 가장 많이 선택될 것으로 예측.

5. 공통 설계 원칙

5.1 인용구 길이별 자동 조정 시스템

세 기준점으로 선형 보간:

기준점 글자 수 인용구 폰트 크기
Large ≤ 50자 22px
Medium 200자 15px
Small ≥ 500자 11px

보간 함수 (Dart — tokens.dart 참조):

double getQuoteFontSize(int charCount) {
  if (charCount <= 50) return 22.0;
  if (charCount >= 500) return 11.0;
  if (charCount <= 200) {
    // 50 → 200자 구간: 22px → 15px (선형)
    return 22.0 - ((charCount - 50) / 150.0) * 7.0;
  } else {
    // 200 → 500자 구간: 15px → 11px (선형)
    return 15.0 - ((charCount - 200) / 300.0) * 4.0;
  }
}

행간(lineHeight) 연동 규칙 (Flutter TextStyle.height 값):

5.2 비율별 레이아웃 전환

비율 픽셀 공유 채널 자동 선택 트리거
9:16 1080×1920 인스타 스토리, 단톡방 인스타 스토리 공유 선택 시
1:1 1080×1080 인스타 피드 인스타 피드 공유 선택 시
4:5 1080×1350 인스타 포스트, 일반 다운로드 다운로드 메뉴에서 명시적 선택

편집기 기본 미리보기: 9:16 (인스타 스토리가 주 공유 채널)

5.3 워터마크 규칙

기본 모드 (minimal):

강조 모드 (branded, 토글 ON):

6. 향후 확장 포인트 (V2 후보 템플릿)

T6 후보: 노트지 (Note Paper)

T8 후보: 필름 스트립 (Film)

T9 후보: 계절 (Season)

7. 구현 우선순위 가이드

V1.0 필수:
  T1 미니멀 → T4 표지발췌 → T3 모노 (이 순서로 구현)

V1.1 추가:
  T2 따뜻 → T5 타이포

V2.0:
  T6 노트지 → T7 액자 → 사용자 커스텀 색 선택

왜 이 순서인가?