I Built 71+ Free Browser Tools Because Every "Free" Tool Site Is Terrible

Context

JSON 포매터, Base64 인코더 등 온라인 유틸리티 도구 사이트들이 47개의 광고, 쿠키 배너, 뉴스레터 팝업으로 인한 열악한 사용 경험을 제공하고 있었으며, 사용자가 입력한 데이터가 백엔드 서버로 전송되어 개인정보 유출 위험이 존재했다.

Technical Solution

• 클라이언트 사이드 처리 전용 설계: JavaScript만 사용해 모든 도구 기능을 브라우저에서 처리하고 백엔드 API 호출 제거
• Next.js 16 App Router로 정적 생성 구성: 71개 도구 × 20개 언어 = 1,420개 이상의 도구 페이지를 빌드 타임에 사전 렌더링
• 다국어 아키텍처 구현: messages/ 디렉토리 구조로 20개 언어별 공통 문자열, 도구별 설명, FAQ(3~5개), 교육 콘텐츠(200+ 단어)를 분리 관리하고 merge 스크립트로 런타임에 단일 객체로 병합
• SEO 최적화 구성: 번역된 메타데이터, JSON-LD 구조화 데이터(WebApplication + BreadcrumbList + FAQPage), hreflang 대체 링크를 모든 20개 언어 페이지에 포함
• RTL 레이아웃 지원: 아랍어 등 우우에서 좌로 표기하는 언어를 위해 동적 레이아웃 조정
• 컴포넌트 라이브러리 선택: shadcn/ui를 사용해 UI 일관성 유지
• 테스트 커버리지 구성: Vitest + React Testing Library로 253개의 테스트 작성

Impact

빌드 시 400개 이상의 정적 HTML 파일이 출력되어 요청 시점의 계산 작업 제거로 인한 응답 속도 개선 달성.

Key Takeaway

정적 사이트라도 400개 이상의 다국어 페이지 관리, RTL 레이아웃, 동적 라우팅을 처리하려면 체계적인 빌드 파이프라인 아키텍처가 필수이며, 2026년 현재 클라이언트 사이드 처리 기반의 개인정보 보호는 기능이 아닌 제품 차별화 전략으로 작용한다.