AI가 만든 Markdown 표가 100줄이 되어 보기 어려워 VS Code 확장 기능을 만들어봤습니다

Markdown 표를 보기 쉽게 만드는 VS Code 확장 기능을 만들었습니다.

실행 이미지

최근 설계서를 Markdown으로 작성하는 경우가 많아졌습니다.

Markdown은 텍스트 기반이라 Git으로 관리하기 쉽고, 차이점(diff)도 확인하기 좋습니다.

AI에게 설계서 리뷰를 요청했을 때도, 결과를 Markdown 표 형식으로 받는 경우가 있습니다. 예를 들면 이런 식입니다.

Markdown 표는 기본적으로 보는 용도입니다. Excel처럼,

필터링(絞り込み)

• 정렬(ソート)
• 헤더 고정(ヘッダー固定)
  같은 작업은 할 수 없습니다.

그래서 지금까지는,

Markdown
↓
표를 복사하기
...

와 같은 작업을 했습니다.

이게 은근히 번거로웠습니다.

'Markdown 상태 그대로 표를 조작할 수 있으면 좋지 않을까?'라고 생각해서, VS Code 확장 기능을 만들었습니다. 그것이 Markdown Workbench S입니다.

Markdown Workbench S는 전용 미리보기를 열어 사용하는 Markdown 미리보기 확장 기능입니다.

사용 방법은 VS Code의 탐색기(Explorer)나 탭에서 Markdown 파일에 마우스 오른쪽 버튼 클릭 → Markdown Workbench S: Open Preview를 실행하면 시작됩니다.

기능을 소개합니다.

Markdown 표를 표시하면, 표 내용을 그대로 필터링할 수 있습니다. 예를 들어 AI에게 대량의 리뷰 결과를 받았더라도,
High
만 확인하는 식의 사용이 가능합니다.

Markdown 소스를 변경하는 것이 아닙니다. 미리보기 상에서만 필터링을 합니다. 따라서 원본 Markdown은 그대로입니다.

필터링뿐만이 아닙니다. 열(Column)을 클릭하여 정렬할 수 있습니다. 리뷰 결과라면,

중요도
High
Medium
...

처럼 재배열하여 확인할 수 있습니다.

테스트 결과라면,

상태
NG
NG
...

처럼 모아서 확인할 수도 있습니다. Excel에 복사한 후 정렬할 필요가 없습니다. 이 확장 기능의 미리보기 상에서 완결됩니다.

또 하나 원했던 것이 헤더 고정입니다. 표가 수십 줄을 넘어가면, 아래까지 스크롤했을 때,
'이 열은 뭐였지?'라는 생각이 듭니다.
Excel에서는 당연히 할 수 있는 일이지만, Markdown 표에서는 그렇지 않습니다. 그래서 Markdown Workbench S에서는,

첫째 행 고정(先頭行固定)

• 첫째 열 고정(先頭列固定)
• 둘 다 고정
  에 대응하고 있습니다. 특히 열 수가 많은 설계서의 경우, 첫째 열을 고정한 채 가로 스크롤이 가능하면 확인하기 쉽습니다.

여기까지 소개한 기능 외에도, 표를 보기 쉽게 하는 여러 기능을 구현했습니다.
| 기능 | 표준 Markdown 미리보기 | Markdown Workbench S |
|---|---|
| 표 표시 | ○ | ○ |
| ... |
Excel을 완전히 대체하려는 것은 아닙니다. Markdown 표를 확인할 때 굳이 Excel로 옮기는 작업을 줄일 수 있다는 것이 특징입니다.

설계서에서는 Mermaid를 사용해 플로우차트 등을 만들기도 합니다. 그래서,

확대(ズーム)

• 프레임 크기 조정(枠のリサイズ)
• 소스 표시
• 그림만 표시
  에 대응하고 있습니다. 특히 Mermaid는 그림이 커지면 표준 Markdown 미리보기만으로는 확인하기 어렵습니다.

그래서 그림의 크기와 표시 영역을 분리하여 조작할 수 있도록 했습니다. 큰 그림을 확인할 때는 본문과 함께 보여주기보다 그림만 보고 싶을 때가 있습니다. 그래서 '그림만 표시'를 준비했습니다. 브라우저의 별도 창이 아니라, VS Code 미리보기 옆에 탭으로 표시합니다.

