브라우저만으로 동작하는 50개 이상의 개발자 도구를 만들었습니다 — 프라이버시가 중요한 이유와 제작 방법
Source: Dev.to
매주 새로운 브라우저 탭을 열고 “json formatter online” 같은 것을 검색합니다.
도구를 보기 전에 광고 배너 3개가 표시됩니다.
작업을 “저장”하려면 계정을 만들어야 합니다.
내가 입력한 데이터를 조용히 서버에 업로드합니다.
가장 신경 쓰이는 부분은 마지막 항목입니다. 개발자들은 실제 JWT 토큰 같은 민감한 정보를 이 도구에 붙여넣습니다.
그래서 저는 SnapTxt를 만들었습니다 — 브라우저에서 완전히 실행되는 50개 이상의 개발자 유틸리티 모음입니다.
툴킷은 제가 가장 자주 사용하는 항목들을 포함합니다:
Data & text
JSON formatter, validator, minifier, diff, tree explorer
SQL formatter
XML formatter
YAML → JSON, CSV → JSON converters
Base64 encode/decode, URL encoder, hash generator
Auth & security
JWT decoder & generator
RSA key generator
bcrypt generator
x.509 certificate decoder
Password generator
Images
Image compressor
Image format converter
Image to text (OCR via Tesseract.js)
SVG to PNG, favicon generator, code-to-image
Frontend / CSS
Regex tester
CSS gradient generator, box shadow generator
Color converter
Mermaid live editor
HTML live editor, HTML to Markdown, HTML to JSX
Cron expression builder
And more — word counter, text diff, unix timestamp, lorem ipsum, QR code generator 등
이 앱은 Next.js 로 제작되어 Firebase Hosting에 정적 파일로 배포되었습니다. 서버가 없습니다.
편집기 스타일 입력을 위해 CodeMirror 6 사용
OCR을 위해 Tesseract.js 사용 (Web Worker에서 WASM 바이너리 실행)
Chrome 내장 Prompt API (Gemini Nano)를 이용해 JSON, SQL, JWT 도구에 AI 설명 기능 제공 — AI 추론도 모두 디바이스에서 이루어집니다.
정적 배포이기 때문에 최초 로드 후 오프라인에서도 동작합니다.
프라이버시 보장은 정책이 아니라 아키텍처적인 사실입니다. 서버가 없을 때
이는 특히 개발자에게 중요합니다. 프로덕션 JWT를 디버깅할 때 아마도
- 정기적으로 사용하는 도구 중 빠진 것이 있나요?
- “서버 없음” 제약이 오히려 제한이 되는 도구가 있나요?
- 디바이스/브라우저에서 깨지거나 느린 부분이 있나요?
snaptxt.app 에서 확인해 보세요 — 유용하다고 생각하시면 공유나 링크를 남겨 주시면 정말 감사하겠습니다.