260개 이상의 도구를 갖춘 무료 온라인 툴박스를 구축했습니다 — 기술 스택과 배운 점들

매번 작은 작업 하나를 할 때마다 새로운 탭을 열어야 했습니다. 어떤 사이트에서는 JSON 포맷터 (JSON formatter)를, 다른 곳에서는 GST 계산기를, 또 다른 곳에서는 두 페이지를 합치기 전에 이메일 입력을 요구하는 PDF 병합기 (PDF merger)를 찾아야 했습니다. 도처에 깔린 광고, 느린 UI, 그리고 내가 제어할 수 없는 서버에 급여 명세서나 송장을 업로드할 때 느끼는 막연한 불안감까지. 30초면 끝날 일을 위해 20개의 북마크를 번갈아 사용하는 것에 지쳤고, 그래서 이 모든 것을 한곳에서 해결할 수 있는 공간을 만들기 시작했습니다.

ToolReign이란 무엇인가

ToolReign은 무료 온라인 툴박스입니다: **15개 카테고리에 걸친 260개 이상의 유틸리티 (utilities)**가 모두 사용자의 브라우저에서 실행됩니다. 개발자 도구 (JSON 포맷터 (JSON formatter), JWT 디코더 (JWT decoder), API 클라이언트 (API client)), 텍스트 유틸리티, SEO 도우미, PDF 및 이미지 도구, 스프레드시트, 그리고 인도를 염두에 두고 구축한 금융 섹션(CGST/SGST/IGST 분할이 포함된 GST, EMI 및 SIP 계산기, HRA 면제, 퇴직금, 소득세 추정치 등)이 포함되어 있습니다.

아이디어는 간단합니다: 도구를 열고, 작업을 수행하고, 떠나는 것입니다. 가입 절차도 없고, 백엔드로 파일을 업로드할 필요도 없으며, 관리해야 할 계정도 없습니다. 저는 Pune에 위치한 Giant Leap Systems의 시니어 소프트웨어 엔지니어 (Senior Software Engineer)인 Anirudha Sonwane입니다. ToolReign은 본업 외에 진행하는 사이드 프로젝트 (side project)이며, 투자 유치를 위한 피치 덱 (pitch deck)이 아니라 그저 존재했으면 하는 서비스를 만든 것입니다.

기술 스택 결정 사항

Next.js 14 App Router 및 정적 내보내기 (static export)

각 도구는 src/app/{category}/{tool-slug}/ 아래의 고유한 경로에 위치합니다. 이는 SEO (검색 엔진 최적화)에 깔끔하게 매핑됩니다: 하나의 URL, 하나의 검색 의도, 하나의 메타데이터 페이지를 가집니다. 사이트는 정적으로 내보내기 (output: 'export') 되므로, 프로덕션 배포는 out/ 폴더를 정적 호스팅 (static hosting)에 업로드하는 것뿐이며, 관리해야 할 Node 서버가 필요 없습니다.

App Router 덕분에 확장이 가능했습니다. 페이지 컴포넌트를 추가하고 tool-registry.json에 슬러그 (slug)를 등록하기만 하면, 사이트맵 (sitemap), 카테고리 허브, 검색 인덱스 (search index)가 자동으로 이를 인식합니다. 260개 이상의 도구가 있는 상황에서 URL을 수동으로 관리했다면 한 달도 못 가 문제가 생겼을 것입니다.

100% 클라이언트 사이드 (client-side) — 모든 것을 결정지은 결정

이것은 핵심적인 아키텍처 설계의 승부수였으며, 동시에 프라이버시(privacy)에 관한 이야기이기도 합니다. 즉, 여러분의 데이터는 브라우저를 절대 떠나지 않습니다. 금융 계산기는 useMemo를 사용한 단순한 TypeScript 수학 연산입니다. PDF 병합 및 분할은 탭 내에서 pdf-lib와 pdfjs-dist를 사용합니다. 이미지는 Canvas API를 거치며, 오디오는 Web Audio API를 통해 처리됩니다.

