JSON 트리뷰

포매터로 예쁘게 정렬한 JSON을 열어 놓고 스크롤만 하다가, 지금 보고 있는 이 값이 대체 어느 객체 안에 들어 있는지 놓쳐 본 적 있으실 겁니다. 들여쓰기가 5단계, 6단계쯤 깊어지면 화면 왼쪽 여백은 계단처럼 밀려나고, 정작 궁금한 필드 하나 찾겠다고 위아래를 몇 번씩 오가게 되죠. JSON 트리뷰는 그 JSON을 세로로 늘어선 텍스트가 아니라 가지를 접고 펼 수 있는 트리 그림으로 보여 주는 도구입니다.

API 응답 하나가 화면 세 개 분량으로 늘어질 때마다, 필요한 건 한 가지뿐인데 나머지 전부를 눈으로 훑어야 하는 게 답답했습니다. 그래서 관심 없는 가지는 접어 두고 지금 보고 싶은 곳만 펼쳐 보려고 만들었습니다.

사용 방법

1. 왼쪽 입력창에 JSON을 붙여넣습니다. 뭘 넣을지 막막하면 상단의 샘플 버튼을 눌러 예시로 시작하거나, 파일 아이콘으로 .json 파일을 바로 불러올 수 있습니다.

   

2. 오른쪽에 트리가 그려집니다. 객체와 배열 노드에는 +·− 버튼이 붙어 있어, 안 볼 가지는 접고 파고들 가지만 펼치면 됩니다. 확대·축소 버튼과 전체화면으로 큰 구조도 한눈에 볼 수 있습니다.

   

3. 상단 검색창(Search Node)에 찾을 키나 값을 입력하면 해당 노드가 강조됩니다. 어느 깊이에 묻혀 있든 곧장 그 위치를 짚어 주죠.

   

중첩이 깊은 JSON을 정렬만 하면 왜 답답할까

포매터가 하는 일은 줄바꿈과 들여쓰기를 붙여 주는 것까지입니다. 구조가 깊어질수록 결과물은 오직 세로로만 길어지죠. 아래는 몇 단계만 중첩돼도 텍스트가 어떻게 늘어지는지 보여 주는 예시입니다.

(여기 이미지 자리: 깊게 중첩된 JSON을 포매터로 정렬한 결과 스냅샷. 들여쓰기가 오른쪽으로 밀리고 세로로 길게 늘어져 한 화면에 구조가 안 담기는 모습.)

문제는 사람의 눈이 계단처럼 밀린 들여쓰기 폭만 보고 "지금 몇 단계 안쪽인지"를 세기 어렵다는 데 있습니다. 닫는 괄호가 어느 여는 괄호와 짝인지 스크롤하며 되짚어야 하고, 형제 노드가 열 개쯤 되면 그 사이 어디서 길을 잃습니다. 트리뷰는 같은 데이터를 가로로도 펼쳐 놓기 때문에, 부모에서 자식으로 내려가는 선이 그대로 보입니다. 관심 없는 가지를 접어 버리면 화면에는 지금 보려는 경로만 남고요.

이렇게 깊게 중첩되는 데이터는 어디서 나올까

가장 흔한 건 API 응답입니다. 리스트를 부르면 항목마다 사용자 객체가 들어 있고, 그 사용자 안에 다시 주소·설정 객체가 겹겹이 붙어 나오죠. GraphQL 응답은 이걸 한 단계 더 밀어붙입니다. 쿼리에서 관계를 파고든 만큼 data 아래로 중첩이 그대로 쌓이니까요.

설정 파일도 만만치 않습니다. package.json이나 CI 설정, 클라우드 인프라를 코드로 적은 JSON은 옵션 안에 옵션이 들어가며 금세 대여섯 단계가 됩니다. 로그를 JSON으로 남기는 경우엔 이벤트 하나가 컨텍스트 객체를 통째로 품고 있어, 어디서 값이 틀어졌는지 찾으려면 그 덩어리를 뜯어봐야 하고요. 이런 데이터를 만났을 때 전부 펼쳐 놓고 씨름하는 대신, 필요한 가지만 열어 확인하는 편이 훨씬 빠릅니다.