글 쓰는 즐거움을 위해 직접 만든 세 개의 도구: 에디터, 스튜디오, 차트 에디터

왜 도구부터 만들었나

이 블로그를 시작할 때, 머릿속에 가장 먼저 떠오른 건 “어떻게 글을 쓸까” 가 아니라 “어떻게 보여줄까” 였다. 시각화 자료, 다이어그램, 다양한 형태의 소개 자료를 한곳에 모으는 공간이 갖고 싶었고, 그러려면 단순히 마크다운만 잘 렌더링하는 정적 사이트로는 부족했다.

그래서 두 가지 방향으로 도구를 키워나갔다.

1. 글 쓰는 과정 자체를 쉽게 만들기, 매번 VSCode 를 열고 frontmatter 를 손으로 채우고 이미지 경로를 신경 쓰는 건 곧 피로가 된다. 글이 잘 써지지 않는 가장 큰 이유는 영감 부족이 아니라 마찰이다.
2. 시각화·애니메이션·차트를 일급 시민으로, 그래야 같은 주제도 더 직관적으로 설명할 수 있고, 위키 페이지를 점진적으로 키워나가는 흐름과도 맞다. 위키는 내가 모르는 분야라도 AI 의 도움으로 작은 조각을 모으고, 시각 자료를 곁들여 키워가고 싶었다.

그 결과 Astro 기반 블로그 안에 세 가지 개발 모드 전용 도구 가 자라났다.

도구	라우트	역할
콘텐츠 에디터	/_editor	마크다운 작성, 미리보기, 자산 관리, Git
애니메이션 스튜디오	/_studio	SVG 기반 인터랙티브 애니메이션 제작
차트 에디터	/_chart-editor	Chart.js 차트 시각 편집 + MDX 코드 추출

세 도구 모두 같은 모토를 공유한다, “도구가 글의 모양을 결정한다”. 좋은 도구는 새로운 형태의 글을 쓰게 만든다.

---

1. 콘텐츠 에디터 (/_editor)

가장 자주 쓰는 도구. 글, 위키, 노트, 출처 자료를 모두 여기서 작성한다.

화면을 펼치면 세 칸이다. 왼쪽은 컬렉션별 파일 트리, 가운데는 마크다운 작성 영역과 툴바, 오른쪽은 분할 미리보기. 글이 자라는 모양을 실시간으로 보면서 쓸 수 있다.

1.1 파일 트리, 단순한 탐색기가 아니다

좌측 사이드바는 posts, wiki, notes, sources 네 컬렉션을 그대로 보여준다. 폴더는 펼치고 접을 수 있고, 그 상태는 localStorage 에 저장돼서 다음번 페이지를 열어도 유지된다.

• 검색 입력 : 파일 이름으로 즉시 필터, ESC 로 초기화
• 우클릭 메뉴 : 새 파일, 새 폴더, 이름 변경, 삭제, 이동
• 드래그-드롭 이동 : 폴더 사이로 파일을 끌어서 옮길 수 있다
• 세션 복원 : 마지막으로 열었던 파일을 자동으로 다시 열고, 커서/스크롤 위치까지 복원

1.2 마크다운 툴바, 37개 버튼의 의미

툴바는 “마크다운 문법을 외우지 않아도 글을 쓸 수 있게” 가 목표였다. 그래서 자주 쓰는 모든 형태를 버튼으로 빼놓았다.

그룹	버튼
텍스트 포맷	굵게 (⌘B), 기울임 (⌘I), 취소선, 인라인 코드
링크·미디어	링크 (⌘K), 이미지, URL 미리보기, URL ↔ 카드 토글
헤딩	H1, H2, H3
리스트·인용	목록, 번호 목록, 할 일, 인용
코드·표	코드 블록, 표, 구분선
콜아웃 ▾	Note, Tip, Important, Warning, Caution
CodeWithOutput ▾	단일 언어, 멀티 언어 (variants)
Mermaid ▾	Flowchart, Sequence, State, Class, ER Diagram
🎬 Animation ▾	스튜디오에서 만든 애니메이션 검색·삽입
Frontmatter ▾	커버·썸네일·시리즈·카테고리·태그·출처 관리
위키링크	이중 대괄호 문법의 위키 페이지 링크 삽입

