SYSTEM.md

Quire

Every decision, remembered.

• 상태: Draft (2026-09-26) — Phase A(정체성 & 브랜딩) 결정 반영. 팀 리뷰 후 확정한다.
• 갱신일: 2026-09-26. (로고 확정)
• 관계: 이 문서는 Qode 디자인 시스템의 상위 정체성 문서다. 시각·화면 규칙은 DESIGN.md, 컴포넌트 규칙은 docs/registry.md, 실제 토큰 값은 src/renderer/src/assets/main.css가 기준이다.

---

1. 정의

Quire는 Qode를 만드는 사람과 AI가 같은 결정을 두 번 내리지 않도록, 결정과 그 이유를 기록해 두는 디자인 시스템이다.

토큰·컴포넌트·패턴을 모아 두는 데서 그치지 않는다. 각 요소가 왜 그렇게 정해졌는지, 언제 쓰고 언제 피하는지를 함께 남긴다. 독자는 사람과 AI 둘 다다.

2. 코어 밸류

우선순위 순서다. 두 밸류가 부딪히면 앞의 것을 따른다.

① Context — 맥락

결정에는 이유를, AI에게는 맥락을 남긴다. 관련된 정보는 가까이 둔다.

• 시스템에서: 토큰은 값이 아니라 의미로, 컴포넌트는 이름이 아니라 "언제 쓰고 언제 피하는지"로 기술한다. 패턴에는 결정 트리와 실제 결정 기록을 붙인다.
• 판단 질문: 6개월 뒤의 팀원이나 AI가 이걸 보고 왜 이렇게 됐는지 알 수 있는가?

② Trust — 신뢰

실제 상태와 근거만 표현하고 과장하지 않는다. 오류가 나도 다음에 무엇을 해야 하는지 알 수 있어야 한다.

• 시스템에서: 상태 표시·참조 소스 표기·복구 안내가 필수 요소다. 임의 통계, 장식용 배지, 미구현 기능을 암시하는 컨트롤은 만들지 않는다.
• 판단 질문: 화면에 보이는 것이 지금 실제로 사실인가?

③ Density — 밀도

개발 도구답게 정보량은 넉넉하게, 그러면서도 차분하고 읽기 편하게.

• 시스템에서: 작업 화면에 랜딩 페이지식 대형 여백을 쓰지 않는다. 여백보다 리듬으로 정리하고, 강조는 중요도에 비례해 아낀다.
• 판단 질문: 이 화면은 한눈에 더 많이 보여주면서도 시끄럽지 않은가?

Calm은 어디로 갔나 — 후보였던 Calm(차분함)은 독립 밸류로 두지 않고 Density 안에 넣었다. Quire에서 차분함은 목표라기보다, 밀도를 높일 때 지켜야 하는 조건이다. Qode 앱의 "차분하고 신뢰감 있는" 브랜드 톤은 그대로 유지된다.

3. 이름 & 유래

Quire /ˈkwaɪər/ — 종이를 접어 묶은 한 첩(약 24장). 책을 제본할 때 쓰는 기본 단위다.

• 문서화, 그리고 코드와 문서를 뒤적이며 오가는 일에 가장 가까운 단어라서 골랐다.
• 낱장(토큰·컴포넌트)을 묶어 하나의 기록(시스템)을 만든다는 서사가 Context 밸류와 맞닿는다.
• Q로 시작해 Qode와 첫 글자를 공유한다.
• 비교했던 후보: Quilt(조각보), Qube(블록), Compass(나침반). 최상위 밸류가 Compose(조립)가 아니라 Context(맥락)로 정해지면서 기록의 은유를 택했다.

4. Qode와의 거리

원칙: Qode에서 출발하되 Qode에 갇히지 않는다.

항목	결정	내용
컬러 계승	오렌지만 유지	#ff6900만 물려받는다. 서브 컬러는 도입하지 않는다.
톤 거리	살짝 벌림	앱은 따뜻한 작업 공간, 시스템 문서는 조금 더 전문가향(구조적·기술적).
로고 관계	독립 심볼, 오렌지만 공유	Qode 로고를 변형하지 않은 별도 심볼. 이어짐은 오렌지 #ff6900 한 조각으로만. §5 참고.
태그라인	"Every decision, remembered."	Context 서사. Quire(기록의 묶음)라는 이름과 짝을 이룬다.

