프라이버시 우선 브라우저 기반 Dev Tools 컬렉션을 만들었습니다

Source: Dev.to

포함된 도구

현재까지 10개의 도구가 있습니다:

• JSON Formatter – 구문 강조와 함께 포맷, 압축, 검증
• Base64 Codec – 전체 유니코드 지원을 포함한 인코딩/디코딩
• URL Encoder/Decoder – 쿼리 문자열 및 URI 구성 요소용
• Hash Generator – Web Crypto API를 이용한 SHA‑1, SHA‑256, SHA‑384, SHA‑512
• Timestamp Converter – 유닉스 타임스탬프를 사람이 읽을 수 있는 날짜로 변환 및 역변환
• Color Picker – HEX, RGB, HSL 간 변환
• Markdown Preview – GitHub Flavored Markdown을 실시간으로 렌더링
• Regex Tester – 캡처 그룹 강조와 플래그 토글이 가능한 실시간 매칭
• JWT Decoder – 토큰을 어디에도 전송하지 않고 헤더와 페이로드를 디코딩
• Text Diff – 파일 업로드를 지원하는 인라인 및 나란히 보기

클라이언트‑사이드가 중요한 이유

매일 사용하는 도구들을 생각해 보세요. JWT 토큰에는 사용자 데이터가 들어 있습니다. JSON 페이로드에는 API 키가 포함될 수 있습니다. Base64 문자열은 민감한 정보를 인코딩하고 있을 수도 있죠.

Toolphin에서는 모든 처리가 브라우저 탭의 JavaScript에서 이루어집니다. 데이터를 유출할 백엔드가 전혀 없습니다. 직접 확인해 보세요 — 네트워크 탭을 열고 지켜보면 아무것도 전송되지 않는 것을 확인할 수 있습니다.

기술 스택

• Next.js 16 + App Router 및 정적 사이트 생성
• TypeScript – 타입 안전성 확보
• Tailwind CSS + shadcn/ui – UI 구현
• Vitest + React Testing Library – 단위 테스트
• Playwright – E2E 테스트 (데스크톱 + 모바일)
• Vercel – 호스팅

만족하는 기술적 결정

• Web Crypto API를 이용한 해싱 – 별도의 암호화 라이브러리가 필요 없습니다. 브라우저 내장 crypto.subtle.digest()가 SHA 해싱을 빠르게 처리합니다.
• 정규식 기반 구문 강조 – JSON Formatter에서는 무거운 Prism이나 Highlight.js 같은 라이브러리를 사용하지 않고, 간단한 정규식 기반 하이라이터를 직접 구현했습니다. 단일 언어에선 이것만으로 충분합니다.
• 로컬 폰트 – Google Fonts 대신 geist npm 패키지를 사용해 외부 네트워크 요청을 없앴습니다.
• 플래시 없는 다크 모드 – “ 안의 인라인 스크립트가 localStorage를 읽어 React가 하이드레이트되기 전에 테마 클래스를 설정하므로, 다크 모드 사용 시 흰색 플래시가 발생하지 않습니다.

배운 점

• SEO는 첫날부터 중요합니다. 각 도구 페이지마다 고유한 title, meta description, Open Graph 태그, JSON‑LD 구조화 데이터를 갖추었습니다. 자동 생성된 사이트맵은 도구 레지스트리에서 추출합니다. 처음부터 이렇게 했어야 했는데, 나중에 추가하면서 뒤늦게 깨달았습니다.
• "use client"는 절단칼이어야지 망치가 되어서는 안 됩니다. Next.js에서는 인터랙티브한 leaf 컴포넌트만 클라이언트 컴포넌트로 만들면 됩니다. 래퍼와 레이아웃을 서버 컴포넌트로 유지하면 나머지는 서버‑렌더링이 유지됩니다.
• 테스트가 시간을 절약합니다. 모든 도구에 단위 테스트와 E2E 테스트를 작성했습니다. 초기에는 부담처럼 느껴졌지만, 공유 컴포넌트를 리팩터링할 때 여러 회귀를 잡아냈습니다.

앞으로의 계획

더 많은 도구를 지속적으로 추가하고 있습니다. 현재 생각 중인 아이디어:

• Lorem ipsum 생성기
• CSS 단위 변환기
• Cron 표현식 파서
• UUID 생성기
• HTML 엔티티 인코더

필요한 도구가 있다면 댓글로 알려주세요.

체크해 보세요: toolphin.dev