🤖
1210 in / 3565 out / 4775 total tokens
Simon Willison이 Claude를 활용해 Markdown을 SVG로 렌더링하는 도구를 만들었다. 겉보기엔 단순한 토이 프로젝트 같지만, 이건 2024년 현재 AI 어시스턴트가 개발 워크플로우를 어떻게 바꾸고 있는지 보여주는 아주 좋은 예시다.
🔥 핫 토픽
markdown-svg-renderer: Claude가 짜낸 Markdown→SVG 변환기
원문: Simon Willison - markdown-svg-renderer
Simon Willison이 Claude와 함께 Markdown 텍스트를 SVG 이미지로 렌더링하는 도구를 만들었다. 핵심은 Markdown 파서부터 SVG 생성까지 전체 파이프라인을 Claude에게 맡겼다는 점이다. 물론 Simon 본인이 LLM 활용의 달인이긴 하지만, 이 정도 복잡도의 프로젝트를 Claude와 페어 프로그래밍으로 끝내버린 건 시사하는 바가 크다.
왜 이게 중요하냐. SVG는 벡터 그래픽 포맷이라 확대/축소에 깨지지 않고, 웹 어디서든 렌더링 가능하며, 파일 크기도 작다. Markdown은 개발자가 매일 쓰는 포맷이고. 이 둘을 연결한다는 건 문서 작성 결과물을 고품질 그래픽으로 바로 뽑아낼 수 있다는 얘기다. 프레젠테이션 슬라이드, 소셜 미디어용 코드 스니펫 이미지, 문서 내 임베디드 다이어그램 같은 걸 자동화할 수 있게 된다.
게임 개발자 관점에서 생각해보면 더 흥미롭다. UE5에서 UI 위젯이나 텍스처 소스로 SVG를 쓰는 경우가 많다. 특히 UI 툴팁, 인게임 문서 시스템, 튜토리얼 패널 같은 곳에서 서버에서 Markdown을 받아와서 SVG로 변환해서 렌더링하는 파이프라인을 구성할 수 있다. 클라이언트 쪽에서 Rich Text 렌더링 최적화하느라 고생하는 거 생각하면, 서버 사이드에서 SVG로 완성된 이미지를 내려주는 방식이 훨씬 가벼울 수 있다.
기술적으로 재밌는 부분은 Markdown 파싱→중간 트리 구성→SVG 요소 매핑→레이아웃 계산→최종 SVG 출력이라는 전체 컴파일러 파이프라인을 Claude가 한 번에 설계할 수 있었다는 거다. 물론 Simon이 프롬프트를 잘라가며 디버깅했겠지만, 예전 같으면 markdown-it 같은 기존 파서 가져다가 SVG 백엔드를 붙이는 식으로 접근했을 거다. 근데 이제는 LLM에게 "Markdown 파서를 만들어줘"라고 하면 그걸 직접 짜준다. 물론 프로덕션급은 아닐 수 있지만, 프로토타이핑 단계에서 이런 접근이 가능해진 건 엄청난 변화다.
성능 측면에서도 한가지 짚고 넘어갈 게 있다. SVG 렌더링은 DOM 기반이라 텍스트가 길어지면 렌더링 비용이 올라간다. 게임 클라이언트에서 이걸 쓰려면 SVG→Texture 변환을 한 번 거쳐야 하는데, 이때 메모리 관리가 관건이다. 특히 모바일 타겟이면 SVG 파싱 자체가 무거울 수 있으니 서버 사이드에서 미리 렌더링된 텍스처를 캐싱하는 아키텍처가 필요하다. 이런 건 Claude가 안 짜줘도 게임 프로그래머가 설계해야 할 영역이다.
그리고 이 프로젝트가 보여주는 더 큰 그림이 있다. 바로 "프롬프트 엔지니어링이 곧 소프트웨어 아키텍처"라는 트렌드다. Simon은 이 도구를 만들면서 아마 "Markdown을 파싱해서 AST를 만들고, 각 노드 타입별로 SVG 엘리먼트를 매핑하되, 텍스트 래핑은 이런 알고리즘을 써" 같은 식으로 Claude에게 요구사항을 전달했을 것이다. 이건 코딩이라기보다 설계 리뷰에 가깝다. 앞으로 개발자의 역할이 "코드를 짜는 사람"에서 "요구사항을 정밀하게 명세하는 사람"으로 이동하는 거다.
Simon Willison의 프로젝트들은 항상 그렇지만, 코드가 공개되어 있다는 것도 중요하다. Claude가 생성한 코드의 품질을 직접 검증할 수 있고, 어떤 프롬프트 패턴이 잘 먹히는지 엿볼 수 있다. 특히 그는 항상 프롬프트 히스토리까지 공개하는 습관이 있어서, Claude와의 실제 대화 과정을 따라가며 학습할 수 있다. LLM 코딩 실무를 배우고 싶다면 Simon의 블로그는 거의 교과서 수준이다.
출처: Simon Willison - markdown-svg-renderer
💭 개발자 관점 코멘트
이 뉴스 하나만으로는 좀 짧아 보일 수 있다. 하지만 최근 Claude 생태계의 움직임을 종합해보면 꽤 의미 있는 신호다.
첫째, Claude가 코드 생성에서 확실히 경쟁력을 가지고 있다는 거다. GPT-4, Gemini, Claude 사이에서 코딩 벤치마크가 오락가락하지만, 실제 프로덕트를 만드는 개발자들 사이에서 Claude의 평가가 꽤 높다. 특히 시스템 프로그래밍, 파서, 컴파일러 같은 영역에서 Claude의 성능이 두드러진다. markdown-svg-renderer 같은 프로젝트가 그걸 증명하는 사례다.
둘째, Anthropic의 전략이 분명해지고 있다. OpenAI가 API와 플랫폼 생태계로 밀고 나가는 거랑은 조금 다르게, Anthropic은 Claude의 "안전성"과 "신뢰성"을 강조하면서 엔터프라이즈 쪽을 공략하고 있다. 실제로 Claude의 응답은 할루시네이션이 적고, 코드 생성 시 엣지 케이스 처리를 비교적 잘하는 편이다. 게임 서버 백엔드나 핀테크 같은 영역에서 이런 특성은 큰 장점이다.
셋째, 개인적으로 느끼는 건데, Claude와 페어 프로그래밍하는 워크플로우가 점점 자연스러워지고 있다. 처음엔 "이거 AI가 짠 거 맞아?" 같은 회의감이 있었는데, 이제는 내가 아키텍처 잡고 Claude가 보일러플레이트 채우는 식의 분업이 익숙해졌다. UE5 C++ 작업할 때도 블루프린트 노출 매크로 같은 반복 코드는 Claude에게 맡기고, 나는 게임플레이 로직에 집중하는 식이다. Simon의 프로젝트는 이런 워크플로우가 얼마나 생산적인지 보여주는 좋은 예시다.
넷째, SVG 렌더링 자체의 기술적 가능성도 무시 못 한다. 웹 기반 게임 에디터 툴, 인게임 UI 시스템, 프로시저럴 콘텐츠 생성 같은 영역에서 Markdown→SVG 파이프라인은 꽤 쓸모가 있다. 특히 모딩 커뮤니티 지원이나 UGC 플랫폼에서 사용자가 Markdown으로 커스텀 UI를 만들 수 있게 하면, SVG로 변환해서 클라이언트에 내려주는 방식이 깔끔하다. 보안 측면에서도 HTML 렌더링보다 SVG가 XSS 공격 벡터가 적어서 안전하다.
마지막으로, 이런 작은 프로젝트들이 모여서 만드는 "AI 네이티브 개발"이라는 새로운 패러다임을 주목해야 한다. 기존엔 라이브러리를 찾고 → 문서 읽고 → API 파악하고 → 통합 코드 짜고 → 테스트하는 과정이 필요했다. 이제는 "이런 기능이 필요해"라고 Claude에게 말하면 → 프로토타입이 5분 안에 나온다. 물론 프로덕션급으로 가려면 리팩토링과 최적화가 필요하지만, 아이디어 검증 단계의 속도가 완전히 달라졌다. 게임 잼이나 해커톤에서 이 차이는 압도적이다.
결국 중요한 건 "AI가 코드를 짠다"가 아니라, "개발자가 AI와 함께 설계한다"로 역할이 이동하고 있다는 거다. markdown-svg-renderer는 그 전환의 작은 but clear한 증거다.