💻 개발·기술

JSON 포맷터 완벽 가이드 - JSON 정렬·압축·유효성 검사 무료 온라인 도구 | HMApps

JSON 포맷터로 복잡한 JSON 데이터를 보기 좋게 정렬하고, 압축하고, 오류를 즉시 찾아보세요. 개발자라면 꼭 알아야 할 JSON 포맷팅 완벽 가이드와 실전 활용 팁을 소개합니다.

📅 2026년 7월 25일✍️ HMApps

JSON포맷터개발자 도구JSON 정렬JSON 유효성 검사

JSON 포맷터란 무엇인가요?

JSON(JavaScript Object Notation)은 웹 개발에서 데이터를 교환할 때 가장 널리 쓰이는 경량 포맷입니다. API 응답, 설정 파일, 데이터베이스 쿼리 결과 등 거의 모든 곳에서 JSON을 만나게 됩니다.

그런데 실제 API 통신이나 로그에서 마주치는 JSON은 공백과 줄바꿈이 모두 제거된 한 줄짜리 압축 형태인 경우가 많습니다. 예를 들어 다음과 같은 데이터를 사람이 바로 읽기란 상당히 어렵습니다.

{"user":{"id":42,"name":"홍길동","email":"hong@example.com","roles":["admin","editor"],"settings":{"theme":"dark","lang":"ko"}}}

JSON 포맷터는 이렇게 가독성이 떨어지는 JSON을 들여쓰기와 줄바꿈을 적용해 보기 좋게 정렬해주는 도구입니다. HMApps JSON 포맷터(hmapps.kr/json-formatter)는 정렬뿐 아니라 압축, 유효성 검사까지 한 번에 처리할 수 있습니다.

JSON 포맷터 사용 방법

HMApps JSON 포맷터는 별도 설치나 회원가입 없이 브라우저에서 바로 사용할 수 있습니다. 사용 방법은 아주 간단합니다.

JSON 붙여넣기: 왼쪽 입력창에 포맷팅할 JSON 텍스트를 붙여넣습니다.
포맷 버튼 클릭: [정렬] 버튼을 누르면 즉시 들여쓰기가 적용된 JSON이 오른쪽에 표시됩니다.
오류 확인: JSON 문법에 문제가 있다면 어느 줄, 어느 위치에서 오류가 발생했는지 바로 알려줍니다.
결과 복사: [복사] 버튼으로 포맷팅된 JSON을 클립보드에 저장합니다.
압축하기: 반대로 [압축] 버튼을 누르면 공백을 모두 제거해 네트워크 전송에 최적화된 형태로 변환합니다.

정렬 후 결과는 다음처럼 훨씬 읽기 편해집니다.

{
  "user": {
    "id": 42,
    "name": "홍길동",
    "email": "hong@example.com",
    "roles": [
      "admin",
      "editor"
    ],
    "settings": {
      "theme": "dark",
      "lang": "ko"
    }
  }
}

JSON 문법 규칙과 흔한 오류

JSON 포맷터를 쓰다 보면 "유효하지 않은 JSON"이라는 오류 메시지를 보게 될 때가 있습니다. JSON은 생각보다 엄격한 문법 규칙을 갖고 있기 때문입니다. 개발자들이 자주 저지르는 실수와 올바른 JSON의 차이를 정리했습니다.

잘못된 JSON	올바른 JSON	이유
`{ name: "홍길동" }`	`{ "name": "홍길동" }`	키(key)는 반드시 큰따옴표로 감싸야 함
`{ "name": '홍길동' }`	`{ "name": "홍길동" }`	문자열 값은 작은따옴표 사용 불가, 큰따옴표만 허용
`{ "active": True }`	`{ "active": true }`	불리언 값은 소문자 `true` / `false`
`{ "score": .5 }`	`{ "score": 0.5 }`	소수점 앞에 0 생략 불가
`{ "list": [1, 2, 3,] }`	`{ "list": [1, 2, 3] }`	마지막 요소 뒤 쉼표(trailing comma) 금지
`{ "a": 1 // 주석 }`	`{ "a": 1 }`	JSON은 주석을 지원하지 않음
`{ "undefined": undefined }`	`{ "value": null }`	`undefined`는 JSON에 없음, `null` 사용

HMApps JSON 포맷터는 이런 오류들을 정확한 위치와 함께 알려주기 때문에, 긴 JSON 파일에서 실수를 찾을 때 특히 유용합니다.

JSON 포맷터 실전 활용 사례

JSON 포맷터는 단순히 "보기 좋게 만들기" 이상의 역할을 합니다. 실제 개발 현장에서는 다음과 같은 상황에서 매일 사용하게 됩니다.

1. API 응답 디버깅

백엔드 API가 반환하는 JSON 응답을 분석할 때 가장 먼저 포맷터에 붙여넣습니다. 특히 Postman이나 curl로 받은 긴 응답 데이터를 구조적으로 파악하는 데 필수적입니다. 어떤 필드가 있는지, 중첩 구조가 어떻게 되어 있는지를 한눈에 볼 수 있습니다.

2. 설정 파일(package.json, tsconfig.json 등) 수정

