Diagram Design: 브랜드에 맞춘 에디토리얼 다이어그램을 그리는 Claude Code 스킬

9bow · 6월 17, 2026, 3:30오전

Diagram Design 소개

코딩 에이전트에게 다이어그램을 그려 달라고 하면 대개 둥근 모서리 박스가 줄줄이 늘어선 일반적인 그림이 돌아옵니다. 문서나 블로그의 나머지 디자인과는 따로 노는 그림이라, 결국 Figma를 다시 열어 손으로 다듬거나 다이어그램을 포기하게 됩니다. Diagram Design 은 바로 이 지점을 겨냥한 Claude Code 스킬로, Claude에게 다이어그램을 요청했을 때 나오는 결과물을 "에디토리얼 품질"의 일관된 그림으로 바꾸는 것을 목표로 합니다.

이 스킬의 핵심은 결과물을 사용자의 브랜드에 맞춘다는 점 입니다. 기본 상태에서도 흰색 계열 바탕에 검정 잉크, 탠저린(주황) 강조색을 쓰는 깔끔한 팔레트로 렌더링되지만, 온보딩을 거치면 스킬이 사용자의 웹사이트에서 색과 글꼴을 읽어 와 모든 다이어그램에 적용합니다. 출력 형식은 자체 완결형 HTML과 SVG라서 빌드 단계나 자바스크립트, 외부 이미지 없이 브라우저에서 파일을 바로 열어 볼 수 있습니다.

만든 사람은 BestSelf.co 의 창업자이자 littlemight.com 에서 글을 쓰는 Cathryn Lavery입니다. 저자는 직접 글을 쓸 때마다 아키텍처 스케치나 플로우차트가 필요했지만 매번 일반적인 박스 그림이 돌아오는 데 지쳐 이 스킬을 만들었다고 밝히고 있습니다. 본 게시물에서는 Diagram Design이 만드는 다이어그램의 종류, 브랜드 온보딩이 동작하는 방식, 그리고 설치·사용법을 정리합니다.

Diagram Design이 만드는 다이어그램

Diagram Design은 14가지 다이어그램 유형을 제공합니다. 아키텍처, 플로우차트, 시퀀스, 상태 머신(state machine), ER(데이터 모델), 타임라인, 스윔레인(swimlane), 사분면(quadrant), 중첩(nested), 트리, 조직도, 레이어 스택, 벤 다이어그램, 피라미드/퍼널이 여기에 해당합니다. 각 유형은 세 가지 변형으로 함께 제공되는데, 미니멀 라이트(minimal light), 미니멀 다크(minimal dark), 풀 에디토리얼(full-editorial)입니다. 모든 변형은 외부 이미지나 빌드 과정 없이 브라우저에서 곧바로 열립니다.

위 그림은 풀 에디토리얼 변형으로 렌더링된 아키텍처 다이어그램입니다. 강조색이 적용된 초점(focal) 노드, 하단의 범례, 포트나 경로 같은 기술 정보에 쓰인 고정폭(monospace) 글꼴처럼, 이 스킬이 의도한 시각 문법이 그대로 드러납니다. 같은 방식으로 분기 논리를 보여주는 플로우차트나 두 축 위에 항목을 배치하는 사분면 다이어그램도 동일한 톤으로 생성됩니다.

저장소의 skills/diagram-design/assets/index.html 을 브라우저에서 열면 14가지 다이어그램을 라이트, 다크, 풀 에디토리얼 탭으로 넘겨 보며 한자리에서 확인할 수 있습니다.

Diagram Design의 브랜드 온보딩 동작 방식

이 스킬에서 가장 특징적인 부분은 사용자의 웹사이트를 읽어 브랜드를 입히는 온보딩 과정입니다. 기본 팔레트만으로도 바로 스크린샷을 찍을 만한 결과가 나오지만, 약 60초의 온보딩을 거치면 다이어그램의 색과 글꼴이 사용자의 사이트와 통일됩니다. 흐름은 다음과 같습니다.

You:     "onboard diagram-design to https://yoursite.com"
Claude:  → 홈페이지를 가져옴
         → 주요 팔레트 + 글꼴 스택을 추출
         → 추출한 값을 의미 역할(semantic role)에 매핑:
             paper, ink, muted, accent, link
         → 변경안(diff)을 제안
         → references/style-guide.md 에 토큰을 기록
You:     "yes, apply it"

추출한 값은 다음과 같이 의미 역할로 매핑됩니다. 사이트의 <body> 배경색은 paper, 본문 텍스트 색은 ink, 보조/캡션 텍스트는 muted, 카드나 컨테이너는 paper-2, 가장 많이 쓰인 브랜드 색(CTA, 링크, 제목)은 accent 토큰이 됩니다. 글꼴도 마찬가지로 <h1> 글꼴은 제목용, <body> 글꼴은 노드 라벨용, <code> 글꼴은 기술 라벨용으로 연결됩니다.

