개발자 도구

카테고리 안내

개발자 도구는 JSON 정리, 코드 비교, UUID, JWT, 정규식, 색상, CSS 단위처럼 구현과 디버깅 중 반복되는 작은 확인 작업을 빠르게 처리합니다. 입력과 출력이 분명한 도구부터 공개해, 콘솔이나 별도 스크립트를 열기 전 1차 검산에 쓰기 좋게 구성했습니다.

토큰, 키, 로그처럼 민감할 수 있는 값은 공유 환경에서 붙여넣기 전 보안 정책을 확인해야 합니다. 브라우저 처리 도구라도 업무 데이터 사용 기준은 각 조직의 규칙을 우선합니다.

현재 66개 대표 도구를 우선 공개하고 있으며, JSON 포매터, UUID 생성기, 비밀번호 생성기, JWT 디코더, 정규식 테스터 등을 포함합니다.

개발자 도구 목록

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.
• Wi-Fi QR 코드 - Wi-Fi 네트워크 정보를 QR 코드로 만들어 손님이 쉽게 연결하게 합니다.
• UTM 파라미터 생성기 - URL에 UTM 파라미터를 추가해 마케팅 캠페인 추적 링크를 생성합니다.
• CSS vw 단위 변환기 - px 값을 viewport 너비 기준 vw 단위로 변환하거나 그 반대로 변환합니다.
• CSS clamp 생성기 - 최솟값·최댓값과 뷰포트 범위를 입력해 CSS clamp() 함수를 자동으로 생성합니다.
• 색상 팔레트 - 색상 피커로 색상을 선택하고 HEX, RGB, HSL 값과 보색·유사색을 확인합니다.
• SQL 포매터 - 압축되거나 뒤섞인 SQL 쿼리를 SELECT·FROM·WHERE·JOIN 등 절 단위로 보기 좋게 정렬합니다. MySQL·PostgreSQL·SQLite 등 주요 DBMS 방언을 지원합니다.
• HTML 포매터 - 한 줄로 압축되거나 들여쓰기가 엉망인 HTML 코드를 태그 계층에 맞춰 줄바꿈과 들여쓰기로 정리합니다. CMS·API에서 받은 HTML 응답을 분석할 때 특히 유용합니다.
• CSS 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• JavaScript 포매터 - JavaScript 코드를 Prettier 기준으로 읽기 좋게 정리합니다.
• JS/CSS 압축기 - JavaScript와 CSS 코드를 공백 제거와 압축 규칙으로 최소화합니다.
• XML 포매터 - XML 문서를 파싱하고 계층 구조에 맞춰 들여쓰기합니다.
• YAML 포매터 - YAML 문서를 일관된 들여쓰기와 줄바꿈으로 정리합니다.
• 코드 비교 도구 - 두 코드 또는 텍스트를 줄 단위로 비교해 추가·삭제 내용을 표시합니다.
• Cron 표현식 생성기 - 분, 시, 일, 월, 요일 값을 조합해 cron 표현식을 생성합니다.
• Cron 다음 실행 시간 계산기 - Cron 표현식의 다음 실행 예정 시간을 현재 시각 기준으로 계산합니다.
• HTTP 상태 코드 조회 - HTTP 상태 코드의 이름과 의미를 빠르게 조회합니다.
• MIME 타입 조회 - 파일 확장자와 MIME 타입을 빠르게 찾아봅니다.
• 키보드 이벤트 확인기 - 키 입력 이벤트의 key, code, modifier 값을 즉시 확인합니다.
• User-Agent 분석기 - User-Agent 문자열에서 브라우저, OS, 디바이스 정보를 추출합니다.
• Regex 치환 테스트 - 정규식 패턴과 replacement 값을 적용해 치환 결과를 확인합니다.
• JSON Path 테스트 - JSON 데이터에서 JSONPath 표현식으로 원하는 값을 추출합니다.
• CSS box-shadow 생성기 - 슬라이더로 그림자 값을 조정하고 box-shadow CSS를 생성합니다.
• CSS border-radius 생성기 - 미리보기로 둥근 모서리 값을 확인하고 border-radius CSS를 생성합니다.
• CSS gradient 생성기 - 색상과 각도를 조정해 linear-gradient CSS를 생성합니다.
• CSS easing 생성기 - cubic-bezier 값을 조정해 CSS easing 함수를 생성합니다.
• Flexbox 생성기 - flex-direction, justify-content, align-items, gap 값을 조정해 Flexbox CSS를 생성합니다.
• Grid 생성기 - 컬럼 수, gap, 아이템 수를 조정해 CSS Grid 레이아웃 코드를 생성합니다.
• z-index 정리 도구 - 이름과 z-index 값을 줄 단위로 입력해 낮은 값부터 정렬합니다.
• cURL → fetch 변환기 - cURL 명령어를 JavaScript fetch 코드로 즉시 변환합니다. API 문서에서 cURL 샘플을 복사해 붙여넣으면 메서드·헤더·바디가 모두 채워진 fetch 함수를 생성합니다.
• fetch → axios 변환기 - fetch 코드를 axios 요청 형식으로 바꿉니다.
• HTTP Header 파서 - 헤더 문자열을 key-value 형태로 파싱합니다.
• .env 정리 도구 - .env 파일의 키를 알파벳순으로 정렬하고 중복 변수를 탐지합니다. 개발·스테이징·운영 환경 파일을 정리하거나 신규 팀원 온보딩 시 빠르게 변수 목록을 파악할 때 유용합니다.
• package.json 정리 도구 - package.json을 붙여넣으면 scripts·dependencies·devDependencies를 알파벳순으로 정렬하고 주요 필드를 한눈에 파악할 수 있게 표시합니다. 패키지 의존성 현황 점검과 신규 프로젝트 리뷰에 유용합니다.
• semver 비교기 - 두 시맨틱 버전(semver)의 크기를 비교하고 버전 범위 표기를 해석합니다.
• Gitignore 생성기 - 언어/프레임워크별 gitignore 템플릿을 생성합니다.
• Dockerfile 포매터 - Dockerfile 명령어를 정리하고 구조를 보기 좋게 표시합니다.
• Docker Compose 포매터 - docker-compose YAML을 보기 좋게 정리합니다.
• URL 파서 - URL을 protocol, host, path, query로 분해합니다.
• User-Agent 생성기 - 테스트용 User-Agent 문자열을 생성합니다.
• API 응답 시간 메모 계산기 - 응답 시간 목록의 평균, p95, p99를 계산합니다.
• GraphQL 포매터 - GraphQL query/mutation을 정리합니다.
• GraphQL 변수 병합 도구 - GraphQL query와 variables JSON을 API 요청 body 형태로 병합합니다.
• SQL IN 절 생성기 - 줄 목록을 SQL IN (…) 형태로 변환합니다.
• JSON Mock 데이터 생성기 - 필드 정의를 기준으로 샘플 JSON 배열을 생성합니다.
• CSS text-shadow 생성기 - X/Y 오프셋, blur, 색상, 투명도를 조정해 CSS text-shadow 코드를 만듭니다.
• CSS filter 생성기 - blur, brightness, contrast, grayscale 등 CSS filter 값을 미리 보며 생성합니다.
• 색상 음영 팔레트 생성기 - 기준 HEX 색상 하나로 50~950 단계의 Tailwind 스타일 음영 팔레트를 생성합니다.
• Meta / OG 태그 생성기 - title, description, canonical, OG, Twitter Card 메타 태그 HTML을 생성합니다.
• JSON → 표 변환기 - JSON 객체 배열을 행과 열로 펼친 표로 변환하고 CSV로 내보냅니다.
• JSON 트리 뷰어 - JSON 데이터를 접고 펼 수 있는 트리 구조로 보여줍니다.
• CSS Specificity 계산기 - CSS 선택자의 우선순위(명시도) 점수를 계산하고 비교합니다.
• Git 브랜치명 생성기 - 작업 제목을 Git 브랜치 명명 규칙에 맞는 이름으로 변환합니다.
• Hash 생성기 - 텍스트를 MD5·SHA-1·SHA-256·SHA-512로 해싱합니다. HEX 및 Base64 출력 형식을 지원합니다.
• JSON Schema 검증기 - JSON 데이터를 JSON Schema(Draft-7 기반)와 대조해 유효성을 검사하고 오류 위치를 JSON Pointer로 표시합니다.
• 브라우저 정보 확인 - 현재 브라우저가 알려주는 브라우저·운영체제·기기·화면·지역 정보를 한눈에 확인합니다.
• RSA 계산기 - 두 소수 p·q와 공개 지수 e로 RSA 키(n, φ, d)를 계산하고 암호화·복호화 과정을 확인하는 학습용 도구입니다.
• 랜덤 API Key 생성기 - Base62·Hex·Base64URL·UUID 등 다양한 형식의 암호학적으로 안전한 랜덤 API 키를 브라우저에서 생성합니다.
• XML 유효성 검사기 - XML이 올바른 형식(well-formed)인지 검사하고 오류 메시지를 보여주며, 들여쓰기된 형태로 정리합니다.
• YAML 유효성 검사기 - YAML 문법을 검사하고 오류 줄·열 위치를 표시하며, 변환된 JSON을 미리 보여줍니다.
• 색상 대비 검사기 - 전경색과 배경색을 선택해 WCAG 2.1 기준 색상 대비율(Contrast Ratio)을 계산하고 AA/AAA 접근성 등급을 확인합니다.