🧰도구상자

🔧 개발자 도구

JSON 포맷·검증, Base64 인코딩/디코딩, 정규식 테스터를 한곳에서.

개발자 도구는 코딩·디버깅 중에 자주 필요한 세 가지 작업 — JSON 정렬과 검증, Base64 인코딩/디코딩, 정규식(RegExp) 테스트 — 을 브라우저 한 곳에서 처리하는 도구 모음입니다. 별도 설치나 로그인 없이 탭만 전환하면 되고, 입력한 데이터는 서버로 전송되지 않고 브라우저 안에서만 처리되므로 API 응답·토큰 문자열 같은 민감한 값도 부담 없이 다룰 수 있습니다.

API를 연동하다 보면 한 줄로 뭉쳐 온 JSON 응답을 사람이 읽을 수 있게 펼치거나, 반대로 전송 크기를 줄이려고 공백을 없애야 할 때가 많습니다. 인증 헤더나 데이터 URI에 쓰이는 Base64 문자열을 원래 텍스트로 되돌려 확인해야 할 때도 있고, 로그에서 특정 패턴만 골라내려고 정규식을 미리 시험해 보고 싶을 때도 있습니다. 이 도구는 그런 순간마다 에디터와 터미널을 오가지 않고 즉시 결과를 확인하도록 만들어졌습니다.

아래에서는 세 기능이 각각 무엇을 어떻게 처리하는지, 자주 만나는 오류의 원인은 무엇인지, 그리고 정규식 플래그의 의미까지 정리했습니다. 값을 입력하는 즉시(또는 버튼을 누르는 즉시) 결과가 갱신되므로, 여러 입력을 바꿔 가며 빠르게 비교해 볼 수 있습니다.

사용 방법

  1. 상단 탭에서 JSON · Base64 · 정규식 중 필요한 기능을 선택합니다.
  2. JSON 탭에서는 JSON 문자열을 붙여넣고 '정렬(Pretty)'을 누르면 2칸 들여쓰기로 보기 좋게 펼쳐지고, '압축(Minify)'을 누르면 공백 없이 한 줄로 합쳐집니다. 문법이 잘못되면 파서가 알려주는 오류 위치·원인이 그대로 표시됩니다.
  3. Base64 탭에서는 인코딩/디코딩 모드를 고른 뒤 텍스트를 입력하면 결과가 실시간으로 나옵니다. 한글·이모지가 섞여도 UTF-8 기준으로 안전하게 변환됩니다.
  4. 정규식 탭에서는 패턴과 플래그(예: gi)를 입력하고 테스트 문자열을 넣으면 매치 건수와 매치된 부분들이 즉시 표시됩니다. 각 매치에 마우스를 올리면 시작 위치(index)를 확인할 수 있습니다.

세 가지 기능 한눈에 보기

이 도구가 실제로 제공하는 기능과 처리 방식은 아래 표와 같습니다. 표에 없는 변환(예: JSON을 다른 포맷으로 바꾸기, URL-safe Base64 등)은 지원하지 않습니다.

개발자 도구 탭별 기능
하는 일처리 방식
JSON정렬(Pretty) · 압축(Minify) · 문법 검증JSON.parse로 파싱 후 2칸 들여쓰기 또는 공백 제거
Base64텍스트 ↔ Base64 인코딩/디코딩UTF-8 바이트 기준 표준 Base64, 입력 시 실시간 변환
정규식패턴 매치 테스트 · 매치 개수/위치 확인브라우저 내장 JavaScript RegExp 엔진 사용

데이터는 브라우저 밖으로 나가지 않습니다

세 기능 모두 자바스크립트로 브라우저 안에서만 계산합니다. 입력한 JSON·문자열·정규식은 서버로 전송되거나 저장되지 않으므로, 외부에 노출되면 안 되는 값도 안심하고 넣을 수 있습니다.

JSON 정렬과 압축은 언제 쓰나요

정렬(Pretty)은 한 줄로 붙어 온 JSON을 2칸 들여쓰기로 계층 구조가 보이게 펼쳐, 어떤 키 아래 어떤 값이 있는지 눈으로 따라가기 쉽게 만듭니다. 압축(Minify)은 반대로 사람이 읽기 위한 공백·줄바꿈을 모두 없애 전송 크기를 줄일 때 씁니다.

정렬·압축을 누르는 순간 내부적으로 JSON을 파싱하기 때문에, 문법이 맞지 않으면 결과 대신 오류 메시지가 나옵니다. 즉 이 도구는 포맷터인 동시에 간단한 JSON 검증기(validator) 역할도 합니다.

  • 정렬: API 응답이나 설정 파일이 한 줄로 뭉쳐 있어 읽기 어려울 때.
  • 압축: 네트워크로 보내거나 코드에 인라인으로 넣을 때 용량을 줄이고 싶을 때.
  • 검증: '어딘가 문법이 틀린 것 같은데'라는 의심이 들 때, 오류 메시지로 위치를 좁힐 때.

흔한 JSON 오류

마지막 항목 뒤의 쉼표(trailing comma), 키를 큰따옴표로 감싸지 않은 경우, 문자열에 작은따옴표를 쓴 경우는 모두 JSON 규격 위반이라 오류가 납니다. JSON에서 키와 문자열은 반드시 큰따옴표를 써야 하고, 주석은 허용되지 않습니다.