package.json이나 tsconfig.json처럼 수동으로 편집하는 설정 파일에서 쉼표를 하나 잘못 빠뜨리거나 더 넣으면 전체 빌드가 실패합니다. 수정 후 포맷터에 넣어 유효성을 한 번 확인하는 습관을 들이면 이런 실수를 사전에 잡을 수 있습니다.

3. 데이터 분석 준비

데이터베이스에서 JSON 컬럼을 쿼리하거나, 로그 파일에서 JSON 라인을 추출했을 때 포맷터로 구조를 파악한 뒤 필요한 필드를 추출하는 작업이 훨씬 수월해집니다.

4. 코드 리뷰

Pull Request에서 JSON 파일의 변경 사항을 검토할 때 압축된 JSON을 포맷팅해서 비교하면 어떤 값이 실제로 바뀌었는지 명확하게 파악할 수 있습니다.

5. 테스트 데이터 작성

단위 테스트나 통합 테스트에 사용할 목(mock) 데이터를 JSON으로 작성할 때, 포맷터에서 미리 유효성을 검사하면 테스트 실행 중 파싱 오류로 시간을 낭비하지 않습니다.

JSON 압축의 활용과 주의사항

포맷팅의 반대 개념인 JSON 압축(Minify)도 중요한 기능입니다. JSON을 한 줄로 압축하면 다음과 같은 이점이 있습니다.

네트워크 대역폭 절약: 공백과 줄바꿈을 제거하면 데이터 크기를 최대 20~30% 줄일 수 있습니다.
API 요청 최적화: REST API로 JSON을 전송할 때 압축된 형태가 더 효율적입니다.
환경 변수 설정: Docker나 CI/CD 파이프라인에서 JSON 설정값을 단일 환경 변수에 넣을 때 압축이 필수입니다.
JavaScript 소스 번들: 빌드 최적화 과정에서 JSON 데이터를 압축해 번들 크기를 줄입니다.

단, 압축된 JSON은 사람이 읽기 어려우므로 소스 코드나 설정 파일에는 항상 포맷팅된 JSON을 사용하고, 실제 네트워크 전송이나 환경 변수처럼 공간이 제한된 상황에서만 압축 버전을 활용하는 것이 좋습니다.

JSON과 관련 포맷 비교

JSON과 자주 비교되는 데이터 포맷들의 차이를 이해하면 어떤 상황에 무엇을 쓸지 판단하기 쉬워집니다.

포맷	가독성	파싱 속도	주요 사용처	주석 지원
JSON	보통	빠름	API 통신, 웹 앱 설정	❌
YAML	높음	보통	CI/CD 설정, Kubernetes	✅
XML	낮음	느림	레거시 시스템, SOAP API	✅
TOML	높음	빠름	Rust/Python 설정 파일	✅
CSV	높음(표 형태)	매우 빠름	스프레드시트, 데이터 분석	❌

HMApps에서는 JSON ↔ YAML 상호 변환 도구(hmapps.kr/yaml-json)도 제공하니, 두 포맷 간 변환이 필요할 때 함께 활용해 보세요.

JSON 포맷터 사용 팁과 고급 활용

JSON 포맷터를 더 스마트하게 사용하는 몇 가지 팁을 소개합니다.

💡 팁 1: 중첩 JSON 문자열 처리

종종 JSON 필드의 값 자체가 JSON 문자열인 경우가 있습니다(이중 직렬화). 예를 들어 "data": "{"key": "value"}" 형태입니다. 이 경우 먼저 외부 JSON을 포맷팅하고, 내부 JSON 문자열은 이스케이프를 해제한 뒤 다시 포맷팅해야 합니다.

💡 팁 2: 대용량 JSON 처리

수십 MB에 달하는 대용량 JSON을 브라우저 기반 포맷터에서 처리하면 브라우저가 느려질 수 있습니다. 이런 경우에는 다음 명령어로 터미널에서 처리하는 것이 훨씬 빠릅니다.

# Python 내장 모듈 활용
python3 -m json.tool large-file.json > formatted.json

# jq 도구 사용 (설치 필요)
jq . large-file.json > formatted.json

💡 팁 3: JSON Schema로 구조 검증

데이터의 유효성뿐 아니라 구조가 올바른지도 검증해야 한다면 JSON Schema를 활용해 보세요. 예를 들어 특정 필드가 반드시 있어야 하고, 숫자여야 하며, 범위가 0~100 사이여야 한다는 규칙을 정의할 수 있습니다. API 문서화나 입력 데이터 검증에 특히 유용합니다.

💡 팁 4: 브라우저 개발자 도구 활용

Chrome 개발자 도구(F12)의 Network 탭에서 API 응답을 클릭하면 Preview 탭에서 JSON을 자동으로 트리 형태로 보여줍니다. HMApps 포맷터와 함께 사용하면 원하는 부분을 복사해 더 심층 분석하기 편합니다.

💡 팁 5: VS Code JSON 포맷팅 단축키

Visual Studio Code에서 JSON 파일을 편집 중이라면 별도 도구 없이도 포맷팅이 가능합니다. Shift + Alt + F(Windows/Linux) 또는 Shift + Option + F(macOS)를 누르면 에디터가 자동으로 JSON을 정렬해줍니다. 브라우저 포맷터는 IDE 없는 환경이나 빠른 확인이 필요할 때 특히 유용합니다.