콜아웃 드롭다운을 열면 GitHub 스타일 5종이 한눈에 들어온다.

Mermaid 드롭다운도 마찬가지다. Flowchart 부터 ER Diagram 까지 자주 쓰는 다섯 가지가 템플릿으로 들어있다.

Frontmatter 드롭다운은 글 메타데이터를 본문 위로 끌어오지 않고 바로 편집할 수 있게 해준다. 커버 이미지, 썸네일, 시리즈, 카테고리, 태그, 출처를 하나의 메뉴에서 다룬다.

1.3 이미지 다이얼로그, 모든 경로를 한 곳에서

이미지 버튼을 누르면 다음 옵션을 한 화면에서 정리한다.

• 용도 : 본문 삽입 / 커버 이미지 / 썸네일
• 이미지 소스 : 파일 업로드 (or 클립보드 붙여넣기) / 외부 URL 다운로드 저장 / 외부 URL 그대로 사용
• 대체 텍스트 : a11y/SEO 를 위해 필수
• 너비 : 원본·25%·50%·75%·100% 또는 직접 입력
• 정렬 : 기본 (인라인) / 왼쪽 / 가운데 / 오른쪽

업로드한 파일은 public/uploads/ 에 타임스탬프 + 랜덤 슬러그로 저장되고, frontmatter 의 커버를 고르면 자동으로 cover / coverAlt 가 채워진다.

1.4 Git 패널, 에디터를 떠나지 않는다

상단 ”🌿 Git” 버튼을 누르면 변경 사항을 그대로 다룰 수 있다. 브랜치를 갈아끼우거나 stash 를 관리하는 일까지 모두 같은 화면에서 끝낸다.

지원하는 작업은 아래와 같다.

• 현재 브랜치 표시, 앞/뒤 커밋 카운트 (↑/↓)
• 파일별 상태 배지 : 수정 / 추가 / 삭제 / 이름변경 / 추적 안 됨 / 충돌
• 체크박스로 스테이징, amend 옵션 포함 커밋
• 브랜치 전환 / 새 브랜치 생성
• Stash 목록 보기·적용
• Push / Pull
• 파일별 diff 보기

1.5 자주 쓰는 단축키

