코드로 그리는 삽화 — SVG 와 토큰으로 만드는 그림

아티클마다 삽화를 넣기로 정했다고 해 봅시다. 100편이면 삽화 150장입니다. 이것을 그림 파일로 만들면 150개의 자산이 생기고, 그 자산은 브랜드 색이 바뀌는 날 전부 다시 만들어야 합니다. 다크 모드를 넣기로 하면 한 벌이 더 필요합니다.

다른 방법이 있습니다. 삽화를 마크업으로 두고 색은 스타일시트가 입히는 것입니다. 이 글에서 보고 계신 그림들이 정확히 그렇게 만들어져 있습니다.

이미지 파일이 만드는 세 가지 비용

먼저 무엇을 피하려는 것인지 분명히 해 둡니다.

세 번째 항목이 특히 큽니다. 이미지 파일로 만든 삽화는 다크 배경 위에서 흰 사각형으로 뚫려 보이거나, 선이 배경과 같은 톤이 되어 사라집니다. 그래서 다크 모드를 지원하려면 삽화만 두 벌을 유지하게 되고, 그 순간부터 두 벌은 서서히 어긋납니다.

규칙은 하나입니다 — 색을 SVG 안에 넣지 않습니다

구현은 간단합니다. SVG 안에는 좌표와 클래스만 두고, 실제 색은 스타일시트가 디자인 토큰으로 입힙니다.

<!-- 마크업: 좌표와 클래스만. 색 값이 하나도 없다 -->
<svg viewBox="0 0 760 120" role="img" aria-hidden="true">
  <rect class="fig__panel"  x="0"  y="0" width="360" height="80" rx="12"/>
  <rect class="fig__accent" x="400" y="0" width="360" height="80" rx="12"/>
  <text class="fig__label"  x="24" y="46">before</text>
</svg>

/* 스타일시트: 색은 여기서만 정해진다 */
.fig__panel  { fill: var(--surface-alt); }
.fig__accent { fill: var(--brand); }
.fig__label  { fill: var(--ink); font-size: 14px; }

이 구조의 값은 토큰을 바꾸는 순간 모든 삽화가 따라온다는 데 있습니다. 브랜드 색이 바뀌어도, 다크 모드에서 표면 토큰이 뒤집혀도, 삽화 파일은 한 장도 건드리지 않습니다.

반복되는 형태 — 흐름도 · 대조판 · 계층판 — 는 함수로 만들어 두면 더 좋습니다. 인자로 라벨 배열을 넘기면 SVG 문자열이 나오는 식입니다. 그러면 삽화를 그리는 일이 그림 작업이 아니라 데이터 입력이 됩니다.

AI 를 어디에 쓰는가

여기서 AI 가 실제로 도움이 되는 자리는 분명합니다. 좌표 계산과 반복 코드입니다. “다섯 칸짜리 흐름도를 만들되 칸 사이에 화살표를 넣고 마지막 칸만 강조 클래스를 붙여 달라” 같은 요청은 정확히 AI 가 잘하는 종류의 작업입니다. 손으로 좌표를 계산하는 것보다 훨씬 빠릅니다.

반대로 맡기면 안 되는 것도 분명합니다. AI 는 색 값을 넣고 싶어 합니다. 요청하지 않아도 fill="#1abb9c" 같은 속성을 친절하게 채워 넣는데, 그 한 줄이 위에서 만든 구조 전체를 무력화합니다. 프롬프트에 “색 속성을 쓰지 말고 클래스만 붙여 달라” 를 명시하고, 결과물에서 색 값이 남아 있지 않은지 매번 확인하세요.

실무에서 부딪히는 함정 세 가지도 적어 둡니다. 첫째, 출력을 한 줄로 유지합니다 — 워드프레스가 본문을 문단으로 나눌 때 여러 줄로 된 SVG 안에 태그를 끼워 넣어 그림이 깨집니다. 둘째, SVG 안에 글자를 최소화합니다 — 다국어 사이트라면 그림 안의 글자가 전부 번역 대상이 되고, 언어마다 폭이 달라 판이 흔들립니다. 셋째, viewBox 폭을 고정합니다 — 삽화마다 좌표계가 다르면 본문에서 크기 리듬이 무너집니다.

어디까지 이 방식이 맞는가

모든 그림을 코드로 그릴 수는 없습니다. 사진, 복잡한 일러스트, 실제 화면 캡처는 이미지 파일이 맞습니다. 이 방식이 강한 자리는 구조를 설명하는 그림 — 흐름 · 비교 · 계층 · 체크리스트입니다. 그리고 기술 콘텐츠를 쌓는 사이트에서는 필요한 삽화의 대부분이 여기에 속합니다.

디자인 토큰을 처음부터 설계하는 방법은 디자인 토큰 연재에 있고, AI 를 작업 도구로 쓰는 다른 방식은 AI 활용 아카이브에 모여 있습니다. 우리가 만들어 공개한 도구들은 무료 도구 페이지에서 볼 수 있습니다.