# Show GN: JSON Byte > Clean Markdown view of GeekNews topic #23611. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=23611](https://news.hada.io/topic?id=23611) - GeekNews Markdown: [https://news.hada.io/topic/23611.md](https://news.hada.io/topic/23611.md) - Type: show - Author: [imjuni](https://news.hada.io/@imjuni) - Published: 2025-10-13T08:56:05+09:00 - Updated: 2025-10-13T08:56:05+09:00 - Original source: [json-byte.pages.dev](https://json-byte.pages.dev/) - Points: 38 - Comments: 26 ## Summary **JSON 데이터**를 **그래프 형태**로 직관적으로 시각화하고, 에디터에서 편집 시 실시간으로 반영되는 **인터랙티브 기능**이 특징인 새로운 시각화 도구가 공개되었습니다. 특히 **노드 검색**과 **타입별 색상 구분** 등으로 구조 파악이 쉬우며, 향후 **YML 지원**과 **모바일 최적화**, **화면 공유** 등 실사용자의 니즈를 반영한 기능 개선이 예정되어 있습니다. JSON을 다루는 개발자와 데이터 담당자에게 편의성과 커스터마이징 가능성을 제공합니다. ## Topic Body JSON 시각화 도구입니다. JSON 시각화 도구는 좋은 것이 많습니다. GeekNews를 통해서도 몇 번 소개 된 적도 있습니다. 저도 그 도구를 매우 유용하게 사용했습니다. 그렇지만 늘 그렇듯, 몇 가지 아쉬운 점이 눈에 보였고 그래서 직접 만들어 보기로 했습니다. 기본적인 기능은 다음과 같습니다. - JSON 데이터를 그래프 형태로 시각화 - 에디터를 사용하여 편집하면 시각화에 반영 - 노드 검색 기능 - 타입별 색상 구분 제가 불편을 느꼈던 부분은 다음과 같습니다. - 내가 보고 있는 화면을 공유하고 싶다 - YML이 지원되면 좋겠다 - 모바일에서도 잘 나오면 좋겠다 이런 차이점이 있습니다. 필요에 의해서 조금씩 기능을 추가해볼 생각입니다. 혹시 피드백이 있거나 기여를 해주실 분이 있다면 환영합니다. 감사합니다. ## Comments ### Comment 44964 - Author: roxie - Created: 2025-10-14T15:12:36+09:00 - Points: 1 사이즈가 커지니 렌더링이 많이 힘들어보이네요 ㅎㅎㅠ 50만 바이트 정도를 씁니다 ### Comment 44976 - Author: imjuni - Created: 2025-10-15T00:00:48+09:00 - Points: 1 - Parent comment: 44964 - Depth: 1 xyflow가 DOM 기반이라 node가 많아지면 성능이 좀 저하되는 것 같습니다. 성능도 개선해보고 싶은 목표 중에 하나입니다. 감사합니다. ### Comment 44977 - Author: roxie - Created: 2025-10-15T00:32:38+09:00 - Points: 1 - Parent comment: 44976 - Depth: 2 기본적으로 다 접힌 상태로 렌더링 되도록 해주시는것도 한가지 솔루션일 것 같습니다. 어차피 제가 보고싶은 것도 아주 일부분이긴 하거든요. ### Comment 44953 - Author: onixboox - Created: 2025-10-14T11:26:58+09:00 - Points: 1 오 깔끔하네요. 틈틈이 이용하겠습니다 ### Comment 44954 - Author: imjuni - Created: 2025-10-14T11:36:38+09:00 - Points: 1 - Parent comment: 44953 - Depth: 1 피드백 감사합니다. ### Comment 44943 - Author: eususu - Created: 2025-10-14T09:51:05+09:00 - Points: 1 매우 깔끔하고 예쁩니다. 다만 다크 테마로 바꾸면, 코드 창만 반영이 안되네요. ### Comment 44955 - Author: imjuni - Created: 2025-10-14T11:37:48+09:00 - Points: 1 - Parent comment: 44943 - Depth: 1 코드 창은 별도의 테마로 관리하고 있습니다. Export 옆 설정을 사용해서 테마를 변경할 수 있습니다. 처음에 연동할까 하다가, 좀 더 넓은 선택지로 두려고 별도로 작업했습니다. ### Comment 44934 - Author: rboo1 - Created: 2025-10-14T08:44:18+09:00 - Points: 1 이런게 필요했는데 너무 좋네요 길어진 리스트를 묶어서 보여주는 기능이 있으면 좋겠습니다! ### Comment 44958 - Author: imjuni - Created: 2025-10-14T11:41:33+09:00 - Points: 1 - Parent comment: 44934 - Depth: 1 감사합니다. show/less와 같이 묶어 주는 기능은 자식 노드를 렌더링하는 이슈가 있어서 현재 버전에서는 제외했습니다. 좋은 방법이 있는지 좀 더 고민해보겠습니다. ### Comment 44925 - Author: natenewbie - Created: 2025-10-14T02:37:47+09:00 - Points: 1 좋네요! ### Comment 44957 - Author: imjuni - Created: 2025-10-14T11:40:54+09:00 - Points: 1 - Parent comment: 44925 - Depth: 1 감사합니다. ### Comment 44916 - Author: yeorinhieut - Created: 2025-10-13T22:23:33+09:00 - Points: 1 사파리라 그런지 모르겠지만 아이패드에서 제대로 보이지 않네요 ### Comment 44956 - Author: imjuni - Created: 2025-10-14T11:40:48+09:00 - Points: 1 - Parent comment: 44916 - Depth: 1 제 아이폰에서는 제대로 나와서 안심했는데 패드류는 또 다르네요. 시간 될 때 확인해보겠습니다. 감사합니다. ### Comment 44902 - Author: shakespeares - Created: 2025-10-13T18:02:34+09:00 - Points: 1 좋은 것 같네요! ### Comment 44907 - Author: imjuni - Created: 2025-10-13T19:23:23+09:00 - Points: 1 - Parent comment: 44902 - Depth: 1 피드백 감사합니다 👍 ### Comment 44901 - Author: kakasoo - Created: 2025-10-13T17:49:34+09:00 - Points: 1 이거 너무 좋네요. 댓글 달려고 로그인했습니다. ㅋㅋㅋ ### Comment 44908 - Author: imjuni - Created: 2025-10-13T19:23:33+09:00 - Points: 1 - Parent comment: 44901 - Depth: 1 피드백 감사합니다 👍 ### Comment 44896 - Author: t7vonn - Created: 2025-10-13T16:38:45+09:00 - Points: 1 오 괜찮네요 ### Comment 44909 - Author: imjuni - Created: 2025-10-13T19:23:38+09:00 - Points: 1 - Parent comment: 44896 - Depth: 1 피드백 감사합니다 👍 ### Comment 44888 - Author: hybridego - Created: 2025-10-13T13:22:03+09:00 - Points: 1 시각화에서 바꾸면 에디터에도 적용되게 하면 더 좋을 것 같아요 ### Comment 44911 - Author: imjuni - Created: 2025-10-13T19:23:53+09:00 - Points: 1 - Parent comment: 44888 - Depth: 1 좋은 아이디어 입니다. 어떤 방식으로 적용할 지 고민해보겠습니다. ### Comment 44886 - Author: cadenzah - Created: 2025-10-13T13:04:53+09:00 - Points: 1 여러 JSON 파일을 탭 등으로 띄워 전환하면서 다룰 수 있으면 좋겠습니다. ### Comment 44912 - Author: imjuni - Created: 2025-10-13T19:24:20+09:00 - Points: 1 - Parent comment: 44886 - Depth: 1 탭을 지원하려고 했는데 export/import 할 때 복잡해지는 것 같아서 처음 릴리즈에는 제외 해두었습니다. 곧 추가 해보겠습니다. ### Comment 44874 - Author: m00nlygreat - Created: 2025-10-13T10:28:55+09:00 - Points: 1 좋은데 이거 크롬 확장프로그램 + 파일 시스템 읽기 지원되면 좋겠네요. 근데 개인적으로 JSON은 그냥 에디터로 보는 게 가장 좋긴 하더군요 ^_ㅜ ### Comment 44877 - Author: imjuni - Created: 2025-10-13T10:35:01+09:00 - Points: 1 - Parent comment: 44874 - Depth: 1 가져오기를 사용하면 파일 업로드 가능합니다. 크롬 확장은 고민해보겠습니다. 감사합니다! ### Comment 47148 - Author: selene - Created: 2025-12-03T18:12:01+09:00 - Points: 1 JSONPath로 찾고 싶은 노드만 강조하거나 필터링이 가능하면 더 좋을것 같습니다. 미니맵에서 드래그해서 움직이는 기능도 있으면 좋지 않을까 하는 의견을 내봅니다.. ㅎㅎ 큰 JSON 에서는 원하는 노드를 찾기 쉽지가 않네요 ㅠ