JSON 시각화 도구, 왜 직접 만들어야 했을까? – 개발자가 만든 맞춤형 JSON 뷰어 이야기

JSON 데이터를 다루는 개발자라면 누구나 한 번쯤 시각화 도구를 사용해 본 경험이 있을 것이다.
복잡한 JSON 구조를 한눈에 파악하기 위해 다양한 도구들이 존재하지만, 막상 사용해 보면 아쉬움이 남는 경우가 많다.
화면을 다른 사람에게 공유하기 어렵거나, YAML 형식을 지원하지 않거나, 모바일 환경에서 불편하게 작동하는 문제 때문이다.

이 글에서는 기존 도구의 한계를 해결하기 위해 직접 만든 JSON 시각화 도구의 배경과 핵심 기능, 그리고 어떤 점에서 사용자 중심으로 개선되었는지를 자세히 살펴본다.

반응형

---

JSON 시각화 도구란 무엇인가

JSON의 기본 개념

JSON(JavaScript Object Notation)은 데이터를 저장하거나 전송할 때 널리 사용되는 구조화된 데이터 형식이다.
사람이 읽고 쓰기 쉽고, 기계가 파싱하기 간단하다는 장점 때문에 API 통신, 설정 파일, 데이터 교환 등에 자주 사용된다.

예를 들어 다음과 같은 JSON 구조를 생각해보자.

{
  "user": {
    "name": "홍길동",
    "age": 30,
    "skills": ["JavaScript", "Python", "Go"]
  }
}

이 데이터는 간단해 보이지만, 중첩이 깊어질수록 전체 구조를 파악하기 어려워진다.
이때 필요한 것이 JSON 데이터를 트리나 그래프 형태로 시각화해주는 JSON 시각화 도구다.

---

기존 JSON 시각화 도구의 기능과 한계

지금까지 많은 개발자들이 다양한 JSON 뷰어를 사용해왔다.
예를 들어 JSONLint, JSONViewer, VisualJSON 같은 대표적인 도구들은 다음과 같은 기능을 제공한다.

• JSON 구조를 트리 형태로 시각화
• 잘못된 문법을 자동으로 검증
• 데이터 편집 및 재검증 기능 지원

이러한 도구들은 기본적인 기능에서는 충분하지만, 실제 사용 과정에서 불편한 부분들이 드러난다.

1. 화면 공유의 어려움
   특정 데이터를 시각화한 상태를 다른 사람과 공유하려면, 스크린샷을 찍거나 JSON 파일을 따로 전달해야 한다.
   실시간으로 동일한 화면을 공유하기 어렵다.
2. YAML 지원 부재
   많은 도구가 JSON만 지원하고 YAML은 지원하지 않는다.
   그러나 최근 DevOps 환경에서는 YAML을 더 자주 사용하는 경우가 많기 때문에 이 점은 큰 불편함으로 작용한다.
3. 모바일 환경 미지원
   대부분의 도구는 데스크톱 사용을 전제로 만들어져 있어, 모바일에서는 UI가 깨지거나 조작이 어렵다.

결국 기존 도구들은 기본적인 시각화 기능에 초점이 맞춰져 있고, 실제 개발자가 느끼는 사용성 문제를 충분히 해결하지 못하고 있다.

---

새로운 JSON 시각화 도구의 개발 배경

이러한 한계를 직접 체감한 한 개발자는 ‘그렇다면 내가 직접 만들어보자’는 생각으로 새로운 JSON 시각화 도구를 개발하게 되었다.
목표는 단순했다.
직관적이고, 공유가 가능하며, JSON뿐 아니라 YAML까지 다룰 수 있는 도구를 만들자.

---

주요 기능 소개

새롭게 개발된 JSON 시각화 도구는 다음과 같은 핵심 기능을 중심으로 설계되었다.

1. 그래프 기반의 시각화

기존 도구들이 대부분 트리 형태로만 데이터를 표시했다면, 이 도구는 그래프 형태로 구조를 표현한다.
각 노드는 데이터의 키를, 연결선은 계층 구조를 나타낸다.
이를 통해 데이터의 관계성을 훨씬 직관적으로 파악할 수 있다.

