개발자 도구 사용법 — 해시·JSON·정규식·Base64 한 곳에서

개발자 도구 사용법 — 해시·JSON·정규식·Base64 한 곳에서

코딩하다가 이런 경험 없으세요?

• API 토큰을 만들었는데 SHA-256 해시값이 필요해서 매번 온라인에서 찾으신 적 있나요?
• JSON 응답이 한 줄로 와서 읽기 힘들어 에디터에서 포맷 누르고 계시지 않나요?
• 정규식 하나 테스트하겠다고 코드를 실행하고 로그를 찍어보는 게 번거로우신가요?
• Base64로 인코딩된 토큰을 디코딩하려고 Python 쉘을 여는 게 귀찮으신가요?

💡 이럴 때 웰컴스 개발자 도구가 딱이에요. 9개의 핵심 유틸리티를 한 페이지에서 무료로, 로그인 없이, 브라우저에서 바로 사용할 수 있습니다.

👉 개발자 도구 바로 사용하기 → https://www.wellcoms.co.kr/dev-tools/

웰컴스 개발자 도구가 뭐예요?

웰컴스 개발자 도구(Well DevTools)는 웹 개발자, 백엔드 엔지니어, 데이터 엔지니어, 코딩 입문자가 매일 마주치는 작은 변환/검증 작업을 한 곳에 모아둔 무료 온라인 도구 모음입니다. 설치도 회원가입도 필요 없이 브라우저에서 바로 실행됩니다.

결정적인 장점은 보안입니다. 모든 처리는 브라우저 안에서 일어나고, 입력한 텍스트·JSON·코드는 절대 서버로 전송되지 않습니다. API 키, 비밀번호, 고객 데이터를 다루어도 안전합니다.

9개 도구 한눈에 보기

1. 🔐 해시 생성기 (SHA-1, SHA-256, SHA-512, MD5)

문자열 입력 한 번에 4종 해시값을 동시에 출력합니다. SHA-256은 웹 표준 Web Crypto API를 사용해 빠르고 정확하며, MD5는 레거시 호환성 검증이 필요할 때 유용합니다.

이런 분께 추천해요: API 서명 검증, 파일 무결성 체크, 비밀번호 해시 비교, Git 커밋 해시 이해

2. 🔄 인코딩 / 디코딩 (Base64, URL, HTML)

6가지 변환을 양방향으로 지원합니다. UTF-8 안전 인코딩이라 한글이 깨지지 않습니다.

이런 분께 추천해요: JWT 토큰 디코딩, URL 파라미터 인코딩, HTML 특수문자 이스케이프, Data URL 생성

3. 📋 JSON 도구 (포맷, 압축, 검증)

JSON을 2-space 또는 4-space로 들여쓰기하거나, 공백 없이 압축하거나, 문법 오류를 검증합니다. API 응답 디버깅, 설정 파일 정리에 필수입니다.

이런 분께 추천해요: REST API 응답 분석, package.json 정리, JSON 설정 파일 검증

4. 🔍 정규식 테스터

JavaScript 정규식을 실시간으로 테스트합니다. g(전역), i(대소문자 무시), m(멀티라인), s(dotAll) 4가지 플래그를 체크박스로 켜고 끌 수 있습니다. 매칭 결과가 하이라이트로 표시됩니다.

이런 분께 추천해요: 폼 검증 로직 작성, 데이터 추출 패턴 개발, 레거시 정규식 이해

5. 🎨 색상 도구

컬러 피커로 선택하거나 HEX 코드를 입력하면 RGB 값을 보여주고 한 번에 복사할 수 있습니다. CSS 작업, 디자인 시스템 문서화에 유용합니다.

6. 🕐 타임스탬프 변환기

Unix 타임스탬프(초) ↔ 사람이 읽을 수 있는 날짜를 양방향 변환합니다. 데이터베이스의 created_at 필드, 로그 타임스탬프, 캐시 TTL 계산에 매일 쓰입니다.

7. 📝 Lorem 생성기 (한국어/영어)

목업 데이터, 테스트 페이지, 디자인 시안 채우기용 더미 텍스트를 단어/문장/단락 단위로 생성합니다. 한국어와 영어를 모두 지원합니다.

8. 📊 텍스트 비교 (Diff)