단축키	동작
⌘S	파일 저장
⌘B / ⌘I / ⌘K	굵게 / 기울임 / 링크
⌘F	현재 파일 안에서 찾기·바꾸기 (정규식/대소문자 지원)
⌘⇧F	전체 컬렉션 grep 검색
⌘Z / ⌘⇧Z	실행 취소 / 다시 하기
[[	위키링크 자동완성 (최대 12개 결과)
ESC	검색 초기화, 메뉴 닫기

1.6 잘 안 보이지만 매일 도움되는 것들

• 드래그-드롭 이미지 : Finder 에서 textarea 위로 끌어오면 자동 업로드
• 클립보드 붙여넣기 이미지 : 스크린샷 직후 ⌘V 한 번으로 본문에 삽입
• 자동 리스트 계속 : 리스트 안에서 Enter 치면 다음 줄도 같은 들여쓰기
• 스크롤 동기화 : 편집 영역과 미리보기 영역이 함께 스크롤
• .md ↔ .mdx 토글 : 차트 같은 JSX 가 필요한 순간 한 번에 변환

---

2. 애니메이션 스튜디오 (/_studio)

말로 설명하기보다 움직임으로 보여주는 게 빠른 개념들이 있다. BFS 의 큐가 어떻게 비워지는지, async 콜백이 어떤 순서로 큐를 옮겨다니는지, TCP 핸드셰이크의 세 메시지가 어떻게 오가는지. 그런 장면을 위해 만든 SVG 애니메이션 에디터다.

화면은 네 구역으로 나뉜다.

• 왼쪽, 요소 추가 패널 + 캔버스 크기 프리셋
• 가운데, 800×500 기본 캔버스 (프리셋으로 변경 가능)
• 오른쪽, 선택한 요소의 속성 패널 (선택 없으면 애니메이션 메타)
• 아래, 챕터 / 키프레임 / 요소별 트랙이 있는 타임라인

2.1 요소 타입 9종

캔버스에 그릴 수 있는 모든 도형이다. 모두 SVG 로 직접 렌더링되므로 결과물은 어디서든 깨지지 않는다.

타입	핵심 속성	비고
Rect	x / y / width / height / cornerRadius	라벨 텍스트 내장, 모서리 라운드
Circle	cx / cy / r	라벨 텍스트 내장
Line	x1 / y1 / x2 / y2	양 끝점을 요소에 sticky 가능
Arrow	x1 / y1 / x2 / y2 + arrowHead	앵커 시스템으로 요소 연결
Text	x / y / content / fontSize / color	캔버스에서 더블클릭으로 inline 편집
Image	x / y / width / height / src	업로드·드래그-드롭·붙여넣기로 추가
Path	d (SVG path)	임의 곡선·다각형
Polygon	points	정다각형/꼭지점 직접 지정
Group	childIds	여러 요소를 하나로 묶음 (⌘G / ⌘⇧G)

2.2 요소 추가, 한 번의 클릭

좌측 패널의 버튼을 누르면 해당 타입의 요소가 캔버스 중앙에 즉시 생성되고, 타임라인에 자동으로 트랙이 깔린다. 새로 추가된 요소는 곧바로 선택 상태가 되어 우측 속성 패널에서 바로 다듬을 수 있다.

2.3 속성 패널, 모든 디테일을 한 곳에서

요소를 선택하면 우측 패널이 그 요소 전용 속성으로 바뀐다. Rect 라면 위치·크기·코너 라운드·채우기·테두리·라벨·회전이 한 화면에 들어온다.

값을 바꾸면 캔버스가 즉시 갱신된다. 색상 같은 시각 속성은 패널 안의 컬러 픽커로 다루고, 결과는 한 박자도 늦지 않게 반영된다.

타입별로 노출되는 속성도 의도적으로 다르다. Circle 은 cx/cy/r, Line/Arrow 는 x1/y1/x2/y2, Text 는 content/fontSize/color/fontWeight/textAnchor. 굳이 안 보이는 속성을 보여주지 않는 쪽이 잘못 누를 일이 적다.

2.4 캔버스, 그리는 공간

캔버스 자체에도 사소하지만 자주 쓰이는 도구가 붙어 있다.

• 프리셋 6종 캔버스 크기 : 8:5 (800×500), 16:9 (1280×720), 4:3 (1024×768), 1:1 (600×600), 3:1 (1200×400), 모바일 9:19 (375×812)
• 격자 + 스냅 : G 키로 토글, 8px 단위
• 줌 : ⌘ + 휠 스크롤로 캔버스 자체를 확대 / 축소
• 팬 : Space + 드래그 (Figma 와 같은 손바닥 도구)
• 선택 핸들 : 8방향 리사이즈 + 위쪽 회전 핸들 + 앵커 포인트
• 인라인 텍스트 편집 : 텍스트 요소를 더블클릭하면 캔버스 위에서 바로 타이핑
• 드래그-드롭 이미지 : Finder 에서 캔버스로 끌어오면 자동 업로드 후 배치

2.5 다중 선택과 정렬·분배

여러 요소를 한 번에 다루는 일이 잦아서 별도 도구 모음을 붙였다. ⌘ + 클릭이나 마퀴 드래그로 2개 이상을 골라두면 속성 패널이 다중 선택 모드로 바뀐다.

• 정렬 6종 : 왼쪽 / 가운데(수평) / 오른쪽 / 위 / 가운데(수직) / 아래
• 분포 2종 : 가로 간격 균등 / 세로 간격 균등 (3개 이상 선택 시)
• 함께 이동 : 캔버스 드래그나 화살표 키 한 번으로 선택된 모든 요소가 같은 양만큼 이동

2.6 그룹화, 함께 움직이는 요소

여러 요소를 ⌘G 로 묶으면 하나의 group 요소로 합쳐진다. 그룹은 자체적으로 위치/크기가 없는 대신 자식 요소들의 bounding box 를 따라간다.

• 그룹 / 그룹 해제 : ⌘G / ⌘⇧G
• 드릴 인 : Alt+클릭으로 그룹 안의 개별 자식을 직접 선택
• 그룹 단위 이동 : 화살표 키 / 드래그가 자식 전체에 동일하게 적용
• 자식 목록 : 속성 패널에서 직접 확인하고 클릭으로 점프

2.7 타임라인과 챕터, 시간의 모양

스튜디오의 두 번째 본체는 타임라인이다. 모든 요소는 시간축 위에 트랙으로 존재하고, 그 위에 챕터·이펙트·키프레임이 얹힌다.

• Chapter : 의미 단위로 시간을 자른다. 라벨 + 시간 + 길이를 가지며, 선택 후 ←/→ 로 ±100ms, Shift + 로 ±1000ms 미세 조정
• Effect 3종 : highlight, pulse, flow 로 특정 시점에 요소를 강조
• Keyframe Track : 요소 속성별로 시간축에 키프레임을 찍고 드래그로 타이밍 조정
• 재생 컨트롤 : Play/Stop, Reset, 0.25 ~ 3x 속도 슬라이더
• 타임라인 줌 : ⌘ + 휠 로 pxPerMs 조정 (값은 localStorage('studio.timeline.pxPerMs') 에 저장)

2.8 재생, 의도한 움직임을 확인

Play 버튼을 누르면 캔버스가 정의된 순서대로 요소를 등장시킨다. Entry/Exit 모드는 instant, fade, slide-left/right/up/down, zoom, pop 8종이 기본 제공되고, 각각 등장 시간을 따로 줄 수 있다.

만든 애니메이션은 loop, autoplay, showCaption, showChapterList 같은 메타 설정과 함께 JSON 으로 저장돼, 블로그 본문 어디에든 한 줄로 끼워 넣을 수 있다.

2.9 아이콘 라이브러리, 1856개

처음에 아이콘이 필요할 때마다 svg 를 손으로 가져다 붙였는데, 그게 쌓이다 보니 결국 카테고리별 아이콘 라이브러리가 됐다.

분류는 클라우드 (AWS / GCP / Azure / Cloud), 데이터 (DB), 언어 (Lang), 프론트·백 (FE / BE / Tool / Net), 모델링 (ERD / Arrow / Doc / Device), 의사소통 (Comm), 행위 (Action), 도형 (Chart / Shape), 사람 (User), 미디어 (Media), 금융 (Finance / Crypto), 기호 (Symbol), 그리고 외부 아이콘 세트인 Tabler 166개와 Lucide 294개.

검색창에 키워드만 넣으면 즉시 필터된다.

선택한 아이콘은 SVG path 로 캔버스에 들어가서, 색상·크기·회전 같은 일반 도형 속성을 그대로 받는다.

2.10 명령 팔레트, ⌘K

자주 쓰는 명령을 손 가까이 두고 싶어서 만든 작은 검색 인터페이스. 명령 / 요소 / 태그 / 도움말 네 종류를 한 입력창에서 다룬다.

• 명령 : 라이브러리 열기, 새 애니메이션, 저장, 삭제, 실행 취소 / 다시 실행, 작업 이력, 재생 / 정지, 격자 토글, 단축키 보기
• 요소 검색 : 캔버스에 있는 요소의 이름·라벨·id·타입을 한 번에 훑어서 즉시 선택
• 태그·도움말 : 보다 가벼운 검색을 위한 채널

2.11 작업 이력, 시간을 되돌리는 길

⌘⇧H 를 누르면 작업 이력 패널이 열린다. 단순한 undo/redo 보다 한 단계 위, 모든 변경 사항이 의미 단위로 라벨링돼 있어서 과거의 한 시점을 골라 거기로 점프할 수 있다.

• 현재 위치 : 패널 상단에 분명한 구분선 + 라벨
• 과거 항목 : 클릭하면 그만큼 undo 된 상태로 이동
• 미래 항목 : 클릭하면 redo (현재가 미래의 한 시점이라면)
• 라벨링 규칙 : 이동: client, Chapter 추가: ..., 요소 추가: rect 식으로 도메인 + 대상 + 키
• HistoryKind : 메타 / 추가 / 삭제 / 이동 / 스타일 / 회전 / 리사이즈 등 12 종으로 색상 구분

2.12 단축키와 도움말

? 키를 누르면 자주 쓰는 단축키가 한 화면에 모인다.

전체 단축키 요약 :

단축키	동작
⌘S	저장
⌘Z / ⌘⇧Z	실행 취소 / 다시 하기
⌘C / ⌘V / ⌘X	복사 / 붙여넣기 / 잘라내기
⌘D	복제
⌘A	전체 선택
⌘G / ⌘⇧G	그룹화 / 그룹 해제
⌘K	명령 팔레트
⌘⇧H	작업 이력
G	격자 토글
Space + 드래그	캔버스 팬
⌘ + 휠	캔버스 줌
방향키	±1px 이동 (Shift 와 함께 ±10px)
Tab / ⇧Tab	요소 순환
Delete / Backspace	선택 요소 삭제
? / ⇧?	도움말

2.13 데이터 모델

스튜디오에서 만든 모든 애니메이션은 결국 하나의 JSON 으로 직렬화된다.

type AnimationDef = {
  id: string;
  title: string;
  description: string;
  duration: number;       // ms
  canvas: { width, height, background };
  settings: {
    loop, autoplay,
    showCaption, showChapterList
  };
  elements: AnimationElement[];   // rect | circle | ... | group
  chapters: Chapter[];
  effects: AnimationEffect[];     // highlight | pulse | flow
  version: 3 | 4;
};

public/animations/*.json 에 저장된 파일은 본문에서 다음과 같이 호출한다.

```anim:bfs
{}
```

version 을 두 가지로 유지하는 건 의도적이다. v3 시절 만든 29개 파일이 그대로 로드되고, v4 에서 추가한 group 타입은 옵셔널이라 옛 파일을 깨뜨리지 않는다. 새 타입이 더해질 때마다 union 에 한 줄 더하고, 마이그레이션 헬퍼를 옆에 두는 식으로 키워간다.

---

3. Chart.js 에디터 (/_chart-editor)

벤치마크 결과, 성능 비교, 분포 같은 글에서는 차트 한 장이 표 열 개보다 빠르다. 그래서 Chart.js 차트를 만들어 MDX 본문에 붙여넣을 수 있는 작은 에디터를 따로 만들었다.

좌측에서 값을 바꾸면 우측 미리보기가 200ms 디바운스 후 다시 그려지고, 동시에 아래쪽 MDX 코드 패널에 본문에 붙여넣을 수 있는 <ChartJs /> 스니펫이 갱신된다.

3.1 지원 차트 타입

내장 컴포넌트 (<ChartJs />) 는 Chart.js 의 8종 차트를 모두 지원하고, 에디터 UI 는 그중 자주 쓰는 6종을 드롭다운으로 제공한다.

차트	에디터	축
Bar	✅	✅
Line	✅	✅
Pie	✅	-
Doughnut	✅	-
Radar	✅	-
Scatter	✅	✅
Bubble	(수동 작성)	✅
Polar Area	(수동 작성)	-

3.2 5개 내장 템플릿

처음부터 빈 JSON 을 채우는 건 피곤하다. 그래서 자주 쓰던 형태 다섯 가지를 템플릿 버튼으로 빼놨다.

템플릿	용도 예시
Line (기본)	시계열, 단순 트렌드
Bar (비교)	A vs B 처럼 두 값 비교
Line (Log Scale)	자릿수가 큰 값 비교 (scales.y.type: 'logarithmic')
Horizontal Bar	라벨이 긴 값들의 순위 비교 (indexAxis: 'y')
Pie	비율 표시

Pie 템플릿을 누르면 즉시 미리보기와 MDX 코드가 함께 바뀐다.

3.3 자동으로 신경 써주는 것들

• 테마 자동 대응 : <html class="dark"> 가 토글되면 MutationObserver 가 감지해서 축 라벨·그리드 색상을 즉시 갱신
• 자동 옵션 병합 : responsive, maintainAspectRatio: false, 범례 위치·폰트, 그리드 색상 등은 컴포넌트가 자동으로 채움
• 인스턴스 재사용 : 타입이 바뀔 때만 차트 인스턴스 재생성, 나머지는 chart.update() 로 부드럽게 갱신
• JSON 파싱 에러 표시 : data 와 options 각각 별도 에러 메시지

3.4 본문에서 사용하기

MDX 파일에서는 import 없이 바로 사용할 수 있다 (astro-auto-import 가 모든 MDX 에 자동 주입).

<ChartJs
  client:visible
  type="bar"
  title="프로세서 메모리 대역폭"
  caption="DDR5 대비 HBM3e 는 약 90배"
  height="280px"
  data={{
    labels: ['DDR5', 'LPDDR5X', 'H100', 'B200'],
    datasets: [{
      label: 'GB/s',
      data: [89, 100, 3350, 8000],
      backgroundColor: ['#3b82f6', '#9333ea', '#16a34a', '#dc2626'],
      borderRadius: 6
    }]
  }}
  options={{
    indexAxis: 'y',
    plugins: { legend: { display: false } },
    scales: { x: { type: 'logarithmic' } }
  }}
/>

3.5 실제 사용 예

차트 에디터로 만든 차트가 실제로 들어가 있는 글들 :

• CPU vs GPU vs TPU vs NPU : 수평 막대 + 로그 스케일
• UNION vs OR vs IN 벤치마크 (1) : 다중 시리즈 선 차트
• 브라우저 기반 통신 총정리 : 수평 막대 차트

---

도구가 자라는 방향

세 도구는 모두 “필요해서 만든다 → 자주 쓰니 다듬는다 → 다듬다 보니 새로운 기능이 생긴다” 의 사이클로 자라왔다.

• 에디터 는 단순한 textarea + preview 에서 시작해서 Git 패널, 위키링크 자동완성, 전체 파일 grep 까지 도달했다.
• 스튜디오 는 너비 우선 탐색 한 장면을 그리려고 만든 SVG 손그림 에디터에서 시작해서, 지금은 타임라인·키프레임·그룹·작업 이력까지 갖춘 작은 모션 도구가 됐다.
• 차트 에디터 는 글 안에 차트를 넣을 때마다 JSON 을 손으로 쓰다가 지쳐서 만든, 가장 늦게 합류한 도구다.

다음에 손볼 부분도 비슷한 결로 정해둔다. 위키와의 연동을 더 깊이 가져가는 일 (AI 가 모은 초안을 에디터 안에서 곧장 다듬기), 스튜디오에서 만든 애니메이션의 한 프레임을 차트 에디터로 보내거나, 반대로 차트의 한 상태를 애니메이션 키프레임으로 묶는 일 같은.

도구를 만든 후 가장 크게 달라진 건, 글을 시작하는 속도와 글을 끝내지 못하는 빈도 둘 다 줄었다는 점이다. 마찰을 줄이는 일이 결국 더 많은 글을 남긴다, 라는 가설을 매일 검증하는 중이다.