🃏 치트시트 · 2026년 6월 25일
글 쓰는 즐거움을 위해 직접 만든 세 개의 도구: 에디터, 스튜디오, 차트 에디터
shinkeonkim.com 안에 살고 있는 세 가지 개발 전용 도구의 기능을 한자리에 모았다. 마크다운 에디터, 애니메이션 스튜디오, Chart.js 에디터까지.
왜 도구부터 만들었나
- 이 블로그를 시작할 때, 머릿속에 가장 먼저 떠오른 건 "어떻게 글을 쓸까" 가 아니라 "어떻게 보여줄까" 였다.
- 글 쓰는 과정 자체를 쉽게 만들기
- 시각화·애니메이션·차트를 일급 시민으로
- 개발 모드 전용 도구
1. 콘텐츠 에디터 (/editor)
- 가장 자주 쓰는 도구.
- 검색 입력
- 우클릭 메뉴
- 드래그-드롭 이동
2. 애니메이션 스튜디오 (/studio)
- 말로 설명하기보다 움직임으로 보여주는 게 빠른 개념들이 있다.
- 왼쪽
- 가운데
- 오른쪽
3. Chart.js 에디터 (/chart-editor)
- 벤치마크 결과, 성능 비교, 분포 같은 글에서는 차트 한 장이 표 열 개보다 빠르다.
- Line (기본)
- Bar (비교)
- Line (Log Scale)
도구가 자라는 방향
- 세 도구는 모두 "필요해서 만든다 → 자주 쓰니 다듬는다 → 다듬다 보니 새로운 기능이 생긴다" 의 사이클로 자라왔다.
- 에디터
- 스튜디오
- 차트 에디터