두 텍스트를 줄 단위로 비교해서 추가/삭제/변경을 색상으로 표시합니다. 코드 리뷰, 문서 버전 비교, 설정 파일 변경 사항 추적에 활용하세요.

9. 🔢 HEX 뷰어

문자열을 HEX(byte 표현)로 변환하거나 반대로 HEX를 문자열로 되돌립니다. 바이너리 프로토콜 디버깅, 문자 인코딩 학습, 저수준 데이터 검사에 필수입니다.

실전 활용 — 이렇게 쓰보세요

상황 1: JWT 토큰 내용 확인하기

1. 인코딩 탭을 엽니다
2. JWT의 payload 부분(두 번째 . 뒤)을 복사해서 입력창에 붙여넣습니다
3. Base64 디코딩 버튼을 누릅니다
4. 출력된 JSON을 복사해서 JSON 탭으로 이동
5. 포맷 (2space) 버튼으로 읽기 좋게 정리합니다
6. 만료 시간(exp)을 타임스탬프 탭에서 사람이 읽을 수 있는 날짜로 변환합니다

상황 2: API 요청 서명 만들기

1. 서명할 문자열(예: timestamp + API_SECRET)을 해시 탭에 입력
2. SHA-256 버튼으로 해시값 생성 → 복사
3. 같은 문자열을 서버 측에서도 동일하게 해싱했는지 비교

상황 3: 이메일 유효성 검증 정규식 만들기

1. 정규식 탭에서 ^[^@\s]+@[^@\s]+\.[^@\s]+$ 입력
2. i 플래그 체크
3. 테스트 문자열에 여러 이메일을 한 줄씩 넣어 매칭 결과 확인
4. 엣지 케이스(user@localhost, user+tag@gmail.com)가 의도대로 매칭되는지 검증

자주 묻는 질문 (FAQ)

Q: 정말 무료인가요? 회원가입은요?
A: 네. 완전 무료이고 회원가입도, 이메일 입력도 필요 없습니다. 주소창에 /dev-tools/를 입력하면 바로 시작할 수 있습니다.

Q: 입력한 데이터가 서버로 전송되나요?
A: 아닙니다. 모든 변환은 브라우저 안에서 처리됩니다. API 키, 비밀번호, 고객 데이터를 입력해도 서버로 전송되지 않으므로 안전합니다.

Q: 인터넷 연결이 없어도 되나요?
A: 첫 접속 후에는 캐시된 상태에서 대부분의 도구가 오프라인으로 동작합니다. 단, 페이지를 처음 열 때는 인터넷 연결이 필요합니다.

Q: 모바일에서도 쓸 수 있나요?
A: 네. 반응형 디자인이라 폰, 태블릿, 데스크톱 모두에서 사용할 수 있습니다. 출퇴근길에 코드 리뷰하다 정규식 테스트하기 좋습니다.

Q: 마크다운 에디터에서도 같은 도구를 쓸 수 있나요?
A: 네. 같은 9개 도구가 웰컴스 마크다운 편집기에 내장되어 있어, 글을 쓰면서 "도구" 버튼만 누르면 패널이 열립니다. 개발자 도구 페이지는 그 도구들만 따로 빼서 SEO 진입과 직접 링크에 최적화한 독립 페이지입니다.

관련 도구

• 웰컴스 마크다운 편집기 — 글을 쓰면서 같은 9개 도구를 인앱에서 사용할 수 있습니다. 개발자 도구 페이지와 짝꿍 도구.
• 웰컴스 색상 변환기 — HEX, RGB, HSL, OKLCH, CMYK를 모두 변환하고 WCAG 대비율까지 검사합니다. 색상 도구보다 더 깊은 기능이 필요할 때.
• 웰컴스 글자수 세기 — 텍스트의 글자수, 단어수, 바이트수를 실시간으로 계산합니다. SEO 메타 설명 작성할 때 유용.
• 웰컴스 비밀번호 생성기 — 안전한 랜덤 비밀번호를 만듭니다. API 키 발급 후 보조 비밀번호가 필요할 때.
• 전체 온라인 도구 목록 — 20종 이상의 무료 온라인 도구를 한눈에 보세요.

아직도 작은 변환 작업마다 검색하고 계세요?
👉 지금 바로 웰컴스 개발자 도구에서 9개 유틸리티를 한 곳에서 → https://www.wellcoms.co.kr/dev-tools/