VS Code 확장 프로그램을 만들어 JSON을 트리 다이어그램으로 시각화했습니다

Source: Dev.to

문제점

우리는 모두 이런 경험을 해봤습니다. API 응답을 디버깅하면서 500줄짜리 JSON 파일을 바라보며, 세 단계 깊숙이 숨겨진 특정 필드를 찾고 있죠. 괄호를 머릿속으로 맞추고, 위치를 잃어버리고, 위아래로 스크롤을 반복합니다.

{
  "users": [
    {
      "id": 1,
      "profile": {
        "settings": {
          "notifications": {
            "email": {
              "frequency": "weekly"  // <- 이게 어디 있지?!
            }
          }
        }
      }
    }
  ]
}

이게 지겨워서 JSON Diagram Viewer를 만들었습니다.

해결책: JSON Diagram Viewer

한 번 클릭으로 JSON을 VS Code 안에서 인터랙티브하고 접을 수 있는 트리 다이어그램으로 변환합니다. 괄호 매칭은 이제 필요 없고, 길을 잃을 일도 없습니다.

기능

• 실시간 동기화 – JSON을 편집하면 다이어그램이 실시간으로 업데이트됩니다. 새로 고침이 필요 없습니다.
• 색상 구분 카드 – 객체, 배열, 원시값마다 색상이 달라 한눈에 구조를 파악할 수 있습니다.
• 접을 수 있는 노드 – 클릭으로 원하는 섹션을 펼치거나 접을 수 있습니다. 중요한 부분에 집중하세요.
• 경로 및 값 복사 – 노드를 오른쪽 클릭하면 JSON 경로(예: users[0].profile.settings)나 값을 복사할 수 있습니다.

설치 방법

1. VS Code Marketplace에서 설치합니다.
2. .json 파일을 엽니다.
3. 오른쪽 클릭 → View as Diagram을 선택합니다.

다이어그램이 편집기와 나란히 열립니다.

사용 사례

• API 개발 – REST/GraphQL 엔드포인트의 응답을 시각화합니다.
• 설정 파일 – package.json, tsconfig.json 등 복잡한 설정 파일을 탐색합니다.
• 데이터 분석 – JSON 데이터셋을 처리하기 전에 탐색합니다.
• 디버깅 – React/Vue devtools 내보내기에서 중첩된 상태 객체를 이해합니다.

기술 상세

• TypeScript
• VS Code Webview API
• 다이어그램 렌더링을 위한 Vanilla JS (무거운 의존성 없음)

링크

• VS Code Marketplace
• GitHub (MIT 라이선스, 기여 환영!)