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/
저는 이 문제를 해결하기 위해 52가지 이상의 기능을 담은 로컬 퍼스트 생산성 도구 모음, Desk-tools를 개발했습니다. 이번 포스팅에서는 이 프로젝트의 아키텍처와 함께, GitHub Actions를 통한 현대적인 CI/CD 배포 전략, 그리고 웹과 모바일을 동시에 잡는 PWA 이론에 대해 심도 있게 다뤄보겠습니다.
목차
1. DeskTools 서비스 아키텍처의 근간: 로컬 퍼스트(Local-First) 소프트웨어 이론
최근 소프트웨어 업계에서 주목받는 개념 중 하나가 바로 ‘로컬 퍼스트’입니다. 클라우드 중심의 앱들이 데이터를 서버에 저장하고 브라우저 단순히 화면만 보여주는 역할에 그쳤다면, 로컬 퍼스트 앱은 사용자의 기기에서 대부분의 로직을 처리합니다.
왜 로컬 퍼스트인가?
1. 데이터 주권 (Privacy): 사용자의 데이터가 서버로 전송되지 않습니다. Desk-tools의 메모나 칸반 보드 데이터는 오직 사용자의 브라우저 내부 IndexedDB에만 머뭅니다.
2. 오프라인 가용성: 인터넷 연결이 끊겨도 앱은 중단 없이 작동합니다.
3. 성능 (Zero Latency): 서버와의 통신(Round-trip)이 없으므로 인터랙션이 즉각적입니다.
핵심 기술: IndexedDB와 Dexie.js
전통적인 LocalStorage는 5MB라는 용량 제한과 동기적 처리 방식 때문에 대용량 데이터를 다루기에 부적합합니다. 반면 IndexedDB는 브라우저 기반의 비동기 NoSQL 데이터베이스로, 기기 저장 공간이 허용하는 한 거의 무제한에 가까운 데이터를 저장할 수 있습니다. DeskTools 서비스 를 더 쉽고 안전하게 다루기 위해 Dexie.js 라이브러리를 사용해 데이터 무결성을 보장합니다.
2. CI/CD의 현대적 접근: GitHub Actions 이론과 실전
소프트웨어를 만드는 것만큼 중요한 것이 안전하고 빠르게 사용자에게 전달하는 것입니다. 여기서 CI/CD(지속적 통합 및 지속적 배포)의 개념이 등장합니다.
CI/CD란 무엇인가?
- Continuous Integration (지속적 통합): 개발자가 코드를 공유 저장소에 푸시할 때마다 자동으로 빌드와 테스트를 수행하여 코드의 품질을 검증하는 프로세스입니다.
- Continuous Deployment (지속적 배포): 검증된 코드를 실제 운영 환경에 자동으로 반영하는 프로세스입니다.
GitHub Actions: 이벤트 기반 자동화
GitHub Actions는 GitHub 저장소 내에서 발생하는 이벤트(Push, Pull Request 등)에 반응하여 워크플로우를 실행합니다. Desk-tools는 deploy.yml 파일을 통해 다음과 같은 고도화된 배포 파이프라인을 구축했습니다.
# Desk-tools의 핵심 배포 스크립트 요약
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout # 소스 코드 가져오기
uses: actions/checkout@v4
- name: Setup Node # Node.js 환경 구축
uses: actions/setup-node@v4
with:
node-version: "20"
cache: 'npm'
- name: Build with Next.js # 정적 사이트 생성 (SSG)
run: npm run build
env:
NEXT_PUBLIC_BASE_PATH: /Desk-tools
- name: Deploy to GitHub Pages # 서버로 배포
uses: actions/deploy-pages@v4이 자동화 덕분에 저는 인프라 관리 대신 도구의 알고리즘 개선에만 집중할 수 있게 되었습니다. 수동 배포 시 발생할 수 있는 휴먼 에러를 100% 제거한 것이 핵심입니다.
3. 웹을 앱처럼: PWA(Progressive Web App)의 마법
모바일 시장은 iOS와 Android로 양분되어 있으며, 각각의 네이티브 앱을 개발하려면 막대한 비용이 듭니다. Desk-tools는 단일 웹 코드베이스로 모바일 사용자에게 네이티브 앱과 유사한 경험을 제공하기 위해 PWA 기술을 채택했습니다.
DeskTools 서비스 를 시작하면 여러 생각을 했는데 생각보다 운영성이 떨어진다는 것을 느꼈습니다. 그래서 모바일 버전에 맞춰보려고 이렇게 만들어봤습니다.
PWA를 지탱하는 3대 요소
1. Service Worker (서비스 워커): 브라우저의 백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채거나 에셋을 캐싱합니다. 인터넷이 없어도 사이트가 열리는 이유가 바로 이 서비스 워커 덕분입니다.
2. Manifest File (`manifest.json`): 앱의 이름, 아이콘, 배경색 등을 정의합니다. 이를 통해 사용자는 브라우저 주소창 대신 홈 화면의 아이콘을 눌러 앱을 실행할 수 있습니다.
3. HTTPS: 보안은 PWA의 필수 조건입니다. 서비스 워커는 보안상의 이유로 HTTPS 환경에서만 동작합니다. (GitHub Pages는 이를 기본 제공합니다.)
모바일 UX 최적화
Desk-tools는 Tailwind CSS의 반응형 유틸리티(Responsive Design)를 활용합니다. 데스크탑에서는 넓은 사이드바를 보여주고, 모바일에서는 하단 탭 바나 햄버거 메뉴로 전환되는 유연한 UI 구조를 가집니다. 이는 모바일 서비스로서의 정체성을 강화하는 중요한 요소입니다.
4. Next.js 15와 Static Export: 서버 없는 서버급 성능
프로젝트의 엔진인 Next.js 15는 최신 React 19 기능을 지원합니다. 특히 Desk-tools는 output: ‘export’ 설정을 사용합니다.
Static Export의 장점
일반적인 Next.js 앱은 Node.js 서버가 필요하지만, Static Export 모드는 모든 페이지를 미리 HTML 파일로 구워버립니다(Build-time Rendering).
- 보안: 실행 시점에 서버 코드가 없으므로 SQL 인젝션이나 서버 측 취약점 공격이 원천적으로 불가능합니다.
- 비용: GitHub Pages와 같은 정적 호스팅 서비스를 통해 무료로 운영할 수 있습니다.
- 확장성: 전 세계 어디서든 CDN을 통해 가장 가까운 위치에서 파일을 서빙받으므로 접속자가 급증해도 속도가 저하되지 않습니다.
5. 미래 지향적 기능: 로컬 AI(Ollama) 연동
최근 추가된 가장 혁신적인 기능은 AI Chat입니다. 보통 AI 기능을 구현하려면 OpenAI 같은 유료 API를 연동하고 사용자 데이터를 서버로 보내야 합니다. 하지만 Desk-tools는 사용자의 로컬 환경에 설치된 Ollama API와 통신합니다.
이 기술적 선택은 “개인정보가 담긴 텍스트를 외부 서버에 보내지 않고도 AI의 도움을 받을 수 있다”는 로컬 퍼스트 철학의 완성입니다. DeskTools 서비스 를 로컬에 맞춰서 하고자 하다 보니 Local LLM을 연결해보해서 테스트 해보고 있는데 기능적인 한계점은 확실합니다.
브라우저의 fetch API를 통해 로컬 호스트(localhost:11434)와 통신하는 구조는 현대 웹 기술이 어디까지 왔는지를 보여주는 훌륭한 사례입니다.
6. 결론: 자동화와 혁신이 만나는 지점 – DeskTools 서비스
Desk-tools 서비스 프로젝트는 단순한 도구 모음을 넘어, 현대 웹 기술의 집합체입니다.
- GitHub Actions를 통한 무중단 자동화.
- PWA를 통한 플랫폼 경계 허물기.
- 로컬 퍼스트를 통한 데이터 주권 확보.
이 세 가지 축이 결합되었을 때, 개발자는 가장 효율적인 방식으로 가치를 전달할 수 있습니다. 여러분도 반복되는 작업이 있다면, 자신만의 도구를 만들고 자동화 파이프라인을 구축해 보세요. 그 과정에서 얻는 기술적 성장은 단순한 코딩 그 이상의 가치를 선사할 것입니다.