Diagram Design — 진짜 디자인 시스템을 갖춘 에이전트 스킬

AI가 만든 다이어그램은 전부 똑같이 생겼습니다. 아시죠, 그 모양. 둥근 상자, 어딘가에 하나쯤 있는 보라에서 파랑으로 가는 그라디언트, 모든 요소에 드리운 그림자, 상자 테두리에서 살짝 뜬 화살표, 그리고 "기본값"이라고 소리치는 글꼴까지. 보도자료를 시각화한 꼴입니다. 기술적으로는 정보를 전달합니다. 아무도 읽고 싶어 하지 않을 뿐이죠.

Diagram Design은 Cathryn Lavery가 만든 에이전트 스킬로, 그 미학을 정면으로 겨냥합니다. README치고 유난히 직설적인 캐치프레이즈는 이렇습니다. 자체 완결형 HTML + SVG 파일 하나, 당신의 브랜드로, 45가지 다이어그램 유형, 그림자 없음, Mermaid식 얼렁뚱땅 없음.

마지막 문장이 이 글의 논지입니다. 이 프로젝트는 다이어그램 생성을 더 똑똑하게 만들려는 게 아닙니다. 결과물이 마치 안목 있는 사람이 만든 것처럼 보이게 만들려는 겁니다.

실제로 무엇이 나오나

원하는 다이어그램을 설명하면 에이전트가 인라인 SVG를 넣은 HTML 파일 하나를 씁니다. 그걸 더블클릭하면 끝입니다. 빌드 단계도, 렌더 파이프라인도, 특정 서비스에 대한 의존도 없습니다. 파일은 오프라인에서 열리고, 5년 뒤에도 똑같이 보입니다.

라이브러리 범위는 정말 넓습니다. 아키텍처와 아키텍처 델타 다이어그램, 배포, 의존성 그래프, UML 클래스, 데이터베이스 스키마, 플로차트, 시퀀스 다이어그램, 상태 머신, 스윔레인, 데이터 플로우에 더해 차트 일습(막대, 선, 산점도, 트리맵, 레이더, 극좌표, 워터폴, 히트맵, 생키)과 구조적 형식(트리, 조직도, 레이어 스택, 벤 다이어그램, 피라미드, 메달리온)까지. 전략과 기획에는 사분면 차트, Wardley 맵, 간트, 타임라인, 칸반, 스토리 맵, 사용자 여정이 있습니다. 공간 표현을 위한 폭발 축측도까지 있습니다.

모든 유형에 정적 변형 세 가지가 붙습니다. 미니멀 라이트, 미니멀 다크, 그리고 완전한 에디토리얼 처리입니다. 작은 불일치 하나를 짚자면, 저장소 제목은 44종이라고 하고 본문은 45종이라고 하며 갤러리 번호는 01부터 44까지입니다. 자기 그리드에 이렇게 집착하는 프로젝트에 오타가 있습니다. 그럴 수 있죠.

이걸 작동하게 만드는 부분: 규칙

공을 들인 곳은 디자인 시스템이고, 그것도 형용사가 아니라 숫자로 말합니다.

다이어그램당 강조색은 하나.강조색은 한두 개 요소로 시선을 끌어오는 데 씁니다. 나머지는 전부 잉크, 페이퍼, 절제된 회색입니다. 이 규칙 하나로 AI 다이어그램을 2016년 대시보드처럼 보이게 하던 시각적 소음의 대부분이 사라집니다.

서체는 세 개, 각자 역할이 있습니다.제목과 이탤릭 주석에는 Instrument Serif. 노드 이름에는 Geist 산세리프. 포트, URL, 필드 타입 같은 기술적 하위 레이블에는 Geist Mono. 기술적 세부를 모노로 짓는 규칙은 현업 디자이너가 본능적으로 하는 일이고, 생성기는 절대 하지 않는 일입니다.

4픽셀 그리드.모든 좌표, 너비, 간격, 패딩 값은 4로 나눠떨어져야 합니다. 저자는 이것이 결과물이 AI 생성처럼 느껴지지 않게 하는 열쇠라고 말합니다. 맞는 말이고, 이유는 미묘합니다. 어긋남이 바로 단서입니다. 상자 폭이 137픽셀이라는 건 눈치채지 못합니다. 뭔가 이상하다고 느끼기만 하고, 이유는 말하지 못하죠.

헤어라인, 그림자 없음, 모서리 반경 최대 10px.보통 그림자가 하던 일을 테두리가 대신 합니다. 다이어그램이 어떤 면 위에 놓인 물리적 사물인 척하지 않고서요.

정보 밀도 목표는 10점 만점에 4점.대부분의 팀이 저항하고 대부분의 독자가 고마워할 규칙입니다. 명시된 원칙은 이렇습니다. 가장 수준 높은 선택은 대개 삭제다.

접근성도 나중에 덧붙인 게 아닙니다. SVG 출력에는 role="img", aria-labelledby, title/description 요소가 들어가고, 동작 줄이기 설정이 존중되며, WCAG AA 대비(본문 4.5:1, 핵심 표시 3:1)가 CI에서 강제됩니다. 기본 팔레트는 스모키 화이트 종이 위의 제트 블랙과 탠저린입니다.

브랜드 온보딩은 숨은 주인공이다

웹사이트 URL을 넘깁니다. 그러면 색과 글꼴을 긁어와 paper, ink, muted, accent, link라는 의미론적 역할에 매핑합니다. 그리고 충실도 영수증을 건넵니다. 무엇을 추론했고 어디서 짐작했는지 적힌 것입니다.

