Uuno(유노) : You + Uno(하나) → 나를 하나의 카드로 담다, 한 장의 나
- 드래그 앤 드롭으로 쉽게 만드는 인터랙티브 디지털 명함 서비스
- 템플릿 기반으로 손쉽게 명함 제작할수있습니다.
- 내 명함의 정보가 바뀌어도 쉽게 수정이 가능하며, QR, 이미지, html소스 등으로 공유가 가능합니다.
- 기획 기간 : 2025.03.28 ~ 2025.04.08
- 개발 기간 : 2025.04.09 ~ 진행중
장미경 |
노수민 |
강지수 |
최종욱 |
최정화 |
서희령 |
|
Team Leader
Frontend |
Sub Leader
Frontend |
Frontend | Frontend | Designer | Designer |
- 캔버스기반 인터렉션
드래그&드롭으로 요소를 자유롭게 배치
마우스(또는 터치)로 요소를 직관적으로 이동·크기 조절
실시간 미리보기를 제공하여 편집 즉시 미리보기 제공
- 다양한 요소 라이브러리
폰트, 크기, 색상, 자간·행간, 굵기·기울기 등 스타일 제어가 가능한 텍스트를 제공
Unsplash를 활용하여 검색 및 삽입이 가능하고 로컬에서 이미지 업로드 기능을 제공
각각의 요소를 캔버스 내 리사이즈, 로테이션 제공
소셜 아이콘(QR, SNS)과 클릭 가능한 URL 링크를 제공
- 디자인 옵션
양면 디자인을 제공하고 앞면/뒷면 전환 및 편집
가로 세로 모드를 지원하고 사용자가 원하는 방향으로 전환
- 저장 및 내보내기
Konva Stage → DataURL → Blob → Supabase 업로드 방식으로 이미지를 추출
전체 디자인을 JSON 형태로 저장·로드 방식으로 템플릿을 저장
커스텀 슬러그 기반 URL 발급으로 사용자가 원하는 공유 링크를 생성
- 다양한 디자인 제공 : 심플·트렌디 스타일 템플릿을 원클릭으로 적용
- 커스터마이징 : 색상·레이아웃·폰트 손쉽게 변경 가능
- 카드 플립 애니메이션 : 앞면 ↔ 뒷면 부드러운 전환 효과
- 확장 패널 : 클릭 시 추가 정보 표시
- 호버 이펙트 : 요소별 강조(음영·스케일)
- 고유 URL : 각 명함마다 고유한 공유 링크 제공
- QR 코드 : 스캔 즉시 접속 가능한 QR 코드 생성
- 카카오톡 공유 : 오픈 그래프 적용
- 태그 복사와 이미지 저장 : 웹사이트/블로그에 삽입하거나 이미지로 저장
- 조회 통계 : 명함 조회수 및 방문자 데이터 확인
- 인터랙션 분석 : 요소별 클릭 수 및 관심도 파악
- 트래픽 출처 분석 : 유입 경로 측정 및 공유 효과 확인
- 데이터 시각화 : 직관적인 그래프와 차트 기반의 대시보드 확인
- 캔버스 기반 에디터 개발: React Konva vs Fabric.js의 기술 선택 과정
- DOM기반 방식보단 캔버스 방식을 택한 이유
- 크로스 브라우저 호환성을 위한 스포이드 기능 구현: EyeDropper API와 html2canvas
- 이미지 업로드 시 이미지 로드 실패
- 모달 트러블슈팅: 첫 클릭 시 닫히는 현상 해결
- Storage는 변경되었는데, 왜 브라우저에는 이전 이미지일까
- Undo/Redo 기능 구현에 대한 고민
- toBlob() null 반환 이슈와 이미지 CORS 해결기
- Canvas 좌표와 HTML 좌표가 다르다고??
- 서버액션과 로컬스테이트, 옵티미스틱
- React + Konva에서 forwardRef 사용 시 TypeScript 오류
📁uuno
├── public # 정적 파일 (브라우저 직접 접근 가능)
│
├── src
│ ├── apis/ # API 요청 관련 함수
│ ├── app/
│ │ ├── [...slug]/ # 슬러그 기반 명함 상세 페이지
│ │ ├── api/ # API route handlers
│ │ ├── auth/ # 인증 관련 라우트
│ │ ├── card/ # 카드 단일 상세 페이지
│ │ ├── dashboard/ # 대시보드 및 하위 페이지
│ │ ├── editor/ # 명함 편집기 (에디터)
│ │ └── template-list/ # 템플릿 선택 화면
│ │
│ ├── components/
│ │ ├── auth/ # 로그인/회원가입 컴포넌트
│ │ ├── card/ # 카드 공유/저장/플립 컴포넌트
│ │ ├── card-detail/ # 카드 통계/분석용 컴포넌트
│ │ ├── chart/ # 차트 관련 UI
│ │ ├── common/ # 공통 버튼, 모달 등 UI
│ │ ├── dashboard/ # 대시보드용 카드 리스트 등
│ │ ├── editor/ # 명함 에디터의 주요 UI
│ │ ├── icons/ # 커스텀 아이콘 SVG 컴포넌트
│ │ ├── layouts/ # Header, NavBar 등 Layout 컴포넌트
│ │ ├── main/ # 메인페이지 구성 컴포넌트
│ │ ├── modals/ # 인증 관련 모달
│ │ ├── template-list/ # 템플릿 카드 및 탭 버튼
│ │ └── ui/ # shadcn-ui 기반 UI 컴포넌트
│ │
│ ├── constants/ # 상수 정의
│ ├── hooks/ # 커스텀 훅
│ │ ├── queries/ # TanStack Query 기반 훅
│ │ └── mutations/ # 데이터 수정 관련 훅
│ │
│ ├── lib/ # 라이브러리성 유틸리티
│ ├── providers/ # context, query provider
│ ├── store/ # Zustand 상태 관리
│ ├── types/ # TypeScript 타입 정의
│ └── utils/ # 공통 유틸 함수들
│
...