JSON을 여기에 붙여넣고 보세요JSON 붙여넣기

JSON 뷰어란?

원시 JSON은 기계에는 좋지만 사람 눈에는 고역입니다. 중괄호 다섯 단계, 끝의 쉼표, 한 줄로 이어진 긴 문자열 — 익숙하실 겁니다. JSON 뷰어는 그걸 실제로 탐색할 수 있는 형태로 바꿔줍니다. 각 배열은 행이 되고, 각 객체는 열 집합이 되고, 중첩 구조는 파고들 수 있는 테이블 속 테이블이 됩니다.

데이터를 그냥 "보고 싶을 뿐"인 순간을 위해 만들었습니다. 파싱이나 검증, 변환 말고 — 보기. fetch 응답이든 GraphQL 페이로드든 로그 한 줄이든 던져 넣으세요. 뷰어가 펼쳐주면 API가 예상한 걸 돌려줬는지, 모양이 코드가 원하는 형태와 맞는지 한눈에 판단할 수 있습니다.

모든 처리는 브라우저에서 일어납니다 — 업로드도, 계정도, 오후 내내 붙여넣고 보는 횟수 제한도 없습니다.

여기서 JSON 보는 방법

세 단계면 데이터를 구조화된 뷰로 볼 수 있습니다. 에디터 아래의 버튼이 아래 설명과 그대로 일치합니다.

붙여넣거나 샘플 불러오기

API 클라이언트(Postman, Insomnia, 브라우저 DevTools 네트워크 탭)에서 JSON을 복사해 왼쪽에 붙여넣으세요. 먼저 뷰어가 어떻게 동작하는지 보고 싶다면 샘플을 눌러 작은 데이터셋을 불러오세요.

{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}

JSON 형식이 잘못되면 에디터 바로 아래에 파서가 멈춘 위치를 알려주는 메시지가 나타납니다.

구조 훑어보기

입력이 바뀔 때마다 오른쪽이 즉시 다시 그려집니다. 객체 배열은 각 키를 열로 하는 행으로 나타납니다. 중첩된 객체와 배열은 셀 안의 미니 테이블이 되어 order.customer.tier 같은 체인을 시각적으로 따라갈 수 있습니다. 레코드의 키가 행보다 많을 때는 기본이나 중첩으로 방향을 뒤집으세요 — 키를 행으로, 값을 열로 읽는 게 편할 때가 있습니다. 레이아웃은 RFC 8259에 정의된 JSON 타입을 따릅니다.

보고 싶은 것만 좁혀보기

모든 열에는 필터 박스가 있습니다. tier 열에 gold, SKU 열에 SKU-1, 상태 열에 pending을 입력하면 일치하지 않는 행은 숨겨집니다. 필터는 대소문자를 구분하지 않고 누적됩니다(tier=gold AND status=paid). 열이 시야를 방해한다면 편집을 클릭한 뒤 헤더의 제거(×) 아이콘으로 빼버리세요.

넓은 데이터는 전체 화면으로

열이 20개가 넘는 데이터셋이라면 전체 화면을 누르세요. 사이드 패널이 방해하지 않도록 테이블이 화면 전체로 펼쳐져 가로 스크롤이 편해집니다. 살찐 GraphQL 쿼리나 비정규화된 리포트를 디버깅할 때 특히 좋습니다.

다 봤으면 공유하거나 내보내기

플래그 걸 만한 게 있나요? 공유로 짧은 링크(1시간, 1일, 1주)를 만들어 팀원에게 보내세요 — 다시 붙여넣을 필요 없이 같은 뷰, 같은 JSON을 봅니다. 또는 Excel로 .xls 테이블을 내려받아 Excel, Google 스프레드시트, LibreOffice에서 여세요. 파싱은 JSON.parse()로 클라이언트에서 처리됩니다.

뷰어가 진가를 발휘할 때

API 응답 빠르게 훑기

Postman에서 엔드포인트를 찍고 8KB짜리 JSON을 받았는데, 중첩된 shipping.address.country 필드가 채워졌는지 확인해야 한다? 응답을 여기에 붙여넣으면 2초 안에 답이 나옵니다. 머릿속으로 JSON 파싱할 필요 없음.

