개발자 도구 편 - 지금 이 사이트에 구현된 15개 정리
첫 글에서 “현재 이런 도구들이 있습니다” 하고 목록만 훑었는데, 그 사이에 몇 개 더 붙었고 각 도구마다 제가 실제로 어떻게 쓰는지는 못 적었습니다.
카테고리별로 한 편씩 정리하려고 합니다. 첫 편은 개발 작업에 쓰는 도구입니다. 개발·암호화·텍스트 분류의 15개를 정리합니다.
JSON 정리·JWT 처리·정규식 검사는 브라우저에서 계산합니다. JSON 스키마 URL 가져오기와 Markdown 원격 이미지는 외부 요청을 할 수 있고 페이지의 광고·분석·로그인 요청도 별도입니다. 실제 회사 토큰이나 비밀 키 대신 테스트용 데이터를 사용하세요.
기본 도구는 로그인 없이 쓸 수 있고 계정·Drive 동기화는 선택 기능입니다. 프로덕션 페이지에는 광고·분석 스크립트가 포함됩니다. 자세한 데이터 흐름은 개인정보처리방침에서 확인할 수 있습니다.
1. JSON 포맷터
한 줄짜리 API 응답의 구조를 까볼 때, 큰 JSON 두 버전 차이 비교할 때 제일 많이 씁니다.
포맷팅과 압축은 기본이고, JSON diff, 샘플 데이터 생성, 스키마에서 데이터 만들기까지 한 화면에서 됩니다. 스키마는 URL만 붙여넣어도 끌어오고, 로컬 파일 드래그도 받습니다.
→ JSON 도구
2. JWT 디코더/인코더
“이 토큰에 role 뭐 들어있더라” 싶은 순간에 엽니다. 인증 버그 잡을 때나 새 토큰 직접 서명해서 실험할 때도.
헤더와 페이로드 까주는 건 기본, HS/RS/ES/PS/EdDSA 전 알고리즘으로 서명까지 됩니다. exp, iat, nbf 같은 시간 클레임은 사람이 읽을 수 있는 날짜로 자동 변환됩니다.
예제 불러오기로 테스트 토큰을 확인할 수 있습니다. 읽은 클레임과 검증 결과를 구분하는 과정은 JWT 디코딩과 검증에 정리했습니다.
→ JWT 도구
3. 정규식 테스터
패턴 짜다가 매치가 안 될 때, 플래그 차이가 헷갈릴 때, 한국 전화번호처럼 로케일 타는 패턴 검증할 때.
패턴/플래그/테스트 문자열이 전부 URL에 저장돼서 링크로 공유할 수 있습니다. 이메일, URL, IPv4, 한국 전화번호 프리셋이 내장돼 있고, g i m s u d 플래그는 각각 설명 툴팁이 붙어 있습니다. 매치된 위치는 하이라이트로, 캡처 그룹은 따로 표시됩니다.
→ 정규식 테스터
4. SQL 포맷터
ORM이 뱉어낸 SQL 한 줄을 읽을 수 있게 펴는 용도. PR 리뷰 중에 쿼리 두 버전 차이 볼 때도.
포맷팅과 SQL diff 둘 다 됩니다. 에디터 자체가 구문 강조를 해줘서 포맷 돌리기 전에도 키워드/식별자 구분은 됩니다.
→ SQL 도구
5. Base64 인코더/디코더
data URL 찍을 때, 토큰 안에 박힌 Base64 짤 때, 이미지를 Base64로 바꿔 CSS에 박을 때.
텍스트와 이미지 파일 양쪽 다 됩니다. PNG/JPEG/GIF/WebP/SVG를 최대 10MB까지 처리하고, 디코딩 시엔 매직 바이트로 파일 형식을 자동 감지합니다. 드래그로 넣으면 결과는 미리보기로 뜹니다.
6. URL 인코더
쿼리 파라미터에 한글/공백 들어가서 깨질 때. encodeURI랑 encodeURIComponent 뭘 써야 할지 헷갈릴 때도 여기서 바로 비교됩니다.
같은 입력에 대한 두 함수 결과가 나란히 표시돼서 어디서 차이가 나는지 바로 보입니다. 한국어 포함된 전체 URL 통째로 넣어도 됩니다.
→ URL 인코더
7. Hash 생성기
파일 무결성 체크, HMAC 서명 테스트, API가 요구하는 특정 해시 결과 뽑기.
알고리즘 28개를 지원합니다. MD5, SHA-1/2/3, Keccak, BLAKE2/3, RIPEMD, SM3, Whirlpool 같은 암호학적 해시부터 CRC32/64, xxHash 같은 비암호학적 해시까지. 대부분 HMAC 모드도 됩니다. 기본 선택이 SHA-256/SHA-512/MD5 세 개라 한 번에 비교 가능하고, 취약/사용 중단 알고리즘은 라벨로 표시됩니다.
→ Hash 생성기
8. 토큰 생성기
테스트 계정 비밀번호, API 키, 세션 토큰 임시로 만들 때.
대소문자/숫자/기호 조합을 고르고 길이는 1~256, 한 번에 최대 20개까지 뽑힙니다. 중복 허용 여부와 커스텀 문자셋 지정도 가능. 기호 옵션 바꿀 때마다 즉시 재생성되기 때문에 “이 서비스가 특수문자 받나?” 확인용으로 빠릅니다.
→ 토큰 생성기
9. Case Converter
API 필드명을 JS 변수로 옮길 때. DB 컬럼명을 Go 구조체 필드로 바꿀 때. 환경변수 네이밍 정리할 때.
camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, UPPERCASE, lowercase, Sentence case 8가지가 한 번 입력하면 동시에 나옵니다. “어떤 케이스로 바꿀까”보다 “전부 어떻게 보이는지” 놓고 고를 때 쓸만합니다.
10. UI 단위 변환
디자이너가 16px로 준 값을 rem으로 환산할 때. vw/vh로 바꿀 때. Android dp/sp나 iOS pt 같은 플랫폼별 단위 맞출 때.
px/rem/em/vw/vh/dp/sp/pt 8단위 상호 변환. 웹 base size, 뷰포트, Android density, iOS scale 같은 기준값은 전부 설정 가능합니다. 모바일 시안이면 뷰포트 값만 바꾸면 vw 환산이 맞아떨어집니다.
→ UI 단위 변환
11. 컬러 비교
여러 색을 나란히 놓고 인터페이스 미리 보기에서 비교합니다. 색 값을 복사해 스타일시트에 옮길 수 있지만, 명암비 검사나 CSS 테마 생성까지 제공하지는 않습니다.
→ 컬러 비교 도구
12. Markdown 미리 보기
제목·목록·표·코드 블록을 작성하면서 결과를 확인합니다. 문서는 편집 후 #md=br1.… URL 조각에 담기며 링크를 받은 사람도 읽을 수 있습니다. 원격 이미지를 넣으면 이미지 호스트로 요청할 수 있습니다.
13. UUID·ULID 생성
테스트 레코드의 식별자가 필요할 때 형식과 개수를 고른 뒤 생성합니다. 한 번에 최대 1,000개를 만들며 옵션을 바꾸면 새로 생성해야 합니다. ULID에는 시간 정보가 포함되므로 비밀 토큰처럼 쓰지 않습니다.
14. Cron 설명
5개 필드 식과 IANA 시간대, 기준 시각을 넣어 다음 실행 시각 다섯 개를 봅니다. 서머타임으로 없는 시각은 건너뛰며 실제 작업을 예약하지는 않습니다.
→ Cron 설명기
15. JSON·YAML·CSV 변환
JSON과 YAML은 숫자의 원래 표기를 유지해 변환합니다. CSV는 같은 열 구성을 가진 문자열 레코드만 다루며, 중첩 객체나 숫자 셀을 임의로 텍스트로 바꾸지 않습니다. 입력 한도는 UTF-8 1MiB입니다.
→ 데이터 변환기
마치며
입력 형식과 필요한 결과에 따라 도구를 골라 쓰세요. 각 도구 아래에는 예제와 지원 범위가 있고, 문제 제보 링크로 도구 이름과 오류 분류를 담은 이메일 초안을 열 수 있습니다.
이 사이트의 전체 방향은 왜 이 블로그를 시작했는가에서 이미 적어뒀습니다.
다음 편은 사용편의성 편입니다. 시간대 변환, D-Day, 퍼센트 계산기 같은 일상 도구 차례입니다.