5. 시각 정체성 방향 (컨셉만)

실제 값은 Phase B(파운데이션 재편)에서 확정한다. 여기서는 방향만 정한다.

• 시그니처 컬러: #ff6900 단일 액센트. 강조는 오렌지 하나로만 한다.

• 문서 바탕: 웜 그레이 모노톤. 앱의 크림(#faf6f1)에서 채도를 뺀 뉴트럴 계열로, 부모 브랜드와 이어지면서도 더 차분하고 기술적으로 보이게 한다. (참고 후보: 웜 그레이 #7a7368)

• 타이포: Pretendard Variable을 계승한다.

• 로고: 확정 (2026-09-26) — 도브테일(Dovetail) 심볼 + Quire 워드마크.

  

  심볼	설명
  	육각형을 이루는 검정 두 조각이 도브테일 이음처럼 맞물리고, 그 사이를 오렌지 쐐기 하나가 잇는다. 낱장을 묶어 한 첩을 만드는 Quire 의 서사, 그리고 Qode 에서 물려받은 유일한 색(#ff6900)을 한 형태에 담는다.

  • 구성: 검정(#171717 근처, 원본 측정) 두 조각 + 오렌지 #ff6900 하나. 다른 색을 더하지 않는다.
  • 바탕: 크림·밝은 배경 위. 어두운 배경용 반전판은 필요해지면 만든다.
  • 파일: docs/assets/quire/quire-lockup.png(1200×600), quire-symbol.png(512×512) — 문서용 PNG. 벡터(SVG) 원본은 아직 없다.

6. 이후 로드맵

Phase	이름	요약	상태
A	정체성 & 브랜딩	이 문서	완료
B	파운데이션 재편	토큰 3-tier(raw → semantic → component), 색상 역할 분리, 접근성 매트릭스, 타이포·radius 명시화	완료 (#53)
C	컴포넌트 정비	인벤토리·상태 판정, API 컨벤션, "언제 쓰고 언제 피하나" 명세	완료 (#54~#56)
D	패턴 & 의사결정 기록	확인·피드백·에러 등 반복 패턴의 결정 트리와 Do/Don't	완료 (#57)
E	AI 컨텍스트	DESIGN.md 스키마 표준화, 컴포넌트 registry, AI 검수 체크리스트	완료 (#58)
F	화면 밖 경험	모션 토큰, 카피 톤, loading/error/empty/success 표준	완료 (#59)
G	운영	변경 프로세스, Storybook addon, SoT 우선순위 규칙	완료

Phase B~G의 결정도 Context 밸류에 따라 결정 사항과 이유를 함께 남긴다.

7. 관련 문서

문서	담당	관계
SYSTEM.md	정체성·철학·로드맵	최상위. 다른 문서와 철학이 어긋나면 여기를 먼저 검토한다.
DESIGN.md	시각·화면 규칙	브랜드·시각 언어·화면 구성·접근성 기준서.
docs/foundations.md	토큰 의미	토큰 이름과 쓰임.
docs/registry.md	컴포넌트 규칙	ui/*.meta.ts 에서 생성. 쓸 때·피할 때·옵션·토큰.
docs/process/	운영	변경 흐름·문서 우선순위·상태 헤더 규칙.
docs/copy.md	화면 문구	해요체·상황별 톤·용어집. 🤖 일부 자동 검사.
docs/patterns/	패턴 결정	확인·에러·피드백·빈 상태·로딩.
docs/ai-review-checklist.md	검수	머지 전 체크리스트. 🤖 항목은 yarn tokens:check 가 자동 검사.
src/renderer/src/assets/main.css	토큰 실제 값	값의 기준.
AGENTS.md	AI 에이전트 작업 안내	코드 구조·명령어. UI 작업 전 읽을 Quire 문서를 안내한다.
README.md	프로젝트 소개	—