JSON을 읽기 쉽게 만드는 방법을 검색해 본 적이 있다면 “JSON viewer”와 “JSON formatter” 도구를 모두 보았을 가능성이 큽니다 —— 그리고 두 가지가 같은 것인지 궁금했을 겁니다. 같지 않지만, 도구가 더 강력해지면서 둘 사이의 경계가 흐려졌습니다. 차이를 이해하면 알맞은 도구를 고르기 쉬워집니다: 원본 API 출력을 정리할 때, 디버깅 중 깊게 중첩된 응답을 탐색할 때, 또는 큰 설정 파일을 길을 잃지 않고 훑을 때 각각 다른 도구가 어울립니다.
JSON 포매터란?
JSON 포매터는 원본의, 포맷되지 않은 JSON —— 보통 한 줄로 된 긴 문자열 —— 을 받아 일관된 들여쓰기와 줄바꿈으로 다시 씁니다. 데이터 자체는 바뀌지 않고 공백만 달라집니다.
// 원본 입력
{"user":{"id":42,"name":"Alice","roles":["admin","editor"],"active":true}}
// 포맷팅 후(2칸 들여쓰기)
{
"user": {
"id": 42,
"name": "Alice",
"roles": [
"admin",
"editor"
],
"active": true
}
}포매터는 텍스트 연산입니다. JSON 문자열을 읽고 공백을 정규화한 뒤 새 문자열을 출력합니다. 대부분의 포매터는 부수적으로 JSON을 검증하기도 합니다 —— JSON이 잘못되면 올바르게 들여쓸 수 없어 오류가 표면화됩니다.
JSON 포매터가 잘하는 것:
- 최소화된 API 응답을 몇 초 만에 읽기 쉽게 만들기
- 팀 내 들여쓰기 표준화(2칸 vs 4칸 vs 탭)
- 문서나 로그용으로 예쁘게 인쇄된 출력 만들기
- JSON 유효성에 대한 빠른 점검 도구로 활용
JSON 뷰어란?
JSON 뷰어 —— 때로는 JSON reader 또는 JSON explorer라고도 부릅니다 —— 는 한 걸음 더 나아갑니다. 포맷된 텍스트를 출력하는 대신, JSON을 탐색할 수 있는 인터랙티브 구조로 렌더링합니다.
JSON 뷰어의 핵심은 접을 수 있는 노드입니다. 각 객체 {}와 배열 []은 독립적으로 펼치거나 접을 수 있습니다. 즉, 10,000줄짜리 응답의 최상위를 본 다음, 관심 있는 섹션을 찾아 그 가지만 펼치고 나머지는 무시할 수 있습니다.
일반적인 JSON 뷰어는 다음도 제공합니다:
- 구문 강조 —— 키, 문자열, 숫자, 불리언, null이 서로 다른 색으로 표시되어 구조가 한눈에 보임
- 펼침/접기 가능한 노드 —— 서브트리 전체를 접어 시각적 잡음을 줄임
- 항목 수 —— 접힌 노드가 자식 항목 수를 즉시 보여줌(예:
[...] 24 items) - 키 탐색 —— 수천 줄을 스크롤하지 않고 특정 키를 찾을 수 있음
JSON 뷰어가 잘하는 것:
- 크고 깊게 중첩된 API 응답 탐색
- 사전에 데이터 형태를 모른 채로 디버깅
- 일부 섹션만 중요한 구성 파일 검토
- 낯선 JSON 구조를 빠르게 이해
“JSON 트리 뷰어”는 같은 것
같은 기능이 JSON tree viewer, JSON tree, 또는 collapsible JSON tree로도 불립니다. 셋 다 문서를 펼칠 수 있는 노드의 인터랙티브 계층으로 렌더링하는 뷰어를 설명합니다. 그 용어로 검색 중이라면 JSON Tree Viewer: JSON을 접을 수 있는 트리로 탐색을 보세요.
이미 가지고 있습니다: 브라우저 DevTools
알아두면 좋은 점: Chrome, Firefox, Edge 모두 응답의 Content-Type이 application/json일 때 내장된 접을 수 있는 JSON 뷰어를 렌더링합니다. URL을 직접 열거나 Network 탭의 Preview 패널을 열면 확장 없이 트리를 얻습니다. 빠르게 읽기엔 충분하지만, 매우 큰 페이로드, “모두 접기” 컨트롤, 키 검색이 필요하면 전용 뷰어가 우세합니다.
핵심 차이 한 줄 요약
가장 단순한 관점: 포매터는 텍스트의 보이는 방식을 바꾸고, 뷰어는 데이터와의 상호작용 방식을 바꿉니다.
| JSON 포매터 | JSON 뷰어 | |
|---|---|---|
| 출력 | 포맷된 텍스트 | 인터랙티브 트리 |
| 접을 수 있는 노드 | 없음 | 있음 |
| 구문 강조 | 가끔 | 항상 |
| 텍스트로 복사 | 가능 | 보통 내보내기 통해 |
| 적합한 용도 | 출력 정리 | 구조 탐색 |
JSON 포매터를 사용할 때
읽을 수 있는 텍스트 출력이 필요할 때 포매터를 사용하세요 —— 붙여 넣고, 커밋하고, 로깅하거나 동료에게 보낼 수 있는 것 말입니다.
터미널에서 API 응답 읽기
curl https://api.example.com/users/42를 실행하면 한 줄로 된 JSON 덩어리가 나옵니다. 포매팅 도구에 붙여넣어 몇 초 만에 읽을 수 있게 만드세요.
커밋 전 파일 표준화
팀이 2칸 들여쓰기를 요구하는 스타일 가이드를 둔다면, 포매터가 수동 편집 없이 일관되게 적용해 줍니다.
빠른 유효성 점검
깨졌을 수도 있는 JSON을 포매터에 붙여 넣으면 곧바로 파싱 여부를 알 수 있습니다. 오류가 보이면 JSON이 잘못된 것이고, 깔끔하게 포맷되면 유효합니다.
문서와 스크린샷
예쁘게 출력된 JSON은 문서, README, 슬랙 메시지에서 한 줄로 압축된 것보다 훨씬 보기 좋습니다.
JSON 뷰어를 사용할 때
탐색하고 살펴봐야 할 때 뷰어를 사용하세요 —— JSON 안에 정확히 무엇이 있고 어디서 찾아야 하는지 아직 모를 때입니다.
큰 API 응답 탐색
수십 개의 중첩된 객체와 배열이 들어 있는 응답을 받습니다. 최상위 노드를 접으면 구조의 지도가 됩니다. 조사 중인 가지만 펼치세요.
스키마에 대한 사전 지식 없이 디버깅
처음 다루는 서드파티 API에서 뷰어는 파싱 코드를 작성하기 전에 트리를 클릭하며 객체 간 관계를 이해하게 해줍니다.
깊게 중첩된 구성 읽기
쿠버네티스 매니페스트, AWS CloudFormation 템플릿 등은 다층 중첩을 자주 포함합니다. 뷰어 덕분에 다섯 단계 깊이에 묻힌 특정 설정을 실제로 찾는 일이 가능해집니다.
환경 간 데이터 형태 비교
프로덕션과 스테이징 응답을 나란히 펼치세요. 접힌 노드 덕에 어느 섹션이 다른지 한눈에 알 수 있습니다.
좋은 JSON 뷰어의 공통점
모든 JSON 뷰어가 똑같은 것은 아닙 니다. 유용한 뷰어와 답답한 뷰어를 가르는 요소는 다음과 같습니다:
- 모두 접기 / 모두 펼치기 컨트롤 —— 뷰를 즉시 리셋해야 하기 때문에, “모두 접기” 버튼이 없는 뷰어는 노드를 하나씩 닫아야 함
- 큰 파일에서의 안정적인 성능 —— 일부 브라우저 기반 뷰어는 수만 노드의 JSON에서 버벅거리지만, 좋은 도구는 잘 처리함
- 정확한 구문 강조 —— 키는 문자열 값과 달라 보여야 하고, 숫자, 불리언, null도 시각적으로 구분되어야 함
- 예외 처리의 깔끔함 —— 빈 객체, 빈 배열, null 값, 깊게 중첩된 구조 모두 올바르게 렌더링되어야 함
- 데이터 업로드 불필요 —— JSON에는 종종 민감한 데이터가 포함됨. 브라우저에서 모두 처리하는 뷰어가 서버로 보내는 것보다 훨씬 안전
JSON Reader: 또 다른 것?
“JSON reader”는 보통 “JSON viewer”와 교환적으로 쓰입니다 —— 편집이나 재포맷이 아니라 JSON을 읽고 탐색하는 행위를 설명합니다. JSON reader로 알려진 도구를 보면, 거의 확실히 뷰어처럼 접을 수 있는 노드 기반 트리 탐색을 제공합니다.
가끔 “reader”는 코드 맥락에서 등장합니다 —— 예를 들어 Java의 Gson 라이브러리에 있는 JsonReader —— 그러나 웹 도구 맥락에서는 reader와 viewer가 같은 의미입니다.
둘 다 필요한가?
그렇습니다 —— 그리고 좋은 도구 대부분이 두 기능을 결합합니다. 현대의 JSON 도구는 입력을 포맷팅(들여쓰기 정규화)하면서도 탐색 가능한 트리로 렌더링합니다. 포맷된 텍스트와 인터랙티브 뷰어가 공존하므로 그때그때 적합한 뷰를 사용하면 됩니다.
차이가 가장 두드러지는 때는 도구가 한 쪽 목적에만 특화되어 있을 때입니다. jq나 python -m json.tool 같은 커맨드라인 포매터는 텍스트 출력만 제공합니다. 브라우저 확장의 전용 뷰어는 트리 탐색만 제공합니다. 일상 작업에는 둘 다 가능한 단일 브라우저 도구가 가장 실용적입니다.
적절한 도구 선택
주로 터미널에서 일한다면
jq가 표준입니다. 강력한 표현식 언어로 JSON을 포맷, 필터, 쿼리합니다. 뷰어는 없지만 스크립트 워크플로에선 비할 데가 없습니다.
코드 에디터에서 일한다면
Prettier 확장과 함께 쓰는 VS Code는 저장 시 JSON을 포맷합니다. 트리 탐색은 대부분의 브라우저 DevTools에 내장된 JSON 에디터가 의외로 유능합니다.
빠르게 붙여 넣고 보는 해법이 필요하다면
브라우저 기반 도구가 가장 빠릅니다. 입력하는 동안 검증하고, 접을 수 있는 트리 뷰를 제공하며, 큰 파일도 멈추지 않고 처리하면서 데이터를 로컬에 두는 것을 찾으세요. fixjson의 JSON 뷰어는 이 모두를 충족합니다 —— JSON을 붙여넣으면 트리가 즉시 렌더링되고, 어떤 서버로도 데이터가 전송되지 않습니다.
깨졌거나 잘못된 JSON을 다룬다면
일반적인 포매터나 뷰어로는 도움이 안 됩니다 —— 먼저 JSON 복구 도구가 필요합니다. 복구 도구는 후행 쉼표, 작은따옴표, 따옴표 없는 키 같은 흔한 오류를 고치고, 정리된 JSON을 뷰어나 포매터에 넘깁니다.
자주 묻는 질문
JSON 뷰어와 JSON 포매터의 차이는?
포매터는 복사 가능한, 읽기 좋게 들여쓴 텍스트를 출력합니다. 뷰어는 접을 수 있는 노드와 구문 강조가 있는 인터랙티브 트리를 렌더링해 탐색하게 해줍니다. 포매터 = 텍스트의 모습; 뷰어 = 데이터와의 상호작용 방식.
JSON 뷰어와 JSON reader는 같은가?
웹 도구에서는 그렇습니다 —— “reader”, “viewer”, “explorer” 모두 접을 수 있는 노드를 갖춘 트리 기반 탐색을 가리킵니다. (Gson 같은 코드 라이브러리의 “JsonReader”는 무관합니다.)
뷰어와 포매터가 둘 다 필요한가?
대부분의 현대 도구는 둘을 결합합니다 —— 같은 뷰에서 입력을 포맷하고 접을 수 있는 트리를 렌더링하므로, 가독성과 탐색성 사이에서 고를 일이 없습니다.
JSON이 깨졌다면?
뷰어도 포매터도 도와주지 못합니다 —— 먼저 JSON Fix로 복구한 다음 정리된 출력을 보거나 포맷하세요. JSON 포맷하는 방법도 참고하세요.
결론
JSON 포매터는 읽기 좋은 텍스트를, JSON 뷰어는 인터랙티브한 트리를 제공합니다. 둘 다 유용합니다 —— 무엇을 선택할지는 복사해서 붙여 넣을 수 있는 출력이 필요한지, 클릭하며 탐색할 수 있는 구조가 필요한지에 달려 있습니다.
대부분의 개발자에게 이상적인 도구는 두 가지를 모두 갖춘 것입니다: 입력을 포맷하면서 같은 뷰에 접을 수 있는 트리를 렌더링하는 것이지요. 그러면 가독성과 탐색성 사이에서 고를 필요가 없습니다.
보려고 하기 전에 JSON이 이미 깨져 있다면 먼저 고치세요 —— 뷰어와 포매터 모두 유효한 JSON을 입력으로 요구하지만, 복구 도구는 그렇지 않습니 다.