Hugo 로 바둑판 도해 그리기 Part 2: 이미지 65장을 표기로 옮기기

Wed, 12 Aug 2026 13:21:01 +0900

이 글은 Claude Opus 5 를 이용해 초안이 작성되었으며, 이후 퇴고를 거쳤습니다.

들어가며

Part 1 에서 바둑판 도해를 그리는 goban shortcode 를 만들었습니다. ASCII 로 쓰고 SVG 로 렌더링하는 방식입니다.

만들고 나니 다른 시리즈가 눈에 들어왔습니다. 9x9 바둑 교재 리뷰 4편에 PNG 이미지로 된 도해가 65장 있었습니다. 이걸 전부 표기로 옮기기로 했습니다.

Part 2 는 그 작업의 기록입니다. 결론부터 적으면 작업의 90%는 shortcode 와 무관한 일 이었고, 나머지 10% 에서 렌더링은 멀쩡한데 내용만 틀리는 종류의 버그를 하나 만났습니다.

Wed, 12 Aug 2026 13:18:52 +0900

이 글은 Claude Opus 5 를 이용해 초안이 작성되었으며, 이후 퇴고를 거쳤습니다.

이 블로그에 바둑 입문 시리즈를 쓰다가 벽에 부딪혔습니다. 바둑 글에는 바둑판 그림이 필요한데, 그릴 방법이 마땅치 않았습니다.

결국 goban 이라는 이름의 Hugo shortcode 를 직접 만들었습니다. 본문에는 이렇게 쓰고,

{{< goban caption="빈 삼각형" >}}
 a b c d e
 1 . X . . .
 2 X O * . .
 3 . . . . .
{{< /goban >}}

렌더링은 SVG 바둑판으로 나가는 방식입니다. 실제 결과는 이렇습니다.