글에 맞는 삽화 만들기 · 소흑 손그림
글의 핵심을 순백 손그림 한 장으로. 소흑 캐릭터, 스타일 규칙, 만드는 흐름, studio.soluta 결로 맞추기.
글 한 편에서 핵심 내용을 골라 순백 배경의 손그림 삽화로 만드는 방법을 다룹니다. 결과물은 흰 종이에 손으로 그려 설명하는 스타일의 그림입니다. 상업 일러스트나 PPT 인포그래픽과는 다른 용도입니다.
한 줄 요약
글의 핵심 판단 하나를 골라, 소흑이 그 동작을 직접 하는 손그림 한 장으로 만듭니다. 배경은 순백, 색은 최소, 라벨은 짧게.
처음 쓰는 법
방법은 두 가지입니다. 스킬을 설치해 쓰거나, 프롬프트 템플릿만으로 씁니다.
길 1 · 스킬로 쓰기. Claude Code나 Codex에 ian-xiaohei-illustrations 스킬을 추가하면 슬래시 명령으로 부릅니다. 글을 붙여넣고 이렇게 시작합니다.
/ian-xiaohei-illustrations
먼저 생성하지 말고, 이 글에 어디가 그림이 필요한지 분석해서 5장짜리 shot list만 주세요.
[글 본문 붙여넣기]길 2 · 프롬프트만으로. 스킬 없이도 됩니다. 아래 프롬프트 템플릿을 채워 이미지 생성 도구(Nano Banana, GPT Image 등)에 그대로 넣습니다. 이 수업의 예시 여섯 장이 그렇게 만든 것입니다.
첫 시도는 세 단계로.
- 자기 글 한 편을 고릅니다(뉴스레터·블로그·수업안 아무거나).
- 생성 전에 shot list 5장을 먼저 받습니다. 무난한 장면으로 채우지 말고, 이해가 막히는 지점만 고르라고 합니다.
- 그중 가장 강한 한 장만 실제로 생성합니다. 마음에 들면 그때 나머지를 늘립니다.
한 번에 여러 장을 뽑는 것보다, 한 장을 제대로 뽑아보는 게 감을 빨리 잡는 길입니다.
소흑이 누구인가
소흑(小黑)은 검은 실루엣에 흰 점 두 개가 눈인 작은 캐릭터입니다. 표정은 없고, 다리는 가늘고, 자세는 진지합니다.
소흑은 구석에 붙는 장식이 아니라 그림의 핵심 동작을 직접 수행하는 주체입니다. 정보를 길어 올리거나, 버튼을 누르거나, 다리를 건너는 식입니다.
스타일 DNA
채널이 바뀌어도 고정되는 규칙입니다.
| 요소 | 규칙 |
|---|---|
| 화면비 | 16:9 가로 |
| 배경 | 순백. 텍스처·그라데이션·빈티지 효과 없음 |
| 선 | 얇은 손그림. 살짝 떨림. 벡터처럼 반듯하거나 굵은 아웃라인 금지 |
| 여백 | 최소 35%. 빈 공간 하나는 꼭 남김. 주체는 화면 60% 이하 |
| 라벨 | 한 장에 5 |
색은 네 가지만 아껴 씁니다. 적을수록 좋습니다.
- 검정 — 주체·구조·글자·주요 사물
- 주황 — 흐름·경로·화살표·A에서 B로
- 빨강 — 문제·경고·결과·중요한 순간
- 파랑 — 보조 설명·내부 상태·시스템 상태 (없어도 됨)
언제 쓰고, 언제 안 쓰나
쓰기 좋은 곳 — 글의 판단·워크플로우·전후 비교·상태 변화·개념 은유. 읽는 사람의 이해를 실제로 돕는 지점.
안 맞는 곳 — 예쁜 표지, 감성 사진, 정밀한 UI 스크린샷, 격식 있는 플로우차트. 이런 건 다른 도구가 낫습니다.
피할 스타일: 상업 일러스트, PPT 인포그래픽, 귀여운 캐릭터툰, 반들반들한 플랫 디자인, 복잡한 배경. 그림 안에 다이어그램 종류 이름을 써 넣지 않습니다.
만드는 흐름
한 번에 여러 장을 뽑지 않고 아래 순서로 진행합니다.
- 내용 소화. 글에서 핵심 주장, 글만으로는 이해가 어려운 지점, 그림이 있으면 이해가 쉬워지는 부분을 찾습니다. 장식용 그림은 뺍니다.
- shot list. 생성 전에 4
8장 계획을 먼저 씁니다. 짧은 글은 13장. 9장을 넘기지 않습니다. 각 항목에 위치·주제·구도·소흑의 역할·라벨(2~5단어)을 적습니다. - 한 장씩 생성. 프롬프트에 늘 넣습니다. “16:9 가로, 순백 배경, 검은 손그림 선, 최소한의 색 주석, 캐릭터가 핵심 동작 수행, PPT 느낌 금지.”
- QA. 아래 체크리스트로 검수합니다.
구도 8패턴
매번 새 은유를 발명하되, 막힐 때는 이 8개에서 고릅니다.
- 워크플로우 — 입력 → 처리 → 출력 (콘텐츠 생산, 자동화 사슬)
- 시스템 부분 — 정보원·필터·DB·에이전트 하위 모듈 3~5개
- 전후 비교 — 어수선함에서 정돈, 수동에서 자동, 흩어짐에서 모임
- 캐릭터 상태 — 사용자의 불편한 점을 2~4장 연속 상태로
- 개념 은유 — 추상 시스템을 큰 사물·기계 하나로. 입력 최소, 출력 하나
- 단계 쌓기 — 쌓은 상자로 프레임워크·계층을 표현 (피라미드 아님)
- 지도 경로 — 개념에서 출시까지, 몇 개의 경유지가 있는 곡선 길
- 연속 컷 — 2~4컷으로 전후 변화나 과정을 보여줌
기존 예시를 복제하지 말고, 이번 글에 맞는 은유를 새로 만듭니다. 물리적 동작, 익숙한 사물, 소흑의 동작으로 표현합니다.
studio.soluta 결로 맞추기
원본 스킬을 그대로 쓰기 전에 두 가지를 손봅니다.
색을 우리 토큰으로. 원본의 빨강·주황·파랑은 강합니다. studio.soluta 화면에 얹을 삽화라면 강조색을 moss #697C70 계열로 바꾸고, 나머지는 검정·순백으로 두는 편이 톤에 맞습니다. 색은 링크·강조처럼 아껴 씁니다.
한글 라벨은 따로 검수. AI 이미지 생성은 한글 글자를 자주 깨뜨립니다. 라벨을 한글로 넣을 땐 렌더링을 반드시 확인하고, 깨지면 영문 짧은 단어로 바꾸거나 라벨을 빼고 도형으로 말하게 합니다.
이 두 가지만 지키면 소흑 삽화는 순백·미니멀·의도적 불완전성이라는 우리 원칙과 잘 맞습니다.
실습 · 프롬프트 템플릿
아래 빈칸을 채워 한 장씩 생성합니다.
16:9 가로 손그림 삽화. 순백 배경. 얇고 살짝 떨리는 검은 펜 선. 넓은 여백.
주제: [글의 핵심 판단]
구도: [8패턴 중 하나 + 소흑이 하는 동작]
핵심 요소: [사물/구조 3~4개]
라벨: [2~5단어 짜리 5~8개]
소흑(작은 검은 캐릭터, 흰 점눈, 가는 다리)이 핵심 동작을 직접 수행.
금지: 그라데이션, 그림자, 사실적 UI, 귀여운 마스코트, PPT 느낌.자기 글(뉴스레터·블로그·수업안) 한 편을 골라 shot list 5장을 먼저 씁니다. 그중 가장 강한 한 장만 실제로 생성해 봅니다. 무난하게 채우지 말고, 이해가 막히는 한 지점만 그립니다.
QA 체크리스트
- 16:9 가로인가
- 배경이 깨끗한 순백인가
- 소흑이 있는가
- 소흑이 장식이 아니라 핵심 동작을 하는가
- 기존 예시 복제가 아니라 이번 글의 새 은유인가
- 조금 이상하면서도 1초 안에 구조가 읽히는가
- 주체가 화면 60%를 넘지 않는가
- 한 장이 한 구조만 말하는가
- 라벨이 짧고 깨지지 않고 읽히는가
- 색을 규칙대로(강조만) 썼는가
한 항목이라도 걸리면 다시 생성합니다. 흔한 수정: 소흑을 동작의 주체로 만들기, 요소 줄이기, 귀여움 빼기, PPT 서식 없애기, 핵심 사물 바꾸기.
자주 하는 실수
- 소흑이 구석에 마스코트로 앉아 있음 → 동작의 주체로
- 요소가 너무 많음 → 한 장 한 구조로 줄임
- 왼쪽 위에 제목·밑줄이 박힘 → 제거
- 배경에 텍스처·그림자 → 순백으로
- 긴 문장 라벨 → 2~5단어로
예제 시리즈
같은 규칙으로 구도 패턴을 하나씩 바꿔가며 직접 생성한 여섯 장입니다. 복제할 템플릿이 아니라, 어떤 글에 어떤 구도가 맞는지 감을 잡는 참고입니다. 여섯 장 모두 한글 대신 영문 라벨을 썼습니다.
개념 은유. 추상적인 “정보를 모은다”를 우물 하나로 압축했습니다. 소흑이 두레박을 내리는 동작이 주체입니다. 강조는 두레박 줄에만 moss, 오른쪽에 빈 공간을 남겼습니다.
워크플로우. 입력 → 처리 → 출력을 왼쪽에서 오른쪽으로. 소흑이 어수선한 원자료 뭉치를 손잡이 기계에 넣으면 정돈된 카드 한 장이 나옵니다. 흐름 화살표만 moss.
전후 비교. 왼쪽은 종이에 파묻힌 소흑, 오른쪽은 같은 종이를 상자에 정돈하는 소흑. 가운데 화살표 하나만 moss. 상태 변화가 한눈에 읽힙니다.
캐릭터 상태. 같은 소흑의 세 상태를 나란히. 빈 벽 앞에서 막막 → 종이에 계획 → 결과물을 든 확신. 사용자의 심리 변화를 보여줄 때.
단계 쌓기. 프레임워크·계층을 피라미드가 아니라 쌓은 상자로. 소흑이 맨 위에 서고, 강조하고 싶은 층 하나만 moss 테두리.
지도 경로. 아이디어 전구에서 출시 깃발까지, 경유지 몇 개만 있는 곡선 길을 소흑이 걷습니다. 여정·단계를 말할 때. 길만 moss.
한글이 필요하면 생성 후 렌더링을 확인하고, 깨지면 라벨을 빼거나 영문으로 두는 편이 안전합니다.
출처
미러 저장소는 예시 이미지가 실제로 올라와 있지 않습니다. 실제 출력물은 원본과 제작자 계정에서 확인하는 편이 정확합니다.
W8 허브 · 이전: Figma deep dive: Weave (Config 2026) · 다음: Figma Weave 노드로 상품 상세페이지 만들기