1. 개요

목표

• 사용자가 드래그 앤 드롭 방식으로 쉽게 명함을 제작
• 제작된 명함을 공유하여 발생하는 다양한 유저 액션(조회, 다운로드, 클릭 등)을 추적해 통계로 제공하는 웹 서비스 구축

핵심 가치

• 사용 편의성이 높은 명함 제작 도구 제공
• 제작된 명함의 활용도 및 반응을 실시간 데이터로 확인 가능

2. 기술 스택

프론트엔드/백엔드

• Next.js 14 (최신 App Router, 서버 액션 등 활용)

데이터베이스 및 인증

• Supabase (DB, Auth, RLS 등)

통계 시각화

• Chart.js (다양한 차트 유형 활용: 라인, 도넛, 바 차트 등)

명함 제작 인터페이스

• 드래그 앤 드롭 방식 (예: react-dnd 등 라이브러리 활용)

3. 서비스 주요 기능

명함 제작 및 편집

사용자는 템플릿 선택 후 에디터에서 드래그 앤 드롭 방식으로 명함 디자인
텍스트, 이미지, 아이콘 등의 요소를 자유롭게 배치하고, 수정 가능

명함 공유:
제작된 명함은 고유 URL(slug)을 통해 공유
공유된 명함은 별도의 페이지에서 일반 사용자에게 노출
데이터 추적 및 통계 분석:
추적 항목: 총 조회수, 고유 방문자, 이미지 저장 횟수, 이메일 클릭 횟수, QR 코드 스캔 횟수, 평균 체류 시간
각 이벤트 발생 시 API 호출을 통해 Supabase에 기록
수집된 데이터는 Chart.js를 통해 관리자 및 명함 소유자 대시보드에서 시각화

4. 페이지 구성 및 역할

   1. 홈페이지
      • 서비스 소개, 주요 기능 설명, CTA(템플릿 선택, 로그인/회원가입 등)
   2. 템플릿 리스트 페이지
      • 약 12개의 미리 디자인된 명함 템플릿 제공
      • 사용자가 템플릿을 선택하면 에디터 페이지로 이동하여 해당 템플릿 기반 명함 제작 시작
      • 템플릿은 기본 디자인으로 제공되며, 선택 후 에디터에서 자유롭게 수정 가능
   3. 마이페이지
      • 사용자가 제작한 명함들을 한눈에 확인
      • 각 명함에 대해 편집, 삭제, 공유 기능 제공
   4. 에디터 페이지
      • 드래그 앤 드롭 기반 명함 편집 도구 제공
      • 선택한 템플릿을 불러와 수정 또는 새로운 디자인 작업 진행
      • 실시간 미리보기와 저장 기능 구현
   5. 명함 상세페이지
      • 제작된 명함의 상세 정보 및 디자인 확인
      • 명함과 관련된 통계(조회수, 유저 액션 등)를 시각화하여 표시 (Chart.js 활용)
   6. 명함 공유된 페이지
      • 외부 사용자들이 공유된 명함을 열람할 수 있는 페이지
      • 간편한 명함 뷰 제공 및 해당 명함 관련 이벤트(조회, 체류 시간 등) 기록
   7. 로그인/회원가입 페이지
      • 사용자 인증 및 계정 생성
      • Supabase Auth 연동을 통한 보안 로그인/회원가입 처리

5. 데이터베이스 설계 및 이벤트 추적
   • 주요 테이블 예시:
   • users: 사용자 계정 정보 저장
   • cards: 제작된 명함 정보 (디자인 데이터, 소유자 정보, 고유 slug 등)
   • card_views 또는 card_events: 명함 조회 및 각종 이벤트(이미지 저장, 이메일 클릭, QR 스캔 등) 기록
   • 각 이벤트는 event_type(조회, 저장, 클릭 등), 타임스탬프, 사용자 정보(IP, User-Agent 등)를 포함
   • templates: 기본 템플릿 디자인 정보
   • 데이터 집계:
   • 총 조회수/고유 방문자: 각 명함의 접속 로그 분석
   • 이미지 저장/이메일 클릭/QR 스캔: 해당 액션 발생 시 API 호출로 이벤트 기록
   • 평균 체류 시간: 페이지 입장 및 퇴장 시각을 기록해 평균 계산

6. 사용자 플로우

   1. 사용자 방문 및 템플릿 선택:
      • 사용자는 홈페이지에서 서비스 소개를 확인한 후, 템플릿 리스트 페이지로 이동
      • 12개의 템플릿 중 원하는 디자인 선택
   2. 명함 제작 및 편집:
      • 선택한 템플릿을 기반으로 에디터에서 드래그 앤 드롭 방식으로 명함 디자인
      • 디자인 완료 후 저장, 마이페이지에서 관리
   3. 명함 공유 및 조회:
      • 제작된 명함은 고유 URL로 생성되어 공유됨
      • 다른 사용자는 공유된 페이지를 통해 명함을 확인하고, 이때 각종 유저 액션(조회, 클릭 등)이 기록됨
   4. 통계 확인:
      • 명함 상세페이지에서 Chart.js를 이용해 각종 이벤트 및 통계 데이터를 시각적으로 확인
      • 통계 데이터는 Supabase에서 집계되어 제공
   5. 로그인/회원가입:
      • 사용자 인증 및 계정 관리를 위해 로그인/회원가입 페이지에서 계정 생성 및 로그인 진행

7. 구현 단계 및 고려 사항
   • 프로젝트 초기 세팅:
   • Next.js 14, TypeScript 환경 구성
   • Supabase 프로젝트 설정 및 연동 (.env 파일에 키/URL 저장)
   • DB 및 인증 설정:
   • Supabase Dashboard에서 users, cards, cardevents 등 테이블 생성
   • Supabase Auth를 활용한 사용자 인증 구현
   • 프론트엔드 구현:
   • Next.js App Router를 활용한 각 페이지 구성
   • 에디터 페이지의 드래그 앤 드롭 인터페이스 구현 (react-dnd 등 사용)
   • 명함 상세 및 공유 페이지에서 이벤트 추적 스크립트 구현
   • 통계 및 대시보드 구현:
   • API 라우트 혹은 서버 액션을 통해 Supabase에서 통계 데이터 집계
   • Chart.js를 사용한 데이터 시각화 및 대시보드 구성
   • 테스트 및 배포:
   • 각 기능(명함 제작, 공유, 이벤트 기록, 통계 시각화) 단위 테스트
   • 최종 배포 전 성능 및 보안 점검 (특히 데이터 추적 및 인증 관련)텍스트_

8. DB
   

   ---

9. 유저 플로우