개발자 도구 편 - 지금 이 사이트에 구현된 10개 정리
첫 글에서 “현재 이런 도구들이 있습니다” 하고 목록만 훑었는데, 그 사이에 몇 개 더 붙었고 각 도구마다 제가 실제로 어떻게 쓰는지는 못 적었습니다.
카테고리별로 한 편씩 정리하려고 합니다. 첫 편은 개발자 도구. 지금 10개 있습니다.
한 가지 먼저. 입력한 데이터는 외부로 안 나갑니다. JWT 페이로드 까볼 때, 사내 JSON 정리할 때, 정규식 테스트할 때, 전부 브라우저 안에서 처리됩니다. 회사 토큰을 외부 디코더 사이트에 붙여넣는 게 찝찝했던 사람이라면 편하게 쓰셔도 됩니다.
광고 없고 회원가입 없습니다.
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 단위 변환
마치며
10개 전부 업무 중에 “이걸 왜 매번 구글에 검색하지” 싶어서 만든 겁니다. 그래서 저도 쓰면서 불편한 게 나오면 바로 고칩니다. “이거 안 되네?” 싶은 게 있으면 말씀해주세요.
이 사이트의 전체 방향은 왜 이 블로그를 시작했는가에서 이미 적어뒀습니다.
다음 편은 사용편의성 편입니다. 시간대 변환, D-Day, 퍼센트 계산기 같은 일상 도구 차례입니다.