Base64는 무엇이고 왜 UTF-8이 중요한가

Base64는 임의의 데이터를 알파벳·숫자와 +, /, = 64개 문자만으로 표현하는 인코딩 방식입니다. 이메일 첨부, 데이터 URI(data:), 인증 토큰 등 텍스트만 다룰 수 있는 자리에 바이너리나 특수문자가 섞인 값을 실어 보내기 위해 씁니다. 암호화가 아니라 단순 변환이므로 디코딩하면 원문이 그대로 복원된다는 점에 유의하세요.

이 도구의 Base64 변환은 UTF-8 바이트를 기준으로 동작합니다. 브라우저 기본 함수는 한글이나 이모지처럼 1바이트를 넘는 문자를 그대로 처리하지 못해 오류가 나는데, 이 도구는 먼저 UTF-8로 인코딩한 뒤 변환하므로 한글·이모지가 섞인 문자열도 손실 없이 왕복합니다.

보안 용도로 쓰지 마세요

Base64는 누구나 즉시 되돌릴 수 있는 인코딩일 뿐 암호화가 아닙니다. 비밀번호나 개인정보를 Base64로 '숨겼다'고 생각하면 안 됩니다. 값을 사람이 못 읽게 감춰야 한다면 해시나 암호화를 써야 합니다.

정규식 플래그(flags)의 의미

정규식 탭은 브라우저에 내장된 JavaScript 정규식 엔진을 그대로 사용합니다. 패턴 옆 칸에 플래그를 조합해 넣을 수 있으며, 매치를 모두 찾기 위해 g(global) 플래그는 없어도 자동으로 적용됩니다. 아래는 이 엔진이 지원하는 플래그입니다.

지원 플래그 (g·i·m·s·u·y 조합 가능)
플래그이름효과
gglobal첫 매치에서 멈추지 않고 모든 매치를 찾음(자동 적용)
iignoreCase대소문자를 구분하지 않음
mmultiline^와 $가 문자열 전체가 아니라 각 줄의 시작·끝에 매치
sdotAll.이 줄바꿈 문자까지 포함해 매치
uunicode유니코드 코드포인트 단위로 해석(이모지 등)
ystickylastIndex 위치에서만 매치 시도

결과 보는 법

패턴·플래그·문자열을 입력하면 '매치 N건'과 함께 매치된 부분들이 나열됩니다. 각 항목에 마우스를 올리면 그 매치가 시작된 위치(index)가 표시됩니다. 패턴이 잘못되면 엔진이 알려주는 오류 메시지가 그대로 나오므로, 복잡한 정규식을 코드에 넣기 전 미리 검증하기 좋습니다.

자주 묻는 질문

입력한 데이터가 서버로 전송되나요?
아닙니다. JSON 정렬·Base64 변환·정규식 매치 모두 브라우저 안에서 자바스크립트로 계산합니다. 입력값은 서버로 전송되거나 저장되지 않으므로 API 응답, 토큰 등 민감한 값도 안전하게 다룰 수 있습니다.
JSON을 눌렀더니 오류가 나요. 왜 그런가요?
정렬·압축은 내부적으로 JSON을 파싱하기 때문에 문법이 규격에 맞지 않으면 오류가 납니다. 가장 흔한 원인은 마지막 항목 뒤의 쉼표, 큰따옴표로 감싸지 않은 키, 작은따옴표로 쓴 문자열, JSON에 넣은 주석입니다. 표시된 오류 메시지가 문제 위치를 좁히는 데 도움이 됩니다.
Base64 디코딩이 안 되고 오류가 떠요.
입력한 문자열이 올바른 Base64 형식이 아닐 때 나타납니다. 앞뒤 공백이나 줄바꿈, Base64에 쓰이지 않는 문자가 섞였는지 확인하세요. 참고로 이 도구는 표준 Base64를 다루며, -와 _를 쓰는 URL-safe 변형은 그대로 디코딩되지 않을 수 있습니다.
한글이나 이모지도 Base64로 변환되나요?
됩니다. 이 도구는 문자열을 UTF-8 바이트로 먼저 변환한 뒤 인코딩하므로, 한글·이모지가 섞인 텍스트도 인코딩했다가 디코딩하면 원문 그대로 복원됩니다.
정규식은 어떤 문법을 따르나요?
브라우저에 내장된 JavaScript 정규식(RegExp) 엔진을 사용합니다. 따라서 자바스크립트에서 쓰는 정규식 문법과 g·i·m·s·u·y 플래그가 그대로 동작합니다. 다른 언어(예: PCRE)의 일부 고유 문법은 지원되지 않을 수 있습니다.
정규식에서 캡처 그룹이나 치환도 되나요?
패턴에 괄호로 캡처 그룹을 넣어도 매치 자체는 정상 동작합니다. 다만 이 도구의 결과 화면은 매치된 전체 문자열과 개수·위치를 보여 주는 데 초점을 두며, 캡처 그룹별 값 표시나 치환(replace) 기능은 제공하지 않습니다.

관련 도구