JWT(JSON Web Token)는 현대 웹 개발에서 빠질 수 없는 인증 방식입니다. 하지만 개발 중 JWT 토큰을 다룰 때마다 겪는 불편함들이 있었습니다:

• ❌ 토큰을 수정하려면 여러 번 왔다갔다: 디코딩하고, 수정하고, 다시 인코딩하고...

• ❌ 만료시간 설정이 불편함: Epoch timestamp를 일일이 계산해야 함

• ❌ 서명 검증 후 재서명까지 여러 단계: Secret 바꾸면 처음부터 다시

• ❌ 토큰의 어느 부분이 헤더고 페이로드인지 헷갈림

이런 불편함을 해소하고자 실시간으로 동기화되는 JWT 도구를 만들었습니다.

🔗 jwt.huny.dev 에서 바로 사용해보세요!

가장 큰 특징은 모든 것이 실시간으로 동기화된다는 점입니다.

JWT Token ⟷ Header/Payload

• JWT 토큰을 입력하면 → Header와 Payload가 자동으로 디코딩

• Header나 Payload를 수정하면 → JWT 토큰이 즉시 갱신

• Secret을 변경하면 → 토큰이 자동으로 재서명

별도의 Encode/Decode 버튼이 없습니다. 그냥 수정하면 끝!

Secret 키를 입력하면 실시간으로 서명 검증이 이루어집니다.

• ✅ Verified: Secret이 올바를 때

• ❌ Invalid Signature: Secret이 틀렸을 때

프로덕션 환경의 토큰을 가져와서 검증하고, Secret을 바꿔서 새 토큰을 만드는 것도 순식간입니다.

토큰의 만료시간(exp) 설정이 개발자들에게 가장 번거로운 부분 중 하나입니다. 이 도구는 세 가지 방식으로 만료시간을 편집할 수 있습니다:

토큰 만료시간 1시간 연장? 클릭 몇 번이면 끝입니다.

JWT 토큰은 .으로 구분된 세 부분으로 이루어져 있습니다:

eyJhbGc...  .  eyJzdWI...  .  SflKxwRJ...
  🔴 Header      🟣 Payload      🔵 Signature

각 파트가 색상으로 구분되어 표시되므로, 토큰의 구조를 한눈에 파악할 수 있습니다.

상황: API 테스트 중인데 토큰이 계속 만료됨
해결:
1. 토큰 붙여넣기
2. Expiration Editor에서 +1시간 설정
3. 새 토큰 복사해서 사용

⏱️ 소요시간: 10초

상황: 개발 환경에서 프로덕션 토큰 구조 그대로 사용하고 싶음
해결:
1. 프로덕션 토큰 붙여넣기
2. Secret 필드에 개발 환경 Secret 입력
3. 자동으로 재서명된 토큰 생성됨

⏱️ 소요시간: 15초

상황: 토큰에 어떤 정보가 들어있는지 확인하고 일부 수정하고 싶음
해결:
1. 토큰 붙여넣으면 JSON 형태로 Payload 표시됨
2. JSON 직접 수정 (name, role, permissions 등)
3. 자동으로 새 토큰 생성됨

⏱️ 소요시간: 20초

많은 개발자들이 jwt.io를 사용하고 있습니다. 물론 훌륭한 도구지만, 제가 만든 도구는 **개발자 경험(DX)**에 더 집중했습니다:

💡 jwt.io는 JWT 표준을 배우기에 좋고, jwt.huny.dev는 실무에서 빠르게 사용하기에 좋습니다.

이 도구는 속도와 사용자 경험을 최우선으로 설계했습니다.

• ⚡ Vite: 번개처럼 빠른 개발 서버와 빌드

• 🎯 React Hooks: 실시간 동기화를 위한 효율적인 상태 관리

• 🎨 Tailwind CSS: 일관되고 모던한 다크 테마 UI

• 🔐 웹 표준 기반의 가벼운 JWT 라이브러리

• 🌐 브라우저 네이티브 Web Crypto API 활용

• 📦 작은 번들 크기 (jsonwebtoken 대비 훨씬 가벼움)

• 🌍 글로벌 엣지 네트워크: 전 세계 어디서나 빠른 로딩

• ⚡ 인스턴트 로딩: 서버 콜드 스타트 없음

• 💰 무료 티어: 하루 10만 요청까지 무료

• 📦 Total Bundle: ~55KB (gzip)

• ⏱️ First Load: < 1초

• 🎯 Core Web Vitals: 모두 녹색

개발자 도구는 어두운 화면에서 사용하는 경우가 많습니다. 눈의 피로를 줄이기 위해 다크 테마를 기본으로 설계했습니다.

"Encode" 버튼, "Decode" 버튼이 없습니다. 그냥 입력하면 자동으로 처리됩니다. 클릭 횟수를 최소화하여 작업 흐름을 끊지 않습니다.

API 테스트 중 모바일에서 확인해야 할 때도 있습니다. 모든 화면 크기에서 완벽하게 작동합니다.

이 도구는 완전히 클라이언트 사이드에서 작동합니다:

• ✅ JWT 토큰이 서버로 전송되지 않음

• ✅ Secret 키가 저장되지 않음

• ✅ 네트워크 요청 없이 모든 처리가 브라우저에서 완료

• ✅ 개인정보 보호 완벽

Cloudflare Workers는 정적 파일(HTML, CSS, JS)만 서빙하며, 실제 JWT 처리는 전부 사용자 브라우저에서 일어납니다.

1. 상단 JWT Token 필드에 토큰 붙여넣기
2. 아래 Header와 Payload가 자동으로 표시됨
3. Secret 입력하면 서명 검증 결과 확인

1. Header 또는 Payload JSON 편집
2. Secret 입력
3. 자동으로 새 토큰이 생성됨
4. 토큰 복사해서 사용

1. Expiration Editor에서 원하는 모드 선택 (Epoch/GMT/Local)
2. 날짜/시간 선택
3. Payload의 exp 값과 토큰이 자동으로 업데이트됨

현재 고려 중인 기능들:

💬 원하는 기능이 있다면 GitHub Issues에 제안해주세요!

JWT가 처음이신가요? 이 리소스들을 추천합니다:

• 📖 JWT.io Introduction - JWT 기본 개념

• 📘 RFC 7519 - JWT 표준 명세

• 🎥

• 📝 The Ultimate Guide to handling JWTs on frontend clients

🔗 jwt.huny.dev

• 💙 사용해보시고 피드백 주세요

• 🐛 버그를 발견하셨나요? 알려주세요

• 💡 새로운 기능 아이디어가 있나요? 제안해주세요

• ⭐ 도움이 되셨다면 공유해주세요!

#JWT #WebDev #DevTools #CloudflareWorkers #React #OpenSource #DeveloperExperience

JWT 토큰 작업이 이제 10초면 충분합니다.

디코딩, 편집, 재서명, 검증 - 모든 것이 실시간으로 자동으로 처리됩니다.

복잡한 설정이나 버튼 클릭은 필요 없습니다. 그냥 입력하고 사용하세요.

개발 중 JWT 작업이 필요할 때, 브라우저 북마크에 추가해두시면 유용할 겁니다!

🔗 jwt.huny.dev - 지금 바로 사용해보세요.

💌 Made with ❤️ by huny.dev