사용 안내

JSON Editor 2025.11.19 기준

1. 설치

Chrome(과 Chromium 기반 브라우저)

Chrome 웹 스토어의 JSON Editor 페이지를 열고 Chrome에 추가를 누릅니다.
확인 창에서 확장 프로그램 추가를 누릅니다.
주소창 오른쪽의 퍼즐 모양 확장 프로그램 버튼을 누르고, JSON Editor 옆의 핀 아이콘을 눌러 툴바에 고정해 두면 편합니다.

Microsoft Edge, 네이버 웨일 등 Chromium 기반 브라우저도 대개 Chrome 웹 스토어에서 설치할 수 있습니다. 브라우저에 따라 “다른 스토어의 확장 프로그램 허용” 같은 설정을 먼저 켜야 할 수 있습니다.

Firefox

Firefox 부가 기능 사이트의 JSON Editor 페이지를 열고 Firefox에 추가를 누릅니다.
확인 창에서 추가를 누릅니다.
툴바의 퍼즐 모양 확장 기능 버튼에서 JSON Editor의 톱니바퀴 메뉴 › 툴바에 고정을 고르면 아이콘이 항상 보입니다.

Firefox 109 이상이 필요합니다. 업데이트는 두 브라우저 모두 스토어가 자동으로 설치합니다.

2. 편집기 열기

툴바의 JSON Editor 아이콘을 누르면 지금 보고 있는 창에 새 탭으로 편집기가 열립니다. 팝업이 아니라 일반 탭이라 넓은 화면을 쓸 수 있고, 여러 탭을 동시에 열어 둘 수도 있습니다.

편집기는 마지막으로 편집한 문서를 기억해 두었다가 다음에 열 때 다시 보여 줍니다. 새 문서로 시작하려면 위쪽 메뉴의 New를 누르세요.

3. 코드 보기와 트리 보기

화면은 두 부분으로 나뉩니다.

왼쪽 코드 보기: JSON 원문을 편집하는 코드 편집기(Ace)입니다. 구문 강조, 줄 번호, 괄호 짝 맞추기, 들여쓰기 안내선이 있습니다. 붙여넣기나 직접 입력은 여기서 합니다.
오른쪽 트리 보기: 객체와 배열을 접고 펼치며 구조를 살펴보는 곳입니다. 객체 옆의 숫자는 들어 있는 항목 수입니다.

두 쪽은 자동으로 맞춰지지 않습니다. 가운데의 화살표 버튼으로 옮기세요.

▶ (오른쪽 화살표): 코드 보기의 내용을 트리 보기로 보냅니다.
◀ (왼쪽 화살표): 트리 보기에서 고친 내용을 코드 보기로 보냅니다.

가운데 경계를 끌면 양쪽 너비를 바꿀 수 있고, 이 너비는 다음에도 유지됩니다.

4. 정리·압축·오류 확인

코드 보기 위쪽의 두 버튼을 씁니다.

Format JSON: 설정한 들여쓰기(기본 2칸)로 줄을 나눠 보기 좋게 정리합니다.
Compact JSON: 공백과 줄바꿈을 모두 없애 한 줄로 압축합니다. API 요청 본문이나 설정 값에 붙여 넣을 때 편합니다.

JSON 문법이 틀리면 정리하거나 트리로 보낼 때 화면 위쪽에 오류 메시지가 나타나고, 몇 번째 줄 어디에서 무엇을 기대했는지 알려 줍니다. 편집 중에도 코드 보기 왼쪽에 오류 표시가 나타납니다. 흔한 원인은 마지막 항목 뒤의 쉼표, 작은따옴표, 따옴표 없는 키입니다.

5. 트리에서 편집하기

키나 값을 클릭하면 그 자리에서 고칠 수 있습니다.
각 행 왼쪽의 메뉴 버튼에서 항목 삽입·추가·복제·삭제, 값의 형식 바꾸기(자동, 배열, 객체, 문자열), 정렬을 고릅니다.
행 왼쪽의 끌기 손잡이로 항목을 끌어 다른 위치로 옮깁니다. 여러 항목을 선택해 한꺼번에 옮기거나 지울 수도 있습니다.
트리 위쪽 도구 모음에서 모두 펼치기·모두 접기, 실행 취소·다시 실행, 검색을 씁니다. 검색은 키와 값 모두에서 찾고, 위·아래 버튼으로 결과를 오갑니다.
값이 웹 주소이면 Ctrl을 누른 채 클릭해 새 창에서 열 수 있습니다.

