JSON 포맷터

JSON을 자동으로 정리하고 문법 오류를 검출합니다. 구문 강조로 데이터 구조를 쉽게 파악할 수 있습니다.

들여쓰기
입력
출력
JSON을 입력하면 자동으로 정리됩니다.

JSON 포맷터 안내

JSON 포맷터란?

JSON 포맷터(JSON Beautifier, Pretty Printer)는 압축되거나 한 줄로 되어 있는 JSON 데이터를 적절한 들여쓰기와 줄바꿈으로 정리해 읽기 쉽게 만드는 도구입니다. JSON(JavaScript Object Notation)은 웹 API, 설정 파일, 데이터 교환에서 가장 널리 쓰이는 형식으로, 개발 과정에서 JSON 데이터를 확인하고 분석해야 하는 상황이 자주 발생합니다. 이 도구는 구문 강조, 접기/펼치기, 키 정렬, 유효성 검사 등의 기능을 제공하여 복잡한 JSON 구조를 빠르게 파악할 수 있도록 도와줍니다. 특히 REST API의 응답 데이터를 디버깅하거나, CI/CD 파이프라인의 설정 파일을 검토할 때 큰 도움이 됩니다. 브라우저에서 바로 동작하기 때문에 별도의 프로그램 설치 없이 어디서든 빠르게 JSON을 정리할 수 있습니다. 수천 줄에 달하는 복잡한 중첩 구조도 접기/펼치기 기능을 활용하면 원하는 부분만 집중해서 확인할 수 있어 효율적입니다.

작동 원리

JSON 포맷터는 내부적으로 JavaScript의 JSON.parse() 메서드를 사용해 입력된 문자열을 파싱합니다. 파싱에 성공하면 유효한 JSON으로 판단하고, 실패하면 오류 메시지와 함께 문제 위치를 표시합니다. 파싱된 객체는 JSON.stringify()에 들여쓰기 옵션을 적용해 보기 좋은 형태로 재변환됩니다. 키 정렬 옵션을 활성화하면 각 객체의 키를 유니코드 순서로 정렬한 뒤 문자열화하므로, 서로 다른 API가 같은 데이터를 다른 순서로 반환할 때 비교하기 편리합니다. 구문 강조는 정규표현식 기반 토크나이저가 키, 문자열, 숫자, 불리언, null 등을 구분해 각각 다른 색상의 HTML 태그로 감싸는 방식으로 구현됩니다. 접기/펼치기 기능은 중괄호와 대괄호를 감지해 토글 가능한 DOM 요소를 생성하며, 대용량 파일(500KB 초과)에서는 성능을 위해 구문 강조를 비활성화하고 기본 텍스트로 표시합니다.

포맷터 활용 순서

  1. 왼쪽 입력 칸에 정리할 JSON을 붙여넣습니다. 실시간 옵션이 켜져 있으면 타이핑과 동시에 오른쪽 출력 칸에 결과가 나타나므로 별도의 버튼을 누를 필요가 없습니다.
  2. 들여쓰기 선택 상자에서 Tab, 2칸, 4칸 중 원하는 폭을 고릅니다. 팀의 코딩 컨벤션에 맞춰 선택하면 결과를 그대로 프로젝트에 붙여넣을 수 있습니다.
  3. 객체의 키를 알파벳순으로 정렬하려면 키 정렬을 체크하고, 오류 위치를 빠르게 찾고 싶다면 줄 번호를 켭니다.
  4. 정리 버튼은 들여쓰기를 적용해 구조를 펼쳐 보여주고, 압축 버튼은 모든 공백과 줄바꿈을 제거해 한 줄로 만듭니다.
  5. 출력 결과에서 중괄호나 대괄호 옆의 - 아이콘을 클릭하면 해당 블록만 접을 수 있고, 모두 펼치기와 모두 접기 버튼으로 전체 구조를 한 번에 제어할 수 있습니다.
  6. 완성된 결과는 복사 버튼으로 클립보드에 담고, 새 작업을 시작할 때는 지우기를 누르면 입력과 출력이 초기화됩니다.

실무에서 이렇게 활용하세요

압축된 API 응답 디버깅. 운영 서버에서 curl이나 브라우저 네트워크 탭으로 받은 응답은 대부분 {"code":200,"data":{"items":[...]}}처럼 한 줄로 압축되어 있어 눈으로 구조를 파악하기 어렵습니다. 그대로 붙여넣으면 실시간으로 정리되고, 문제가 되는 필드가 깊이 중첩되어 있다면 상위 블록을 접어 두고 data 부분만 펼쳐서 확인하면 됩니다. 문법 오류가 섞여 있으면 오류 메시지가 표시되므로 응답이 잘렸는지 여부도 바로 알 수 있습니다.

