# Show GN: JSON 시각화 및 편집 도구

> Clean Markdown view of GeekNews topic #22600. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=22600](https://news.hada.io/topic?id=22600)
- GeekNews Markdown: [https://news.hada.io/topic/22600.md](https://news.hada.io/topic/22600.md)
- Type: show
- Author: [korone](https://news.hada.io/@korone)
- Published: 2025-08-19T11:38:52+09:00
- Updated: 2025-08-19T11:38:52+09:00
- Original source: [github.com/podosoft-dev](https://github.com/podosoft-dev/pdjsoneditor)
- Points: 46
- Comments: 15

## Summary

복잡한 **JSON 데이터**를 효율적으로 다루고 싶은 개발자를 위해, **Svelte5**로 구현된 새로운 **시각화·편집 툴**이 공개되었습니다. 실시간 **문법 검증**과 **포맷팅**은 물론, 트리 구조의 **인터랙티브 그래프**와 **노드별 빠른 위치 이동**, 다양한 HTTP 메서드 기반의 **API 데이터 불러오기** 기능까지 지원합니다. 대규모 항목 자동 축소나 **다국어(한/영) 지원** 등 실용적 기능이 포함되어, JSON 구조 파악과 **API 응답 분석**에 최적화된 환경을 제공합니다.

## Topic Body

안녕하세요  
예전부터 종종 사용하던 여러 무료 JSON Viewer들의 기능이 조금씩 아쉬움이 있어서,  
여러 오픈소스를 참고해서 Svelte5 기반으로 만들어 보았습니다.  
  
주요 기능은 다음과 같습니다.  
- 실시간 JSON 문법 검증 및 포맷팅  
- 트리 구조의 인터랙티브 그래프 시각화  
- 노드 클릭으로 JSON 위치 즉시 이동  
- URL에서 JSON 데이터 가져오기 (GET/POST/PUT/DELETE/PATCH)  
- 20개 이상 항목 자동 축소 ("더 보기" 기능)  
- 한국어/영어 지원  
  
복잡한 JSON 구조를 시각적으로 파악하거나, API 응답을 분석할 때 사용하려고 만들었습니다.  
  
링크:  
- 데모: https://json.podosoft.io  
- GitHub: https://github.com/podosoft-dev/pdjsoneditor  
  
피드백 환영합니다!  
감사합니다.

## Comments



### Comment 42935

- Author: zzandore
- Created: 2025-08-26T08:53:25+09:00
- Points: 1

복잡하고 깊은 json구조를 많이 보는데 이런 툴이 있어서 너무 유용하네요 ㅎ 혹시 데스크탑용 앱으로도 만들어주실 생각은 없으신가요? 서브라임같은 느낌으로요 ㅎㅎ

### Comment 42953

- Author: korone
- Created: 2025-08-26T11:09:02+09:00
- Points: 1
- Parent comment: 42935
- Depth: 1

현재 계획중입니다

### Comment 42906

- Author: overthinker
- Created: 2025-08-25T15:35:40+09:00
- Points: 1

xyflow쓰셨군요. 뭔가 플로우차트를 사용해서 아이디어가 잘생각이안나더라구요 멋지네요

### Comment 42709

- Author: nearfall
- Created: 2025-08-20T17:15:42+09:00
- Points: 1

와!   평소에 아쉬웠던 건데 정말 눈에 쏙 들어옵니다!

### Comment 42702

- Author: dkmin
- Created: 2025-08-20T13:26:18+09:00
- Points: 1

수고하셨습니다.   
코린이 분들께도 도움이 되겠어요  
 감사합니다!

### Comment 42696

- Author: nemorize
- Created: 2025-08-20T12:14:51+09:00
- Points: 1

JSON5도 지원하면 좋을 것 같습니다!

### Comment 42673

- Author: ummjoonsick
- Created: 2025-08-20T08:43:20+09:00
- Points: 1

봐~이브 코우딩 하신건가요?

### Comment 42690

- Author: korone
- Created: 2025-08-20T10:25:02+09:00
- Points: 1
- Parent comment: 42673
- Depth: 1

네 Claude Code를 주로 이용했고, 중간중간 막히는 부분은 ChatGPT에서 확인하고, 그래도 안되는 것은 직접 코드를 분석해서 수정방향을 확인해서 Claude Code에게 다시 지시하는 방법을 사용했습니다.  
특히 Dagre 를 적용시 그래프 노드 겹치는 문제는 아무리 해도 해결이 안되어서 제가 직접 디버깅 해서 수정을 했습니다.  
이러한 일련의 과정을 통해 한계가 어디까지인지, 작업 지시를 어떻게 해야하는지에 대한 경험을 많이 쌓은것 같습니다.

### Comment 42662

- Author: siva6
- Created: 2025-08-19T16:19:05+09:00
- Points: 1

와 좋네요.  
그런데, 노드 클릭시 이동은 안되는 것 같아요.

### Comment 42748

- Author: korone
- Created: 2025-08-21T12:33:51+09:00
- Points: 1
- Parent comment: 42662
- Depth: 1

이제 수정 되었습니다

### Comment 42688

- Author: korone
- Created: 2025-08-20T10:20:36+09:00
- Points: 1
- Parent comment: 42662
- Depth: 1

말씀하신 경우를 체크해보니 이동되는 노드가 있는 반면 안되는 경우도 있는것을 확인했습니다. 확인해서 고쳐 보겠습니다.

### Comment 42660

- Author: hoonx
- Created: 2025-08-19T15:41:33+09:00
- Points: 1

개인적으로 Escaped JSON을 다룰 일이 종종 있는데, JSON Escape 기능도 추가되면 좋을 것 같아요!

### Comment 42687

- Author: korone
- Created: 2025-08-20T10:19:53+09:00
- Points: 1
- Parent comment: 42660
- Depth: 1

넵 참고해서 검토 해 보겠습니다.

### Comment 42653

- Author: mrsonhaha
- Created: 2025-08-19T13:26:20+09:00
- Points: 1

너무 좋습니다!! Yaml, toml 과도 호환되면 자주 이용하게 될 것 같아요

### Comment 42686

- Author: korone
- Created: 2025-08-20T10:19:10+09:00
- Points: 1
- Parent comment: 42653
- Depth: 1

말씀하신 Yaml, TOML을 생각 못했는데 지적해주셔서 감사합니다. 기능 추가 검토해서 진행 해 보겠습니다.