로그 스트림 읽기

<a href="https://www.elastic.co/kr/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch, JSON-line 로거에서 나온 구조화 로그는 한 줄짜리 덩어리로 들어옵니다. 하나 붙여넣으면 타임스탬프, 서비스, 레벨, 메시지, trace ID가 깔끔하게 펼쳐집니다 — 새벽 2시에 불안한 서비스를 tailing하고 있을 때 유용합니다.

스키마 샘플 리뷰

<a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a> 스펙이나 팀 README의 예시 페이로드를 보고 있나요? 예시 블록을 붙여넣고 필드별로 모양을 훑어보세요. 들여쓰기된 JSON을 위에서 아래로 읽는 것보다 빠르고, 선택 필드나 누락된 필드를 바로 알아챌 수 있습니다.

이해관계자에게 데이터 보여주기

PM이 결제 API가 뭘 돌려주는지 알고 싶어하는데, "JSON 덩어리 여기 있어"는 통하지 않죠. 공유 링크를 만들어 Slack에 붙이세요. 괄호와 콜론을 설명할 필요 없이 바로 제대로 된 표를 봅니다.

자주 묻는 질문

JSON 뷰어와 JSON 파서는 뭐가 다른가요?

겹치는 부분이 많지만 관점이 다릅니다. 파서는 JSON 텍스트를 쓸 수 있는 구조로 바꾸고(그리고 잘못된 구문을 짚어내는) 행위 자체에 초점을 둡니다. 뷰어는 결과물 — 파싱된 결과를 사람이 읽기 좋게 어떻게 보여주느냐 — 에 초점을 둡니다. 이 도구는 내부적으로 둘 다 하지만, UI는 단순 검증이 아니라 크거나 깊게 중첩된 데이터를 훑어보는 데 맞춰져 있습니다.

데이터가 브라우저 밖으로 나가나요?

아닙니다. 파싱과 렌더링은 JavaScript로 로컬에서 일어납니다. 데이터가 나가는 유일한 순간은 "공유"를 눌러 짧은 링크를 만들 때뿐이고, 그 경우에도 만료 기간(1시간~1주)을 직접 정합니다. 민감한 걸 보고 있다면 공유하지 말고 탭만 닫으면 사라집니다.

중첩이 얼마나 깊어도 되나요?

딱 정해진 한계는 없습니다. 뷰어는 중첩 배열과 객체를 깊이 상관없이 재귀적으로 렌더링합니다. 다섯 단계, 여섯 단계쯤 들어가면 시각적으로 혼잡해지니 필터 행으로 관심 있는 가지에 집중하거나, 중첩 버튼으로 방향을 뒤집어 보세요.

원시값 배열도 볼 수 있나요, 객체 말고?

네. ["read", "write", "admin"] 같은 배열은 단일 열 목록으로 렌더링됩니다. 혼합 배열(객체 + 원시값)도 잘 동작합니다 — 각 요소가 자기 행을 갖고, 뷰어는 객체들에 존재하는 키를 모아 열 집합을 구성합니다.

JSON을 새로 붙여넣었는데 일부 열이 사라졌어요. 왜죠?

이전에 편집 모드의 × 아이콘으로 열을 지웠다면, 뷰어는 현재 세션 동안 그걸 기억하고 해당 키를 JSON에서도 숨깁니다. 새 JSON을 붙여넣으면 감지가 다시 돌아갑니다. 기대한 열이 안 보이면 편집 모드에서 빠졌는지, 아니면 그 키가 모든 레코드에 실제로 존재하는지 확인해 보세요.

JSON 파일은 어느 정도 크기까지 편한가요?

몇 MB까지는 빠르게 렌더링됩니다. 5MB를 넘으면 브라우저가 버거워지는 게 느껴지고, 10MB를 넘으면 둔해지지만 뷰어는 여전히 처리합니다. 50MB 이상 데이터셋을 일상적으로 다룬다면 jq나 gron 같은 CLI 도구로 먼저 자른 다음 필요한 부분만 여기에 붙여넣으세요.