[Desk-tools] 업무 도구 모음 - 프로젝트 기술 스팩 및 설정 기능

지난 포스팅에서 Desk-tools를 기획하게 된 배경과 '직장인으로서의 고민'을 말씀드렸습니다. 이번에는 그 고민을 실제 어떻게 기술적으로 구현했는지, 프로젝트의 뼈대를 이루는 기술 스택과 설정에 대해 공유하고자 합니다.설계의 핵심: "Zero-Server, Zero-Trust"

이 프로젝트의 가장 큰 기술적 도전은 '백엔드 없이 모든 기능을 브라우저 내에서 완결짓는 것'이었습니다. 
서버가 없다는 것은 관리할 인프라가 없다는 뜻이기도 하지만, 
무엇보다 사용자의 데이터가 외부로 유출될 물리적 통로 자체를 없앤다는 보안적 의미가 큽니다.

이를 실현하기 위해 선택한 기술 스택은 다음과 같습니다.

Framework & Runtime: Next.js & Static Export

가장 현대적이고 안정적인 프레임워크를 선택하되, 사용 방식은 철저히 '정적'인 상태를 지향했습니다.

• Next.js (Static Export): Next.js의 강력한 기능들을 사용하면서도 output: 'export' 설정을 통해 모든 페이지를 순수 HTML/JS/CSS로 빌드했습니다. 덕분에 서버 사이드 렌더링(SSR) 시 발생할 수 있는 데이터 노출 위험을 원천 차단했습니다.
• React / TypeScript : 최신 라이브러리를 통해 컴포넌트의 재사용성을 높이고, 강한 타입 시스템(TypeScript)을 적용해 데이터 변환 도구에서 발생할 수 있는 런타임 오류를 최소화했습니다.
• Node.js (Build-time Only): 서버는 오직 빌드 시점에만 존재합니다. 실제 배포 환경에는 어떤 런타임 엔진도 돌아가지 않는 순수 정적 파일만 존재합니다.

Data & State: "서버 대신 내 브라우저에 저장"

보통 설정이나 작업 내역을 저장하려면 DB가 필요합니다. 하지만 Desk-tools는 서버 DB를 사용하지 않습니다.

• Dexie.js (IndexedDB Wrapper): 브라우저 내장 데이터베이스인 IndexedDB를 더 쉽고 안전하게 다루기 위해 Dexie.js를 도입했습니다. 사용자가 설정한 옵션이나 최근 작업 기록은 오직 사용자의 로컬 브라우저에만 저장됩니다. 브라우저를 닫아도 데이터는 유지되지만, 서버로는 절대 전송되지 않습니다.
• Fuse.js: 수많은 도구 중 필요한 기능을 빠르게 찾을 수 있도록 'Fuzzy Search' 기능을 넣었습니다. 가벼운 라이브러리로 서버 통신 없이 즉각적인 검색 경험을 제공합니다.

Styling: 일관된 UX와 빠른 인터페이스

다양한 도구가 모여있지만, 마치 하나의 앱처럼 느껴지도록 디자인 시스템을 구축했습니다.

• Tailwind CSS & tailwindcss-animate: 유틸리티 우선 CSS를 통해 빠른 스타일링과 부드러운 애니메이션 효과를 부여했습니다.
• shadcn/ui: Radix UI 기반의 컴포넌트를 사용해 접근성과 디자인 완성도를 높였습니다. 특히 보안 도구 특성상 자칫 딱딱해질 수 있는 UI를 모던하고 직관적으로 구성하는 데 큰 도움이 되었습니다.

Build & Deploy: 투명한 공개와 자동화

보안 담당자가 만든 툴인 만큼 배포 과정도 투명해야 합니다.

• GitHub Pages: 코드를 수정하면 누구나 GitHub 저장소에서 변경 사항을 확인할 수 있습니다. 투명성이 곧 보안인 셈입니다.
• GitHub Actions: 코드 푸시 시 자동으로 빌드되어 /out 디렉토리에 정적 파일이 생성되고 배포됩니다.
• Base Path 설정: /Desk-tools 경로를 기본으로 설정하여 GitHub Pages 환경에서도 에셋 경로가 꼬이지 않도록 안정적으로 세팅했습니다.

보안을 위해 기능을 포기하거나, 기능을 위해 보안을 타협하지 않는 지점을 찾기 위해 많은 고민을 했습니다. Next.js의 Static Export와 Dexie.js의 조합을 선택했습니다.

 

자 그럼 간단한 프로그램의 설정 부분을 간단하게 이야기 하겠습니다.

https://zafrem.github.io/Desk-tools/

• Export/Import : indexDB를 사용해서 데이터를 저장하다보니 데이터를 옮길수 있게 만들어놓긴 했습니다. 근데 써본적이 없긴하네요.
• Github Issue : 추가 기능에 대한 아이디어가 떨어져서 하나 만들어놨습니다. 지금은 아무도 안들어와서... 큰 의미는 없습니다.
• 언어 설정 : 영어/한국/중국/일본 언어를 넣어놨습니다. (AI 생성으로 넣어놨습니다. 자연스러운지 잘모르겠네요...)
• 테마 : 그냥 화이트/블랙 
• 설정 : 여러 설정을 위해서 하긴했는데, 지금은 Local LLM 설정이 들어가 있습니다.
• 도구 창 :  도구창을 Open/Close 하기 위한 버튼으로 사실 모바일에서 쓰려고 만들어놨습니다.

사실 아직 개발 중이라는 표현이 맞긴하겠네요... 지금 쭉 적다 보니 뭔가 부족한 점들이 있어보입니다. 온라인화는 계속 안할거 같긴한데... 다양성을 제외하고 편리함을 좀 생각해봐야겠네요.