게다가 Light / Dark / High Contrast 등의 테마도 계승합니다. 사이드 메뉴에서 목차나 검색 같은 기능을 이용할 수 있도록 했습니다. 긴 설계서에서도 목적지 장소를 찾기 쉽게 만들었습니다.

Markdown을 오래 읽을 경우,
'좀 더 보기 쉬운 테마로 하고 싶다'라는 생각이 들 때가 있습니다.

그래서, 표시 설정에서 테마나 언어 등을 변경할 수 있도록 했습니다.

라이트(Light), 다크(Dark), 하이 콘트라스트(High Contrast) 등 환경에 맞춰 표시를 전환할 수 있습니다.

프리뷰를 확인하다 보면,

'이 부분은 Markdown의 어디에 적혀 있었지?'

라는 생각이 들 때가 있습니다. 그래서, 프리뷰 상에서 더블 클릭하면 Markdown 본문의 해당 위치로 이동하도록 했습니다.

설계서가 길어질수록 이 기능이 있으면 소스(Source)와 프리뷰(Preview)를 오가기가 쉬워집니다.

Markdown에서는 이미지를 사용할 수도 있습니다. 상대 경로뿐만 아니라,

![画面イメージ](./images/sample.png)

뿐만 아니라,

![Sample](https://example.com/sample.png)

와 같은 URL 지정에도 대응합니다.

GIF도 표시할 수 있습니다.

또한, 이미지 URL에 _나 - 등의 문자가 포함되어 있어도, 이를 Markdown의 서식 기호로 오인하지 않도록 했습니다.

이번 핵심은 여기에 있습니다. Markdown을 사용해 설계서를 작성한다면, Markdown을 편집하는 위치와 프리뷰를 확인하는 위치를 분리하고 싶지 않았기 때문입니다.

특히 표에 대해서는,

설계서 작성
↓
프리뷰에서 확인
...

이었던 부분을,

설계서 작성
↓
프리뷰에서 확인
...

으로 만들고 싶었습니다.

이것이 Markdown Workbench S를 만든 가장 큰 이유입니다.

최근에는 AI에게 설계서를 리뷰 받는 경우도 늘어났다고 생각합니다. 예를 들어,

'이 설계서에 문제점을 도출해서, 항목・중요도・이유・대응안의 형식으로 Markdown 표로 만들어 주세요'
와 같이 요청하면, 그대로 Markdown에 붙여넣을 수 있는 표가 돌아옵니다.

여기까지는 매우 편리합니다. 그런데 그 표가 100줄이 되면 어떨까요?

Markdown으로는 문제없이 표시할 수 있습니다. 하지만,

'High만 보고 싶다'
'이 열(Column)으로 정렬하고 싶다'
'첫 행을 고정하고 싶다'
와 같이 생각하게 되면, 다시 Excel로 가져가고 싶은 마음이 듭니다.

그래서 Markdown Workbench S를 사용하면, AI가 생성한 Markdown 표를 그대로 VS Code 내에서 확인할 수 있습니다.

AI에 의한 설계 리뷰와 Markdown의 조합이 늘어날수록, 이 부분은 더 편리해지지 않을까요?

이번에 Markdown Workbench S를 만든 계기는 꽤 단순했습니다. Excel로 복사 붙여넣기를 그만두고 싶었던 것이 시작입니다.

특히 설계서를 Markdown으로 작성하는 분이나, AI로부터 Markdown 형식의 리뷰 결과를 많이 받는 분들에게는, 표를 그대로 조작할 수 있는 것이 가장 큰 장점이 아닐까 생각합니다.

Markdown을 사용할 기회가 늘어나고 있다면, Markdown의 표도 조금 더 편리하게 다룰 수 있으면 좋을 것 같습니다.

혹시 평소에 Markdown으로 설계서나 사양서를 작성하면서,

'이 부분이 불편하다'

하는 것이 있다면, 아직 개선할 여지가 있을지도 모릅니다. 꼭 알려주세요.

이번에 소개한 확장 기능을 사용해 보실 분은 'Markdown Workbench S'로 검색하시거나 아래 링크에서 설치해 주세요.
※브라우저만으로 작동하는 오프라인 HTML 버전도 공개하고 있습니다.

※구현 측면(Webview와의 메시지 패싱, 정렬 후에도 원래 Markdown 행으로 돌아가는 소스 매핑 등)에 대한 설명은 Zenn에 정리했습니다.