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

안녕하세요
예전부터 종종 사용하던 여러 무료 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

피드백 환영합니다!
감사합니다.

[overthinker]

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

[nearfall]

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

[dkmin]

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

[nemorize]

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

[ummjoonsick]

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

[korone]

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

[siva6]

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

[korone]

이제 수정 되었습니다

[korone]

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

[hoonx]

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

[korone]

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

[mrsonhaha]

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

[korone]

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