2. 실시간 에디팅 반영

도구 내의 에디터에서 JSON 데이터를 수정하면, 수정 내용이 시각화 화면에 즉시 반영된다.
즉, 데이터를 변경하면서 그 결과를 바로 확인할 수 있어 반복 작업의 효율이 높다.

3. 노드 검색 기능

대규모 JSON 데이터에서는 특정 값을 찾는 데 시간이 오래 걸린다.
이 도구는 검색창에 키나 값을 입력하면 해당 노드를 자동으로 찾아 하이라이트한다.
이로써 복잡한 데이터에서도 필요한 정보를 빠르게 탐색할 수 있다.

4. 타입별 색상 구분

문자열, 숫자, 객체, 배열 등 데이터 타입에 따라 색상을 다르게 표시한다.
이 시각적 구분 덕분에 구조를 읽는 속도가 빨라지고 오류를 쉽게 식별할 수 있다.

---

사용자 중심의 개선 기능

1. 시각화 화면 공유

“내가 보고 있는 화면을 바로 공유할 수 없을까?”라는 문제를 해결하기 위해,
이 도구는 현재의 시각화 상태를 링크로 저장해 다른 사람과 쉽게 공유할 수 있게 했다.
예를 들어 팀원에게 특정 데이터 구조를 보여줄 때, 별도의 파일 전달 없이 링크만 보내면 된다.

2. YAML 지원 추가

단순히 JSON만이 아니라 YAML 형식의 데이터도 지원한다.
이 기능은 특히 Kubernetes 설정 파일이나 CI/CD 파이프라인을 다루는 개발자에게 유용하다.
YAML 파일을 업로드하면 JSON으로 변환하지 않아도 바로 시각화 결과를 볼 수 있다.

3. 모바일 친화적 디자인

반응형 UI를 도입해 데스크톱뿐 아니라 모바일, 태블릿 환경에서도 동일한 사용 경험을 제공한다.
코드 편집, 노드 탐색, 공유 기능 모두 작은 화면에서도 불편함 없이 사용할 수 있다.

---

간단한 사용 예시

이 도구를 사용하는 과정은 간단하다.

1. JSON 또는 YAML 데이터를 입력하거나 파일로 업로드한다.
2. 도구가 자동으로 그래프 형태의 시각화를 생성한다.
3. 에디터에서 값을 수정하면 시각화 화면이 즉시 갱신된다.
4. 공유 버튼을 눌러 현재 상태를 링크로 저장하고 다른 사람과 공유한다.

예를 들어 "user.age": 30을 31로 변경하면, 그래프상의 해당 노드 값이 바로 31로 변경되어 표시된다.
이렇게 시각화와 편집이 실시간으로 연결되기 때문에 데이터 구조를 빠르게 확인하고 조정할 수 있다.

---

728x90

JSON은 오늘날 거의 모든 개발 환경에서 기본적으로 사용되는 데이터 형식이다.
그러나 데이터를 “직관적으로 이해하고, 쉽게 공유하며, 다양한 포맷을 지원하는” 시각화 도구는 여전히 부족하다.

이번에 소개한 직접 제작한 JSON 시각화 도구는 이러한 한계를 해결하고자 탄생했다.
기존의 트리 기반 도구에서 벗어나 그래프 시각화를 도입하고, 실시간 편집과 공유, YAML 지원, 모바일 대응까지 제공함으로써
개발자의 실제 사용 환경에 맞춘 실용적인 접근을 보여준다.

향후에는 더 다양한 포맷 지원과 협업 기능 확장을 통해,
데이터를 단순히 ‘보는 것’을 넘어 ‘공유하고 함께 다루는’ 방향으로 발전할 가능성이 크다.

이 도구는 단순한 JSON 뷰어가 아니라, 데이터를 중심으로 한 협업 도구로 성장할 수 있는 기반을 마련했다는 점에서 의미가 있다.

https://json-byte.pages.dev/

JSON Byte - JSON/YAML Graph Visualizer