By Mark 최신 웹 개발 생태계에서 ‘단순함’과 ‘다양성’이라는 두 마리 토끼를 잡는 것은 매우 도전적인 과제입니다. 특히 개발자, 디자이너, 그리고 일반 오피스 종사자들이 매일 사용하는 수십 가지의 유틸리티 도구들을 하나의 플랫폼에 통합하는 작업은 더욱 그렇습니다. DeskTools 구현 은 이 내용을 생각하면 시작했습니다.
- 기획 https://codeforlife.xyz/desktools-기획-하기-project-2-step-1/
- 구현 https://codeforlife.xyz/desktools-구현-하기-project-2-step-2/
- 서비스 https://codeforlife.xyz/desktools-서비스-하기-project-2-step-3/
이 포스트에서는 Next.js 15와 TypeScript를 기반으로 구축한 Desk-tools 구축 프로젝트의 개발 과정을 공유하고자 합니다. 단순히 기능을 나열하는 것을 넘어, 왜 이런 기술 스택을 선택했는지, 그리고 50개가 넘는 도구를 관리하기 위해 어떤 아키텍처를 설계했는지 깊이 있게 살펴보겠습니다. 또한, 이 과정에서 ‘DeskTools 구현’의 중요성을 강조하고 싶습니다.
목차
1. DeskTools 구현 – 프로젝트의 철학: “Privacy-First, Client-Side Only”
Desk-tools의 시작은 명확했습니다. “사용자의 데이터를 절대 서버로 전송하지 않는, 안전하고 빠른 도구 모음을 만들자”는 것이었습니다. 보통 JSON 포맷터나 Base64 변환기 같은 도구들을 사용할 때, 우리는 무의식적으로 민감한 데이터를 외부 웹사이트에 붙여넣곤 합니다.
Desk-tools는 모든 로직을 클라이언트 사이드(Browser-side)에서 처리함으로써 보안 위협을 원천 봉쇄했습니다. 또한, Static Export(output: “export”) 방식을 채택하여 별도의 백엔드 서버 없이도 어디서나 호스팅이 가능하도록 설계했습니다.
2. DeskTools 구현 – 기술 스택의 선정과 그 이유
Framework: Next.js 15 (App Router)
Next.js 15를 선택한 이유는 명확합니다. 향상된 캐싱 전략과 React 19의 기능을 온전히 활용하기 위함입니다. 특히 App Router의 파일 기반 라우팅은 52개가 넘는 도구 각각을 독립적인 페이지(app/tools/[tool-id]/page.tsx)로 관리하기에 최적의 구조를 제공합니다.
State & Storage: Dexie.js (IndexedDB)
서버가 없는 환경에서 사용자 설정(테마, 언어, 즐겨찾기)과 데이터(노트패드, 간트 차트 태스크)를 보존하기 위해 브라우저의 IndexedDB를 활용했습니다. 원시 IndexedDB API는 사용이 까다롭기 때문에, 이를 래핑한 Dexie.js를 사용하여 데이터베이스 모델링을 단순화했습니다. lib/db.ts에서 정의된 스키마는 전체 앱의 영속성 계층을 담당합니다.
UI Architecture: Tailwind CSS + Radix UI
UI의 일관성과 접근성(Accessibility)을 위해 Radix UI 프리미티브를 기반으로 커스텀 컴포넌트를 구축했습니다. 디자인 시스템은 Tailwind CSS를 사용하여 유연하게 스타일링했으며, lucide-react를 통해 직관적인 아이콘 시스템을 완성했습니다.
3. DeskTools 구현 – 핵심 아키텍처: 확장 가능한 도구 등록 시스템
수십 개의 도구를 효율적으로 관리하기 위해 제가 선택한 핵심 전략은 중앙 집중식 레지스트리(Centralized Registry)입니다. lib/tools-registry.ts의 역할이 파일은 프로젝트의 ‘두뇌’ 역할을 합니다. 모든 도구는 Tool 인터페이스에 맞춰이 레지스트리에 등록됩니다.
// lib/tools-registry.ts 예시
export const TOOLS_REGISTRY: Tool[] = [
{
id: "json-explorer",
name: "JSON Explorer",
category: "formatter",
path: "/tools/json-explorer",
// ... metadata
},
// 52+ tools...
];이 구조 덕분에 새로운 도구를 추가할 때 app/tools/에 페이지를 생성하고 레지스트리에 한 줄만 추가하면, 사이드바, 검색 시스템, 메인 페이지의 카드목록에 자동으로 반영됩니다. 이는 유지보수 비용을 획기적으로 낮춰줍니다.
공통 레이아웃의 마법: tool-layout.tsx
각 도구 페이지가 일관된 사용자 경험을 제공하도록 components/tool-layout.tsx라는 고차 컴포넌트(Wrapper)를 설계했습니다. 이는 제목, 설명, 즐겨찾기 버튼, 그리고 반응형 컨테이너를 모든 도구에 동일하게 적용합니다.
4. 주요 기능 구현 사례 및 기술적 도전
4.1 로컬 AI 통합 (Ollama)
최근 업데이트에서 가장 흥미로웠던 부분은 Ollama를 활용한 로컬 LLM 연동입니다. 사용자의 로컬 환경에서 실행 중인 Ollama API와 통신하여, 웹 브라우저 내에서 AI 채팅 및 텍스트 분석 기능을 제공합니다. 이는 Privacy-First 철학을 AI 영역까지 확장한 사례입니다.
4.2 복잡한 데이터 처리 (JSON Explorer & Code Formatter)
JSON Explorer 구현 시, 대용량 데이터를 렌더링할 때의 성능 저하를 방지하기 위해 재귀적 컴포넌트 최적화와 상태 관리에 집중했습니다. lib/code-formatter.ts와 같은 유틸리티 라이브러리를 분리하여 UI 로직과 비즈니스 로직을 철저히격리했습니다.
4.3 디자인 도구의 정교함 (Design Tools)
Color Picker와 Placeholder Generator 구현 시에는 실시간 프리뷰와 다양한 포맷(HEX, RGB, HSL) 간의 정확한 변환이 중요했습니다. Radix UI의 Slider를 커스텀하여 부드러운 UX를 제공하고, Canvas API를 활용해 클라이언트 사이드에서 즉석으로 이미지를 생성하는 기능을 구현했습니다.
5. 성능 최적화와 사용자 경험(UX)
– Fuzzy Search: Fuse.js를 도입하여 50개가 넘는 도구 중 사용자가 원하는 것을 오타가 있어도 즉시 찾을 수 있도록 했습니다.
– i18n (다국어 지원): 한국어, 영어, 일본어, 중국어를 지원하기 위해 locales 구조를 체계화하고 i18n-provider.tsx를 통해 런타임에 유연하게 언어를 교체합니다.
– Dark Mode: 사용자의 시력 보호를 위해 next-themes를 활용한 완벽한 다크 모드를 구현했습니다.
6. 결론 및 향후 로드맵
Desk-tools는 단순한 유틸리티 모음을 넘어, 웹 기술이 어디까지 독립적으로 작동할 수 있는지 실험하는 프로젝트입니다. 지금까지 52개의 도구를 성공적으로 안착시켰으며, 앞으로는 다음과 같은 기능들을 추가할 계획입니다.
1. PWA(Progressive Web App) 강화: 오프라인 환경에서도 완벽하게 작동하는 설치형 앱 경험 제공.
2. Web Workers 활용: GIF 생성이나 복잡한 이미지 필터링 시 UI 스레드 차단을 방지하기 위한 백그라운드 처리.
3. 커뮤니티 플러그인 시스템: 사용자가 직접 자신만의 도구를 추가할 수 있는 구조적 확장. 개발자로서 이 프로젝트는 아키텍처 설계의 중요성과 코드 재사용성의 가치를 다시 한번 일깨워준 소중한 경험이었습니다. 앞으로도 Desk-tools가 더 많은 사람들의 생산성을 높여주는 ‘디지털 작업대’가 되기를 바랍니다.