블로그
도구 가이드, 팁, 개발자 레퍼런스.
-
GIF 압축 가이드: 손실 LZW와 색상 수 줄이기로 움직이는 GIF 용량 줄이기
브라우저에서 GIF를 압축하는 방법. 손실 LZW, 팔레트 크기, 디더링, 크기 조절, 프레임 건너뛰기가 파일 용량을 얼마나 바꾸는지 실측 결과와 CLI 예제로 정리했습니다.
-
AI 챗이나 이슈에 로그를 붙여넣기 전에 반드시 시크릿을 지워라
로그나 .env 파일을 AI 챗이나 깃허브 이슈에 붙여넣을 때 무엇이 유출되는지, 고정된 플레이스홀더로 마스킹하는 방법, 그리고 키가 이미 유출됐을 때 해야 할 일을 다룬다.
-
CA가 CSR을 거절하는 이유와 미리 잡아내는 법
인증기관이 PKCS#10 요청에 서명하기 전에 확인하는 일곱 가지, SAN 없는 Common Name이 쓸모없는 인증서를 만드는 이유, 그리고 CSR 자체 서명을 직접 검증하는 방법.
-
스캔되는 바코드 만들기: 심볼로지, 체크 디지트, 인쇄 실무
1차원 심볼로지를 올바르게 고르고, 체크 디지트를 정확히 계산하고, 유효한 바코드를 읽히지 않는 라벨로 만드는 인쇄 실수를 피하는 방법.
-
CSS clamp(): 정확한 유동형 글꼴
두 뷰포트 끝점에서 정확한 식을 유도하고 계산, 접근성, 실무 코드를 검증합니다.
-
브라우저에서 DNS 조회하기: DNS-over-HTTPS로 A, MX, TXT, CAA 레코드 확인
dig, nslookup, whatsmydns 없이 어떤 브라우저에서든 DNS 레코드를 조회하는 방법. DoH가 fetch() 한 번으로 A, AAAA, CNAME, MX, TXT, NS, SOA, CAA, PTR, SRV를 어떻게 풀어내는지 — DNSSEC, TXT 세그먼트, 전파 지연의 함정과 함께.
-
Zero-Width 문자 탐지기: AI 출력과 코드에 숨겨진 유니코드 찾기
Zero-width 공백, BOM, 양방향 제어 문자, ASCII 텍스트를 숨길 수 있는 유니코드 태그 문자 등 모든 텍스트에서 보이지 않는 유니코드 문자를 탐지하고 제거합니다. Trojan-Source 대응. 브라우저에서 처리.
-
프로처럼 HTTP 헤더 읽기: 실전 가이드
HTTP 원시 헤더를 붙여넣고 보안, 캐싱, CORS, 쿠키 메타데이터를 한 번에 점검하기. 카테고리 이해, 컴플라이언스 함정, 그리고 코드가 이미 보내고 있는 헤더를 제대로 활용하는 방법.
-
event.keyCode가 당신을 속이는 이유: JavaScript 키보드 이벤트 현대 가이드
event.key, event.code, keyCode 중 무엇을 써야 할지 더 이상 추측하지 마세요. 브라우저가 실제로 무엇을 발생시키는지, 수정자 키가 언제 뒤집히는지, IME 조합이 단일 키 핸들러를 망가뜨리는 이유, QWERTY 이외의 레이아웃에서도 살아남는 키보드 단축키를 작성하는 방법을 확인하세요.
-
EyeDropper API로 화면의 모든 픽셀 색상 추출하기
브라우저 네이티브 EyeDropper API에 대한 개발자 가이드 — 작동 방식, 한계, 그리고 스크린샷·비디오·다른 앱에서 색상을 샘플링하는 활용법.
-
MIME 타입 조회: 업로드 검증을 위한 레퍼런스와 매직 바이트 스니퍼
업로드 검증에서 파일 확장자를 더는 신뢰하지 마십시오. IANA 미디어 타입 레지스트리의 동작 방식, 브라우저에서 실행되는 매직 바이트 탐지, 그리고 HTTP 헤더에 넣어야 할 Content-Type까지 정리합니다.
-
IBAN 검증: 잘못된 은행 계좌로 송금이 나가기 전에 막기
mod-97 알고리즘, 국가별 BBAN 구조, OCR 시대에 SEPA 결제를 반송시키는 전형적인 함정 해부. 무료 브라우저 IBAN 검사기 포함.
-
File Hash Checker: 브라우저에서 SHA-256으로 다운로드 검증하기
크기에 상관없이 로컬 파일의 SHA-256, SHA-1, SHA-384, SHA-512, MD5, CRC32를 브라우저에서 나눠 읽어 계산하고 기대값이나 SHA256SUMS와 대조합니다. 업로드하지 않습니다.
-
PKCE 생성기: OAuth 인가 코드 흐름을 제대로 연결하는 실전 가이드
브라우저에서 code_verifier와 code_challenge를 생성해 /authorize와 /token에 정확히 연결하고, 모바일·SPA 로그인을 조용히 깨뜨리는 다섯 가지 PKCE 함정을 피한다.
-
SSL 인증서 디코더: X.509 PEM 현장 점검 실전 가이드
X.509 PEM 인증서를 브라우저에서 디코딩하여 Subject, Issuer, SAN, 유효 기간, 키 타입, 서명 알고리즘, 지문을 확인. 업로드 불필요, OpenSSL 명령도 불필요.
-
CSP 헤더 생성기: 고통 없이 엄격한 Content Security Policy 만들기
지시문, 해시, nonce로 프로덕션급 Content-Security-Policy 헤더를 구축하세요 — 엄격 모드 템플릿과 Express / Nginx 스니펫 포함.
-
AI 토큰이란: 토크나이저가 한국어를 세는 방식
토큰은 번호가 붙은 텍스트 조각입니다. GPT와 DeepSeek 토크나이저가 같은 한국어 문장을 어떻게 나누는지, 글자 수로 어림하면 왜 틀리는지, 코드로 정확히 세는 방법을 실측값으로 정리했습니다.
-
시간대 변환기: IANA, 서머타임, 그리고 개발자를 태우는 UTC 오프셋
IANA 시간대, 서머타임 전환, UTC 오프셋의 실제 동작 원리. JavaScript, Python, Go, Java, SQL용 복붙 가능한 변환 코드까지.
-
Markdown 목차 생성기: 한 파일, 네 가지 앵커 방언
GitHub, GitLab, Jekyll, Bitbucket에서 실제로 동작하는 Markdown 목차 생성. 앵커 slug 알고리즘, 중복 처리 규칙, 마커 기반 원위치 갱신, 그리고 링크를 조용히 망가뜨리는 크로스플랫폼 함정까지.
-
Meta 태그 생성기: 한 페이지, 네 종류의 청중
<head> 메타 블록을 한 번에 생성 — Open Graph, Twitter 카드, Schema.org JSON-LD, SEO 기본 항목. og:image 사양, 표준 URL 함정, 플랫폼별 특이점까지 다룹니다.
-
Cubic Bezier 생성기: CSS 이징 곡선을 감으로 짜지 마세요
컨트롤 포인트 두 개를 드래그하고, 애니메이션을 재생하고, CSS / SCSS / Tailwind를 복사하세요. 더해 cubic-bezier 뒤의 수학, 디자인 시스템 표준 곡선, 운영 환경까지 새어 나가는 흔한 함정도 정리.
-
Favicon 생성기: 브라우저에서 모던 멀티 파일 세트 만들기
ICO, 멀티 사이즈 PNG, apple-touch-icon, manifest로 구성된 모던 favicon 세트를 업로드 없이 생성. ICO 파일 형식, PWA maskable 아이콘, 그리고 각 브라우저가 실제 요청하는 파일을 다룹니다.
-
색상 명도 대비 검사기: 브랜드 컬러를 죽이지 않고 WCAG AA 통과하기
전경/배경에서 WCAG 2.x 비율, 본문/큰 글자/UI 세 단계의 AA/AAA 통과 여부, 미달 시 색상은 유지하고 명도만 조정하는 수정 제안을 한 번에 얻습니다.
-
EXIF 메타데이터 뷰어: 브라우저에서 사진의 GPS와 카메라 정보를 제거하기
브라우저에서 EXIF 메타데이터를 확인하고 JPEG 사진의 EXIF / XMP / IPTC 마커 세그먼트를 제거. JPEG 마커 레이아웃, GPS 좌표 디코딩, SNS의 실제 처리 방식까지 다룬다.
-
CSS 박스 섀도우 생성기: box-shadow 실용 가이드
무료 온라인 생성기로 CSS box-shadow 마스터하기. 문법·레이어링·인셋 섀도우·실용 예시 학습 — 시행착오 없이.
-
ULID 생성기: ULID란 무엇이며 정렬에서 UUID보다 왜 뛰어난가
ULID vs UUID — 차이점 이해, ULID를 언제 사용할지, 생성 방법, 분산 시스템에서 ULID가 정렬 문제를 해결하는 방법.
-
브라우저만으로 끝내는 개발자 생산성 해킹 10가지: JSON / JWT / UUID 한 번에
설치 없이 브라우저에서 바로 실행하는 10가지 개발 효율 팁. JSON 포맷팅, JWT 디코딩, UUID 생성, Cron 해석, 텍스트 비교까지 일상 디버깅 잡일을 몇 초 안에 처리합니다.
-
개발자 도구 진화사: CLI에서 브라우저까지
로컬 CLI에서 클라우드 SaaS, 그리고 클라이언트 사이드 브라우저 앱까지 — 개발자 도구가 어떻게 변했고 왜 브라우저 모델이 승리했는지 정리합니다.
-
엉망진창 JSON에서 깔끔한 API까지: 실전 디버깅 스토리
프로덕션 webhook의 사일런트 실패를 45분 만에 잡아낸 실화. 브라우저 도구로 토큰을 디코딩하고, payload를 비교하고, 포맷하고, 마침내 버그를 찾기까지.
-
모든 웹 개발자가 알아야 할 보안 베스트 프랙티스
해싱, HMAC, JWT, TOTP, 비밀번호 저장 등 웹 보안의 핵심을 브라우저에서 바로 검증할 수 있는 도구와 함께 실전적으로 정리합니다.
-
모든 개발자에게 툴박스가 필요한 이유: 효율적인 워크플로우 만들기
최고의 개발자는 가장 똑똑한 사람이 아니라 도구에 가장 의도적인 사람입니다. 잘 큐레이션된 개발자 툴박스가 왜 워크플로우의 force multiplier가 되는지 정리합니다.
-
서브넷 마스크란? 2진수 변환, CIDR 표기, 서브넷팅 계산 예제
서브넷 마스크를 2진수로 풀어 설명합니다. CIDR 프리픽스 변환표, 네트워크·브로드캐스트 주소 구하기, 서브넷팅과 VLSM 예제, /31·/32, AWS·Azure·네이버 클라우드의 예약 주소까지.
-
AES 암호화 도구: 브라우저에서 텍스트를 안전하게 암호화·복호화
AES-GCM으로 브라우저에서 텍스트를 암호화·복호화하세요. AES 동작 원리·키 크기·모드 선택 방법과 Web Crypto API 구현 예제를 설명합니다.
-
CSS 명시도 계산기: 선택자 가중치 온라인 확인 및 충돌 디버깅
CSS 명시도 계산기로 선택자 가중치를 즉시 확인하세요. 0-0-0 표기법, 자주 실수하는 함정, 스타일 충돌 해결 방법을 설명합니다.
-
CSS Flexbox 생성기: 플렉스 레이아웃을 시각적으로 구축하고 CSS 내보내기
CSS Flexbox 생성기로 플렉스 컨테이너를 시각적으로 구성하세요. justify-content, align-items, flex-wrap, gap, flex-grow를 복사 가능한 CSS로 설명합니다.
-
CSS 그리드 생성기: 코드 없이 그리드 레이아웃 시각적으로 설계하기
온라인 CSS 그리드 생성기로 레이아웃을 시각적으로 설계하고 CSS를 내보냅니다. grid-template-columns, rows, gap, 반응형 패턴을 설명합니다.
-
JSONPath 테스터 온라인: 코드 없이 JSON 데이터 쿼리하기
JSONPath 구문을 배우고 온라인에서 JSON 경로 표현식을 테스트하세요. $ 루트, 점 표기법, 필터, 와일드카드, 재귀적 탐색을 실제 예시와 함께 설명합니다.
-
ASCII 변환 완벽 가이드: 문자 코드 동작 원리와 Unicode·UTF-8 차이
텍스트와 ASCII 코드를 즉시 상호 변환. ASCII 동작 원리, 제어 문자 의미, Unicode·UTF-8과의 관계, 코드에서의 실용적인 활용법을 설명합니다.
-
화면 비율 계산기 완벽 가이드: 16:9, 4:3, 커스텀 비율 계산과 CSS 구현
동영상, 디자인, 웹을 위한 화면 비율 계산과 변환. 16:9, 4:3, 21:9 차이와 리사이즈 시 비율 유지 방법, CSS 구현법을 설명합니다.
-
Base64 인코딩 완벽 해설: 원리부터 실전 코드까지
Base64가 무엇인지, 왜 필요한지, JavaScript·Python·커맨드라인에서 인코딩·디코딩하는 방법과 Base64URL 차이점까지 한 번에 정리합니다.
-
Linux 파일 권한 완벽 가이드: chmod 755, 644, 777 의미와 사용법
8진수 표기로 Linux 파일 권한 완전 이해. chmod 755, 644, 777이 의미하는 것, 언제 사용해야 하는지, 올바른 권한 설정 방법을 실무 중심으로 설명합니다.
-
cron 표현식 완벽 가이드: 문법, 예제, 플랫폼별 설정
cron 표현식 문법을 치트 시트와 실제 예제로 완전 정복. Linux crontab, GitHub Actions, AWS EventBridge, Kubernetes CronJob 설정을 온라인 파서로 즉시 검증하세요.
-
CSS 변수 생성기 완벽 가이드: 커스텀 속성으로 테마 시스템 구축
CSS 커스텀 속성 문법, 스코프, 다크 모드 구현, JavaScript 접근까지 완전 정복. 디자인 토큰 시스템 구축과 온라인 CSS 변수 생성기 활용법을 설명합니다.
-
.env 파일 온라인 파싱·검증 완전 가이드
.env 파일 문법 규칙·자주 하는 실수·각 언어별 파싱 방법을 해설. 브라우저에서 키-값 확인·문법 오류 검사·JSON 변환까지 즉시 실행할 수 있습니다.
-
HMAC-SHA256 완전 가이드: 원리·Webhook 서명 검증·온라인 생성
HMAC의 동작 원리·일반 해시와의 차이·Webhook 서명 검증·JWT 서명 적용을 해설. JavaScript·Python·Go 구현 예제와 브라우저에서 즉시 확인하는 방법을 소개합니다.
-
.htaccess 생성기: mod_rewrite 없이 Apache 설정 파일 만들기
HTTPS 리다이렉트·CORS·캐시·Basic 인증 등 .htaccess 핵심 규칙 완전 해설. 자주 하는 실수와 온라인에서 정확한 .htaccess를 즉시 생성하는 방법을 소개합니다.
-
HTML 엔티티 완전 가이드: 특수 문자 인코딩·디코딩과 XSS 방어
HTML 엔티티의 동작 원리·이름 있는 엔티티와 숫자 참조의 차이·XSS 방지 이스케이프 방법을 해설. JavaScript·Python·PHP 인코딩 구현 예제와 빠른 참조표 포함.
-
JSON Schema 검증기: 스키마로 JSON 데이터를 검증하는 완전 가이드
JSON Schema 핵심 키워드·드래프트 버전·AJV/Python/Go 검증 API를 해설. 온라인 검증기로 스키마와 데이터를 즉시 테스트하는 방법과 흔한 실수를 방지하는 팁 포함.
-
JWT 디코더 완벽 가이드: JSON Web Token 구조와 보안
JWT가 무엇인지, 클레임 해석 방법, 서명 알고리즘 차이, 그리고 개발자가 자주 빠지는 보안 함정까지 실전 중심으로 정리합니다.
-
Lorem Ipsum 생성기 완전 가이드: UI 목업용 플레이스홀더 텍스트 만들기
UI 목업과 개발을 위한 Lorem Ipsum 플레이스홀더 텍스트 생성 방법. Lorem Ipsum의 유래, 사용 시기, 출력 커스터마이징 방법까지 실전 가이드. 무료 도구 제공.
-
마크다운 문법 정리: GitHub·티스토리·노션 차이와 한국어에서 굵게가 안 되는 경우
마크다운 문법을 표로 정리하고 실제 변환 결과로 확인했습니다. 줄바꿈 규칙, 한글 제목의 앵커 주소, 굵게 표시가 조사 앞에서 풀리는 이유, GitHub·티스토리·네이버 블로그·노션의 차이를 다룹니다.
-
Markdown 테이블 생성기: CSV·JSON 가져오기 지원 비주얼 에디터
비주얼 에디터, CSV 붙여넣기, JSON 붙여넣기로 Markdown 테이블을 즉시 생성. GFM 테이블 문법, 컬럼 정렬, 파이프 문자 이스케이프 방법 설명.
-
진수 변환기 가이드: 2진수·8진수·10진수·16진수 완벽 정리
2진수, 8진수, 10진수, 16진수를 즉시 변환. 진수 변환의 원리와 프로그래밍에서 각 진수가 언제 쓰이는지 설명. 무료 온라인 도구 제공.
-
강력한 비밀번호 생성기 가이드: 엔트로피와 보안 원칙
진짜 강력한 비밀번호의 조건, 엔트로피 개념, 암호학적 난수 생성기 활용법, 패스프레이즈 전략, 그리고 개발자를 위한 시크릿 생성 방법을 정리합니다.
-
정규표현식 문법 정리: 한글 범위·휴대전화·우편번호 패턴과 언어별 차이
정규표현식(정규식) 기본 문법을 표로 정리하고, [가-힣]이 놓치는 글자, 한국어에서 \b가 동작하지 않는 이유, 우편번호·010 번호·금액 패턴을 JavaScript·Python·PCRE2·Go로 직접 실행해 확인했습니다.
-
robots.txt 작성법: 네이버 Yeti·구글봇이 읽는 규칙과 실측 예제
RFC 9309와 네이버 서치어드바이저 가이드로 정리한 robots.txt 규칙. 그룹은 하나만 적용, 가장 긴 규칙 우선, 응답 코드별 처리 차이와 AI 크롤러 토큰까지 파서로 확인했습니다.
-
URL 슬러그 생성기: SEO 친화적인 슬러그 만들기와 주의 사항
URL 슬러그의 정의, SEO에 미치는 영향, Unicode·공백·특수 문자가 포함된 문자열을 온라인으로 슬러그화하는 방법. 프로그래밍 구현 예제 포함.
-
텍스트 케이스 변환 가이드: camelCase·snake_case·PascalCase·kebab-case 완전 해설
camelCase·snake_case·PascalCase·kebab-case·SCREAMING_SNAKE_CASE를 즉시 변환. 각 네이밍 컨벤션의 사용 시점과 실무 활용법을 설명합니다.
-
TOTP·2FA 완전 가이드: 시간 기반 일회용 비밀번호의 원리와 구현
TOTP와 RFC 6238의 작동 원리를 설명합니다. 테스트 코드 온라인 생성, HMAC+타임스텝 원리, Node.js/Python/Go TOTP 구현 방법까지 안내합니다.
-
URL 인코딩·디코딩 완벽 가이드: 퍼센트 인코딩 원리와 실전
URL 퍼센트 인코딩이 무엇인지, encodeURI와 encodeURIComponent의 차이, 쿼리 스트링을 올바르게 구성하는 방법과 흔한 실수를 정리합니다.
-
URL 파서 완전 가이드: URL을 구성 요소로 분해하여 이해하기
URL을 프로토콜·호스트·경로·쿼리 파라미터·프래그먼트로 분해하는 방법을 설명합니다. API 디버깅·리다이렉트 추적·보안 리뷰에 활용하는 실무 가이드입니다.
-
UUID 생성기 완벽 가이드: UUID 버전별 차이와 실전 활용
UUID 형식, 버전별 차이(v1~v7), JavaScript·Python·Go·SQL에서 생성하는 방법, 데이터베이스 기본키로 쓸 때 주의사항까지 정리합니다.
-
WebP 변환 완전 가이드: 이미지를 압축하여 웹 성능 개선하기
WebP 변환기로 PNG·JPEG 파일 크기를 줄이는 방법(Google 공개 수치: PNG 대비 26%, JPEG 대비 25~34%)을 설명합니다. 브라우저 지원·폴백 패턴·Next.js 최적화·cwebp CLI 사용법까지 총망라합니다.