토큰을 기록하기 전에는 paper 위에 놓인 ink 색의 WCAG AA 명도 대비를 자동으로 검증 합니다. 9~12px 같은 작은 다이어그램 크기에서 대비가 부족한 색이 사이트에 있으면, 스킬은 조정된 값을 제안하고 그 이유를 함께 설명합니다. 또한 새 프로젝트에서 처음 사용할 때 style-guide.md 가 아직 기본값이면, 기본 스킨을 그대로 적용하지 않고 온보딩을 진행할지, 토큰을 직접 붙여 넣을지, 기본값으로 둘지 한 번 물어보는 첫 실행 게이트(first-run gate)를 둡니다.

Diagram Design의 설계 시스템

Diagram Design은 결과물이 "AI가 만든 티"가 나지 않도록 몇 가지 규칙을 설계 시스템으로 못 박아 두었습니다. 강조색은 하나만 쓰고, 한 다이어그램에서 시선을 끄는 초점 요소는 1~2개로 제한합니다. 글꼴은 세 가지로, 제목과 이탤릭 콜아웃에는 Instrument Serif, 노드 이름에는 Geist sans, 포트나 필드 타입 같은 기술 정보에는 Geist Mono를 사용합니다. 테두리는 1px 헤어라인이고 그림자는 쓰지 않으며, 모서리 반경은 최대 10px입니다.

특히 모든 좌표와 너비, 간격을 4의 배수로 맞추는 규칙이 있는데, 저자는 이것이 다이어그램이 AI 생성물처럼 보이지 않게 하는 핵심이라고 설명합니다. 목표 밀도(density)는 10점 만점에 4점 수준으로, 저자는 "가장 품질이 높은 선택은 대개 삭제다" 라며 모든 노드가 자리값을 해야 하고 강조색은 독자가 가장 먼저 봐야 할 1~2개에만 쓰도록 권합니다. 전체 규격은 저장소의 SKILL.md 에 정리되어 있습니다.

구조 면에서는 점진적 공개(progressive disclosure) 방식을 씁니다. 최상위 SKILL.md 는 어떤 유형을 고를지와 어디서 세부 내용을 찾을지만 담은 가벼운 인덱스이고, 유형별 상세는 references/ 디렉토리의 개별 파일에 들어 있어 필요할 때만 로드됩니다. 덕분에 유형이 14가지로 늘어나도 Claude는 요청한 한 유형의 참조 파일만 읽으면 되고, 새 유형을 추가하려면 type-<name>.md 파일을 하나 추가해 선택 가이드에 연결하기만 하면 됩니다. 이 밖에 여백에 놓는 이탤릭 콜아웃을 그리는 주석(annotation) 프리미티브와, SVG 난류·변위 필터로 손으로 그린 듯한 변형을 만드는 스케치(sketchy) 프리미티브도 함께 제공됩니다.

Diagram Design 설치 및 사용법

저장소를 클론한 뒤 안쪽 스킬 디렉토리를 Claude Code의 스킬 폴더로 심볼릭 링크하면 설치됩니다. 실제 스킬은 저장소 안의 skills/diagram-design/ 에 들어 있으며, 같은 트리가 Claude Code 플러그인, Codex 플러그인, 단독 스킬로 모두 동작합니다.

# 저장소를 클론한 뒤 안쪽 스킬을 Claude Code 스킬 디렉토리로 심볼릭 링크
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

Claude Code를 재시작하면 스킬이 diagram-design 으로 등록되고, 다이어그램을 만들어 달라고 요청할 때 자동으로 활성화됩니다. 플러그인으로 더 간단히 설치할 수도 있습니다. 다만 이 경우 스킬이 플러그인 캐시에 위치해 references/style-guide.md 를 직접 수정해도 플러그인 업데이트 시 유지되지 않으므로, 스타일 가이드를 손으로 커스터마이징할 계획이라면 위의 클론 방식이 권장됩니다.

# Claude Code 플러그인으로 설치
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

설치 후에는 "내 앱의 아키텍처 다이어그램을 그려줘: 프론트엔드, 백엔드, 데이터베이스, Redis 캐시" 처럼 평소 말하듯 요청하면 Claude가 알맞은 유형을 골라 HTML로 만들어 저장합니다. 빈 다이어그램을 그리기 전에 "독자가 이 그림에서 잘 쓴 한 문단보다 더 많은 것을 배우는가?" 를 먼저 따지라는 안내처럼, 스킬은 굳이 그릴 필요가 없는 그림은 그리지 않도록 사용 기준도 함께 제시합니다.

Diagram Design의 라이선스

Diagram Design은 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

Diagram Design 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다!
텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다.

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~