1. 시각화는 왜 하는가

회의에서 누군가 복잡한 프로세스를 설명합니다. 3분째 말로만 설명하는데 아무도 못 알아듣습니다. 그때 한 사람이 화이트보드에 네모 몇 개, 화살표 몇 개를 그립니다. "아, 그거구나." 이게 시각화가 하는 일입니다....

2. 글 vs 그림

"다이어그램으로 만들어주세요." 이 말을 듣자마자 그리기 시작하면 안 됩니다. 먼저 생각해야 할 게 있어요. 이거 진짜 그림이 필요한 건가? 1. 글이 나은 경우 이유를 설명할 때 "왜 이 기술을 선택했는가" — 이...

3. 시각화의 갈래

시각화라고 하면 떠오르는 것들이 많습니다. 플로우차트, 파이 차트, 마인드맵, 지도… 전부 "시각화"지만 하는 일이 다릅니다. 크게 세 갈래로 나뉩니다. 1. 다이어그램 — 구조와 흐름 "이게 어떻게 연결되어 있는가...

1. 스캔 — 5초 안에 일어나는 일

사람에게 다이어그램을 보여주면 처음 5초 동안 세 가지가 일어납니다. 1. "시작점이 어디지?" (1초) 눈이 가장 먼저 하는 일은 어디서부터 읽을지를 찾는 겁니다. 시작점이 명확하면 바로 읽기 시작합니다. 시작점이...

2. 탐색 — 내가 찾는 걸 찾을 수 있는가

스캔이 끝나면 (5초 이후) 사람은 전체를 순서대로 읽지 않습니다. 자기가 관심 있는 부분을 먼저 찾습니다. 1. 사람은 다이어그램을 처음부터 끝까지 안 읽는다 책과 다릅니다. 책은 1페이지부터 읽지만, 다이어그램은...

3. 신뢰 — 이거 믿어도 되는가

스캔하고, 원하는 부분을 찾은 다음, 사람은 마지막으로 이걸 합니다. "이거 맞나?" 자기가 이미 아는 것과 비교합니다. 그래서 틀린 부분이나 빠진 부분이 보이면 — 다이어그램 전체의 신뢰가 떨어집니다. 1. 신뢰가...

1. 시각 변수 — 색·크기·모양의 올바른 사용법

플로우차트를 그릴 때 자연스럽게 하는 행동들이 있습니다. - 시작 노드를 초록색으로 - 분기점을 마름모로 - 중요한 단계를 크게 이걸 "감"으로 하고 있다면 — 이번 글이 그 감을 원리로 바꿔줍니다. 1. 눈이 구분...

2. 정보 밀도 — 빼면 더 잘 보인다

다이어그램을 그리고 나면 뿌듯해서 이것저것 추가하고 싶어집니다. 그라데이션, 그림자, 아이콘, 배경색… 꾸밀수록 정보는 묻힙니다. 1. 핵심 원칙 > 화면에 찍힌 모든 점은 정보를 담고 있어야 한다. 정보 없이 자리...

3. 기호 설계 — 보면 바로 이해되는 기호

◇(마름모)를 보면 "분기구나" 합니다. 🔒를 보면 "잠김이구나" 합니다. 그런데 ★를 보면? "뭐지?" 기호가 좋으면 설명 없이 이해됩니다. 나쁘면 범례를 봐야 합니다. 1. 기호 하나 = 의미 하나 가장 기본적...

4. 체크리스트 총정리

여기까지 읽었으면 기초는 끝입니다. 다이어그램을 만들거나 평가할 때 이 체크리스트만 보면 됩니다. 스캔 (01-1) 시작점과 흐름이 5초 안에 파악되는가? - [ ] 시작점이 1초 안에 보인다 - [ ] 흐름 방향이...

1. 플로우차트 — 언제 쓰는가

플로우차트는 가장 많이 쓰이는 다이어그램입니다. 하지만 모든 상황에 맞는 건 아닙니다. 1. 플로우차트가 맞는 상황 "A 다음에 B, B 다음에 C" — 순서가 있을 때 - 유저 가입 플로우 - 주문 → 결제 → 배...

2. 플로우차트 — 잘 그리는 법