뒤쪽이 긁어오는 것보다 훨씬 중요합니다. 브랜드 추출 도구는 보통 팔레트만 던져주고 입을 다뭅니다. 추론 과정을 보여주기에, 잘못된 주황색으로 다이어그램 마흔 장을 찍어내기 전에 바로잡을 수 있습니다.

가져오기 경로도 있습니다. Mermaid, draw.io, Excalidraw 파일을 지정하면 그 다이어그램을 이 디자인 시스템으로 다시 그립니다. 다이얼은 네 개, 포맷, 크기, 디테일, 독자. 여기에 충실도 원장이 붙습니다. Mermaid 차트로 가득한 위키를 옮기는 일이 바로 이 도구가 만들어진 이유입니다.

어디에 맞고, 어디에 안 맞나

설치는 일부러 지루하게 만들었습니다. Agent Skills를 읽는 환경이라면 npx skills add cathrynlavery/diagram-design. Claude Code, Codex, GitHub Copilot, Factory Droid는 플러그인 마켓플레이스 명령을 씁니다. Cursor, Cline, Gemini CLI, Windsurf, Amp, Zed, Kiro, OpenCode는 심볼릭 링크나 하위 디렉터리 임포트를 씁니다. 내보내기, 가져오기, 프로파일링, doctor 점검용 슬래시 명령도 있습니다.

저자는 한계를 시원하게 밝히고, 그 한계선도 적절합니다.

품질은 모델에 달려 있습니다. 같은 프롬프트가 서로 다른 레이아웃 두 개를 낼 수 있습니다. 받는 것이 템플릿 채우기가 아니라 생성된 기하이기 때문입니다. 편집 가능한 소스는 없습니다. 끌어다 놓을 캔버스도, 풀 리퀘스트에서 diff를 뜰 텍스트도 없습니다. 매주 바뀌는 문서에는 Mermaid를 권합니다. diff가 되고, GitHub가 기본으로 렌더링하며, 그게 예쁜 것보다 값어치가 있습니다.

그리고 더 많은 도구 저자가 물어야 할 질문을 던집니다. 독자가 이 다이어그램에서 한 문단에서 얻는 것보다 많은 것을 얻을까? "다이어그램"이 라벨 붙은 상자 하나라면, 문장을 쓰세요. 두 목록을 비교하는 중이라면 표를 쓰세요. 터미널용 ASCII 아트를 원한다면, 이 도구가 아닙니다.

결과물은 파일이지 서비스가 아니다

여기 설계 결정 하나는 해가 갈수록 더 영리해 보일 겁니다. 산출물은 인라인 SVG를 품은 HTML 파일 하나이고, 오프라인에서 열립니다. 계정도, 임베드 스크립트도, 다음 분기에 API 값을 올릴지 모르는 벤더에 대한 의존도 없습니다. 저장소에 넣고, 티켓에 첨부하고, 인쇄하고, 잠긴 노트북을 쓰는 고객에게 메일로 보내면 됩니다.

다이어그래밍 SaaS가 인수된 뒤 계속 나빠지는 걸 지켜본 사람에게 이건 작은 기능이 아닙니다. 아티팩트와 구독의 차이입니다.

대가는 캔버스 편집하듯 고칠 수 없다는 점입니다. 드래그 앤 드롭도, 레이어 패널도, 실행 취소 스택도 없습니다. 레이아웃이 틀렸다면 다시 생성하거나 좌표를 직접 고쳐야 합니다. 그리고 모든 것이 4px 그리드 위에 있기 때문에 손편집이 어떻게든 버팁니다. 자유 형식 문서였다면 불가능했을 일입니다.

10분 만에 다이어그램 스킬을 판별하는 법

모양이 까다로운 걸 요청해 보세요. 분명히 중요한 노드 하나, 이를 받치는 서비스 셋, 그리고 모두가 잊고 있는 데이터베이스 하나가 있는 시스템 말입니다. 좋은 결과물은 그 하나뿐인 강조색으로 중요한 노드를 표시하고 나머지는 뒤로 물립니다. 나쁜 결과물은 전부에 색을 칠합니다. 우선순위가 없을 때 전부에 색을 칠하는 게 생성기가 하는 짓이니까요.

그다음 같은 다이어그램을 두 번 요청하세요. 결과가 똑같으면 템플릿을 보고 있는 겁니다. 다르면 생성을 보고 있는 것이고, 그게 더 정직하며 어떤 모델을 쓰느냐가 중요한 이유이기도 합니다.

마지막으로 숫자를 보세요. 간격을 세어 보세요. 4의 배수가 아니라면 제약이 무시되고 있는 것이고, 디자인 시스템의 나머지도 아마 그럴 겁니다.

진짜 논쟁거리

이 프로젝트에는 스타일 프롬프트 하나로 끝났을 버전도 있었을 겁니다. "에디토리얼하게, 그림자 없이, 미니멀하게." 그 버전은 일관성 없는 쓰레기를 냈을 겁니다. 프롬프트는 노드 마흔 개짜리 아키텍처 다이어그램을 만나면 버티지 못하니까요.

Diagram Design이 흥미로운 이유는 안목을 기계가 검사할 수 있는 제약으로 부호화한다는 점입니다. 4로 나눠떨어짐, 강조색 하나, 서체 셋, 대비율, 그림자 없음. 미학은 모델 안에 있지 않습니다. 스펙 안에 있습니다.

이건 스킬 자체보다 이식성이 좋은 발상입니다. 다이어그램이든 슬라이드든 표지든 썸네일이든, 비주얼을 생성할 때 무엇을 쓰든, "디자인된 것"으로 읽히는 결과와 "생성된 것"으로 읽히는 결과의 차이는 대개 누군가 귀찮음을 무릅쓰고 적어둔 짧은 규칙 목록입니다.