블로그 다이어그램 관리를 위해 excalidraw를 사용합니다
Source: Hacker News
TL;DR 저는 Excalidraw를 사용하고, 관심 있는 요소들을 프레임으로 감싸며, export_ 접두사로 이름을 지정합니다. 그리고 제가 포크한 Excalidraw VSCode extension이 라이트와 다크 모드용 SVG를 자동으로 생성합니다.
Excalidraw 사용하기
저는 과거에 Excalidraw를 많이 사용했습니다:
- 기술적인 문제를 스스로 분석할 때
- 동료에게 개념이나 아키텍처를 설명할 때
최근에 새로운 사용 사례가 생겼습니다:
- 블로그에 제 생각을 표현할 때
첫 번째 기사를 작성하면서 그래픽과 텍스트 사이의 의존성이 큰 좌절을 안겨 주었습니다. 그래픽을 미세 조정하면 텍스트가 더 쉬워지고, 텍스트를 수정하면 그래픽에 포함된 일부 정보가 불필요하다는 것이 드러났습니다.
문제
Every change in a graphic in Excalidraw required nine clicks:
- 프레임을 선택한다
- Export 버튼을 누른다
- 올바른 이름과 dark‑mode/light‑mode 접미사를 선택한다
- 내보낸다
- 라이트/다크 모드를 전환한다
- 다시 올바른 이름과 dark‑mode/light‑mode 접미사를 선택한다
- 다시 내보낸다
- 레이블이 프레임 경계를 넘어갔다는 것을 깨닫는다
- 다시 시작한다
매번 약 45 초가 걸렸다.
이미지 © Randall Munroe, XKCD.com
첫 번째 접근 – GitHub 액션
간단한 Bash 스크립트(오픈소스 도구, 특히 JonRC의 excalirender 덕분)를 사용해 작동하도록 만들었습니다. GitHub 액션은 다음을 수행합니다:
- 마지막 푸시에서 변경된
.excalidraw파일을 찾음 jq를 사용해 해당 파일 안의 프레임을 찾음- 각 프레임을 다크 모드와 라이트 모드로
framename-light/framename-dark형태로 내보냄 - 새로운 SVG 파일을 커밋하여 저장소에 다시 푸시함
레포지토리의 코드를 확인하세요. 이 정도면 글 작업을 계속 진행하기에 충분했습니다.
접근 방식 1의 문제점
이 방식을 한동안 사용한 뒤 여러 가지 문제에 직면했습니다:
- 렌더링 라이브러리에 버그가 있었음(예: 이 이슈)
- 프로세스에 x86 Docker 이미지가 필요했는데, 내 ARM 기반 Mac에서는 실행되지 않음
첫 번째 문제는 추가 라벨을 달아 해결했지만, 두 번째 문제는 전체 개념을 무너뜨렸습니다. 로컬에서 내보내기를 실행할 수 없었기 때문에 Excalidraw 파일을 GitHub에 푸시하고, 파이프라인이 완료될 때까지 기다린 뒤 새로운 커밋을 받아와야만 업데이트된 이미지를 확인할 수 있었습니다. 블로그 포스트를 로컬에서 검토하려면 오래된 이미지만 사용할 수 있었습니다.
새로운 아이디어: Excalidraw에 자동 내보내기 추가
Excalidraw VSCode 확장이 파일이 변경될 때마다 각 프레임을 두 개의 별도 SVG 파일(다크 모드용 하나, 라이트 모드용 하나)로 자동 내보낸다면 어떨까요?
Claude와 함께 주말을 투자해 프로토타입을 만들었습니다. 결과는 다음과 같습니다:
- VSCode에서 Excalidraw 파일을 편집합니다
- 내보내고 싶은 요소를 프레임으로 감쌉니다
- 프레임 이름을
export_${image_name}로 지정합니다
확장은 프레임을 감지하고 .excalidraw 파일 옆에 두 개의 SVG를 저장합니다:
${image_name}.light.exp.svg${image_name}.dark.exp.svg
로컬에서 실시간 미리보기
이미지가 로컬에서 생성되고 매 변경마다 업데이트되므로 자동 완성을 통해 참조하고 편집기 미리보기 탭에서 렌더링된 모습을 확인할 수 있습니다.
결론
결과에 만족합니다. 몇 시간(이 글 작성 포함)의 작업 후 이 도구는 실제 문제점을 해결하고 글쓰기에 즐거움을 줍니다. SQLite on Git와 같은 향후 기사에서 이를 광범위하게 사용할 날이 기다려집니다.
원본 확장에 풀 리퀘스트를 제출할 계획은 없지만, 영감으로 문제와 해결책을 설명하는 이슈를 열 수 있습니다. 관심 있는 분들을 위해 제 GitHub 포크 릴리스 섹션에 컴파일된 확장을 공개했습니다. 이제는 이 정도면 충분합니다!