기호를 알았으니 이제 잘 그리는 법입니다. 1. 위에서 아래로 가장 자연스러운 방향입니다. 글을 읽는 방향과 같아서 별도 학습 없이 읽힙니다. 시작 ↓ 단계 1 ↓ 분기? ↓ ↘ Yes No ↓ ↓ 단계 2 단계 3...

3. 플로우차트 — Mermaid

Mermaid는 텍스트(코드)로 다이어그램을 그리는 도구입니다. 마크다운 안에 코드를 적으면 자동으로 그림이 됩니다. 1. 왜 Mermaid인가 - GitHub에 push하면 자동 렌더링 (별도 도구 불필요) - N...

4. 플로우차트 — draw.io

draw.io (diagrams.net)는 드래그 앤 드롭으로 다이어그램을 그리는 도구입니다. 무료이고, 가장 많이 쓰입니다. 1. 왜 draw.io인가 - 완전 무료 + 오픈소스 - 웹(app.diagrams.ne...

5. 플로우차트 — Excalidraw

Excalidraw는 손그림 느낌의 무한 캔버스 화이트보드입니다. "대충 빠르게" 그릴 때 최고입니다. 1. 왜 Excalidraw인가 - 손그림 스타일이라 "초안", "스케치" 느낌이 자연스러움 - 무료 + 오픈소...

6. 플로우차트 — 비교 결과

같은 플로우차트를 세 가지 도구로 만들어봤습니다. 결과 비교입니다. 1. 한눈에 비교 | 항목 | Mermaid | draw.io | Excalidraw | |------|---------|---------|----...

1. 마인드맵 — 언제 쓰는가

플로우차트가 "순서"를 보여준다면, 마인드맵은 "생각을 펼치는" 도구입니다. 1. 마인드맵이 맞는 상황 아이디어를 쏟아낼 때 "이 프로젝트에서 뭘 해야 하지?" — 정리하기 전에 일단 다 꺼내놓을 때. 중심 주제에서...

2. 마인드맵 — 잘 그리는 법

1. 중심 주제를 한 단어로 중심에 놓는 건 한 단어 또는 짧은 문구. 길면 시작부터 무거워집니다. - ❌ "2026년 하반기 실험마켓 마케팅 전략 브레인스토밍" - ✅ "하반기 마케팅" 2. 가지는 37개 대분류가...

3. 마인드맵 — XMind

XMind는 마인드맵 전용 데스크탑 앱입니다. 마인드맵만을 위해 만들어져서 기능이 깊습니다. 1. 장점 - 마인드맵에 최적화된 UI: 엔터로 형제 노드, 탭으로 하위 노드. 키보드만으로 빠르게 작성 - 다양한 레이아...

4. 마인드맵 — Miro

Miro는 무한 캔버스 협업 화이트보드입니다. 마인드맵 전용은 아니지만 마인드맵 기능이 있고, 협업이 강합니다. 1. 장점 - 실시간 협업 최고: 여러 사람이 동시에 편집, 커서가 보임 - 마인드맵 + 다른 것: 같...

5. 마인드맵 — Markmap

Markmap은 마크다운 목록을 마인드맵으로 변환하는 도구입니다. Mermaid의 마인드맵 버전이라고 보면 됩니다. 1. 사용법 마크다운 목록을 쓰면 자동으로 마인드맵이 됩니다. markdown 하반기 마케팅 채널 ...

6. 마인드맵 — 비교 결과

1. 한눈에 비교 | 항목 | XMind | Miro | Markmap | |------|-------|------|---------| | 편집 방식 | 전용 앱 | 웹 화이트보드 | 마크다운 텍스트 | | 가격 |...

1. 컨셉맵 — 언제 쓰는가

마인드맵과 컨셉맵은 비슷해 보이지만 다릅니다. - 마인드맵: 하나의 중심에서 방사형으로 뻗어나감. 계층 구조. - 컨셉맵: 여러 개념이 네트워크로 연결됨. 중심이 없을 수도 있음. 1. 컨셉맵이 맞는 상황 개념 간 ...

2. 컨셉맵 — 잘 그리는 법

1. 핵심: 연결선에 이름 붙이기 컨셉맵에서 가장 중요한 건 연결선 위의 텍스트입니다. 이게 없으면 그냥 동그라미 여러 개가 선으로 연결된 것뿐입니다. [플로우차트] ──보여준다──→ [순서] [마인드맵] ──보여준...

3. 컨셉맵 — 도구 비교

컨셉맵 전용 도구가 따로 있지만, 대부분 범용 도구로 충분합니다. 1. 비교 | 도구 | 적합도 | 이유 | |------|--------|------| | draw.io | 최고 | 노드+화살표+텍스트 자유 배치....

1. 시퀀스 다이어그램

플로우차트가 "무엇을 하는가"를 보여준다면, 시퀀스 다이어그램은 "누가 누구에게 언제 말하는가"를 보여줍니다. 1. 언제 쓰는가 - API 호출 흐름: 클라이언트 → 서버 → DB → 서버 → 클라이언트 - 유저 인...

2. ERD

ERD(Entity-Relationship Diagram)는 데이터가 어떻게 구조화되어 있는가를 보여줍니다. 1. 언제 쓰는가 - DB 테이블 설계할 때 - 기존 데이터 구조를 파악할 때 - "이 데이터는 저 데이터...

3. 타임라인

타임라인은 시간 축을 따라 이벤트를 나열하는 다이어그램입니다. 1. 언제 쓰는가 - 프로젝트 일정 (간트 차트) - 제품 히스토리 ("언제 뭘 출시했는가") - 사건 경위 ("장애가 어떤 순서로 발생했는가") - 로...

1. 상황별 선택 가이드

전부 읽기 귀찮으면 이것만 보세요. 1. 어떤 종류를 쓸까? | 보여주고 싶은 것 | 종류 | 해당 장 | |----------------|------|---------| | 순서와 분기 | 플로우차트 | 03장 |...

2. 우리의 시각화 컨벤션

이 시리즈를 통해 배운 것들을 우리 프로젝트에 적용하는 규칙입니다. 1. 기본 도구 | 용도 | 도구 | 이유 | |------|------|------| | 문서 속 다이어그램 | Mermaid | Git diff...

시각 변수 — 다이어그램은 왜 색이랑 모양이 다를까? draft

플로우차트를 그리다 보면 자연스럽게 하는 행동이 있습니다. - 시작 노드는 초록색, 끝은 빨간색 - 분기점은 마름모, 프로세스는 사각형 - 중요한 단계는 크게, 부수적인 건 작게 이걸 "감"으로 하고 있다면 — 이번...

정보 밀도 — 이 다이어그램에서 뺄 수 있는 건? draft

다이어그램을 그리고 나면 뿌듯해서 이것저것 추가하고 싶어집니다. 그라데이션, 그림자, 아이콘, 배경색… 그런데 꾸밀수록 정보는 묻힙니다. 이번 글은 "뭘 빼야 하는가"에 대한 이야기입니다. 1. 데이터-잉크 비율 E...

작업 마찰 — 이 툴로 수정할 때 얼마나 귀찮은가? draft

좋은 다이어그램을 만들었는데, 다음 날 기획이 바뀌었습니다. 노드를 하나 추가해야 해요. - Mermaid: 코드 한 줄 추가하면 끝 - draw.io: 노드 넣고, 화살표 다시 연결하고, 위치 조정하고… 이 "수정...

도구 사용성 — 이 앱이 쓰기 편한가? draft

지금까지는 다이어그램 자체를 평가하는 기준이었습니다. 이번엔 다릅니다. 다이어그램을 만드는 도구(앱)가 쓰기 편한지를 봅니다. 아무리 좋은 결과물이 나와도, 도구가 불편하면 안 쓰게 됩니다. 1. Nielsen의 1...

기호 설계 — 이 기호를 보고 바로 이해할 수 있는가? draft

플로우차트에서 ◇(마름모)를 보면 "아, 분기구나"라고 압니다. 왜 알까요? 어디서 배운 적도 없는데? 반대로, 어떤 다이어그램에서 ★ 모양 노드가 나오면 "이게 뭐지?" 합니다. 기호가 의미를 얼마나 잘 전달하는가...