키 정렬 후 두 응답 비교. 같은 API를 개발 서버와 운영 서버에 각각 호출했을 때 결과가 미묘하게 다른 경우가 있습니다. 서버 구현에 따라 키 순서가 달라질 수 있어 단순 텍스트 비교로는 차이를 찾기 어렵습니다. 두 응답을 각각 키 정렬을 켠 상태로 정리한 뒤 텍스트 비교 도구에 넣으면 실제 값이 달라진 부분만 정확히 드러납니다.

배포 전 설정 파일 압축. 주고받는 데이터 크기를 줄여야 할 때는 압축 버튼이 유용합니다. 예를 들어 { "debug": false, "retry": 3 }처럼 들여쓰기가 들어간 설정을 {"debug":false,"retry":3}으로 줄이면 환경 변수나 HTTP 헤더에 한 줄로 넣기 좋습니다. 압축 과정에서도 파싱을 거치기 때문에 문법 검증이 함께 이루어집니다.

이중으로 인코딩된 JSON 풀기. 메시지 큐나 로그 시스템에서는 JSON 안에 또 다른 JSON이 문자열로 담겨 오는 경우가 많습니다. {"payload":"{\"userId\":42}"}처럼 안쪽 JSON은 따옴표가 이스케이프된 하나의 문자열 값이라서 바깥을 정리해도 한 덩어리로 남습니다. 이럴 때는 바깥 구조를 먼저 정리해 payload 값을 확인한 뒤, 그 문자열만 이스케이프를 걷어내고 다시 붙여넣으면 안쪽 구조까지 펼쳐볼 수 있습니다.

자주 묻는 질문

입력한 JSON이 서버로 전송되나요?

아니요. 모든 파싱과 포맷팅은 브라우저 안에서 JavaScript로만 처리되며, 입력한 데이터는 기기 밖으로 나가지 않습니다. API 키나 개인정보가 포함된 응답을 붙여넣어도 외부에 노출될 걱정 없이 사용할 수 있습니다.

얼마나 큰 JSON까지 처리할 수 있나요?

500KB를 초과하는 입력은 브라우저 성능 보호를 위해 구문 강조와 접기 기능 없이 일반 텍스트로 정리됩니다. 포맷팅 자체는 브라우저 메모리가 허용하는 한 수 MB 수준까지 동작하지만, 수십 MB급 로그 파일이라면 jq 같은 커맨드라인 도구가 더 적합합니다.

주석이나 홑따옴표가 들어간 JSON은 왜 오류가 나나요?

JSON 표준(RFC 8259)은 주석, 홑따옴표 문자열, 마지막 쉼표(trailing comma)를 허용하지 않습니다. 이 도구는 표준 JSON.parse()를 사용하므로 {'name': 'kim',} 같은 JSON5 스타일 입력은 파싱에 실패합니다. 쌍따옴표로 바꾸고 마지막 쉼표를 제거하면 해결됩니다.

키 정렬을 켜면 데이터가 변형되지 않나요?

JSON 표준에서 객체의 키 순서는 의미를 갖지 않으므로 정렬해도 데이터의 의미는 동일합니다. 배열 요소의 순서는 의미가 있기 때문에 정렬 대상에서 제외되고 원래 순서가 그대로 유지됩니다. 다만 키 순서에 의존하는 비표준 파서를 쓰는 시스템이라면 주의가 필요합니다.

아주 큰 숫자가 다르게 표시되는 이유는 무엇인가요?

JavaScript의 숫자는 IEEE 754 배정밀도 형식이라 253을 넘는 정수는 정밀도가 손실될 수 있습니다. 예를 들어 9007199254740993은 파싱 과정에서 9007199254740992로 바뀔 수 있습니다. 트위터 ID처럼 큰 식별자는 API 설계 단계에서 문자열로 주고받는 것이 안전합니다.

유효성 검사만 하고 싶을 때도 쓸 수 있나요?

네. 입력이 올바르지 않으면 상단에 오류 메시지가 표시되고, 줄 번호 옵션을 켜 두면 문제 지점을 찾기 쉽습니다. 스키마 기반의 정밀한 검증이 필요하다면 별도의 JSON 유효성 검사기 도구를 함께 사용하는 것을 권합니다.

들여쓰기는 Tab과 스페이스 중 무엇을 골라야 하나요?

정답은 없고 결과물을 사용할 곳의 규칙을 따르면 됩니다. 대부분의 오픈소스 프로젝트와 package.json 같은 npm 생태계 파일은 2칸 스페이스를 쓰고, 4칸은 가독성을 우선할 때 선호됩니다. Tab은 파일 크기가 조금 작아지고 에디터에서 표시 폭을 자유롭게 바꿀 수 있다는 장점이 있습니다.

같이 보면 좋은 도구

더 읽어볼 만한 글