엔지니어링 측면은 마케팅보다 더 어렵습니다. 주의를 기울이지 않으면 중급 사양의 휴대폰에서 5개 파일의 PDF 병합 작업이 메인 스레드(main thread)를 멈추게 할 수 있습니다. 수 메가바이트(MB)에 달하는 문서를 결합할 때 메모리(memory)를 고려해야 했고, 중요한 지점에서 진행 상황을 표시해야 했으며, 페이지 범위 작업만으로 충분한 상황에서 파일 전체를 로드하는 것을 피해야 했습니다. 서버 없이

SEO는 제품의 절반입니다. 저는 시간의 90%를 계산기 로직에 쓸 것이라고 가정했습니다. 현실은 달랐습니다: 도구별 JSON-LD (WebApplication, FAQ 스키마, HowTo 단계), 브레드크럼 (breadcrumb) 마크업, 관련 도구 링크, 롱테일 쿼리 (long-tail queries)를 위한 유의어 키워드, 금융 페이지의 접이식 공식 설명 등이 필요했습니다. Google의 AI 개요 (AI overviews)는 "EMI는 어떻게 계산되나요?"와 같은 질문을 좋아합니다. 즉, 도구 사이트는 코드만큼이나 명확성으로 경쟁해야 합니다.

인도 특화 금융 도구들이 기대 이상의 성과를 냈습니다. 글로벌 EMI 계산기는 어디에나 있습니다. GST 분할 로직, HRA 면제 규칙, 그리고 en-IN 로케일 (locale)을 사용한 lakh/crore 형식 지정은 이곳 사람들이 실제로 검색하는 방식과 일치했습니다. 로케일은 단순한 다듬기가 아니라 제품 결정 사항입니다.

클라이언트 사이드 PWA (Progressive Web Apps)는 제가 생각했던 것보다 더 유능합니다. 설치 가능한 셸 (shell), 오프라인 친화적인 캐싱, 계정 불필요 — 이는 "그냥 이 PDF를 변환해야 해요"라는 사용 사례에 비대해진 웹 앱보다 더 잘 들어맞습니다.

제가 다르게 했을 일: 금융 부문이 20개 이상의 계산기로 확장되기 전에, 더 엄격한 컴포넌트 스캐폴드 (component scaffold) — 공유 입력 툴바, 유효성 검사 헬퍼 (validation helpers), 결과 플레이스홀더 (placeholders), WhatsApp 공유 버튼, 공식 설명 등 — 에 더 일찍 투자했을 것입니다. 유사한 도구들 사이에서 발생하는 복사-붙여넣기 리팩터링 (refactors)은 나중에 절약한 공유 추상화 (shared abstractions)보다 더 많은 시간을 소모했습니다.

다음 단계

저는 롱테일 (long tail) 영역을 계속 확장하고 있습니다: 더 많은 텍스트 및 개발자 유틸리티, 더 깊이 있는 금융 커버리지, 그리고 손글씨 생성기와 같이 캔버스 (canvas) 비중이 높은 도구에서의 더 나은 모바일 UX를 목표로 합니다. AdSense 도입을 고려 중이지만, 제약 사항은 동일하게 유지됩니다 — 작업 영역을 방해하지 말 것.

만약 도구를 사용해 보았는데 무언가 어색하다고 느껴진다면, 저는 진심으로 그 의견을 듣고 싶습니다. 여기에 댓글을 남기거나 사이트의 문의 양식을 사용해 주세요. Safari에서 작동하지 않나요? GST 포함 여부가 헷갈리나요? 저에게 알려주세요.

마치며

ToolReign은 "20개의 북마크 대신 하나만 남기자"라는 생각에서 시작되었으며, 대규모 정적 SEO (Static SEO), 브라우저 내 미디어 처리 (In-browser media processing), 그리고 다른 사용자들을 배제하지 않으면서 특정 타겟층을 위해 구축하는 법에 대한 교훈으로 변모했습니다. 이는 Giant Leap Systems에서의 업무와 병행하며 Pune에서 퇴근 후 시간을 활용해 만든 사이드 프로젝트 (Side project)입니다.

기술 스택, 정적 내보내기 (Static export)의 트레이드오프 (Tradeoffs), 또는 도구의 개수가 더 이상 귀여운 수준을 넘어설 때 레지스트리 (Registry)를 어떻게 구조화해야 하는지에 대한 질문이 있다면 기꺼이 답변해 드리겠습니다.

toolreign.com에서 확인해 보세요 — 완전히 무료이며, 계정이 필요하지 않습니다.