트리에서 고친 뒤 원문이 필요하면 ◀ 버튼으로 코드 보기에 보내세요.

6. JSON Schema 검증

문서가 정해진 형식(JSON Schema)을 따르는지 검사할 수 있습니다.

위쪽 메뉴의 Settings를 엽니다.
JSON schema validation 아래의 Add schema를 누르고, 스키마 파일의 웹 주소(URL)를 입력합니다.
등록한 스키마를 고르면 편집기가 스키마를 불러와 문서를 검사하고, 맞지 않는 곳을 코드 보기와 트리 보기에 표시합니다.

스키마는 입력한 주소에서 브라우저가 직접 내려받습니다. Chrome에서는 처음 쓰는 사이트라면 접근 권한을 묻습니다(파일 열기 참고). 등록한 스키마 목록은 이 브라우저에만 저장됩니다.

7. 파일 열기와 저장

열기

Open › Open from disk: 컴퓨터의 JSON 파일을 고릅니다. 파일은 이 브라우저 안에서만 읽습니다.
끌어다 놓기: 파일을 편집기 화면 위에 끌어다 놓아도 열립니다.
Open › Open url: 웹 주소의 JSON을 불러옵니다. Chrome에서는 그 사이트에 접근해도 되는지 한 번 묻고, 허용하면 브라우저가 그 서버에서 바로 받아 옵니다. 거절하면 불러오지 않습니다.

Firefox에서: 현재 버전의 Firefox 판은 추가 사이트 권한을 요청하지 않으므로 Open url과 URL 스키마 불러오기가 동작하지 않을 수 있습니다. 이 경우 파일로 내려받아 Open from disk로 여세요.

저장

Save › Save to disk: 지금 문서를 .json 파일로 내려받습니다. 이름은 문서 이름(없으면 기본 이름)을 씁니다. 트리 보기에서 마지막으로 고쳤다면 트리의 내용이, 코드 보기에서 고쳤다면 코드의 내용이 저장됩니다.

Save online은 쓰지 마세요. 이 메뉴(와 Ctrl+S)는 원본 프로젝트에서 남아 있는 기능입니다. 저희는 이를 위한 서버를 운영하지 않아 문서가 저장되지 않고 오류가 납니다. 다음 업데이트에서 없앨 예정입니다. 보관이 필요하면 항상 Save to disk를 쓰세요.

8. 단축키

macOS에서도 ⌘가 아니라 Ctrl을 씁니다.

단축키	동작
`Ctrl`+`.`	코드 보기의 내용을 트리 보기로 보내기
`Ctrl`+`,`	트리 보기의 내용을 코드 보기로 보내기
`Ctrl`+`D`	(트리) 선택한 항목 복제
`Ctrl`+`Ins`	(트리) 선택한 항목 앞에 새 항목 삽입
`Ctrl`+`Shift`+`Ins`	(트리) 선택한 항목 뒤에 새 항목 추가
`Ctrl`+`Del`	(트리) 선택한 항목 삭제
`Ctrl`+`Z` / `Ctrl`+`Shift`+`Z`	실행 취소 / 다시 실행

9. 들여쓰기와 다크 모드

Settings › Indentation에서 정리할 때 쓸 들여쓰기 칸 수를 바꿉니다(기본 2).
오른쪽 위의 달(☾) 버튼을 누르면 다크 모드, 해(☼) 버튼을 누르면 밝은 화면으로 바뀝니다. 컴퓨터의 화면 모드와 상관없이 직접 고른 설정을 기억합니다.

10. 삭제

Chrome: 툴바의 JSON Editor 아이콘을 오른쪽 클릭 › Chrome에서 삭제. 또는 chrome://extensions에서 삭제.
Firefox: 아이콘을 오른쪽 클릭 › 확장 기능 제거. 또는 about:addons에서 제거.

삭제하면 브라우저에 보관된 문서와 설정도 함께 지워집니다. 필요한 문서는 먼저 Save to disk로 내려받으세요.