이 저장소가 대체 무엇인가.
개발자라면 누구나 "우리 시스템 구조 좀 그려줘"라는 요청 앞에서 막막했던 적이 있다. draw.io를 켜서 사각형을 하나하나 끌어다 놓고, 화살표를 잇고, 색을 고르는 일은 지루하고 오래 걸린다. Archify는 이 과정을 뒤집는다. "React 프론트엔드가 Node API를 호출하고, Postgres와 Redis를 쓰고, AWS에 배포된다"고 말로만 설명하면, Claude가 그 말을 알아듣고 예쁜 다이어그램을 그려 준다.
비유하면: 당신 = 건축주, Archify(안의 Claude) = 제도사. 건축주는 "거실은 남향, 주방은 거실 옆에"라고 말로 요구하고, 제도사가 그걸 정식 도면으로 옮긴다. 다른 점은 이 제도사가 색 규칙·정렬·여백·범례까지 알아서 챙긴다는 것.
README의 한 문장 자기소개는 이렇다: "Claude Skill: generate beautiful architecture diagrams with dark/light theme toggle and PNG/JPEG/WebP/SVG export." 여기서 가장 중요한 단어는 사실 "Claude Skill"이다. Archify는 여러분이 설치해서 실행하는 앱이 아니라, Claude에게 새 능력을 가르치는 "설명서 묶음"이다.
SKILL.md라는 마크다운 파일 하나 — 여기에 "이런 요청이 오면(트리거), 이런 순서로, 이런 규칙을 지켜서 결과물을 만들어라"라고 적어 둔다. Claude는 대화 중 관련 요청을 감지하면 이 스킬을 "펼쳐" 지침대로 행동한다. 즉 코드를 실행하는 게 아니라, Claude의 행동을 조종하는 프롬프트 + 참고자료 패키지다. Archify는 여기에 Node.js 렌더러와 예제까지 얹은, 꽤 본격적인 스킬이다.Archify가 만들어 주는 다이어그램은 다섯 종류다: Architecture(시스템 구성도), Workflow(작업 흐름·승인 체인·CI/CD), Sequence(API 호출 순서·요청 생명주기), Data Flow(데이터 파이프라인·ETL·PII 경계), Lifecycle(상태 기계·주문/작업/에이전트 실행의 상태 전이). 그리고 결과물은 언제나 외부 의존성이 0인 HTML 파일 딱 하나 — 브라우저로 열기만 하면 되고, 남에게 보낼 때도 파일 하나만 던지면 된다.
Claude Skills 붐 · "예쁜 Mermaid 대안" 포지셔닝 · GitHub README용 자동 테마 SVG · "AI를 루프 안에" 두는 설계 철학.
Archify가 TrendShift 상위권에 오른 배경에는 2026년 상반기 "Claude Skills 생태계"의 폭발이 있다. TrendShift Daily 상위 목록을 보면 #AI skills 토픽이 2위를 차지하고, 상위 25개 중 상당수가 "Claude Code를 ○○로 바꿔 주는 스킬"이다. Archify는 그중 "다이어그램 그리기"라는 명확하고 실용적인 틈새를 파고들었다.
| 도구 | 방식 | Archify와의 차이 |
|---|---|---|
| draw.io / Excalidraw | 사람이 직접 마우스로 그림 | Archify는 말로 설명 → 자동 생성. 손으로 배치하는 노동이 사라짐 |
| Mermaid | 텍스트 문법 → 자동 레이아웃(dagre) | Mermaid는 격자에 기계적으로 배치. Archify는 Claude가 의미를 이해하고 손으로 배치한 듯한 미감 |
| eraser.io / 각종 AI 다이어그램 SaaS | 클라우드 서비스(로그인·구독) | Archify 결과물은 내 컴퓨터 안 HTML 한 장. 서버 없음·계정 없음·데이터 유출 없음 |
| PlantUML | 서버/자바 렌더링 | Archify는 브라우저 안에서 SVG로 완결. 빌드·서버 불필요 |
대부분의 코드-투-다이어그램 도구는 자동 레이아웃 엔진(dagre, elk-js)에 배치를 맡긴다. Archify는 이 길을 의도적으로 포기했다. 이유는 저장소의 ROADMAP.md에 실험 데이터와 함께 적혀 있다(4번 섹션에서 상술). 요지는 이렇다 — "예쁜 다이어그램의 본질은 '인증 서버를 AWS 영역 밖에 띄운다', 'S3를 CDN 아래에 둔다' 같은 배치 결정 자체인데, 자동 레이아웃은 그걸 균일한 격자로 뭉개 버린다. 그 배치 판단을 Claude에게 맡기는 것이 Archify의 진짜 경쟁력이다."
GitHub README에 다이어그램을 넣어 본 사람은 안다. 다크 모드용·라이트 모드용 PNG를 따로 두 장 만들어 <picture> 태그로 감싸야 했다. Archify의 v2.4가 이걸 해결한다. 내보낸 SVG 파일 하나 안에 다크·라이트 두 벌의 CSS 변수 + @media (prefers-color-scheme)가 함께 들어 있어서, 같은 .svg를 붙여 두면 독자가 다크 모드면 다크로, 라이트면 라이트로 알아서 바뀐다.
TrendShift의 순위는 별 개수가 아니라 "짧은 시간에 얼마나 화제가 됐나(모멘텀)"를 잰다. Archify는 이 글을 쓰는 시점 GitHub 별이 약 18개로, 아직 갓 주목받기 시작한 단계다. 또한 이것은 실행 앱이 아니라 Claude 스킬이라, 쓰려면 Claude Pro/Max/Team/Enterprise 요금제 또는 Claude Code가 필요하다. "지금 당장 모두에게 완성된 도구"라기보다, 설계 아이디어와 프런트엔드 기법을 배우기 좋은 잘 만든 소품으로 보는 게 정확하다.
두 얼굴을 가진 프로젝트 — (A) 사용자에게 배포되는 "스킬 페이로드", (B) 그 뒤에서 도는 Node.js 렌더링 엔진.
Archify를 이해하는 열쇠는 "두 개의 층"이 있다는 걸 아는 것이다. 겉으로 사용자가 받는 것은 archify.zip 하나지만, 그 안은 사실 두 부분으로 나뉜다: (A) Claude에게 지시를 내리는 프롬프트/자산 층과, (B) JSON을 받아 실제 SVG를 찍어 내는 Node.js 렌더러 층.
| 층 | 기술 / 버전 | 역할 |
|---|---|---|
| 스킬 지침 | Markdown (SKILL.md, 약 17KB) | Claude에게 다이어그램 종류 선택·색 규칙·좌표 예산을 알려 주는 "두뇌". 트리거 문구도 여기 정의 |
| 출력 템플릿 | HTML + CSS + SVG (assets/template.html, 약 50KB) | 결과물의 뼈대. CSS 변수 테마 시스템 + 툴바 + 내보내기 메뉴가 이미 들어 있는 껍데기 |
| 내보내기 엔진 | Vanilla JS (템플릿에 인라인, 약 19KB) | 프레임워크 0. 테마 토글, 4× 래스터화, 클립보드 복사, 키보드 단축키를 순수 JS로 구현 |
| 렌더러 | Node.js ≥18 · ESM(.mjs) | JSON IR을 받아 좌표를 검증하고 SVG를 템플릿에 꽂아 HTML을 생성. 5종 다이어그램별로 하나씩 |
| 스키마 검증 | ajv ^8.17 (JSON Schema 2020-12) | Claude가 쓴 JSON이 규격에 맞는지 검사. 없으면 경고만 하고 계속(graceful degradation) |
| 중간 표현(IR) | JSON (+ per-type *.schema.json) | "이 다이어그램은 이런 노드·연결·카드로 구성" 을 담는 기계가 읽는 설계도 |
| 테스트 | node --test + 골든 테스트 | 기하 계산·레이아웃 규칙·열화 모드·예제 재현을 자동 검증 |
| CI / 릴리스 | GitHub Actions (Node 20 & 22 매트릭스) | 테스트 + archify.zip이 최신인지 검사(zip-freshness). 태그 푸시 시 릴리스 자동화 |
| 배포 사이트 | GitHub Pages (docs/) | 렌더링된 데모를 웹에서 바로 보는 소개 페이지 |
"출력물"은 무의존성, "공장"은 도구를 씀. 여러분이 최종적으로 받는 HTML 다이어그램은 npm도 빌드도 서버도 필요 없는 파일 한 장이다. 하지만 그 파일을 찍어 내는 렌더러(.mjs)는 npm install ajv가 필요한 진짜 Node 프로그램이다. 빵(출력)은 아무 데서나 먹을 수 있지만, 빵을 굽는 오븐(렌더러)은 부엌에 있어야 한다는 뜻.
주목할 점은 이 스택에 프런트엔드 프레임워크가 하나도 없다는 것이다. React도, Vue도, 번들러(webpack/vite)도 없다. 테마 전환·초고화질 이미지 내보내기·클립보드 복사 같은 "요즘 앱 같은" 기능이 전부 약 19KB의 순수 JavaScript로 구현돼 있다. 프레임워크에 익숙한 사람에게는 "이걸 바닐라 JS로?"라는 좋은 자극이 되고, 초보자에겐 브라우저 원시 API(Canvas·Clipboard·SVG)만으로 얼마나 많은 걸 할 수 있는지 보여 주는 교재가 된다.
"AI를 루프 안에" 둔 파이프라인 · CSS 변수 테마 시스템 · 4× 원본 래스터화 트릭 · 우아한 열화(degradation).
Archify의 데이터 흐름은 아래와 같다. 핵심은 Claude가 파이프라인 중간에 앉아 "좌표와 색을 판단하는 사람" 역할을 한다는 점이다(자동 레이아웃이 아님).
diagram.json이라는 IR로 굳어지고, 렌더러는 오직 그 JSON만 보고 그림을 그린다. 이렇게 나눠 두면 "Claude가 좌표 하나를 고칠 때 무관한 부분이 흔들리지 않는" 안정성을 얻는다.로드맵을 보면, 원래 계획은 Mermaid 코드를 자동으로 파싱해서 예쁘게 다시 그리는 것이었다. 그런데 저자는 이 길을 직접 실험해 보고 폐기했다. 실제 Mermaid 순서도 5개를 골라, (A) 순정 Mermaid, (B) Mermaid + Archify CSS, (C) Claude가 손으로 배치한 Archify — 세 방식으로 그린 뒤 무작위 블라인드 평가를 했다. 결과: C만 좋았고, B는 A(순정 Mermaid)보다 나을 게 없었다. 결론은 명확했다 — "예쁨의 원천은 CSS가 아니라 배치 판단"이다.
| 검토된 대안 | 버린 이유 |
|---|---|
| 자동 레이아웃 (dagre / elk-js) | 세 번의 설계 리뷰가 모두 "미감을 죽이는 최대 리스크"로 지목. 차별점을 자동화로 없애는 꼴 |
| YAML을 IR로 | LLM이 만든 YAML은 "맞아 보이지만 파싱은 틀린" 비율이 높음. JSON은 파싱이 명확 |
| Mermaid 파서 + dagre 파이프라인 | 위 실험이 "순정 Mermaid보다 나을 게 없음"을 증명 → 킬(kill) |
| 범용 그래프 IR (DOT/GraphML/C4 DSL 등) | 토폴로지+시각 배치+비그래프 메타(카드/범례/경계)를 한꺼번에 깔끔히 담는 표준이 없음 |
Archify 로드맵에는 안 만들기로 한 기능과 그 이유가 표로 정리돼 있다: ?exportScale=N(흐린 출력의 뒷문), 색맹 팔레트(포크로 30줄이면 됨), 공유 링크(XSS·URL 길이 문제), 확대/축소 UI(브라우저 기본으로 충분), PDF 버튼(Cmd+P로 됨)… "무엇을 넣을까"보다 "무엇을 넣지 않을까"를 근거와 함께 적어 둔 것은 소프트웨어 설계에서 보기 드문 성숙함이다. 초보자에게 이 문서 자체가 "기능 욕심을 다스리는 법" 교재다.
다크/라이트 전환의 비밀은 CSS 커스텀 프로퍼티(변수)다. SVG 안의 도형은 색을 직접 갖지 않는다. 대신 의미 있는 class(예: 프론트엔드=c-frontend, 강조 화살표=a-emphasis, 흐린 글자=t-muted)를 갖고, 그 class가 변수를 가리킨다. <html>의 data-theme만 바꾸면 변수 값이 전부 다시 계산되어 그림 전체가 한 번에 다른 테마로 바뀐다.
/* :root(다크) 와 [data-theme="light"] 두 벌의 변수 정의 */ :root, [data-theme="dark"] { --bg:#020617; --frontend-stroke:#22d3ee; --backend-stroke:#34d399; --database-stroke:#a78bfa; --arrow-emphasis: …; --mask:#0f172a; } [data-theme="light"] { --bg:#ffffff; --frontend-stroke:#0891b2; --backend-stroke:#059669; … } /* class 는 색을 직접 안 쓰고 변수만 가리킨다 */ .c-frontend { fill: var(--frontend-fill); stroke: var(--frontend-stroke); } .a-emphasis { stroke: var(--arrow-emphasis); } /* 핫패스 강조 */ .t-muted { fill: var(--text-muted); } <!-- SVG 마크업엔 색이 없다 — class만 있다 --> <rect class="c-frontend" x="40" y="40" width="120" height="60"/>
스킬 지침은 Claude에게 "절대 fill="rgba(...)"나 stroke="#..."를 쓰지 말고 반드시 class를 써라"고 못박는다. 이유는 자명하다 — 색을 도형에 직접 박아 버리면 data-theme을 바꿔도 그 도형만 안 바뀐다. 심지어 스킬에는 grep -E 'fill="(#|rgb)'가 아무것도 못 찾아야 한다는 자가 점검 체크리스트까지 들어 있다. "규칙을 글로만 적지 말고 기계로 검사 가능하게 만든다"는 좋은 습관.
SVG(벡터)를 PNG(픽셀)로 바꿀 때 초보가 흔히 하는 실수는 작게 그린 다음 이미지를 늘리는 것 — 그러면 계단처럼 뭉갠다. Archify의 v2.3은 이걸 근본부터 고쳤다. 트릭은 이렇다: SVG의 viewBox(좌표계)는 그대로 두고, 겉 width/height만 4배로 키운다. 그러면 브라우저가 벡터를 4배 해상도에서 처음부터 다시 그린다(픽셀을 늘리는 게 아니라). 그 뒤 canvas에 자연 크기로 얹어 toBlob으로 파일을 뽑는다.
const RASTER_SCALE = 4; // 항상 4배 const MAX_CANVAS_PIXELS = 16*1024*1024; // 구형 Safari 캔버스 상한 // 큰 그림이면 3×→2×→1×로 자동 강등해 상한을 안 넘김 function pickSafeScale(w, h){ for (let s=RASTER_SCALE; s>=1; s--) if (w*s * h*s <= MAX_CANVAS_PIXELS) return s; return 1; } // 핵심: viewBox는 안 건드리고 width/height만 scale배 → 벡터를 그 해상도로 '원본 렌더' clone.setAttribute('width', vb.width * scale); clone.setAttribute('height', vb.height * scale); ctx.drawImage(img, 0, 0); // 자연 크기로 — 업샘플링(늘리기) 없음
저해상도 사진을 늘리기 vs 고해상도로 다시 촬영의 차이다. 흐린 증명사진을 포토샵에서 잡아 늘리면 뭉개지지만(=순진한 방식), 카메라를 4배 해상도로 맞추고 다시 찍으면 선명하다(=Archify 방식). SVG는 "몇 배로 찍든 선명한 벡터"이기 때문에 이 재촬영이 가능하다.
잘 만든 도구의 표시는 "뭔가 없을 때 죽지 않고 한 단계 낮춰서 동작하는가"다. Archify는 이걸 여러 겹으로 갖췄다.
| 없는 것 | 대응 |
|---|---|
| ajv 미설치 | 스키마 검증만 건너뛰고 기하 검사·렌더링은 계속 (경고 출력) |
| 셸/Node 자체가 없음 | 렌더러 대신 손 배치(hand-placed) 아키텍처 모드로 폴백 |
| 구형 Safari (WebP·클립보드 미지원) | 해당 메뉴 항목을 회색 처리, PNG/JPEG는 계속 됨 |
| Google Fonts 못 불러옴(샌드박스) | 시스템 고정폭 폰트(ui-monospace)로 자동 대체 |
| 캔버스가 16Mpx 상한 초과 | 4×→3×→2×로 자동 강등해 빈 이미지 방지 |
저장소 총 6.3MB(대부분 PNG 데모 이미지). 알맹이는 archify/ 폴더 하나 — 그게 곧 배포되는 스킬이다.
이 폴더가 곧 archify.zip이 된다. build-zip.sh가 test/·node_modules/를 빼고 package.json에서 scripts까지 지운 뒤 압축한다(스킬 사용자가 실수로 npm test를 돌리다 깨지지 않도록). CI에는 "zip이 최신 소스와 일치하는가"를 검사하는 job이 따로 있다 — v2.5에서 zip이 3커밋 뒤처졌던 버그의 재발 방지책이다.
cli.mjs(입출력·템플릿 슬롯 채우기), validator.mjs(ajv 동적 로딩 + LLM이 알아듣는 에러 메시지 — 에러 경로에 문제 노드의 id/label을 붙여 줌), geometry.mjs(사각형 겹침·유한값 검사 등 순수 함수), utils.mjs(HTML 이스케이프·<defs> 화살촉/격자 정의). 렌더러별 파일은 자기 레이아웃 규칙만 갖고 나머지는 여기서 빌려 쓴다.
보통 저장소에는 "한 것"만 남는데, Archify는 "안 하기로 한 이유"를 데이터로 남겼다. Mermaid 자동 파서를 폐기한 그 블라인드 실험의 원본 소스·렌더 결과·평가 스크린샷이 통째로 보존돼 있다. 코드 리뷰·의사결정 과정을 배우기에 훌륭한 사례다.
이 작은 저장소 하나에 프런트엔드·Node·프롬프트 엔지니어링·소프트웨어 의사결정이 압축돼 있다.
"다크 모드"를 클래스별 색 하드코딩으로 만들면 지옥이 된다. Archify처럼 변수 한 층을 두고 data-theme만 스왑하는 패턴을 익히면, 색을 한 곳에서만 관리할 수 있다. 실습 아이디어: 원·사각형 3개짜리 SVG를 만들고, c-a/c-b/c-c class + 두 벌의 변수로 다크/라이트 토글 버튼을 붙여 보자.
XMLSerializer로 SVG를 문자열로 만들고 → Blob+URL.createObjectURL로 이미지로 로드 → canvas.drawImage → canvas.toBlob(mime, quality)로 PNG/JPEG/WebP를 뽑는 흐름은 프런트엔드 이미지 처리의 핵심 레시피다. 실습: 4-4의 "viewBox 고정 + width/height만 4배" 트릭을 50줄짜리 HTML로 재현하고, 순진한 drawImage(img, 0,0, w*4, h*4) 방식과 화질을 비교해 보자.
이미지 클립보드 복사는 까다롭다. Safari는 ClipboardItem을 클릭 이벤트 동기 구간 안에서 만들어야 하고, 그래서 Archify는 완성된 Blob이 아니라 "Blob을 주는 Promise"를 ClipboardItem에 넘긴다. 실습: 버튼 클릭 시 canvas 그림을 클립보드에 복사하고 Slack/메모장에 붙여 넣어 보자. 미지원 브라우저 감지(navigator.clipboard.write 존재 확인)까지.
Claude(LLM)가 생성한 JSON을 그대로 믿으면 위험하다. Archify는 JSON Schema(2020-12)로 규격을 정하고 ajv로 검증한다. 압권은 에러 메시지 가공 — 단순히 /nodes/3 invalid가 아니라 "/nodes/3 (id/label: 'router')"처럼 사람·AI가 어느 요소인지 바로 알 수 있게 경로에 라벨을 붙인다. 실습: 간단한 "할 일 목록" JSON 스키마를 쓰고, 일부러 틀린 JSON을 넣어 ajv 에러를 개선해 보자.
SKILL.md는 단순 설명서가 아니라 Claude와 맺는 계약이다. "Workflow는 6개 열을 x=[88,220,300,430,500,625]에 두라", "Sequence 참여자는 x=62+index×108, 최대 8명" 같은 정확한 좌표 예산(layout budget)을 준다. 또 Mermaid를 파서가 아니라 '입력 방언'으로 취급해 "구조만 읽고 처음부터 배치하라"고 지시한다. 실습: 여러분의 작은 스킬 하나(예: "이력서 한 줄 요약기")를 SKILL.md로 써 보자.
내보내기 메뉴는 장식이 아니라 W3C ARIA APG의 정석 메뉴 버튼이다. role="menu", aria-haspopup, ↑↓/Home/End/Esc/Enter 키보드 내비게이션, 포커스 관리, prefers-reduced-motion·prefers-color-scheme 존중까지. 실습: 여러분의 드롭다운을 키보드만으로 완전히 조작 가능하게 만들어 보자.
기술만큼 중요한 게 판단이다. Archify는 큰 기능(자동 레이아웃, Mermaid 파서)을 실험으로 검증하고 근거와 함께 폐기했고, "Not planned" 목록으로 유혹을 관리한다. 실습: 여러분 프로젝트의 백로그에서 "안 만들 기능 3개 + 이유"를 적어 보자. 이게 로드맵보다 어렵고 값지다.
"쓰는 것"과 "렌더러를 돌리는 것"과 "결과물을 여는 것"은 요구사항이 다르다.
| 목적 | 필요한 것 |
|---|---|
| 스킬 사용 (Claude에게 다이어그램 요청) | Claude Pro / Max / Team / Enterprise 요금제, 또는 Claude Code. 스킬 설치는 archify.zip을 Settings → Capabilities → Skills에 업로드하거나, ~/.claude/skills/에 압축 해제 |
| 렌더러 직접 실행 (개발/수동 렌더) | Node.js ≥ 18 + npm install ajv. ESM(.mjs) 실행 환경. (ajv 없어도 검증만 건너뛰고 동작) |
| 결과물 HTML 보기 | 아무 최신 브라우저(Chrome/Safari/Firefox/Edge). 설치·서버·인터넷 불필요(폰트만 온라인이면 더 예쁨) |
| 이미지 내보내기 세부 | WebP = 브라우저 canvas의 image/webp 지원 필요 · 클립보드 이미지 복사 = ClipboardItem(Chromium·Firefox 127+·Safari 16+) |
하드웨어 부담은 사실상 0이다. GPU도, 대용량 RAM도 필요 없다. "Claude를 쓸 수 있는 계정"과 "브라우저"만 있으면 된다. 무거운 건 계산이 아니라 Claude의 판단이고, 그건 클라우드에서 일어난다.
난이도별 5개 — 스킬 사용자에서 시작해 렌더러 기여자까지.
archify.zip을 설치한 뒤, Claude에게 "archify 스킬로 React + Node API + Postgres + Redis + AWS 아키텍처 그려줘"라고 요청한다. 나온 HTML을 열어 T(테마)·E(내보내기)를 눌러 보고 PNG와 SVG로 저장. 그런 다음 "Redis를 왼쪽으로 옮겨", "인증 경로를 강조해" 같은 말로 채팅으로 수정해 본다.
결과 HTML을 에디터로 열어, 어떤 노드의 class를 c-backend에서 c-security로 바꿔 색이 어떻게 변하는지 확인한다. <rect> 하나를 복제해 노드를 추가하고, 화살표(<path class="a-default">)도 하나 이어 본다. 핵심 감각: 색이 아니라 class로 사고하기. 색을 직접 박으면 테마가 깨진다는 걸 직접 경험한다.
저장소를 클론하고 cd archify && npm install. examples/cache-miss-request.sequence.json을 참고해 나만의 sequence JSON을 쓴다(참여자·메시지·활성 구간). node renderers/sequence/render-sequence.mjs my.json out.html 실행. 일부러 필드를 틀리게 넣어 ajv 검증 에러 메시지를 유발하고, 그 메시지만 보고 고쳐 본다. "렌더러는 절대 건드리지 말고 JSON만 고친다"는 규칙을 지켜 보자.
빈 HTML에 간단한 SVG를 넣고, 버튼 두 개를 만든다: (A) 순진하게 drawImage(img,0,0,w*4,h*4)로 확대, (B) Archify식 "viewBox 고정 + width/height만 4배 후 자연 크기 draw". 두 PNG를 100%로 확대해 가장자리 선명도를 비교한다. 왜 B가 안 뭉개지는지 한 문단으로 설명해 보자(벡터 재래스터화 vs 픽셀 업샘플링).
"분석계층"을 뜻하는 새 색 c-analytics를 추가한다. template.html의 두 테마 변수 + class, 그리고 렌더러의 색 매핑, 스키마의 허용 kind 목록까지 세 곳을 일관되게 손대야 한다. 테마 토글이 여전히 매끄럽게 도는지 확인. 여유가 되면 색맹 친화 팔레트 포크(Okabe-Ito)를 30줄로 만들어, 로드맵이 "포크로 충분"이라 한 주장을 검증해 보자.
Archify를 완전히 소화하고 비슷한 도구를 스스로 만들기까지 — 6주 계획.
| 주차 | 주제 | 구체적 학습 내용 |
|---|---|---|
| 1주차 | SVG + CSS 변수 기초 | SVG 좌표계·viewBox·<rect>/<path>/<text>, CSS 커스텀 프로퍼티, data-* 속성, prefers-color-scheme. → 테마 토글 SVG 뱃지 만들기 |
| 2주차 | Canvas & 이미지 인코딩 | Canvas 2D, SVG→canvas 파이프라인, toBlob의 mime/quality, 벡터 재래스터화의 수학. → 4× 선명 내보내기 재현 |
| 3주차 | 브라우저 API & 접근성 | Clipboard API(ClipboardItem), object URL 다운로드, ARIA APG 메뉴 버튼, 키보드 내비게이션. → 완전 키보드 조작 드롭다운 |
| 4주차 | JSON Schema & IR 설계 | JSON Schema 2020-12, ajv 컴파일·에러 처리, "LLM 친화 에러 메시지", IR을 설계하는 법(무엇을 넣고 뺄지). → 나만의 작은 IR + 검증기 |
| 5주차 | Claude Skill 저작 | SKILL.md frontmatter·트리거 description, "레이아웃 예산" 프롬프트, Mermaid를 입력 방언으로 다루기, 자가 점검 체크리스트. → 소형 스킬 1개 배포 |
| 6주차 | Node ESM 도구 & CI | ESM(.mjs) 모듈, node --test + 골든 테스트, GitHub Actions 매트릭스, zip-신선도 가드, 태그 기반 릴리스. → 내 도구에 CI 붙이기 |
Archify는 규모가 작아서(핵심은 파일 몇 개) 통째로 읽을 수 있는 드문 교재다. 먼저 template.html의 인라인 JS를 정독하고(읽기), 8번의 과제 2~4로 손대 보고(바꾸기), 마지막에 비슷한 미니 도구를 직접 만들어 보자(만들기). 특히 ROADMAP.md와 experiments/를 함께 읽으면 "코드"뿐 아니라 "판단"까지 배울 수 있다.
이 문서와 저장소에 등장한 주요 용어를 한자리에.
SKILL.md의 frontmatter(name·description)가 "언제 이 스킬을 켤지"(트리거)를 정하고, 본문이 "어떻게 할지"를 정한다.--frontend-stroke 등)로 색을 한 층에 모으고, <html data-theme>만 바꿔 전체를 재계산하는 방식. @media (prefers-color-scheme)는 사용자의 OS 다크/라이트 설정을 읽는 CSS 미디어 쿼리.viewBox는 SVG의 내부 좌표계. viewBox를 그대로 두고 겉 크기만 4배로 키우면 브라우저가 벡터를 4배 해상도로 "다시 그려" 선명한 PNG가 나온다(픽셀 늘리기 아님).XMLSerializer=DOM/SVG를 문자열로, canvas.toBlob=캔버스를 이미지 파일(Blob)로, ClipboardItem=이미지를 클립보드에 넣는 객체. 셋을 엮으면 서버 없이 브라우저만으로 이미지를 만들고 복사한다.c-mask)을 한 장 더 깔아, 격자 배경이 비쳐 지저분해지는 걸 막는 기법. Archify가 모든 노드에 강제하는 규칙.import/export), 파일 확장자 .mjs.원본 저장소부터 배경 지식까지.
· GitHub — tt-a1i/archify (본체)
· README (English)
· ROADMAP.md — 폐기된 기능과 그 이유, 블라인드 실험 결과
· CHANGELOG.md — v1.0 → v2.6 진화 기록
· Cocoon-AI/architecture-diagram-generator — Archify가 포크한 원조(v1.0, MIT)
· Claude에서 Skill 사용하기 (공식 문서)
· TrendShift — 이 딥다이브의 출처(Daily 21위)
· MDN — CSS 커스텀 프로퍼티(변수)
· MDN — Canvas.toBlob · Clipboard API
· MDN — prefers-color-scheme
· JSON Schema · ajv 문서
· W3C ARIA APG — 메뉴 버튼 패턴
· Mermaid — 텍스트→다이어그램(자동 레이아웃)
· lukilabs/beautiful-mermaid — "예쁜 Mermaid" 진영(로드맵이 언급한 선점 사례)