Show GN: JSON Byte

JSON 시각화 도구입니다. JSON 시각화 도구는 좋은 것이 많습니다. GeekNews를 통해서도 몇 번 소개 된 적도 있습니다. 저도 그 도구를 매우 유용하게 사용했습니다.

그렇지만 늘 그렇듯, 몇 가지 아쉬운 점이 눈에 보였고 그래서 직접 만들어 보기로 했습니다. 기본적인 기능은 다음과 같습니다.

• JSON 데이터를 그래프 형태로 시각화
• 에디터를 사용하여 편집하면 시각화에 반영
• 노드 검색 기능
• 타입별 색상 구분

제가 불편을 느꼈던 부분은 다음과 같습니다.

• 내가 보고 있는 화면을 공유하고 싶다
• YML이 지원되면 좋겠다
• 모바일에서도 잘 나오면 좋겠다

이런 차이점이 있습니다. 필요에 의해서 조금씩 기능을 추가해볼 생각입니다. 혹시 피드백이 있거나 기여를 해주실 분이 있다면 환영합니다.

감사합니다.

[selene]

JSONPath로 찾고 싶은 노드만 강조하거나 필터링이 가능하면 더 좋을것 같습니다.
미니맵에서 드래그해서 움직이는 기능도 있으면 좋지 않을까 하는 의견을 내봅니다.. ㅎㅎ 큰 JSON 에서는 원하는 노드를 찾기 쉽지가 않네요 ㅠ

[roxie]

사이즈가 커지니 렌더링이 많이 힘들어보이네요 ㅎㅎㅠ 50만 바이트 정도를 씁니다

[imjuni]

xyflow가 DOM 기반이라 node가 많아지면 성능이 좀 저하되는 것 같습니다. 성능도 개선해보고 싶은 목표 중에 하나입니다. 감사합니다.

[roxie]

기본적으로 다 접힌 상태로 렌더링 되도록 해주시는것도 한가지 솔루션일 것 같습니다. 어차피 제가 보고싶은 것도 아주 일부분이긴 하거든요.

[onixboox]

오 깔끔하네요. 틈틈이 이용하겠습니다

[imjuni]

피드백 감사합니다.

[eususu]

매우 깔끔하고 예쁩니다.
다만 다크 테마로 바꾸면, 코드 창만 반영이 안되네요.

[imjuni]

코드 창은 별도의 테마로 관리하고 있습니다. Export 옆 설정을 사용해서 테마를 변경할 수 있습니다. 처음에 연동할까 하다가, 좀 더 넓은 선택지로 두려고 별도로 작업했습니다.

[rboo1]

이런게 필요했는데 너무 좋네요

길어진 리스트를 묶어서 보여주는 기능이 있으면 좋겠습니다!

[imjuni]

감사합니다. show/less와 같이 묶어 주는 기능은 자식 노드를 렌더링하는 이슈가 있어서 현재 버전에서는 제외했습니다. 좋은 방법이 있는지 좀 더 고민해보겠습니다.

[natenewbie]

좋네요!

[imjuni]

감사합니다.

[yeorinhieut]

사파리라 그런지 모르겠지만 아이패드에서 제대로 보이지 않네요

[imjuni]

제 아이폰에서는 제대로 나와서 안심했는데 패드류는 또 다르네요. 시간 될 때 확인해보겠습니다. 감사합니다.

[shakespeares]

좋은 것 같네요!

[imjuni]

피드백 감사합니다 👍

[kakasoo]

이거 너무 좋네요. 댓글 달려고 로그인했습니다. ㅋㅋㅋ

[imjuni]

피드백 감사합니다 👍

[t7vonn]

오 괜찮네요

[imjuni]

피드백 감사합니다 👍

[hybridego]

시각화에서 바꾸면 에디터에도 적용되게 하면 더 좋을 것 같아요

[imjuni]

좋은 아이디어 입니다. 어떤 방식으로 적용할 지 고민해보겠습니다.

[cadenzah]

여러 JSON 파일을 탭 등으로 띄워 전환하면서 다룰 수 있으면 좋겠습니다.

[imjuni]

탭을 지원하려고 했는데 export/import 할 때 복잡해지는 것 같아서 처음 릴리즈에는 제외 해두었습니다. 곧 추가 해보겠습니다.

[m00nlygreat]

좋은데 이거 크롬 확장프로그램 + 파일 시스템 읽기 지원되면 좋겠네요.

근데 개인적으로 JSON은 그냥 에디터로 보는 게 가장 좋긴 하더군요 ^_ㅜ

[imjuni]

가져오기를 사용하면 파일 업로드 가능합니다. 크롬 확장은 고민해보겠습니다. 감사합니다!