feat: diagram-design 스킬로 커버리지 맵 · 하네스 · 타임라인 다이어그램 3종 추가#16
Merged
Conversation
diagram-design 스킬(cathrynlavery/diagram-design)의 editorial 디자인 시스템을 따라 SVG 다이어그램 2종을 추가했어요. - `ChapterMap`: 소개 페이지에서 35장 중 20장 커버리지를 3개 테마로 시각화 - `HarnessPipeline`: README에서 6-에이전트 퍼블리싱 하네스 구조를 시각화 - `static/diagrams/*.svg`: GitHub README용 독립 SVG. prefers-color-scheme 쿼리로 다크 모드에 대응해요. - `src/css/custom.css`: `--cc2-*` 다이어그램 토큰(light/dark) 추가. 프로젝트 그린(#16A34A)을 accent로, amber(#D97706)를 피드백 루프 강조로 매핑했어요. MDX 인라인 컴포넌트는 Docusaurus CSS 변수를 상속해 light/dark 토글에 자동으로 반응해요.
`ChapterMap` 다이어그램이 같은 정보(3개 테마 × 책 챕터 × 주제)를 공간적으로 표현하므로, 바로 아래 중복되는 테이블은 제거했어요.
`ProgressTimeline` 컴포넌트로 6개 주차의 누적 학습 곡선을 시각화해서 기존 표를 대체했어요. - 가로 타임라인에 6개 이벤트 노드(2주차 → 8주차)를 실제 주차 간격에 비례해 배치해요 — 3~4주차는 간격이 2배 더 넓게 표현돼요. - 각 노드에 주차·파트·챕터·테마가 모두 담겨서 기존 표의 모든 정보를 한눈에 볼 수 있어요. - 8주차 노드는 accent-tint로 focal 처리해서 "현재 지점"을 강조했어요. - 누적 수치(4 → 8 → 11 → 13 → 16 → 20 / 35)는 베이스라인 옆에 모노 폰트로 노출해요.
노드 텍스트가 박스 경계에 딱 붙어 읽기 어렵던 문제를 고쳤어요. - `fe-content-enhancer` 128 → 160 (가장 긴 라벨) - `notion-extractor`·`chapter-editor`·`mdx-writer`·`aggregator`·`voice-validator` 128 → 144 - `docs/*.mdx`·`dashboard` 출력 박스 64 → 88 - 나머지 x 좌표·화살표·피드백 path 모두 새 레이아웃에 맞춰 재배치
노드 이름과 흐름 방향이 이미 정보를 전달하고 있어서 화살표 위의 단계 레이블은 소음에 가까웠어요. 다음 9개 레이블과 배경 마스크를 모두 제거했어요. - FETCH · 3-ZONE YAML · EDITED YAML · ENHANCED · WRITE - ALL YAML · DASHBOARD · VALIDATE - SLOP DETECTED · REWORK 피드백 루프 의미는 amber dashed 화살표 + 레전드로 유지돼요.
Collaborator
|
크으 좋네요~~ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ChapterMap— 소개 페이지 "다룬 범위" 섹션에 35장 커버리지 맵을 추가했어요. 3개 테마로 다룬 20장과 남은 15장을 nested containment로 표현해요. 바로 아래의 중복 테마 표는 제거했어요.HarnessPipeline— README에 새 "퍼블리싱 하네스" 섹션을 넣고 Notion → 6 에이전트 → MDX 흐름을 architecture 다이어그램으로 보여줘요.ProgressTimeline— 대시보드 "진행 타임라인" 표를 가로 타임라인 다이어그램으로 대체했어요. 2~8주차 누적 곡선(4 → 8 → 11 → 13 → 16 → 20장)을 한눈에 볼 수 있어요.배경
cathrynlavery/diagram-design 스킬의 editorial 디자인 시스템(4px 그리드, target density 4/10, 1–2 focal max, no shadows)을 따라 제작했어요.
src/css/custom.css의--cc2-*토큰은 프로젝트 그린(#16A34A)을 accent로, amber(#D97706)를 피드백 루프 강조로 매핑했어요.영향 범위
docs/foundations/,docs/good-code/,docs/growth/는 건드리지 않았어요 — Human-only Zone 해시 검증(scripts/verify-human-only-hash.js)에 영향 없음.static/diagrams/*.svg는 GitHub README용 독립본이에요 — `prefers-color-scheme` 쿼리로 다크 모드에 대응해요.Test plan
커밋 구성