피드로 돌아가기
Dev.toFrontend
원문 읽기
SaaS 종속성 제거와 Canvas 기반 자유도 확보를 위한 Open Source 디지털 명함 시스템 구축
Every digital business card tool sucks, so I built my own and open-sourced it
AI 요약
Context
기존 디지털 명함 서비스의 과도한 구독 비용과 데이터 벤더 락인(Vendor Lock-in) 문제 발생. 폼 기반의 제한적인 디자인 도구로 인한 레이아웃 자유도 결여와 팀 규모별 유연하지 못한 플랜 구조가 병목 지점으로 작용.
Technical Solution
- react-rnd 라이브러리를 활용한 Canvas 기반 Drag-and-Drop 인터페이스 구현으로 자유로운 요소 배치 및 Layering 구조 설계
- localStorage 기반의 Guest mode를 통한 상태 유지와 회원 가입 시 데이터 자동 마이그레이션 로직 구축
- 외부 의존성 및 CDN 호출을 배제한 Standalone HTML 내보내기 방식으로 데이터 영속성과 오프라인 접근성 확보
- Next.js App Router와 Supabase 조합을 통한 서버리스 아키텍처 구성으로 빠른 개발 주기와 확장성 달성
- Docker 이미지 제공을 통한 Self-hosting 옵션 구현으로 데이터 주권 보장 및 인프라 제어권 부여
- CSV Import 기능을 통한 대규모 팀 데이터의 일괄 처리 및 Template 기반의 Bulk generation 프로세스 최적화
실천 포인트
- 사용자 경험 개선을 위해 폼 입력 방식 대신 캔버스 기반의 직접 조작 인터페이스(Direct Manipulation) 검토 - 벤더 락인 방지를 위해 표준 포맷(Standalone HTML 등)의 데이터 내보내기 기능 설계 - 초기 진입 장벽을 낮추기 위한 localStorage 기반의 비로그인 상태 데이터 보존 전략 적용 - 인프라 독립성을 위해 Docker 기반의 Self-hosting 가능 구조 설계