hansoo/Obsidian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

초기 커밋

Browse Source
This commit is contained in:
hansoo
2025-03-26 18:16:46 +09:00
commit 266674cc0e
67 changed files with 14235 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
ZELLYY/zellyy note/00_프로젝트_개요/01_프로젝트_소개.md Normal file
View File

@@ -0,0 +1,55 @@
# ZELLYY 프로젝트 소개
## 프로젝트 개요
ZELLYY는 모바일 중심의 카드 제작 애플리케이션으로, 사용자들이 디자인 전문 지식 없이도 고품질의 시각적 콘텐츠를 쉽고 빠르게 제작할 수 있도록 돕는 서비스입니다. 특히 소셜 미디어에 공유하기 위한 텍스트 중심의 카드(인용구, 생각, 아이디어 등)를 직관적인 인터페이스로 제작하고 관리할 수 있습니다.
## 비전 및 미션
### 비전
"누구나 자신의 생각과 아이디어를 아름답게 표현할 수 있는 세상"
### 미션
"디자인의 장벽을 낮추어 모든 사람이 자신의 메시지를 시각적으로 매력적인 방식으로 전달할 수 있도록 지원한다"
## 핵심 가치
1. **단순함(Simplicity)**: 복잡한 디자인 과정을 단순화하여 누구나 쉽게 사용할 수 있는 경험 제공
2. **창의성(Creativity)**: 사용자의 창의적 표현을 돕는 다양한 도구와 템플릿 제공
3. **효율성(Efficiency)**: 빠르고 효율적인 콘텐츠 제작 워크플로우 구현
4. **접근성(Accessibility)**: 디자인 지식이나 고가의 장비 없이도 고품질 콘텐츠 제작 가능
5. **일관성(Consistency)**: 개인 또는 브랜드의 일관된 시각적 아이덴티티 유지 지원
## 주요 차별점
1. **모바일 네이티브 경험**: 스마트폰에 최적화된 디자인 경험 제공
2. **텍스트 중심 특화**: 텍스트 표현과 타이포그래피에 특화된 기능
3. **소셜 미디어 최적화**: 주요 소셜 플랫폼에 최적화된 형식과 크기 지원
4. **템플릿 기반 접근**: 전문적으로 디자인된 템플릿으로 빠른 제작 가능
5. **직관적 인터페이스**: 3탭 이내로 주요 작업을 완료할 수 있는 단순한 UI/UX
## 타겟 사용자
1. **콘텐츠 크리에이터**: 소셜 미디어에서 활동하는 인플루언서, 블로거, 크리에이터
2. **소상공인 및 스타트업**: 전문 디자이너 없이 마케팅 콘텐츠를 제작해야 하는 소규모 비즈니스
3. **개인 브랜딩 관심층**: 소셜 미디어에서 일관된 개인 브랜드를 구축하려는 전문가
4. **지식 근로자**: 아이디어와 인용구를 시각적으로 정리하고 공유하려는 학생, 연구자, 작가
5. **마케팅 팀**: 빠르게 소셜 미디어 콘텐츠를 제작해야 하는 마케팅 담당자
## 기대 효과
1. **콘텐츠 제작 시간 단축**: 시간 단위에서 분 단위로 제작 시간 단축
2. **디자인 품질 향상**: 디자인 전문가가 아니어도 프로페셔널한 결과물 제작
3. **브랜드 일관성 강화**: 일관된 시각적 아이덴티티 유지 용이
4. **소셜 미디어 참여도 증가**: 시각적으로 매력적인 콘텐츠를 통한 참여율 향상
5. **접근성 확대**: 디자인 툴에 대한 접근성 확대로 창의적 표현의 민주화
## 장기 비전
ZELLYY는 초기에는 텍스트 중심의 카드 제작에 집중하지만, 장기적으로는 다음과 같은 방향으로 확장할 계획입니다:
1. **웹 플랫폼 확장**: 모바일 앱을 넘어 웹 기반 에디터 제공
2. **협업 기능 강화**: 팀 단위의 콘텐츠 제작 및 관리 지원
3. **AI 기반 디자인 지원**: 인공지능을 활용한 디자인 추천 및 자동화
4. **커뮤니티 기능**: 사용자 간 템플릿 및 디자인 공유 플랫폼 구축
5. **통합 콘텐츠 관리**: 소셜 미디어 게시, 분석, 일정 관리 등 통합 솔루션으로 발전

35
ZELLYY/zellyy note/00_프로젝트_개요/index.md Normal file
View File

@@ -0,0 +1,35 @@
# ZELLYY 프로젝트 개요
## 목차
1. [프로젝트 소개](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/01_프로젝트_소개.md)
2. [핵심 문제 정의](핵심_문제_정의.md)
3. [사용자 페르소나](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/사용자_페르소나.md)
4. [사용자 스토리](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/사용자_스토리.md)
## 프로젝트 요약
ZELLYY는 모바일 중심의 카드 제작 애플리케이션으로, 사용자들이 디자인 전문 지식 없이도 고품질의 시각적 콘텐츠를 쉽고 빠르게 제작할 수 있도록 돕는 서비스입니다. 특히 소셜 미디어에 공유하기 위한 텍스트 중심의 카드(인용구, 생각, 아이디어 등)를 직관적인 인터페이스로 제작하고 관리할 수 있습니다.
## 주요 목표
- 디자인 지식이 없는 사용자도 프로페셔널한 시각 콘텐츠를 제작할 수 있게 함
- 모바일 환경에서 완결된 콘텐츠 제작 워크플로우 제공
- 소셜 미디어 플랫폼에 최적화된 콘텐츠 제작 및 공유 지원
- 일관된 브랜드 이미지 유지를 위한 도구 제공
- 콘텐츠 제작 시간을 대폭 단축 (시간 단위 → 분 단위)
## 핵심 가치
1. **단순함(Simplicity)**: 복잡한 디자인 과정을 단순화하여 누구나 쉽게 사용할 수 있는 경험 제공
2. **창의성(Creativity)**: 사용자의 창의적 표현을 돕는 다양한 도구와 템플릿 제공
3. **효율성(Efficiency)**: 빠르고 효율적인 콘텐츠 제작 워크플로우 구현
4. **접근성(Accessibility)**: 디자인 지식이나 고가의 장비 없이도 고품질 콘텐츠 제작 가능
5. **일관성(Consistency)**: 개인 또는 브랜드의 일관된 시각적 아이덴티티 유지 지원
## 주요 문서
- [프로젝트 소개](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/01_프로젝트_소개.md): ZELLYY 프로젝트의 비전, 미션, 핵심 가치 등 상세 설명
- [핵심 문제 정의](핵심_문제_정의.md): ZELLYY가 해결하고자 하는 핵심 문제와 접근 방식
- [사용자 페르소나](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/사용자_페르소나.md): ZELLYY의 주요 타겟 사용자 유형과 특성
- [사용자 스토리](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/사용자_스토리.md): 사용자 관점에서의 주요 기능 및 가치 정의

69
ZELLYY/zellyy note/00_프로젝트_개요/사용자_스토리.md Normal file
View File

@@ -0,0 +1,69 @@
# ZELLYY - 사용자 스토리
## 콘텐츠 크리에이터 관점
1. **카드 제작**
- "나는 콘텐츠 크리에이터로서, 인상적인 인용구를 시각적으로 매력적인 카드로 만들고 싶다. 그래서 내 팔로워들의 참여도를 높일 수 있다."
- "나는 콘텐츠 크리에이터로서, 모바일에서도 프로페셔널한 품질의 카드를 제작하고 싶다. 그래서 이동 중에도 콘텐츠를 만들 수 있다."
- "나는 콘텐츠 크리에이터로서, 내 브랜드 색상과 폰트를 저장하고 모든 카드에 일관되게 적용하고 싶다. 그래서 일관된 시각적 아이덴티티를 유지할 수 있다."
2. **템플릿 활용**
- "나는 콘텐츠 크리에이터로서, 다양한 스타일의 템플릿을 빠르게 탐색하고 싶다. 그래서 내 콘텐츠에 맞는 최적의 디자인을 찾을 수 있다."
- "나는 콘텐츠 크리에이터로서, 자주 사용하는 템플릿을 커스터마이징하고 저장하고 싶다. 그래서 반복적인 디자인 작업을 줄일 수 있다."
- "나는 콘텐츠 크리에이터로서, 트렌디한 디자인 템플릿에 접근하고 싶다. 그래서 내 콘텐츠가 시대에 뒤처지지 않게 할 수 있다."
3. **소셜 미디어 공유**
- "나는 콘텐츠 크리에이터로서, 제작한 카드를 여러 소셜 미디어 플랫폼에 최적화된 형식으로 내보내고 싶다. 그래서 각 플랫폼에서 최상의 품질로 보여질 수 있다."
- "나는 콘텐츠 크리에이터로서, 카드를 직접 인스타그램에 공유하고 싶다. 그래서 앱 전환 없이 빠르게 콘텐츠를 발행할 수 있다."
- "나는 콘텐츠 크리에이터로서, 공유한 카드의 참여도를 추적하고 싶다. 그래서 어떤 디자인이 가장 효과적인지 파악할 수 있다."
## 비즈니스 사용자 관점
1. **브랜드 관리**
- "나는 스타트업 창업자로서, 회사의 브랜드 가이드라인을 앱에 설정하고 싶다. 그래서 모든 마케팅 자료가 일관된 브랜드 이미지를 유지할 수 있다."
- "나는 마케팅 매니저로서, 팀원들이 사용할 수 있는 브랜드 템플릿을 만들고 싶다. 그래서 누가 콘텐츠를 만들어도 브랜드 일관성을 유지할 수 있다."
- "나는 소상공인으로서, 프로페셔널해 보이는 프로모션 카드를 만들고 싶다. 그래서 큰 비용 없이도 브랜드 이미지를 향상시킬 수 있다."
2. **팀 협업**
- "나는 마케팅 팀장으로서, 팀원들과 템플릿과 디자인 자산을 공유하고 싶다. 그래서 효율적인 협업이 가능하다."
- "나는 콘텐츠 매니저로서, 팀원들이 제작한 카드를 검토하고 승인하고 싶다. 그래서 품질 관리를 할 수 있다."
- "나는 마케팅 담당자로서, 캠페인용 카드 시리즈를 한 번에 계획하고 제작하고 싶다. 그래서 일관된 메시지와 디자인으로 캠페인을 진행할 수 있다."
3. **마케팅 최적화**
- "나는 비즈니스 오너로서, 제품 특징을 강조하는 카드를 빠르게 만들고 싶다. 그래서 시장 변화에 신속하게 대응할 수 있다."
- "나는 마케팅 전문가로서, A/B 테스트를 위한 여러 버전의 카드를 만들고 싶다. 그래서 어떤 디자인이 가장 효과적인지 테스트할 수 있다."
- "나는 소셜 미디어 매니저로서, 여러 플랫폼에 맞는 콘텐츠를 한 번에 제작하고 싶다. 그래서 플랫폼별 최적화에 드는 시간을 줄일 수 있다."
## 개인 사용자 관점
1. **지식 관리**
- "나는 대학원생으로서, 책에서 발견한 인용구를 시각적으로 저장하고 싶다. 그래서 나중에 쉽게 찾고 활용할 수 있다."
- "나는 연구자로서, 관련 아이디어를 시각적으로 연결하고 싶다. 그래서 새로운 통찰을 얻을 수 있다."
- "나는 작가로서, 영감을 주는 문구를 카테고리별로 정리하고 싶다. 그래서 글쓰기에 활용할 수 있다."
2. **개인 표현**
- "나는 소셜 미디어 사용자로서, 내 생각이나 감정을 시각적으로 표현하고 싶다. 그래서 텍스트만으로는 전달하기 어려운 뉘앙스를 전달할 수 있다."
- "나는 일반 사용자로서, 특별한 날에 친구에게 보낼 맞춤형 카드를 만들고 싶다. 그래서 내 마음을 더 특별하게 전할 수 있다."
- "나는 취미 블로거로서, 내 취미 활동에 대한 팁과 노하우를 시각적으로 공유하고 싶다. 그래서 다른 사람들에게 도움을 줄 수 있다."
3. **학습 및 발표**
- "나는 학생으로서, 학습 내용을 시각적 카드로 요약하고 싶다. 그래서 복습과 기억에 도움이 될 수 있다."
- "나는 발표자로서, 핵심 포인트를 강조하는 슬라이드를 빠르게 만들고 싶다. 그래서 청중의 주의를 집중시킬 수 있다."
- "나는 교육자로서, 학생들을 위한 시각적 학습 자료를 만들고 싶다. 그래서 복잡한 개념을 이해하기 쉽게 전달할 수 있다."
## 기술 및 사용성 관점
1. **사용 편의성**
- "나는 사용자로서, 직관적인 인터페이스로 앱을 빠르게 배우고 싶다. 그래서 별도의 학습 없이도 바로 사용할 수 있다."
- "나는 사용자로서, 모바일에서 손가락으로 쉽게 조작할 수 있는 편집 도구를 원한다. 그래서 정밀한 작업도 스트레스 없이 할 수 있다."
- "나는 사용자로서, 실시간으로 변경 사항을 미리보기하고 싶다. 그래서 최종 결과물을 정확히 예측할 수 있다."
2. **성능 및 안정성**
- "나는 사용자로서, 오프라인에서도 앱을 사용하고 싶다. 그래서 인터넷 연결이 불안정한 상황에서도 작업할 수 있다."
- "나는 사용자로서, 앱이 빠르게 로딩되고 반응하기를 원한다. 그래서 창의적인 흐름이 끊기지 않는다."
- "나는 사용자로서, 작업 중인 내용이 자동으로 저장되기를 원한다. 그래서 예기치 않은 상황에서도 작업물을 잃지 않는다."
3. **개인정보 및 보안**
- "나는 사용자로서, 내 카드와 템플릿을 비공개로 유지하고 싶다. 그래서 원하는 것만 선택적으로 공유할 수 있다."
- "나는 사용자로서, 내 브랜드 자산을 안전하게 보관하고 싶다. 그래서 무단 사용을 방지할 수 있다."
- "나는 사용자로서, 내 계정에 안전하게 로그인하고 싶다. 그래서 개인 정보와 콘텐츠가 보호받을 수 있다."

151
ZELLYY/zellyy note/00_프로젝트_개요/사용자_페르소나.md Normal file
View File

@@ -0,0 +1,151 @@
# ZELLYY - 사용자 페르소나
## 페르소나 1: 콘텐츠 크리에이터 김소연 (27세, 여성)
### 기본 정보
- **직업**: 프리랜서 콘텐츠 크리에이터 (3년차)
- **전문 분야**: 라이프스타일, 독서, 여행
- **활동 플랫폼**: 인스타그램(팔로워 15,000명), 스레드, 블로그
- **디지털 역량**: 중상 (기본적인 디자인 툴 사용 가능)
- **수입원**: 브랜드 협찬, 제휴 마케팅, 콘텐츠 제작 의뢰
### 콘텐츠 제작 패턴
- 주 3-4회 인스타그램 포스팅
- 주 1-2회 블로그 포스팅
- 일 1-2회 스토리 및 스레드 업데이트
- 월 1-2회 브랜드 협찬 콘텐츠 제작
- 콘텐츠 기획 및 제작에 주당 약 20시간 소요
### 페인 포인트
- 고품질 시각 콘텐츠 제작에 많은 시간 소요
- 포토샵, 일러스트레이터 등 전문 디자인 툴의 높은 학습 장벽
- 모바일에서 프로페셔널한 콘텐츠 제작의 어려움
- 여러 플랫폼에 맞는 다양한 크기의 콘텐츠 제작 필요
- 일관된 브랜드 이미지 유지의 어려움
### 목표
- 콘텐츠 제작 시간 단축 (현재 포스트당 2시간 → 30분 이내)
- 모바일에서도 고품질 콘텐츠 제작 가능하게 하기
- 팔로워 참여도 증가 (현재 평균 좋아요 500개 → 1,000개)
- 브랜드 협찬 기회 확대 (월 2회 → 월 5회)
- 차별화된 시각적 아이덴티티 구축
### 앱 사용 행태
- 스마트폰 사용 시간: 하루 평균 5시간
- 자주 사용하는 앱: 인스타그램, 스레드, 핀터레스트, Canva
- 콘텐츠 제작 앱: Lightroom, VSCO, Unfold
- 새로운 앱 설치 주기: 월 2-3개 (콘텐츠 제작 관련)
---
## 페르소나 2: 스타트업 창업자 박준영 (32세, 남성)
### 기본 정보
- **직업**: 건강 식품 스타트업 CEO (창업 1년차)
- **회사 규모**: 직원 5명 (마케팅 전담 인력 없음)
- **타겟 시장**: 2030 건강 관심층
- **디지털 역량**: 중 (기본적인 소셜 미디어 활용 가능)
- **마케팅 예산**: 월 100-150만원
### 마케팅 활동 패턴
- 주 3회 소셜 미디어 콘텐츠 발행
- 월 1회 뉴스레터 발송
- 분기 1회 프로모션 캠페인 진행
- 제품 출시 시 집중 마케팅 (연 3-4회)
- 마케팅 활동에 주당 약 10시간 직접 투입
### 페인 포인트
- 디자인 전문가 없이 브랜드 이미지 구축의 어려움
- 제한된 예산으로 고품질 마케팅 자료 제작 필요
- 여러 플랫폼(인스타그램, 페이스북, 이메일 등)에 맞는 콘텐츠 제작 부담
- 일관된 브랜드 메시지와 시각적 아이덴티티 유지의 어려움
- 콘텐츠 제작에 많은 시간을 소비하여 핵심 사업에 집중 어려움
### 목표
- 마케팅 콘텐츠 제작 시간 단축 (현재 건당 3시간 → 30분 이내)
- 일관된 브랜드 이미지 구축
- 소셜 미디어 참여도 증가 (현재 평균 참여율 1.5% → 3%)
- 마케팅 비용 효율화 (디자인 외주 비용 절감)
- 제품 인지도 및 판매량 증가
### 앱 사용 행태
- 스마트폰 사용 시간: 하루 평균 3시간
- 자주 사용하는 앱: 인스타그램, 페이스북, 링크드인, 트렐로
- 마케팅 관련 앱: Canva, 메일침프, 구글 애널리틱스
- 새로운 앱 설치 주기: 월 1-2개 (비즈니스/생산성 관련)
---
## 페르소나 3: 대학원생 이지현 (24세, 여성)
### 기본 정보
- **직업**: 문학 전공 대학원생 (석사 과정 1년차)
- **연구 분야**: 현대 페미니즘 문학
- **활동**: 학술 세미나 참여, 소규모 독서 모임 운영
- **디지털 역량**: 중 (기본적인 디지털 도구 활용 가능)
- **학업 환경**: 주 3일 대학원 수업, 주 2일 개인 연구
### 학습 및 연구 패턴
- 주 5-7권의 책 독서 및 메모
- 월 2-3편의 학술 논문 작성
- 학기당 2-3회 세미나 발표
- 주 1회 독서 모임 진행
- 연구 및 학습에 주당 약 40시간 소요
### 페인 포인트
- 방대한 양의 독서 내용과 인용구 관리의 어려움
- 텍스트 중심 메모의 한계 (나중에 찾기 어려움)
- 아이디어와 인용구 간의 연결성 파악 어려움
- 학술 발표를 위한 시각 자료 제작의 번거로움
- 여러 기기(노트북, 태블릿, 스마트폰)에서의 동기화 문제
### 목표
- 효율적인 독서 메모 및 인용구 관리 시스템 구축
- 아이디어 간의 연결성 시각화
- 학술 발표를 위한 시각 자료 제작 시간 단축
- 연구 생산성 향상
- 개인 지식 관리 시스템 구축
### 앱 사용 행태
- 스마트폰 사용 시간: 하루 평균 4시간
- 자주 사용하는 앱: Notion, Google Drive, Evernote, Kindle
- 학습 관련 앱: Mendeley, Zotero, Forest
- 새로운 앱 설치 주기: 월 1-2개 (생산성/학습 관련)
---
## 페르소나 4: 마케팅 팀장 최태준 (29세, 남성)
### 기본 정보
- **직업**: 중소기업 마케팅 팀장 (경력 5년차)
- **팀 구성**: 마케팅 담당자 4명 (디자이너 없음)
- **업무 영역**: 소셜 미디어 마케팅, 콘텐츠 마케팅, 이벤트 기획
- **디지털 역량**: 중상 (다양한 마케팅 툴 활용 가능)
- **마케팅 예산**: 분기 1,000만원
### 업무 패턴
- 주 10-15개의 소셜 미디어 콘텐츠 제작 및 발행
- 월 2-3회의 캠페인 기획 및 실행
- 주 1회 팀 회의 및 콘텐츠 검토
- 월 1회 성과 분석 및 보고
- 콘텐츠 기획 및 제작에 팀 전체 주당 약 60시간 소요
### 페인 포인트
- 디자인 팀 의존으로 인한 콘텐츠 제작 지연
- 여러 플랫폼에 맞는 다양한 콘텐츠 제작의 부담
- 팀원 간 일관된 브랜드 메시지와 디자인 유지의 어려움
- 콘텐츠 검토 및 승인 프로세스의 비효율성
- 콘텐츠 성과 측정 및 분석의 어려움
### 목표
- 디자인 팀 의존도 감소 (현재 80% → 20% 이하)
- 콘텐츠 제작 시간 단축 (현재 건당 평균 5시간 → 1시간 이내)
- 팀 내 콘텐츠 제작 역량 강화
- 콘텐츠 검토 및 승인 프로세스 간소화
- 마케팅 콘텐츠 ROI 향상
### 앱 사용 행태
- 스마트폰 사용 시간: 하루 평균 4시간
- 자주 사용하는 앱: Slack, Asana, 인스타그램, 링크드인
- 마케팅 관련 앱: Hootsuite, Google Analytics, Canva
- 새로운 앱 설치 주기: 분기 2-3개 (마케팅/생산성 관련)

95
ZELLYY/zellyy note/00_프로젝트_개요/초기_프로젝트_개요.md Normal file
View File

@@ -0,0 +1,95 @@
# Zellyy 초기 프로젝트 개요
## 프로젝트 소개
Zellyy는 사용자가 간단한 생각, 아이디어, 메모를 정사각형 카드 형태로 작성하고 저장할 수 있는 모바일 앱입니다. 기본적인 노트 기능을 제공하면서도, 작성한 카드를 다양한 SNS 플랫폼에 공유할 수 있는 기능을 갖추고 있습니다. 추후 웹 서비스를 통해 모바일과 웹 간의 동기화 기능을 제공할 예정입니다.
## 주요 기능
### 1단계 (모바일 앱)
- **카드 작성 및 저장**: 정사각형 카드 형태의 UI에 짧은 글을 작성하고 로컬에 저장
- **카드 관리**: 작성한 카드 목록 보기, 수정, 삭제 기능
- **카드 커스터마이징**: 배경색, 폰트, 텍스트 정렬 등 기본적인 스타일링 옵션
- **SNS 공유**: 작성한 카드를 페이스북, 인스타그램, 스레드 등 주요 SNS에 공유
- **프리미엄 기능**: 구독 사용자에게 클라우드 저장 및 백업 기능 제공
### 2단계 (웹 서비스)
- **웹 인터페이스**: 브라우저에서 카드 작성 및 관리
- **클라우드 동기화**: 모바일 앱과 웹 서비스 간 카드 동기화
- **고급 커스터마이징**: 더 다양한 디자인 옵션 및 템플릿 제공
- **공개 갤러리**: 사용자가 원하는 카드를 공개적으로 공유할 수 있는 갤러리 기능
## 타겟 사용자
- **주 타겟**: 20~30대 젊은 성인
- **사용자 특성**:
- 소셜 미디어를 활발히 사용하는 사람들
- 간단한 생각이나 아이디어를 기록하고 싶은 사람들
- 시각적으로 매력적인 콘텐츠를 만들고 싶은 사람들
## 비즈니스 모델
- **기본 앱**: 무료 (기본적인 카드 작성 및 로컬 저장 기능)
- **프리미엄 구독**: 월정액 또는 연간 구독 방식
- 클라우드 저장 및 백업
- 모바일-웹 동기화
- 고급 디자인 옵션 및 템플릿
- 광고 제거
## 개발 일정
### 1단계: 모바일 앱 개발 (2023년 Q4 ~ 2024년 Q1)
- 기본 UI/UX 설계
- 카드 작성 및 저장 기능 구현
- SNS 공유 기능 구현
- 베타 테스트 및 피드백 수집
- 앱 스토어 출시 (iOS, Android)
### 2단계: 웹 서비스 개발 (2024년 Q2 ~ Q3)
- 웹 인터페이스 설계 및 구현
- 클라우드 동기화 기능 구현
- 공개 갤러리 기능 구현
- 프리미엄 기능 확장
## 기술 스택
### 모바일 앱
- **프론트엔드**: React Native
- **상태 관리**: Redux 또는 Context API
- **스타일링**: Styled Components 또는 React Native Paper
### 웹 서비스
- **프론트엔드**: React.js 또는 Next.js
- **상태 관리**: Redux 또는 Context API
- **스타일링**: Tailwind CSS 또는 Material-UI
### 백엔드
- **서버**: 자체 호스팅 Supabase
- **데이터베이스**: PostgreSQL (Supabase 내장)
- **인증**: Supabase Auth
- **스토리지**: Supabase Storage
- **배포 환경**: Debian 12 서버 (기존 인프라 활용)
## 성공 지표
- **사용자 수**: 첫 해 10,000명 이상의 활성 사용자 확보
- **구독 전환율**: 무료 사용자의 5% 이상이 유료 구독으로 전환
- **사용자 참여**: 사용자당 월 평균 10개 이상의 카드 작성
- **공유율**: 작성된 카드의 20% 이상이 SNS에 공유됨
- **사용자 유지율**: 30일 사용자 유지율 40% 이상
## 리스크 및 대응 전략
### 리스크
1. **경쟁 앱과의 차별화 부족**: 시장에 유사한 노트 앱이 많음
2. **사용자 확보 어려움**: 초기 사용자 유입이 부족할 수 있음
3. **수익화 모델의 효과**: 구독 모델이 충분한 수익을 창출하지 못할 수 있음
### 대응 전략
1. **차별화 포인트 강화**: 정사각형 카드 UI와 SNS 통합에 초점을 맞춘 마케팅
2. **초기 사용자 인센티브**: 얼리 어답터에게 프리미엄 기능 무료 제공
3. **다양한 수익 모델 테스트**: 구독 외에도 인앱 구매, 템플릿 마켓플레이스 등 다양한 수익 모델 실험
## 결론
Zellyy 프로젝트는 간단한 노트 기능과 SNS 공유 기능을 결합한 모바일 앱으로 시작하여, 추후 웹 서비스로 확장할 계획입니다. 20~30대 젊은 성인을 타겟으로 하며, 기본 기능은 무료로 제공하고 클라우드 동기화 및 고급 기능은 구독 모델을 통해 수익화할 예정입니다. 기존 인프라(Supabase)를 활용하여 개발 효율성을 높이고, 단계적인 접근 방식으로 리스크를 관리하며 프로젝트를 진행할 것입니다.

90
ZELLYY/zellyy note/00_프로젝트_개요/핵심_문제_정의.md Normal file
View File

@@ -0,0 +1,90 @@
# ZELLYY - 핵심 문제 정의
## 소셜 미디어 콘텐츠 제작 관련 문제점 분석
### 1. 시각적 콘텐츠 제작의 장벽
- **전문 디자인 지식 필요**: 대부분의 사용자는 디자인 원칙이나 전문 도구 사용법에 익숙하지 않음
- **복잡한 디자인 툴**: 포토샵, 일러스트레이터 등 전문 디자인 툴은 학습 곡선이 가파름
- **시간 소요**: 고품질 시각 콘텐츠 제작에 많은 시간이 소요됨
- **모바일 환경 제약**: 기존 디자인 툴은 데스크톱 중심으로, 모바일에서 사용하기 어려움
- **일관된 브랜드 이미지 유지 어려움**: 여러 콘텐츠에 걸쳐 일관된 시각적 아이덴티티 유지가 어려움
### 2. 기존 디자인/콘텐츠 제작 앱의 한계
- **범용성 vs 전문성 딜레마**: 쉬운 앱은 기능이 제한적이고, 전문적인 앱은 사용이 복잡함
- **템플릿 한계**: 제공되는 템플릿이 제한적이거나 차별화가 어려움
- **플랫폼 최적화 부족**: 다양한 소셜 미디어 플랫폼별 최적 크기/형식 지원 부족
- **워크플로우 비효율**: 여러 앱을 오가며 콘텐츠를 제작해야 하는 비효율
- **협업 기능 부재**: 팀 단위 콘텐츠 제작 및 관리 기능 부족
### 3. 소셜 미디어 환경의 변화
- **시각적 콘텐츠 중요성 증가**: 텍스트보다 시각적 콘텐츠가 참여도와 주목도 높임
- **콘텐츠 수명 단축**: 빠르게 소비되는 콘텐츠 특성상 제작 속도가 중요해짐
- **다중 플랫폼 관리**: 여러 소셜 미디어 플랫폼에 맞는 콘텐츠 제작 필요
- **모바일 중심 환경**: 이동 중에도 콘텐츠를 제작하고 공유해야 하는 필요성
- **개인 브랜딩 중요성**: 일반 사용자도 개인 브랜드 구축을 위한 시각적 일관성 필요
## MVP 접근 방식: 모바일 중심 카드 제작 툴
### 문제 해결 전략
1. **단순화된 디자인 경험**: 디자인 지식 없이도 고품질 콘텐츠를 제작할 수 있는 직관적 인터페이스
2. **모바일 최적화**: 스마트폰에서 완결된 워크플로우로 언제 어디서나 콘텐츠 제작 가능
3. **템플릿 중심 접근**: 전문적으로 디자인된 템플릿을 기반으로 빠른 콘텐츠 제작
4. **소셜 미디어 최적화**: 주요 소셜 플랫폼에 최적화된 형식과 크기 지원
### MVP 핵심 기능 선정 이유
1. **직관적인 카드 에디터**
- 복잡한 레이어 관리나 디자인 도구 없이 간단한 터치 인터페이스
- WYSIWYG(What You See Is What You Get) 방식으로 실시간 결과 확인
- 디자인 원칙이 내장된 스마트 가이드라인 제공
2. **다양한 템플릿 라이브러리**
- 전문 디자이너가 제작한 고품질 템플릿 제공
- 목적별, 스타일별 템플릿 카테고리화
- 사용자 커스터마이징이 용이한 모듈식 디자인
3. **텍스트 중심 콘텐츠 최적화**
- 인용구, 생각, 아이디어 등 텍스트 기반 콘텐츠에 특화
- 가독성과 시각적 매력을 균형 있게 갖춘 타이포그래피 옵션
- 텍스트 강조와 계층 구조를 위한 직관적 도구
4. **소셜 미디어 최적화 공유**
- 주요 플랫폼(인스타그램, 페이스북, 트위터 등)에 최적화된 내보내기
- 플랫폼별 권장 크기 자동 조정
- 빠른 공유 워크플로우 지원
5. **기본 카드 관리 시스템**
- 제작한 카드의 체계적 저장 및 관리
- 재사용 및 편집을 위한 히스토리 관리
- 태그 및 컬렉션 기반 구성
### 기대 효과
- 콘텐츠 제작 시간 대폭 단축 (시간 단위 → 분 단위)
- 디자인 전문가 없이도 프로페셔널한 품질의 콘텐츠 제작 가능
- 모바일 환경에서 완결된 콘텐츠 제작 워크플로우 구현
- 일관된 브랜드 이미지 유지 용이
- 소셜 미디어 참여도 및 효과 증가
## 차별화 전략
### 1. 텍스트 중심 특화
- 대부분의 디자인 툴이 이미지 편집에 중점을 두는 반면, ZELLYY는 텍스트 표현에 특화
- 타이포그래피, 텍스트 레이아웃, 텍스트 효과 등에 집중하여 차별화
### 2. 극도의 단순함
- 필수 기능만 포함하여 학습 곡선 최소화
- "3탭 이내" 원칙: 주요 작업을 3번 이내의 탭으로 완료할 수 있도록 설계
### 3. 모바일 네이티브 경험
- 모바일 환경을 고려한 UI/UX 설계
- 터치 제스처를 활용한 직관적 조작
- 오프라인 작업 지원으로 언제 어디서나 사용 가능
### 4. 소셜 미디어 최적화
- 플랫폼별 특성을 고려한 템플릿 및 내보내기 옵션
- 공유 과정의 마찰 최소화
- 소셜 미디어 트렌드를 반영한 지속적 업데이트
### 5. 개인화 및 브랜딩 지원
- 사용자 브랜드 요소(로고, 색상, 폰트) 저장 및 적용
- 개인 스타일 프리셋 생성 및 적용
- 일관된 시각적 아이덴티티 유지 지원

157
ZELLYY/zellyy note/01_기획_및_설계/MVP_기능_목록.md Normal file
View File

@@ -0,0 +1,157 @@
# ZELLYY - MVP 기능 목록
이 문서는 ZELLYY 앱의 MVP(Minimum Viable Product) 기능 목록을 정의합니다. 우선순위는 MoSCoW 방법론에 따라 분류되었습니다:
- **Must have**: 반드시 포함되어야 하는 핵심 기능
- **Should have**: 중요하지만 MVP 출시에 필수적이지는 않은 기능
- **Could have**: 있으면 좋지만 없어도 MVP 가치에 크게 영향을 미치지 않는 기능
- **Won't have**: MVP에서는 제외되는 기능 (향후 업데이트에서 고려)
## 카드 제작 및 편집
### Must have
- 기본 텍스트 입력 및 편집 기능
- 다양한 폰트 스타일 선택 옵션
- 기본 배경 색상 및 그라데이션 설정
- 텍스트 정렬 및 크기 조정 기능
- 완성된 카드 저장 기능
### Should have
- 텍스트 위치 자유롭게 조정 기능
- 기본 아이콘 및 심볼 라이브러리
- 텍스트 색상 및 투명도 조정
- 여러 텍스트 블록 추가 기능
- 실시간 미리보기 기능
### Could have
- 텍스트 효과 (그림자, 테두리 등) 적용
- 배경 패턴 및 텍스처 옵션
- 레이어 관리 기능
- 작업 히스토리 및 실행 취소/다시 실행
- 카드 비율 변경 옵션 (1:1, 4:5, 9:16 등)
### Won't have (MVP)
- 고급 이미지 편집 기능
- 애니메이션 및 동적 효과
- 사용자 정의 폰트 업로드
- 협업 편집 기능
- AI 기반 디자인 추천
## 템플릿 및 스타일
### Must have
- 기본 카드 템플릿 제공 (10-15개)
- 템플릿 카테고리별 분류 (인용구, 정보, 프로모션 등)
- 템플릿 기반 빠른 카드 생성 기능
- 템플릿 내 텍스트 및 색상 커스터마이징
### Should have
- 인기 템플릿 추천 기능
- 최근 사용한 템플릿 빠른 접근
- 템플릿 검색 및 필터링
- 사용자 커스텀 템플릿 저장 기능
### Could have
- 시즌별/이벤트별 특별 템플릿
- 템플릿 미리보기 갤러리
- 브랜드 스타일 가이드 설정 (색상, 폰트 세트)
- 템플릿 평점 및 리뷰 시스템
### Won't have (MVP)
- 템플릿 마켓플레이스
- 디자이너 제작 프리미엄 템플릿
- 산업별 특화 템플릿 세트
- 템플릿 공유 및 교환 기능
## 소셜 미디어 공유
### Must have
- 인스타그램 스토리/피드 최적화 내보내기
- 기본 이미지 포맷 저장 (JPG, PNG)
- 카드 갤러리에서 공유 기능
- 워터마크 기본 설정
### Should have
- 다중 소셜 플랫폼 지원 (페이스북, 트위터, 스레드)
- 플랫폼별 최적 크기 자동 조정
- 공유 시 캡션 추천 기능
- 워터마크 위치 및 투명도 조정
### Could have
- 소셜 미디어 계정 직접 연동
- 예약 발행 기능
- 해시태그 추천 및 관리
- 공유 통계 기본 분석
### Won't have (MVP)
- 다중 카드 캐러셀 포스팅
- 소셜 미디어 성과 고급 분석
- AI 기반 최적 발행 시간 추천
- 자동화된 소셜 미디어 캠페인 관리
## 카드 관리 및 구성
### Must have
- 생성한 카드 갤러리 뷰
- 기본 정렬 옵션 (최신순, 이름순)
- 카드 삭제 및 복제 기능
- 카드 상세 정보 보기
### Should have
- 카드 검색 기능
- 폴더 또는 컬렉션으로 카드 구성
- 카드에 태그 추가 기능
- 태그 기반 필터링
### Could have
- 카드 일괄 편집 기능
- 사용 통계 (조회수, 공유수)
- 카드 버전 관리
- 카드 내보내기/가져오기 기능
### Won't have (MVP)
- 고급 검색 및 필터링 옵션
- AI 기반 카드 자동 분류
- 클라우드 백업 및 동기화
- 카드 아카이브 및 복원 기능
## 사용자 관리 및 설정
### Must have
- 기본 회원가입 및 로그인 기능
- 프로필 정보 관리
- 앱 기본 설정 (알림, 테마)
- 로컬 저장소 관리
### Should have
- 소셜 로그인 연동
- 계정 복구 옵션
- 기본 사용자 통계 (생성한 카드 수 등)
- 앱 사용 가이드 및 튜토리얼
### Could have
- 생체 인증 로그인 (지문, 얼굴 인식)
- 데이터 사용량 관리
- 다크 모드 지원
- 앱 언어 설정
### Won't have (MVP)
- 다중 계정 관리
- 팀 협업 기능
- 고급 권한 설정
- 사용자 활동 로그 및 분석
## 제외 기능 (명확한 정의)
MVP 단계에서는 다음 기능들을 명확히 제외합니다:
1. **클라우드 동기화**: 여러 기기 간 자동 동기화 기능은 MVP에서 제외하고 로컬 저장소 기반으로 구현
2. **고급 이미지 편집**: 이미지 자르기, 필터, 효과 등의 고급 편집 기능은 향후 업데이트에서 구현
3. **협업 기능**: 팀 멤버 초대 및 공동 작업 기능은 MVP에서 제외
4. **AI 기반 기능**: 디자인 추천, 콘텐츠 생성 등 AI 기반 기능은 향후 업데이트에서 구현
5. **웹 버전**: 웹 기반 에디터는 MVP에서 제외하고 모바일 앱에 집중
6. **고급 분석**: 상세한 사용자 통계 및 소셜 미디어 성과 분석은 MVP에서 제외
7. **커뮤니티 기능**: 사용자 간 템플릿 공유, 갤러리 등의 커뮤니티 기능은 향후 업데이트에서 구현
8. **구독 모델**: 프리미엄 기능 및 구독 결제 시스템은 MVP에서 제외하고 기본 기능 무료 제공에 집중
이러한 제외 기능들은 MVP 출시 후 사용자 피드백과 우선순위에 따라 향후 업데이트에서 순차적으로 구현할 계획입니다.

195
ZELLYY/zellyy note/01_기획_및_설계/UI_UX_설계.md Normal file
View File

@@ -0,0 +1,195 @@
# ZELLYY - UI/UX 설계
## 디자인 원칙
ZELLYY의 UI/UX 설계는 다음과 같은 핵심 원칙을 기반으로 합니다:
1. **단순함(Simplicity)**: 복잡한 기능을 단순한 인터페이스로 제공하여 사용자의 인지 부하 최소화
2. **직관성(Intuitiveness)**: 사용자가 별도의 학습 없이도 앱을 사용할 수 있도록 직관적인 디자인 적용
3. **효율성(Efficiency)**: 최소한의 탭과 제스처로 작업을 완료할 수 있는 효율적인 워크플로우 설계
4. **일관성(Consistency)**: 모든 화면과 기능에서 일관된 디자인 언어와 상호작용 패턴 유지
5. **피드백(Feedback)**: 사용자 행동에 대한 명확한 시각적, 촉각적 피드백 제공
## 디자인 시스템
### 색상 팔레트
#### 주요 색상
- **Primary**: #4A6FFF (파란색) - 주요 액션, 강조 요소
- **Secondary**: #FF6B6B (코랄 레드) - 보조 액션, 알림
- **Tertiary**: #6CD9CC (민트 그린) - 성공, 완료 상태
#### 중립 색상
- **Background**: #FFFFFF (흰색) - 기본 배경
- **Surface**: #F8F9FA (연한 회색) - 카드, 컨테이너 배경
- **On Background**: #212529 (진한 회색) - 기본 텍스트
- **On Surface**: #495057 (중간 회색) - 보조 텍스트
#### 상태 색상
- **Success**: #40C057 (녹색) - 성공 상태
- **Warning**: #FD7E14 (주황색) - 경고 상태
- **Error**: #FA5252 (빨간색) - 오류 상태
- **Info**: #339AF0 (하늘색) - 정보 상태
### 타이포그래피
#### 폰트 패밀리
- **기본 폰트**: SF Pro (iOS), Roboto (Android)
- **대체 폰트**: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
#### 텍스트 스타일
- **Heading 1**: 24px, Bold, 1.2 line-height
- **Heading 2**: 20px, Bold, 1.3 line-height
- **Heading 3**: 18px, SemiBold, 1.4 line-height
- **Body 1**: 16px, Regular, 1.5 line-height
- **Body 2**: 14px, Regular, 1.5 line-height
- **Caption**: 12px, Regular, 1.4 line-height
- **Button**: 16px, Medium, 1.2 line-height
### 컴포넌트
#### 기본 컴포넌트
- **버튼**: 기본, 강조, 텍스트, 아이콘 버튼
- **입력 필드**: 텍스트 입력, 숫자 입력, 멀티라인 입력
- **선택 컨트롤**: 체크박스, 라디오 버튼, 토글 스위치
- **카드**: 기본 카드, 그림자 카드, 테두리 카드
- **리스트**: 기본 리스트, 아이콘 리스트, 썸네일 리스트
- **다이얼로그**: 알림, 확인, 입력 다이얼로그
- **탭**: 상단 탭, 하단 탭, 스크롤 탭
#### 특화 컴포넌트
- **템플릿 카드**: 템플릿 미리보기 및 선택을 위한 카드
- **컬러 피커**: 색상 및 그라데이션 선택 컴포넌트
- **텍스트 에디터**: 텍스트 스타일링 및 편집 컴포넌트
- **갤러리 그리드**: 카드 갤러리 표시를 위한 그리드
- **플랫폼 프리뷰**: 다양한 소셜 미디어 플랫폼 미리보기
## 화면 구조
### 주요 화면
1. **온보딩 화면**
- 앱 소개 및 주요 기능 하이라이트
- 회원가입 및 로그인 옵션
- 퀵 스타트 튜토리얼
2. **홈 화면**
- 최근 작업한 카드
- 추천 템플릿
- 빠른 액션 버튼 (새 카드 만들기, 템플릿 탐색)
- 사용 통계 요약
3. **템플릿 갤러리**
- 카테고리별 템플릿 분류
- 검색 및 필터 옵션
- 템플릿 미리보기 및 선택
4. **카드 에디터**
- 텍스트 편집 영역
- 스타일링 도구 모음
- 배경 설정 옵션
- 레이아웃 조정 도구
- 저장 및 공유 버튼
5. **내 카드 갤러리**
- 그리드 및 리스트 뷰 옵션
- 정렬 및 필터 도구
- 카드 관리 옵션 (삭제, 복제, 편집)
- 컬렉션 및 폴더 구성
6. **설정 화면**
- 계정 관리
- 앱 환경 설정
- 알림 설정
- 저장소 관리
- 도움말 및 지원
### 네비게이션 구조
- **하단 탭 바**: 홈, 템플릿, 에디터, 내 카드, 설정
- **계층적 네비게이션**: 드릴다운 방식의 화면 전환
- **모달 다이얼로그**: 빠른 작업 및 설정을 위한 오버레이
- **제스처 기반 네비게이션**: 스와이프, 핀치, 탭 제스처 지원
## 주요 사용자 흐름
### 1. 새 카드 제작 흐름
1. 홈 화면에서 '새 카드 만들기' 버튼 탭
2. 템플릿 카테고리 선택
3. 특정 템플릿 선택
4. 텍스트 내용 입력 및 편집
5. 스타일 조정 (폰트, 색상, 배치)
6. 미리보기 확인
7. 저장 및/또는 공유
### 2. 템플릿 커스터마이징 흐름
1. 템플릿 갤러리에서 템플릿 선택
2. 기본 요소 편집 (텍스트, 색상)
3. 고급 커스터마이징 (레이아웃, 요소 추가/제거)
4. 커스텀 템플릿으로 저장
5. 새 카드에 적용
### 3. 소셜 미디어 공유 흐름
1. 카드 에디터 또는 갤러리에서 공유 버튼 탭
2. 공유 플랫폼 선택
3. 플랫폼별 최적화 옵션 조정
4. 캡션 및 해시태그 추가
5. 공유 실행 또는 예약
## 반응형 디자인
### 기기별 최적화
- **스마트폰 (소형)**: 5.5인치 이하 화면에 최적화된 컴팩트 레이아웃
- **스마트폰 (대형)**: 5.5인치 이상 화면에 최적화된 확장 레이아웃
- **태블릿**: 분할 화면 및 확장된 도구 패널 지원
- **방향**: 세로 및 가로 모드 모두 지원
### 접근성 고려사항
- **텍스트 크기 조정**: 시스템 텍스트 크기 설정에 반응
- **색상 대비**: WCAG 2.1 AA 기준 준수
- **스크린 리더 지원**: 모든 UI 요소에 적절한 접근성 레이블 제공
- **터치 타겟**: 최소 44x44pt 크기의 터치 영역 확보
- **다크 모드**: 시스템 설정에 따른 다크 모드 지원
## 프로토타입 및 테스트
### 프로토타입 도구
- **로우 피델리티**: Figma, Sketch
- **하이 피델리티**: Figma, Protopie
- **인터랙션 테스트**: Figma 프로토타입, 개발 빌드
### 사용성 테스트 계획
- **참가자**: 주요 페르소나에 맞는 사용자 그룹 (콘텐츠 크리에이터, 비즈니스 사용자, 개인 사용자)
- **테스트 방법**: 과제 기반 테스트, 사고 구술법, 인터뷰
- **측정 지표**: 작업 완료율, 오류율, 작업 완료 시간, SUS 점수
- **피드백 반영**: 반복적인 디자인 개선 사이클
## 디자인 에셋
모든 디자인 에셋은 Figma 프로젝트에서 관리되며, 다음 항목을 포함합니다:
1. **디자인 시스템 라이브러리**
- 색상 스타일
- 텍스트 스타일
- 컴포넌트 라이브러리
- 아이콘 세트
2. **와이어프레임**
- 주요 화면 구조
- 사용자 흐름 다이어그램
- 인터랙션 모델
3. **하이 피델리티 목업**
- 모든 화면의 상세 디자인
- 상태 변화 및 애니메이션
- 다양한 기기 및 화면 크기 대응
4. **프로토타입**
- 인터랙티브 프로토타입
- 사용자 테스트용 시나리오
- 개발 참조용 상세 명세

27
ZELLYY/zellyy note/01_기획_및_설계/index.md Normal file
View File

@@ -0,0 +1,27 @@
# ZELLYY 기획 및 설계
## 목차
1. [요구사항 분석](../02_요구사항_분석.md)
2. [MVP 기능 목록](1.%20Project/2.%20ZELLYY/젤리의%20노트/01_기획_및_설계/MVP_기능_목록.md)
3. [주요 사용 시나리오](주요_사용_시나리오.md)
4. [UI/UX 설계](UI_UX_설계.md)
## 기획 및 설계 개요
ZELLYY 프로젝트의 기획 및 설계 단계에서는 사용자 요구사항을 분석하고, 핵심 기능을 정의하며, 사용자 경험을 설계하는 작업을 진행합니다. 이 단계에서는 프로젝트의 방향성을 명확히 하고, 개발 단계에서의 우선순위를 설정하는 것이 중요합니다.
## 주요 문서
- **요구사항 분석**: 사용자 인터뷰, 시장 조사, 경쟁 앱 분석 등을 통해 도출된 요구사항을 정리한 문서
- **MVP 기능 목록**: 최소 기능 제품(MVP)에 포함될 핵심 기능과 우선순위를 정의한 문서
- **주요 사용 시나리오**: 다양한 사용자 유형별 ZELLYY 앱 사용 시나리오를 상세히 설명한 문서
- **UI/UX 설계**: 사용자 인터페이스 및 경험 설계에 관한 문서 (와이어프레임, 프로토타입 등)
## 기획 원칙
1. **사용자 중심 설계**: 모든 기능과 인터페이스는 사용자의 니즈와 행동 패턴을 기반으로 설계
2. **단순함 우선**: 복잡한 기능보다 핵심 기능의 완성도와 사용성을 우선시
3. **모바일 최적화**: 모바일 환경에서의 최적 경험을 위한 설계 우선
4. **점진적 확장**: MVP를 기반으로 사용자 피드백에 따라 점진적으로 기능 확장
5. **일관된 경험**: 모든 화면과 기능에서 일관된 사용자 경험 제공

293
ZELLYY/zellyy note/01_기획_및_설계/요구사항_분석.md Normal file
View File

@@ -0,0 +1,293 @@
# ZELLYY - 요구사항 분석
## 1. 개요
ZELLYY는 모바일 중심의 카드 제작 애플리케이션으로, 사용자들이 디자인 전문 지식 없이도 고품질의 시각적 콘텐츠를 쉽고 빠르게 제작할 수 있도록 돕는 서비스입니다. 이 문서는 ZELLYY 앱의 요구사항을 정의하고 분석합니다.
## 2. 사용자 요구사항
### 2.1 기능적 요구사항
#### 카드 제작 및 편집
- 사용자는 다양한 템플릿을 기반으로 카드를 제작할 수 있어야 함
- 사용자는 텍스트 내용, 폰트, 색상, 배치 등을 편집할 수 있어야 함
- 사용자는 배경 색상, 그라데이션, 패턴을 선택하고 조정할 수 있어야 함
- 사용자는 기본 아이콘 및 심볼을 카드에 추가할 수 있어야 함
- 사용자는 실시간으로 변경 사항을 미리볼 수 있어야 함
#### 템플릿 및 스타일
- 시스템은 다양한 목적(인용구, 정보, 프로모션 등)에 맞는 템플릿을 제공해야 함
- 사용자는 템플릿을 검색하고 필터링할 수 있어야 함
- 사용자는 자주 사용하는 템플릿에 빠르게 접근할 수 있어야 함
- 사용자는 자신만의 커스텀 템플릿을 저장하고 재사용할 수 있어야 함
- 시스템은 트렌디한 디자인 스타일을 정기적으로 업데이트해야 함
#### 소셜 미디어 공유
- 사용자는 제작한 카드를 주요 소셜 미디어 플랫폼에 직접 공유할 수 있어야 함
- 시스템은 각 소셜 미디어 플랫폼에 최적화된 크기와 형식으로 카드를 내보낼 수 있어야 함
- 사용자는 공유 시 캡션과 해시태그를 추가할 수 있어야 함
- 사용자는 워터마크 설정을 조정할 수 있어야 함
- 시스템은 공유된 카드의 기본적인 참여 통계를 제공해야 함
#### 카드 관리 및 구성
- 사용자는 제작한 모든 카드를 갤러리 형태로 볼 수 있어야 함
- 사용자는 카드를 검색하고 필터링할 수 있어야 함
- 사용자는 카드를 폴더나 컬렉션으로 구성할 수 있어야 함
- 사용자는 카드에 태그를 추가하고 태그 기반으로 필터링할 수 있어야 함
- 사용자는 카드를 복제, 편집, 삭제할 수 있어야 함
#### 사용자 관리 및 설정
- 사용자는 이메일 또는 소셜 미디어 계정으로 가입하고 로그인할 수 있어야 함
- 사용자는 프로필 정보를 관리할 수 있어야 함
- 사용자는 앱의 기본 설정(알림, 테마 등)을 조정할 수 있어야 함
- 사용자는 자신의 브랜드 요소(로고, 색상, 폰트)를 저장하고 관리할 수 있어야 함
- 시스템은 사용자 데이터를 안전하게 저장하고 보호해야 함
### 2.2 비기능적 요구사항
#### 성능
- 앱은 5초 이내에 로딩되어야 함
- 카드 저장 및 공유 작업은 3초 이내에 완료되어야 함
- 앱은 최소 100개의 저장된 카드를 원활하게 관리할 수 있어야 함
- 템플릿 갤러리는 1초 이내에 로딩되어야 함
- 에디터의 실시간 미리보기는 지연 없이 반응해야 함
#### 사용성
- 앱은 직관적인 인터페이스로 초보 사용자도 쉽게 사용할 수 있어야 함
- 주요 작업은 3탭 이내로 완료할 수 있어야 함
- 앱은 명확한 오류 메시지와 가이드를 제공해야 함
- 앱은 다양한 화면 크기와 방향에 적응하는 반응형 디자인을 가져야 함
- 앱은 기본적인 접근성 가이드라인을 준수해야 함
#### 신뢰성
- 앱의 크래시 비율은 0.5% 미만이어야 함
- 앱은 오프라인 모드에서도 기본 기능을 사용할 수 있어야 함
- 시스템은 사용자 데이터를 자동으로 백업하고 복구할 수 있어야 함
- 앱은 예기치 않은 종료 시에도 작업 중인 내용을 보존해야 함
- 서비스 가용성은 99.9% 이상이어야 함
#### 보안
- 모든 사용자 데이터는 암호화되어 저장되어야 함
- 인증 시스템은 업계 표준 보안 프로토콜을 따라야 함
- 앱은 정기적인 보안 업데이트를 제공해야 함
- 사용자 권한 관리 시스템이 구현되어야 함
- 개인정보 보호 정책이 명확히 제시되어야 함
#### 확장성
- 시스템은 사용자 수가 증가해도 성능 저하 없이 작동해야 함
- 앱은 새로운 소셜 미디어 플랫폼을 쉽게 추가할 수 있는 구조여야 함
- 데이터베이스는 대량의 카드와 템플릿을 효율적으로 관리할 수 있어야 함
- 시스템은 향후 웹 버전으로 확장 가능한 아키텍처를 가져야 함
- API는 향후 서드파티 통합을 위해 확장 가능해야 함
## 3. 시장 요구사항
### 3.1 타겟 사용자 분석
#### 콘텐츠 크리에이터
- 소셜 미디어에서 활동하는 인플루언서, 블로거, 크리에이터
- 고품질 시각 콘텐츠를 빠르게 제작하고자 함
- 일관된 브랜드 이미지 유지가 중요함
- 모바일에서 작업하는 경우가 많음
- 디자인 전문 지식은 제한적임
#### 소상공인 및 스타트업
- 마케팅 전담 인력 없이 콘텐츠를 직접 제작해야 함
- 제한된 예산으로 프로페셔널한 콘텐츠 필요
- 브랜드 일관성 유지가 중요함
- 여러 플랫폼에 콘텐츠 배포 필요
- 시간 효율성이 중요함
#### 개인 사용자
- 자신의 생각, 인용구, 아이디어를 시각적으로 표현하고자 함
- 디자인 경험이 거의 없음
- 간단하고 직관적인 인터페이스 선호
- 주로 개인적인 용도나 소규모 공유를 위해 사용
- 트렌디한 디자인 스타일에 관심 있음
### 3.2 경쟁 앱 분석
#### 주요 경쟁 앱
1. **Canva**
- 강점: 다양한 템플릿, 풍부한 기능, 웹 및 모바일 지원
- 약점: 복잡한 인터페이스, 모바일에서 제한된 기능, 학습 곡선 높음
2. **Adobe Spark**
- 강점: 고품질 디자인, Adobe 생태계 통합, 전문적인 결과물
- 약점: 구독 모델, 모바일 최적화 부족, 복잡한 워크플로우
3. **Over**
- 강점: 모바일 중심, 직관적 인터페이스, 소셜 미디어 최적화
- 약점: 제한된 템플릿, 고급 기능 부족, 협업 기능 제한적
4. **Unfold**
- 강점: 미니멀한 디자인, 스토리 특화, 사용 용이성
- 약점: 제한된 커스터마이징, 특정 스타일에 국한, 다양성 부족
### 3.3 차별화 전략
1. **모바일 네이티브 경험**
- 모바일 환경에 완전히 최적화된 인터페이스
- 터치 제스처를 활용한 직관적 조작
- 오프라인 작업 지원
2. **텍스트 중심 특화**
- 텍스트 표현과 타이포그래피에 특화된 기능
- 다양한 텍스트 스타일링 옵션
- 텍스트 중심 콘텐츠를 위한 최적화된 템플릿
3. **극도의 단순함**
- "3탭 이내" 원칙으로 설계된 워크플로우
- 필수 기능만 포함하여 학습 곡선 최소화
- 직관적인 디자인 가이드라인 내장
4. **소셜 미디어 최적화**
- 주요 소셜 플랫폼에 최적화된 형식과 크기 지원
- 플랫폼별 특성을 고려한 템플릿
- 공유 과정의 마찰 최소화
5. **개인화 및 브랜딩 지원**
- 사용자 브랜드 요소 저장 및 적용
- 개인 스타일 프리셋 생성 및 적용
- 일관된 시각적 아이덴티티 유지 지원
## 4. 기술 요구사항
### 4.1 개발 플랫폼
#### 모바일 앱
- **iOS**: iOS 13.0 이상 지원
- **Android**: Android 8.0 (API 레벨 26) 이상 지원
- **개발 프레임워크**: React Native
- **상태 관리**: Redux/Redux Toolkit
- **UI 컴포넌트**: React Native Paper, 커스텀 컴포넌트
#### 백엔드 (향후 확장)
- **서비스**: Supabase
- **데이터베이스**: PostgreSQL
- **인증**: Supabase Auth
- **스토리지**: Supabase Storage
- **API**: RESTful API
### 4.2 통합 요구사항
#### 소셜 미디어 통합
- Instagram API 연동
- Facebook API 연동
- Twitter API 연동
- LinkedIn API 연동
- 기타 주요 소셜 미디어 플랫폼 지원
#### 클라우드 서비스 통합
- 클라우드 저장소 연동 (Google Drive, Dropbox, iCloud)
- 이미지 최적화 서비스 연동
- 푸시 알림 서비스 (Firebase Cloud Messaging)
- 분석 서비스 (Google Analytics, Firebase Analytics)
### 4.3 데이터 요구사항
#### 데이터 모델
- 사용자 프로필 데이터
- 카드 및 템플릿 데이터
- 브랜드 에셋 데이터
- 사용자 설정 및 환경설정 데이터
- 사용 통계 및 분석 데이터
#### 데이터 저장 및 동기화
- 로컬 저장소 (AsyncStorage, SQLite)
- 클라우드 동기화 (Supabase)
- 오프라인 모드 지원
- 데이터 백업 및 복원 메커니즘
- 충돌 해결 전략
## 5. 제약 사항
### 5.1 기술적 제약
- 모바일 기기의 제한된 화면 크기 및 입력 방식
- 모바일 기기의 제한된 처리 능력 및 메모리
- 네트워크 연결 상태의 변동성
- 다양한 기기 및 OS 버전 지원 필요
- 앱 크기 제한 (초기 다운로드 크기 최소화)
### 5.2 비즈니스 제약
- 제한된 초기 개발 예산 및 인력
- 경쟁 앱과의 차별화 필요성
- 수익 모델 구축 (무료 vs 프리미엄 기능)
- 마케팅 및 사용자 확보 전략
- 지속 가능한 운영 모델 수립
### 5.3 법적/규제 제약
- 개인정보 보호법 준수
- 소셜 미디어 플랫폼의 API 사용 정책 준수
- 저작권 및 지적 재산권 고려
- 앱스토어 및 구글 플레이 스토어 정책 준수
- 접근성 관련 법규 준수
## 6. 가정 및 의존성
### 6.1 가정
- 타겟 사용자는 기본적인 모바일 앱 사용 경험이 있음
- 대부분의 사용자는 안정적인 인터넷 연결을 가지고 있음
- 사용자는 소셜 미디어 계정을 보유하고 있음
- 모바일 기기는 기본적인 카메라 및 갤러리 접근 기능을 제공함
- 사용자는 기본적인 디자인 개념(색상, 폰트, 레이아웃)을 이해함
### 6.2 의존성
- 소셜 미디어 플랫폼 API의 가용성 및 정책
- 서드파티 라이브러리 및 서비스의 안정성
- 앱스토어 및 구글 플레이 스토어의 승인 프로세스
- 클라우드 서비스 제공업체의 가용성 및 성능
- 모바일 OS 업데이트 및 변경사항
## 7. 우선순위 및 릴리스 계획
### 7.1 MVP (Minimum Viable Product)
- 기본 카드 제작 및 편집 기능
- 핵심 템플릿 세트 (10-15개)
- 로컬 저장 및 관리 기능
- 기본 소셜 미디어 공유 기능
- 사용자 계정 및 기본 설정
### 7.2 향후 릴리스
#### 릴리스 1.1
- 추가 템플릿 및 스타일 옵션
- 고급 텍스트 편집 기능
- 태그 및 컬렉션 관리 기능
- 향상된 소셜 미디어 통합
#### 릴리스 1.2
- 클라우드 동기화 기능
- 사용자 커스텀 템플릿 저장
- 기본 분석 및 통계 기능
- 추가 소셜 미디어 플랫폼 지원
#### 릴리스 2.0
- 프리미엄 구독 모델 도입
- 고급 브랜딩 및 커스터마이징 옵션
- 웹 버전 출시
- 팀 협업 기능
## 8. 승인 기준
### 8.1 기능 승인 기준
- 모든 핵심 기능이 명세대로 구현됨
- 사용자 테스트에서 80% 이상의 작업 완료율
- 모든 주요 사용 시나리오가 성공적으로 테스트됨
- 크래시 비율 0.5% 미만
- 성능 지표가 목표치를 충족함
### 8.2 품질 승인 기준
- 코드 품질 검토 통과
- 보안 감사 통과
- 접근성 가이드라인 준수
- 모든 우선순위 버그 수정
- 사용자 만족도 테스트에서 4/5 이상 점수

169
ZELLYY/zellyy note/01_기획_및_설계/주요_사용_시나리오.md Normal file
View File

@@ -0,0 +1,169 @@
# ZELLYY - 주요 사용 시나리오
## 시나리오 1: SNS 공유용 카드 제작 및 공유
### 사용자: 김소연 (27세, 여성, 콘텐츠 크리에이터)
#### 배경
김소연은 인스타그램과 스레드에서 활발하게 활동하는 콘텐츠 크리에이터입니다. 자신의 생각과 아이디어를 시각적으로 매력적인 방식으로 표현하고 싶지만, 디자인 툴을 사용하는 것이 복잡하고 시간이 많이 소요되어 어려움을 겪고 있습니다. 특히 모바일에서 간편하게 고품질 콘텐츠를 제작할 수 있는 방법을 찾고 있습니다.
#### 시나리오 흐름
1. **앱 설치 및 가입**
- 소연은 인스타그램에서 ZELLYY로 제작된 카드를 본 후, 앱스토어에서 'ZELLYY' 앱을 검색하여 설치합니다.
- 이메일 또는 소셜 미디어 계정으로 간편하게 회원가입을 완료합니다.
2. **첫 카드 제작**
- 소연은 홈 화면에서 '새 카드 만들기' 버튼을 탭합니다.
- 다양한 템플릿 중 '인용구' 스타일을 선택합니다.
- 최근에 읽은 책에서 인상 깊었던 문구를 입력합니다.
- 앱이 제안하는 여러 폰트 스타일 중 자신의 브랜드 이미지와 맞는 스타일을 선택합니다.
- 배경 색상과 그라데이션을 조정하여 자신만의 스타일을 만듭니다.
3. **카드 커스터마이징**
- 텍스트 위치와 크기를 손가락으로 간단히 조정합니다.
- 하단에 자신의 인스타그램 계정명을 작은 폰트로 추가합니다.
- 앱에서 제공하는 미니멀한 아이콘을 선택하여 카드 모서리에 배치합니다.
- 실시간으로 변경사항을 미리보기로 확인합니다.
4. **카드 저장 및 공유**
- 완성된 카드를 저장합니다.
- '인스타그램에 공유' 버튼을 탭하여 스토리 또는 피드에 바로 공유할 수 있는 옵션을 선택합니다.
- 인스타그램 스토리에 카드를 공유하고, 스와이프 업 링크로 자신의 블로그를 연결합니다.
- 앱은 자동으로 최적화된 크기와 해상도로 카드를 내보냅니다.
5. **피드백 및 분석**
- 다음 날, 소연은 ZELLYY 앱에서 자신이 공유한 카드의 반응(좋아요, 공유 수)을 확인합니다.
- 앱에서 제공하는 인사이트를 통해 어떤 스타일의 카드가 가장 인기 있는지 분석합니다.
- 이 정보를 바탕으로 다음 카드 디자인을 계획합니다.
#### 결과
소연은 ZELLYY를 사용하여 디자인 전문 지식 없이도 프로페셔널한 품질의 카드를 빠르게 제작할 수 있게 되었습니다. 일관된 브랜드 이미지를 유지하면서도 다양한 스타일의 콘텐츠를 제작할 수 있게 되어 팔로워 참여도가 30% 증가했습니다. 특히 모바일에서 5분 이내에 고품질 콘텐츠를 제작할 수 있게 되어 콘텐츠 제작 시간이 크게 단축되었습니다.
---
## 시나리오 2: 비즈니스 브랜딩을 위한 일관된 카드 시리즈 제작
### 사용자: 박준영 (32세, 남성, 스타트업 창업자)
#### 배경
박준영은 최근 건강 식품 스타트업을 창업했습니다. 소셜 미디어를 통해 브랜드 인지도를 높이고 제품 정보를 효과적으로 전달하고 싶지만, 마케팅 팀이 없는 상황에서 일관된 브랜드 이미지를 유지하는 것이 어렵습니다. 특히 여러 플랫폼에 맞는 다양한 크기의 콘텐츠를 제작하는 데 많은 시간이 소요됩니다.
#### 시나리오 흐름
1. **브랜드 프로필 설정**
- 준영은 ZELLYY 앱에 가입한 후, '브랜드 프로필' 기능을 사용합니다.
- 회사 로고를 업로드하고, 브랜드 색상 코드(#2E8B57)와 주 폰트를 설정합니다.
- 자주 사용하는 해시태그와 슬로건을 저장합니다.
2. **템플릿 시리즈 생성**
- '템플릿 시리즈 만들기' 기능을 사용하여 제품 소개, 고객 후기, 건강 팁 등 다양한 카테고리의 템플릿을 생성합니다.
- 각 템플릿에 브랜드 요소(로고, 색상, 폰트)가 자동으로 적용됩니다.
- 템플릿마다 텍스트와 이미지 위치를 조정하여 일관성을 유지하면서도 다양성을 갖도록 설정합니다.
3. **제품 소개 카드 제작**
- 새로운 제품 출시를 앞두고, '제품 소개' 템플릿을 선택합니다.
- 제품 이미지를 업로드하고, 앱의 자동 배경 제거 기능을 사용하여 깔끔하게 처리합니다.
- 제품명과 핵심 특징을 입력하면, 앱이 자동으로 텍스트 크기와 위치를 최적화합니다.
- 하단에 제품 출시일과 구매 링크를 추가합니다.
4. **멀티 플랫폼 최적화**
- '멀티 플랫폼 내보내기' 기능을 사용하여 하나의 디자인을 인스타그램, 페이스북, 트위터 등 여러 플랫폼에 맞는 크기로 자동 변환합니다.
- 각 플랫폼별 미리보기를 확인하고 필요한 경우 세부 조정을 합니다.
- 모든 버전을 한 번에 저장하고, 플랫폼별로 예약 발행 일정을 설정합니다.
5. **시리즈 콘텐츠 관리**
- 일주일 동안 매일 다른 제품 특징을 강조하는 카드 시리즈를 계획합니다.
- 앱의 '콘텐츠 캘린더' 기능을 사용하여 발행 일정을 관리합니다.
- 이전에 만든 템플릿을 복제하고 내용만 변경하여 빠르게 시리즈 콘텐츠를 완성합니다.
#### 결과
준영은 ZELLYY를 통해 디자인 전문가 없이도 일관된 브랜드 이미지를 가진 프로페셔널한 마케팅 콘텐츠를 제작할 수 있게 되었습니다. 콘텐츠 제작 시간이 80% 단축되었고, 여러 플랫폼에 최적화된 콘텐츠를 쉽게 배포할 수 있게 되었습니다. 일관된 브랜드 메시지와 시각적 아이덴티티 덕분에 소셜 미디어 참여도가 45% 증가했고, 브랜드 인지도가 크게 향상되었습니다.
---
## 시나리오 3: 개인 아카이브 및 아이디어 관리
### 사용자: 이지현 (24세, 여성, 대학원생)
#### 배경
이지현은 문학 전공 대학원생으로, 읽는 책이나 논문에서 인상 깊은 구절을 자주 메모합니다. 기존에는 메모 앱이나 노트에 텍스트만 기록했지만, 이런 방식으로는 나중에 찾아보기 어렵고 영감을 얻기도 힘들었습니다. 자신의 생각과 수집한 인용구를 시각적으로 정리하고 쉽게 검색할 수 있는 방법을 찾고 있습니다.
#### 시나리오 흐름
1. **개인 아카이브 설정**
- 지현은 ZELLYY 앱을 설치하고 '개인 아카이브' 모드로 사용하기로 결정합니다.
- 자신만의 태그 시스템을 설정합니다: #문학이론, #페미니즘, #포스트모더니즘, #논문아이디어 등
- 프라이버시 설정을 '비공개'로 설정하여 모든 카드가 자신만 볼 수 있도록 합니다.
2. **독서 중 인용구 저장**
- 지현은 책을 읽다가 인상적인 구절을 발견합니다.
- ZELLYY 앱을 열고 '빠른 캡처' 기능을 사용하여 텍스트를 입력합니다.
- 출처(저자, 책 제목, 페이지)를 메타데이터로 추가합니다.
- 관련 태그(#페미니즘, #문학이론)를 추가합니다.
- 간단한 템플릿을 선택하여 시각적 카드로 변환하고 저장합니다.
3. **아이디어 발전 및 연결**
- 며칠 후, 논문 주제에 대해 고민하던 지현은 앱에서 #페미니즘 태그로 저장된 모든 카드를 검색합니다.
- 여러 카드를 나란히 배치하여 비교하고, 연관성을 발견합니다.
- '아이디어 맵' 기능을 사용하여 관련 카드들을 시각적으로 연결하고 관계를 표시합니다.
- 새로운 통찰을 얻어 논문 아이디어를 카드로 작성하고 #논문아이디어 태그를 추가합니다.
4. **개인 컬렉션 관리**
- 지현은 관련 카드들을 '페미니즘 문학 연구' 컬렉션으로 그룹화합니다.
- 컬렉션 내에서 카드를 논리적 순서로 재배열합니다.
- 컬렉션에 간단한 설명을 추가하여 나중에 컨텍스트를 기억할 수 있게 합니다.
- 클라우드 동기화를 통해 모든 기기에서 접근할 수 있도록 설정합니다.
5. **학술 발표 준비**
- 세미나 발표를 준비하면서, 지현은 저장해둔 카드 중 핵심 개념을 설명하는 5개를 선택합니다.
- '프레젠테이션 모드'를 사용하여 카드를 슬라이드 형식으로 변환합니다.
- 각 카드의 디자인을 학술 발표에 적합하게 조정합니다.
- 완성된 슬라이드를 PDF로 내보내 발표 자료로 활용합니다.
#### 결과
지현은 ZELLYY를 통해 단순한 텍스트 메모를 넘어 시각적이고 구조화된 지식 관리 시스템을 구축할 수 있게 되었습니다. 태그와 컬렉션 기능으로 방대한 양의 인용구와 아이디어를 효율적으로 관리하고, 필요할 때 쉽게 찾을 수 있게 되었습니다. 특히 아이디어 간의 연결을 시각화함으로써 새로운 통찰을 얻는 데 도움이 되었고, 학술 작업의 생산성이 크게 향상되었습니다.
---
## 시나리오 4: 팀 협업을 통한 마케팅 콘텐츠 제작
### 사용자: 최태준 (29세, 남성, 마케팅 매니저) & 그의 팀원들
#### 배경
최태준은 중소기업의 마케팅 팀장으로, 4명의 팀원과 함께 소셜 미디어 콘텐츠를 제작하고 있습니다. 기존에는 디자인 팀에 의존하여 콘텐츠를 제작했지만, 디자인 팀의 업무량이 많아 콘텐츠 제작이 지연되는 경우가 많았습니다. 마케팅 팀이 직접 퀄리티 높은 콘텐츠를 빠르게 제작하고 일관된 브랜드 이미지를 유지할 수 있는 솔루션이 필요합니다.
#### 시나리오 흐름
1. **팀 워크스페이스 설정**
- 태준은 ZELLYY 비즈니스 계정을 생성하고 팀원들을 초대합니다.
- 회사 브랜드 가이드라인(로고, 색상, 폰트)을 워크스페이스에 설정합니다.
- 팀원별 권한(편집자, 검토자, 관리자)을 설정합니다.
- 주요 캠페인별로 폴더를 생성하여 콘텐츠를 구조화합니다.
2. **템플릿 라이브러리 구축**
- 디자인 팀과 협업하여 회사 브랜드에 맞는 기본 템플릿 세트를 제작합니다.
- 제품 소개, 고객 후기, 프로모션 안내 등 다양한 유형의 템플릿을 라이브러리에 추가합니다.
- 모든 템플릿에 편집 가능한 영역과 고정 영역을 명확히 구분하여 브랜드 일관성을 유지합니다.
- 템플릿 사용 가이드라인을 작성하여 팀원들과 공유합니다.
3. **협업 콘텐츠 제작**
- 신제품 출시 캠페인을 위해 태준이 콘텐츠 계획을 수립하고 팀원들에게 과제를 할당합니다.
- 팀원 A는 제품 특징 카드를, 팀원 B는 고객 혜택 카드를 담당합니다.
- 각자 할당된 템플릿을 사용하여 콘텐츠를 제작하고 팀 워크스페이스에 저장합니다.
- 태준은 실시간으로 팀원들의 작업 상황을 확인하고 댓글 기능을 통해 피드백을 제공합니다.
4. **검토 및 승인 프로세스**
- 모든 팀원이 콘텐츠 제작을 완료하면, 태준은 '검토 모드'에서 전체 캠페인 콘텐츠를 확인합니다.
- 일부 카드의 메시지 톤과 이미지 배치를 조정하도록 요청합니다.
- 팀원들이 수정을 완료하면 최종 검토 후 '승인' 상태로 변경합니다.
- 마케팅 디렉터에게 최종 승인을 위한 링크를 공유합니다.
5. **콘텐츠 일정 관리 및 배포**
- 승인된 콘텐츠는 '콘텐츠 캘린더'에 등록되어 발행 일정이 관리됩니다.
- 팀은 앱 내 '소셜 미디어 매니저' 기능을 통해 여러 플랫폼에 콘텐츠를 예약 발행합니다.
- 발행된 콘텐츠의 성과 데이터가 앱으로 자동 수집되어 대시보드에 표시됩니다.
- 팀은 주간 회의에서 성과 데이터를 분석하고 다음 콘텐츠 전략을 조정합니다.
#### 결과
태준의 팀은 ZELLYY를 도입한 후 콘텐츠 제작 시간을 70% 단축하고, 디자인 팀에 대한 의존도를 크게 줄였습니다. 브랜드 일관성이 향상되었고, 팀원들 간의 협업 효율성이 증가했습니다. 특히 검토 및 승인 프로세스가 간소화되어 콘텐츠 출시 주기가 빨라졌고, 실시간 성과 분석을 통해 콘텐츠 전략을 지속적으로 최적화할 수 있게 되었습니다. 결과적으로 소셜 미디어 참여도가 60% 증가하고 전환율이 25% 향상되었습니다.

666
ZELLYY/zellyy note/02_기술_문서/API_명세서.md Normal file
View File

@@ -0,0 +1,666 @@
# Zellyy API 명세서
이 문서는 Zellyy 프로젝트의 API 엔드포인트와 기능에 대한 상세 명세를 제공합니다.
## 기본 정보
- **기본 URL**: `https://a11.ism.kr/api`
- **API 버전**: v1
- **인증 방식**: JWT 토큰 (Bearer Authentication)
- **응답 형식**: JSON
## 인증 API
### 회원가입
```
POST /auth/signup
```
**요청 본문**:
```json
{
"email": "user@example.com",
"password": "securepassword",
"username": "username"
}
```
**응답 (200 OK)**:
```json
{
"user": {
"id": "uuid",
"email": "user@example.com",
"username": "username"
},
"session": {
"access_token": "jwt_token",
"refresh_token": "refresh_token",
"expires_at": 1672531200
}
}
```
### 로그인
```
POST /auth/login
```
**요청 본문**:
```json
{
"email": "user@example.com",
"password": "securepassword"
}
```
**응답 (200 OK)**:
```json
{
"user": {
"id": "uuid",
"email": "user@example.com",
"username": "username"
},
"session": {
"access_token": "jwt_token",
"refresh_token": "refresh_token",
"expires_at": 1672531200
}
}
```
### 토큰 갱신
```
POST /auth/refresh
```
**요청 본문**:
```json
{
"refresh_token": "refresh_token"
}
```
**응답 (200 OK)**:
```json
{
"access_token": "new_jwt_token",
"refresh_token": "new_refresh_token",
"expires_at": 1672531200
}
```
### 로그아웃
```
POST /auth/logout
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (200 OK)**:
```json
{
"message": "Successfully logged out"
}
```
## 사용자 API
### 사용자 정보 조회
```
GET /users/me
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (200 OK)**:
```json
{
"id": "uuid",
"email": "user@example.com",
"username": "username",
"display_name": "Display Name",
"avatar_url": "https://example.com/avatar.jpg",
"is_premium": false,
"premium_until": null,
"created_at": "2023-01-01T00:00:00Z"
}
```
### 사용자 정보 업데이트
```
PATCH /users/me
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**요청 본문**:
```json
{
"display_name": "New Display Name",
"avatar_url": "https://example.com/new-avatar.jpg"
}
```
**응답 (200 OK)**:
```json
{
"id": "uuid",
"email": "user@example.com",
"username": "username",
"display_name": "New Display Name",
"avatar_url": "https://example.com/new-avatar.jpg",
"updated_at": "2023-01-02T00:00:00Z"
}
```
## 카드 API
### 카드 생성
```
POST /cards
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**요청 본문**:
```json
{
"content": "This is a card content",
"background_color": "#FFFFFF",
"text_color": "#000000",
"font_family": "system",
"font_size": 16,
"text_align": "center",
"is_public": false,
"tags": ["personal", "ideas"]
}
```
**응답 (201 Created)**:
```json
{
"id": "uuid",
"content": "This is a card content",
"background_color": "#FFFFFF",
"text_color": "#000000",
"font_family": "system",
"font_size": 16,
"text_align": "center",
"is_public": false,
"is_synced": false,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-01T00:00:00Z",
"tags": ["personal", "ideas"]
}
```
### 카드 목록 조회
```
GET /cards
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**쿼리 파라미터**:
- `page`: 페이지 번호 (기본값: 1)
- `limit`: 페이지당 항목 수 (기본값: 20, 최대: 100)
- `sort`: 정렬 기준 (options: created_at, updated_at, 기본값: created_at)
- `order`: 정렬 순서 (options: asc, desc, 기본값: desc)
- `tag`: 태그로 필터링 (선택 사항)
- `search`: 내용 검색 (선택 사항)
**응답 (200 OK)**:
```json
{
"data": [
{
"id": "uuid1",
"content": "Card 1 content",
"background_color": "#FFFFFF",
"text_color": "#000000",
"font_family": "system",
"font_size": 16,
"text_align": "center",
"is_public": false,
"is_synced": false,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-01T00:00:00Z",
"tags": ["personal"]
},
{
"id": "uuid2",
"content": "Card 2 content",
"background_color": "#F0F0F0",
"text_color": "#333333",
"font_family": "arial",
"font_size": 18,
"text_align": "left",
"is_public": true,
"is_synced": true,
"created_at": "2023-01-02T00:00:00Z",
"updated_at": "2023-01-02T00:00:00Z",
"tags": ["ideas", "public"]
}
],
"pagination": {
"total": 42,
"page": 1,
"limit": 20,
"total_pages": 3
}
}
```
### 카드 상세 조회
```
GET /cards/{card_id}
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (200 OK)**:
```json
{
"id": "uuid",
"content": "This is a card content",
"background_color": "#FFFFFF",
"text_color": "#000000",
"font_family": "system",
"font_size": 16,
"text_align": "center",
"is_public": false,
"is_synced": false,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-01T00:00:00Z",
"tags": ["personal", "ideas"],
"share_count": 2,
"share_platforms": ["facebook", "instagram"]
}
```
### 카드 업데이트
```
PATCH /cards/{card_id}
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**요청 본문**:
```json
{
"content": "Updated card content",
"background_color": "#F0F0F0",
"is_public": true,
"tags": ["personal", "ideas", "updated"]
}
```
**응답 (200 OK)**:
```json
{
"id": "uuid",
"content": "Updated card content",
"background_color": "#F0F0F0",
"text_color": "#000000",
"font_family": "system",
"font_size": 16,
"text_align": "center",
"is_public": true,
"is_synced": false,
"created_at": "2023-01-01T00:00:00Z",
"updated_at": "2023-01-02T00:00:00Z",
"tags": ["personal", "ideas", "updated"]
}
```
### 카드 삭제
```
DELETE /cards/{card_id}
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (204 No Content)**
## 소셜 공유 API
### 소셜 계정 연동
```
POST /social/connect/{platform}
```
**지원 플랫폼**: `facebook`, `instagram`, `twitter`
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**요청 본문**:
```json
{
"access_token": "platform_access_token",
"refresh_token": "platform_refresh_token",
"expires_at": 1672531200
}
```
**응답 (200 OK)**:
```json
{
"platform": "facebook",
"connected": true,
"platform_user_id": "platform_user_id",
"expires_at": 1672531200
}
```
### 소셜 계정 연동 해제
```
DELETE /social/connect/{platform}
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (204 No Content)**
### 연동된 소셜 계정 목록
```
GET /social/accounts
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (200 OK)**:
```json
{
"accounts": [
{
"platform": "facebook",
"platform_user_id": "facebook_user_id",
"connected_at": "2023-01-01T00:00:00Z",
"expires_at": 1672531200
},
{
"platform": "instagram",
"platform_user_id": "instagram_user_id",
"connected_at": "2023-01-02T00:00:00Z",
"expires_at": 1672617600
}
]
}
```
### 카드 소셜 공유
```
POST /cards/{card_id}/share/{platform}
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**요청 본문**:
```json
{
"message": "Check out my new card!" // 선택적 메시지
}
```
**응답 (200 OK)**:
```json
{
"id": "share_id",
"card_id": "card_id",
"platform": "facebook",
"status": "success",
"share_url": "https://facebook.com/post/123456",
"shared_at": "2023-01-01T00:00:00Z"
}
```
## 구독 API
### 구독 플랜 목록
```
GET /subscriptions/plans
```
**응답 (200 OK)**:
```json
{
"plans": [
{
"id": "monthly",
"name": "Monthly Premium",
"description": "Monthly subscription with cloud sync",
"price": 4.99,
"currency": "USD",
"interval": "month",
"features": [
"Cloud sync",
"Unlimited cards",
"Premium templates"
]
},
{
"id": "yearly",
"name": "Yearly Premium",
"description": "Yearly subscription with cloud sync (save 20%)",
"price": 47.99,
"currency": "USD",
"interval": "year",
"features": [
"Cloud sync",
"Unlimited cards",
"Premium templates",
"Priority support"
]
}
]
}
```
### 구독 생성
```
POST /subscriptions
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**요청 본문**:
```json
{
"plan_id": "monthly",
"payment_method_id": "payment_method_id",
"payment_provider": "stripe"
}
```
**응답 (201 Created)**:
```json
{
"id": "subscription_id",
"plan_id": "monthly",
"status": "active",
"start_date": "2023-01-01T00:00:00Z",
"end_date": "2023-02-01T00:00:00Z",
"payment_provider": "stripe",
"payment_id": "payment_id"
}
```
### 현재 구독 정보
```
GET /subscriptions/current
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (200 OK)**:
```json
{
"id": "subscription_id",
"plan_id": "monthly",
"status": "active",
"start_date": "2023-01-01T00:00:00Z",
"end_date": "2023-02-01T00:00:00Z",
"auto_renew": true,
"payment_provider": "stripe",
"payment_id": "payment_id"
}
```
### 구독 취소
```
POST /subscriptions/cancel
```
**요청 헤더**:
```
Authorization: Bearer jwt_token
```
**응답 (200 OK)**:
```json
{
"id": "subscription_id",
"status": "canceled",
"end_date": "2023-02-01T00:00:00Z",
"message": "Subscription will be active until the end date"
}
```
## 오류 응답
모든 API 엔드포인트는 오류 발생 시 다음과 같은 형식으로 응답합니다:
**응답 (4xx/5xx)**:
```json
{
"error": {
"code": "error_code",
"message": "Error message description",
"details": {} // 추가 오류 정보 (선택 사항)
}
}
```
### 공통 오류 코드
- `invalid_request`: 잘못된 요청 형식
- `authentication_required`: 인증 필요
- `invalid_credentials`: 잘못된 인증 정보
- `permission_denied`: 권한 없음
- `resource_not_found`: 리소스를 찾을 수 없음
- `rate_limit_exceeded`: 요청 한도 초과
- `internal_server_error`: 서버 내부 오류
## 웹훅 (Webhook)
Zellyy는 다음 이벤트에 대한 웹훅을 제공합니다:
### 웹훅 등록
```
POST /webhooks
```
**요청 헤더**:
```
Authorization: Bearer admin_token
```
**요청 본문**:
```json
{
"url": "https://your-service.com/webhook",
"events": ["user.created", "subscription.created", "subscription.canceled"],
"secret": "your_webhook_secret"
}
```
**응답 (201 Created)**:
```json
{
"id": "webhook_id",
"url": "https://your-service.com/webhook",
"events": ["user.created", "subscription.created", "subscription.canceled"],
"created_at": "2023-01-01T00:00:00Z"
}
```
### 웹훅 이벤트 형식
```json
{
"id": "event_id",
"type": "event.type",
"created_at": "2023-01-01T00:00:00Z",
"data": {
// 이벤트 관련 데이터
}
}
```
## 결론
이 API 명세서는 Zellyy 프로젝트의 기본 기능을 구현하기 위한 엔드포인트를 정의합니다. 프로젝트가 발전함에 따라 추가 엔드포인트와 기능이 확장될 수 있습니다.

245
ZELLYY/zellyy note/02_기술_문서/ERD_다이어그램.md Normal file
View File

@@ -0,0 +1,245 @@
# ERD 다이어그램
이 문서는 Zellyy 프로젝트의 데이터베이스 구조를 Entity-Relationship Diagram(ERD)으로 설명합니다.
## 개요
Zellyy 프로젝트는 사용자가 카드를 작성하고 관리하며 소셜 미디어에 공유하는 기능을 제공합니다. 이를 위한 데이터베이스 구조는 다음과 같은 주요 엔티티로 구성됩니다:
1. 사용자 (Users)
2. 카드 (Cards)
3. 카드 태그 (Card Tags)
4. 소셜 계정 (Social Accounts)
5. 소셜 공유 (Social Shares)
6. 구독 (Subscriptions)
## ERD 다이어그램
아래는 Zellyy 프로젝트의 ERD 다이어그램입니다. 이 다이어그램은 [dbdiagram.io](https://dbdiagram.io)를 사용하여 생성되었습니다.
```
// Zellyy 데이터베이스 ERD
// 이 다이어그램은 dbdiagram.io에서 생성되었습니다.
Table zellyy.users {
id UUID [pk, ref: > auth.users.id]
email TEXT [not null, unique]
username TEXT [unique]
display_name TEXT
avatar_url TEXT
created_at TIMESTAMP [default: `NOW()`]
updated_at TIMESTAMP [default: `NOW()`]
last_login TIMESTAMP
is_premium BOOLEAN [default: false]
premium_until TIMESTAMP
}
Table zellyy.cards {
id UUID [pk, default: `uuid_generate_v4()`]
user_id UUID [not null, ref: > zellyy.users.id]
content TEXT [not null]
background_color TEXT [default: '#FFFFFF']
text_color TEXT [default: '#000000']
font_family TEXT [default: 'system']
font_size INTEGER [default: 16]
text_align TEXT [default: 'center']
is_public BOOLEAN [default: false]
is_synced BOOLEAN [default: false]
created_at TIMESTAMP [default: `NOW()`]
updated_at TIMESTAMP [default: `NOW()`]
deleted_at TIMESTAMP
}
Table zellyy.card_tags {
id UUID [pk, default: `uuid_generate_v4()`]
card_id UUID [not null, ref: > zellyy.cards.id]
tag_name TEXT [not null]
created_at TIMESTAMP [default: `NOW()`]
indexes {
(card_id, tag_name) [unique]
}
}
Table zellyy.social_accounts {
id UUID [pk, default: `uuid_generate_v4()`]
user_id UUID [not null, ref: > zellyy.users.id]
platform TEXT [not null]
platform_user_id TEXT
access_token TEXT
refresh_token TEXT
token_expires_at TIMESTAMP
created_at TIMESTAMP [default: `NOW()`]
updated_at TIMESTAMP [default: `NOW()`]
indexes {
(user_id, platform) [unique]
}
}
Table zellyy.social_shares {
id UUID [pk, default: `uuid_generate_v4()`]
card_id UUID [not null, ref: > zellyy.cards.id]
user_id UUID [not null, ref: > zellyy.users.id]
platform TEXT [not null]
share_url TEXT
shared_at TIMESTAMP [default: `NOW()`]
status TEXT [default: 'pending']
response_data JSONB
}
Table zellyy.subscriptions {
id UUID [pk, default: `uuid_generate_v4()`]
user_id UUID [not null, ref: > zellyy.users.id]
plan_type TEXT [not null]
status TEXT [not null]
start_date TIMESTAMP [not null]
end_date TIMESTAMP [not null]
payment_provider TEXT
payment_id TEXT
created_at TIMESTAMP [default: `NOW()`]
updated_at TIMESTAMP [default: `NOW()`]
}
// 참조 테이블 (Supabase Auth)
Table auth.users {
id UUID [pk]
email TEXT [unique]
// 기타 Supabase Auth 필드
}
```
## 엔티티 설명
### 1. 사용자 (zellyy.users)
사용자 정보를 저장하는 테이블입니다. Supabase Auth와 연동됩니다.
- **id**: 사용자 고유 식별자 (UUID), Supabase Auth의 사용자 ID와 연결
- **email**: 사용자 이메일 주소
- **username**: 사용자 이름 (고유)
- **display_name**: 표시 이름
- **avatar_url**: 프로필 이미지 URL
- **created_at**: 계정 생성 시간
- **updated_at**: 계정 정보 업데이트 시간
- **last_login**: 마지막 로그인 시간
- **is_premium**: 프리미엄 사용자 여부
- **premium_until**: 프리미엄 구독 만료 시간
### 2. 카드 (zellyy.cards)
사용자가 작성한 카드 정보를 저장하는 테이블입니다.
- **id**: 카드 고유 식별자 (UUID)
- **user_id**: 카드 작성자 ID (users 테이블 참조)
- **content**: 카드 내용
- **background_color**: 배경색 (HEX 코드)
- **text_color**: 텍스트 색상 (HEX 코드)
- **font_family**: 폰트 패밀리
- **font_size**: 폰트 크기
- **text_align**: 텍스트 정렬 방식 ('left', 'center', 'right')
- **is_public**: 공개 여부
- **is_synced**: 클라우드 동기화 여부
- **created_at**: 카드 생성 시간
- **updated_at**: 카드 업데이트 시간
- **deleted_at**: 카드 삭제 시간 (소프트 삭제)
### 3. 카드 태그 (zellyy.card_tags)
카드에 적용된 태그 정보를 저장하는 테이블입니다.
- **id**: 태그 고유 식별자 (UUID)
- **card_id**: 카드 ID (cards 테이블 참조)
- **tag_name**: 태그 이름
- **created_at**: 태그 생성 시간
### 4. 소셜 계정 (zellyy.social_accounts)
사용자의 소셜 미디어 계정 연동 정보를 저장하는 테이블입니다.
- **id**: 소셜 계정 고유 식별자 (UUID)
- **user_id**: 사용자 ID (users 테이블 참조)
- **platform**: 플랫폼 이름 ('facebook', 'twitter', 'instagram' 등)
- **platform_user_id**: 플랫폼에서의 사용자 ID
- **access_token**: 액세스 토큰
- **refresh_token**: 리프레시 토큰
- **token_expires_at**: 토큰 만료 시간
- **created_at**: 연동 생성 시간
- **updated_at**: 연동 업데이트 시간
### 5. 소셜 공유 (zellyy.social_shares)
카드의 소셜 미디어 공유 기록을 저장하는 테이블입니다.
- **id**: 공유 기록 고유 식별자 (UUID)
- **card_id**: 카드 ID (cards 테이블 참조)
- **user_id**: 사용자 ID (users 테이블 참조)
- **platform**: 공유된 플랫폼 이름
- **share_url**: 공유된 URL
- **shared_at**: 공유 시간
- **status**: 공유 상태 ('pending', 'success', 'failed')
- **response_data**: 플랫폼 응답 데이터 (JSON)
### 6. 구독 (zellyy.subscriptions)
사용자의 구독 정보를 저장하는 테이블입니다.
- **id**: 구독 고유 식별자 (UUID)
- **user_id**: 사용자 ID (users 테이블 참조)
- **plan_type**: 구독 플랜 유형 ('monthly', 'yearly' 등)
- **status**: 구독 상태 ('active', 'canceled', 'expired')
- **start_date**: 구독 시작 날짜
- **end_date**: 구독 종료 날짜
- **payment_provider**: 결제 제공자 ('apple', 'google', 'stripe' 등)
- **payment_id**: 결제 ID
- **created_at**: 구독 생성 시간
- **updated_at**: 구독 업데이트 시간
## 관계 설명
1. **사용자와 카드**: 일대다 관계. 한 사용자는 여러 카드를 가질 수 있습니다.
2. **카드와 태그**: 일대다 관계. 한 카드는 여러 태그를 가질 수 있습니다.
3. **사용자와 소셜 계정**: 일대다 관계. 한 사용자는 여러 소셜 계정을 연동할 수 있습니다.
4. **카드와 소셜 공유**: 일대다 관계. 한 카드는 여러 소셜 미디어에 공유될 수 있습니다.
5. **사용자와 구독**: 일대다 관계. 한 사용자는 여러 구독 기록을 가질 수 있습니다.
## 인덱스
성능 최적화를 위해 다음과 같은 인덱스를 생성합니다:
1. **zellyy.cards**:
- `user_id`: 사용자별 카드 조회 최적화
- `created_at`: 시간순 정렬 최적화
- `is_public`: 공개 카드 필터링 최적화
2. **zellyy.card_tags**:
- `(card_id, tag_name)`: 고유 제약 조건 및 카드별 태그 조회 최적화
- `tag_name`: 태그별 카드 검색 최적화
3. **zellyy.social_accounts**:
- `(user_id, platform)`: 고유 제약 조건 및 사용자별 플랫폼 계정 조회 최적화
4. **zellyy.social_shares**:
- `user_id`: 사용자별 공유 기록 조회 최적화
- `card_id`: 카드별 공유 기록 조회 최적화
## 데이터 무결성
데이터 무결성을 보장하기 위해 다음과 같은 제약 조건을 적용합니다:
1. **외래 키 제약 조건**: 모든 관계는 외래 키로 연결되어 참조 무결성을 보장합니다.
2. **고유 제약 조건**: 이메일, 사용자 이름 등은 고유해야 합니다.
3. **NOT NULL 제약 조건**: 필수 필드는 NULL이 될 수 없습니다.
4. **기본값**: 많은 필드에 기본값을 제공하여 데이터 일관성을 유지합니다.
## 확장성 고려사항
1. **샤딩**: 사용자 수가 크게 증가할 경우, 사용자 ID를 기준으로 데이터를 샤딩하는 전략을 고려할 수 있습니다.
2. **아카이빙**: 오래된 카드 데이터는 별도의 아카이브 테이블로 이동하여 주 테이블의 성능을 유지할 수 있습니다.
3. **인덱스 최적화**: 실제 쿼리 패턴에 따라 추가 인덱스를 생성하거나 기존 인덱스를 조정할 수 있습니다.
## 결론
이 ERD는 Zellyy 프로젝트의 데이터 모델을 시각적으로 표현합니다. 이 구조는 사용자가 카드를 작성하고, 태그를 지정하며, 소셜 미디어에 공유하는 핵심 기능을 지원합니다. 또한 구독 관리와 소셜 계정 연동을 위한 테이블도 포함되어 있습니다.
프로젝트가 발전함에 따라 이 ERD는 새로운 요구사항을 반영하여 업데이트될 수 있습니다.

335
ZELLYY/zellyy note/02_기술_문서/React_Native_설정_가이드.md Normal file
View File

@@ -0,0 +1,335 @@
# React Native 설정 가이드
이 문서는 Zellyy 모바일 앱 개발을 위한 React Native 개발 환경 설정 방법을 안내합니다.
## 개발 환경 요구사항
- Node.js 16.0.0 이상
- npm 8.0.0 이상 또는 Yarn 1.22.0 이상
- Git
- Watchman (macOS 사용자)
- Xcode 14.0 이상 (iOS 개발용, macOS 필요)
- Android Studio (Android 개발용)
- JDK 11 이상
## 개발 환경 설정
### 1. Node.js 및 npm 설치
#### macOS (Homebrew 사용)
```bash
brew install node
```
#### Windows (Chocolatey 사용)
```bash
choco install nodejs
```
#### Linux (Ubuntu/Debian)
```bash
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
```
### 2. React Native CLI 설치
```bash
npm install -g react-native-cli
```
### 3. Expo CLI 설치 (권장)
Expo는 React Native 개발을 더 쉽게 만들어주는 도구 세트입니다. Zellyy 프로젝트는 Expo를 사용하여 개발합니다.
```bash
npm install -g expo-cli
```
### 4. iOS 개발 환경 설정 (macOS 필요)
#### Xcode 설치
App Store에서 Xcode를 설치하거나 [Apple 개발자 웹사이트](https://developer.apple.com/xcode/)에서 다운로드합니다.
#### iOS 시뮬레이터 설정
Xcode를 설치한 후, 다음 명령어로 iOS 시뮬레이터를 설치합니다:
1. Xcode 실행
2. Xcode > Preferences > Components 메뉴 선택
3. 원하는 iOS 시뮬레이터 버전 설치
#### CocoaPods 설치
```bash
sudo gem install cocoapods
```
### 5. Android 개발 환경 설정
#### Android Studio 설치
[Android Studio 다운로드 페이지](https://developer.android.com/studio)에서 Android Studio를 다운로드하고 설치합니다.
#### Android SDK 설치
Android Studio를 설치한 후, 다음 단계를 따릅니다:
1. Android Studio 실행
2. SDK Manager 열기 (Tools > SDK Manager)
3. "SDK Platforms" 탭에서 Android 12 (API Level 31) 이상 설치
4. "SDK Tools" 탭에서 다음 항목 설치:
- Android SDK Build-Tools
- Android Emulator
- Android SDK Platform-Tools
- Google Play services
#### 환경 변수 설정
##### macOS/Linux
`~/.bash_profile` 또는 `~/.zshrc` 파일에 다음 내용을 추가합니다:
```bash
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```
##### Windows
시스템 환경 변수에 다음 내용을 추가합니다:
- 변수 이름: `ANDROID_HOME`
- 변수 값: `C:\Users\USERNAME\AppData\Local\Android\Sdk`
PATH 환경 변수에 다음 경로를 추가합니다:
- `%ANDROID_HOME%\platform-tools`
- `%ANDROID_HOME%\emulator`
- `%ANDROID_HOME%\tools`
- `%ANDROID_HOME%\tools\bin`
## Zellyy 프로젝트 설정
### 1. 프로젝트 클론
```bash
git clone https://github.com/your-organization/zellyy-app.git
cd zellyy-app
```
### 2. 의존성 설치
```bash
npm install
# 또는
yarn install
```
### 3. 환경 변수 설정
`.env.example` 파일을 복사하여 `.env` 파일을 생성하고 필요한 환경 변수를 설정합니다:
```bash
cp .env.example .env
```
`.env` 파일을 열고 다음 변수를 설정합니다:
```
API_URL=https://a11.ism.kr/api
SUPABASE_URL=https://a11.ism.kr
SUPABASE_ANON_KEY=your_supabase_anon_key
```
### 4. iOS 설정 완료 (macOS 필요)
```bash
cd ios
pod install
cd ..
```
### 5. 앱 실행
#### Expo 개발 서버 시작
```bash
expo start
```
이 명령어는 개발 서버를 시작하고 QR 코드를 표시합니다. Expo Go 앱(iOS/Android)으로 QR 코드를 스캔하여 앱을 실행할 수 있습니다.
#### iOS 시뮬레이터에서 실행
```bash
expo run:ios
# 또는
npm run ios
```
#### Android 에뮬레이터에서 실행
```bash
expo run:android
# 또는
npm run android
```
## 프로젝트 구조
Zellyy 앱 프로젝트는 다음과 같은 구조로 구성됩니다:
```
zellyy-app/
├── App.js # 앱의 진입점
├── app.json # Expo 설정
├── assets/ # 이미지, 폰트 등의 정적 자산
├── babel.config.js # Babel 설정
├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── Card/ # 카드 관련 컴포넌트
│ ├── Common/ # 공통 UI 컴포넌트
│ └── ...
├── constants/ # 상수 정의
├── hooks/ # 커스텀 React 훅
├── navigation/ # 네비게이션 설정
├── screens/ # 앱 화면
│ ├── Auth/ # 인증 관련 화면
│ ├── Cards/ # 카드 관련 화면
│ ├── Profile/ # 프로필 관련 화면
│ └── ...
├── services/ # API 및 외부 서비스 통합
│ ├── api.js # API 클라이언트
│ ├── supabase.js # Supabase 클라이언트
│ └── ...
├── store/ # 상태 관리 (Redux 또는 Context API)
├── styles/ # 글로벌 스타일 정의
└── utils/ # 유틸리티 함수
```
## 주요 라이브러리
Zellyy 앱은 다음과 같은 주요 라이브러리를 사용합니다:
- **React Navigation**: 화면 간 네비게이션
- **Expo**: 개발 도구 및 네이티브 기능 접근
- **Supabase JS Client**: Supabase 백엔드 연동
- **React Native Paper**: Material Design 컴포넌트
- **Formik & Yup**: 폼 관리 및 유효성 검사
- **React Native Share**: 소셜 미디어 공유 기능
- **Async Storage**: 로컬 데이터 저장
- **React Native SVG**: SVG 이미지 지원
- **React Native Reanimated**: 고급 애니메이션
## 코딩 스타일 가이드
Zellyy 프로젝트는 다음과 같은 코딩 스타일을 따릅니다:
- **ESLint & Prettier**: 코드 품질 및 포맷팅
- **함수형 컴포넌트**: 클래스 컴포넌트 대신 함수형 컴포넌트와 훅 사용
- **명명 규칙**:
- 컴포넌트: PascalCase (예: `CardItem.js`)
- 함수 및 변수: camelCase (예: `getUserData`)
- 상수: UPPER_SNAKE_CASE (예: `API_URL`)
- **파일 구조**: 관련 기능끼리 폴더로 그룹화
- **주석**: 복잡한 로직에 주석 추가
## 디버깅
### React Native Debugger 설정
[React Native Debugger](https://github.com/jhen0409/react-native-debugger)를 사용하여 앱을 디버깅할 수 있습니다:
1. React Native Debugger 설치:
```bash
# macOS (Homebrew)
brew install --cask react-native-debugger
# Windows/Linux
# GitHub 릴리스 페이지에서 다운로드
```
2. 디버거 실행:
```bash
open "rndebugger://set-debugger-loc?host=localhost&port=19000"
```
3. 앱에서 디버깅 활성화:
- iOS 시뮬레이터: `Cmd + D` 누르고 "Debug JS Remotely" 선택
- Android 에뮬레이터: `Cmd + M` 또는 `Ctrl + M` 누르고 "Debug JS Remotely" 선택
### Flipper (선택 사항)
네이티브 코드 디버깅을 위해 [Flipper](https://fbflipper.com/)를 사용할 수 있습니다.
## 빌드 및 배포
### iOS 앱 빌드
1. 앱 버전 업데이트:
`app.json` 파일에서 `version` 및 `buildNumber` 업데이트
2. 배포용 빌드 생성:
```bash
expo build:ios
```
3. 생성된 IPA 파일을 App Store Connect에 업로드
### Android 앱 빌드
1. 앱 버전 업데이트:
`app.json` 파일에서 `version` 및 `versionCode` 업데이트
2. 배포용 빌드 생성:
```bash
expo build:android
```
3. 생성된 APK 또는 AAB 파일을 Google Play Console에 업로드
## 문제 해결
### 일반적인 문제 및 해결 방법
1. **Metro 번들러 캐시 문제**:
```bash
expo start --clear
```
2. **의존성 문제**:
```bash
rm -rf node_modules
npm install
```
3. **iOS 빌드 실패**:
```bash
cd ios
pod install --repo-update
cd ..
```
4. **Android 빌드 실패**:
```bash
cd android
./gradlew clean
cd ..
```
## 참고 자료
- [React Native 공식 문서](https://reactnative.dev/docs/getting-started)
- [Expo 문서](https://docs.expo.dev/)
- [React Navigation 문서](https://reactnavigation.org/docs/getting-started)
- [Supabase 문서](https://supabase.io/docs)
## 결론
이 가이드는 Zellyy 앱 개발을 위한 React Native 환경 설정 및 프로젝트 구조에 대한 기본 정보를 제공합니다. 개발 과정에서 추가적인 질문이나 문제가 있으면 개발팀에 문의하세요.

802
ZELLYY/zellyy note/02_기술_문서/SNS_통합_가이드.md Normal file
View File

@@ -0,0 +1,802 @@
# SNS 통합 가이드
이 문서는 Zellyy 앱에서 다양한 소셜 미디어 플랫폼과의 통합 방법을 안내합니다.
## 개요
Zellyy 앱의 핵심 기능 중 하나는 사용자가 작성한 카드를 다양한 소셜 미디어 플랫폼에 공유하는 기능입니다. 이 문서는 다음 플랫폼과의 통합 방법을 설명합니다:
- Facebook
- Instagram
- Twitter (X)
- LinkedIn
- Pinterest
## 사전 요구사항
- 각 소셜 미디어 플랫폼의 개발자 계정
- 각 플랫폼에 등록된 앱
- React Native 개발 환경
- Supabase 설정 완료
## 1. 소셜 미디어 앱 등록
### 1.1 Facebook 앱 등록
1. [Facebook 개발자 포털](https://developers.facebook.com/)에 접속
2. "내 앱" > "앱 만들기" 클릭
3. "소비자" 유형 선택
4. 앱 이름 입력 (예: "Zellyy")
5. 앱 생성 후 다음 제품 추가:
- Facebook 로그인
- Instagram API
- 공유 API
설정 완료 후 다음 정보를 기록:
- 앱 ID
- 앱 시크릿
### 1.2 Twitter 앱 등록
1. [Twitter 개발자 포털](https://developer.twitter.com/)에 접속
2. "Projects & Apps" > "Overview" > "Create App" 클릭
3. 앱 이름, 설명 입력
4. 앱 권한 설정: "Read and Write"
5. 리디렉션 URL 설정: `zellyy://auth/twitter`
설정 완료 후 다음 정보를 기록:
- API 키
- API 시크릿 키
- 액세스 토큰
- 액세스 토큰 시크릿
### 1.3 LinkedIn 앱 등록
1. [LinkedIn 개발자 포털](https://www.linkedin.com/developers/)에 접속
2. "Create App" 클릭
3. 앱 이름, 설명, 로고 등 입력
4. 제품 추가: "Share on LinkedIn"
5. OAuth 2.0 설정:
- 리디렉션 URL: `zellyy://auth/linkedin`
- 권한: `r_liteprofile`, `w_member_social`
설정 완료 후 다음 정보를 기록:
- 클라이언트 ID
- 클라이언트 시크릿
### 1.4 Pinterest 앱 등록
1. [Pinterest 개발자 포털](https://developers.pinterest.com/)에 접속
2. "Apps" > "Create app" 클릭
3. 앱 이름, 설명 입력
4. 리디렉션 URL 설정: `zellyy://auth/pinterest`
5. 권한 설정: `read_public`, `write_public`
설정 완료 후 다음 정보를 기록:
- 앱 ID
- 앱 시크릿
## 2. 환경 변수 설정
앱의 `.env` 파일에 소셜 미디어 API 키를 추가합니다:
```
# Facebook
FACEBOOK_APP_ID=your_facebook_app_id
FACEBOOK_APP_SECRET=your_facebook_app_secret
# Twitter
TWITTER_CONSUMER_KEY=your_twitter_api_key
TWITTER_CONSUMER_SECRET=your_twitter_api_secret
# LinkedIn
LINKEDIN_CLIENT_ID=your_linkedin_client_id
LINKEDIN_CLIENT_SECRET=your_linkedin_client_secret
# Pinterest
PINTEREST_APP_ID=your_pinterest_app_id
PINTEREST_APP_SECRET=your_pinterest_app_secret
```
## 3. 필요한 패키지 설치
```bash
# 소셜 로그인 및 공유 라이브러리
npm install react-native-fbsdk-next
npm install @react-native-twitter-signin/twitter-signin
npm install react-native-linkedin
npm install react-native-pinterest
# 일반 공유 기능
npm install react-native-share
# 딥링크 처리
npm install react-native-app-auth
```
## 4. iOS 설정
### 4.1 Info.plist 설정
`ios/YourApp/Info.plist` 파일에 다음 내용을 추가합니다:
```xml
<key>CFBundleURLTypes</key>
<array>
<!-- Facebook -->
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb{FACEBOOK_APP_ID}</string>
</array>
</dict>
<!-- Twitter -->
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>twitterkit-{TWITTER_CONSUMER_KEY}</string>
</array>
</dict>
<!-- LinkedIn -->
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>zellyy</string>
</array>
</dict>
<!-- Pinterest -->
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>pdk{PINTEREST_APP_ID}</string>
</array>
</dict>
</array>
<!-- Facebook 설정 -->
<key>FacebookAppID</key>
<string>{FACEBOOK_APP_ID}</string>
<key>FacebookDisplayName</key>
<string>Zellyy</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
<string>twitter</string>
<string>twitterauth</string>
<string>linkedin</string>
<string>linkedin-sdk2</string>
<string>pinterestsdk</string>
</array>
```
### 4.2 AppDelegate.m 수정
`ios/YourApp/AppDelegate.m` 파일에 다음 내용을 추가합니다:
```objective-c
#import <FBSDKCoreKit/FBSDKCoreKit-swift.h>
#import <TwitterKit/TwitterKit.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ...
// Facebook SDK 초기화
[[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];
// Twitter SDK 초기화
[[Twitter sharedInstance] startWithConsumerKey:@"TWITTER_CONSUMER_KEY" consumerSecret:@"TWITTER_CONSUMER_SECRET"];
return YES;
}
// URL 스킴 처리
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
// Facebook URL 처리
BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options];
// Twitter URL 처리
if (!handled) {
handled = [[Twitter sharedInstance] application:app openURL:url options:options];
}
return handled;
}
@end
```
## 5. Android 설정
### 5.1 AndroidManifest.xml 수정
`android/app/src/main/AndroidManifest.xml` 파일에 다음 내용을 추가합니다:
```xml
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
<!-- Facebook 설정 -->
<meta-data
android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id" />
<meta-data
android:name="com.facebook.sdk.ClientToken"
android:value="@string/facebook_client_token" />
<activity
android:name="com.facebook.FacebookActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>
<!-- Twitter 설정 -->
<activity
android:name="com.twitter.sdk.android.core.identity.OAuthActivity"
android:exported="true">
</activity>
<!-- 딥링크 처리 -->
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="zellyy" />
</intent-filter>
</activity>
</application>
</manifest>
```
### 5.2 strings.xml 설정
`android/app/src/main/res/values/strings.xml` 파일에 다음 내용을 추가합니다:
```xml
<resources>
<string name="app_name">Zellyy</string>
<string name="facebook_app_id">FACEBOOK_APP_ID</string>
<string name="fb_login_protocol_scheme">fbFACEBOOK_APP_ID</string>
<string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
</resources>
```
### 5.3 build.gradle 설정
`android/app/build.gradle` 파일에 다음 내용을 추가합니다:
```gradle
dependencies {
// ...
implementation 'com.facebook.android:facebook-android-sdk:latest.release'
implementation 'com.twitter.sdk.android:twitter-core:3.3.0'
implementation 'com.twitter.sdk.android:tweet-composer:3.3.0'
// ...
}
```
## 6. 소셜 로그인 구현
### 6.1 Facebook 로그인
```javascript
import { LoginManager, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk-next';
import supabase from '../services/supabase';
const loginWithFacebook = async () => {
try {
// 로그인 권한 요청
const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
if (result.isCancelled) {
throw new Error('User cancelled login');
}
// 액세스 토큰 가져오기
const data = await AccessToken.getCurrentAccessToken();
if (!data) {
throw new Error('Failed to get access token');
}
// 사용자 정보 가져오기
const profileRequest = new GraphRequest(
'/me',
{
accessToken: data.accessToken,
parameters: {
fields: {
string: 'id,name,email,picture.type(large)',
},
},
},
async (error, result) => {
if (error) {
console.error('Error fetching profile:', error);
return;
}
// Supabase에 소셜 계정 연결
const { data: socialAccount, error: socialError } = await supabase
.from('zellyy.social_accounts')
.upsert({
user_id: supabase.auth.user().id,
platform: 'facebook',
platform_user_id: result.id,
access_token: data.accessToken,
token_expires_at: new Date(data.expirationTime),
})
.select()
.single();
if (socialError) {
console.error('Error connecting Facebook account:', socialError);
}
}
);
new GraphRequestManager().addRequest(profileRequest).start();
} catch (error) {
console.error('Facebook login error:', error);
throw error;
}
};
```
### 6.2 Twitter 로그인
```javascript
import { TwitterSignIn } from '@react-native-twitter-signin/twitter-signin';
import supabase from '../services/supabase';
const loginWithTwitter = async () => {
try {
// Twitter SDK 초기화
TwitterSignIn.init(
'TWITTER_CONSUMER_KEY',
'TWITTER_CONSUMER_SECRET'
);
// 로그인 요청
const { authToken, authTokenSecret, userName, userID } = await TwitterSignIn.logIn();
// Supabase에 소셜 계정 연결
const { data: socialAccount, error: socialError } = await supabase
.from('zellyy.social_accounts')
.upsert({
user_id: supabase.auth.user().id,
platform: 'twitter',
platform_user_id: userID,
access_token: authToken,
refresh_token: authTokenSecret,
})
.select()
.single();
if (socialError) {
console.error('Error connecting Twitter account:', socialError);
}
} catch (error) {
console.error('Twitter login error:', error);
throw error;
}
};
```
## 7. 소셜 공유 구현
### 7.1 일반 공유 기능
```javascript
import Share from 'react-native-share';
const shareToDefault = async (card) => {
try {
// 카드 이미지 생성 (별도 함수로 구현)
const imageUrl = await generateCardImage(card);
const options = {
title: 'Share via',
message: card.content,
url: imageUrl,
};
const result = await Share.open(options);
console.log('Share result:', result);
return result;
} catch (error) {
console.error('Error sharing:', error);
throw error;
}
};
```
### 7.2 Facebook 공유
```javascript
import { ShareDialog } from 'react-native-fbsdk-next';
import supabase from '../services/supabase';
const shareToFacebook = async (card) => {
try {
// 카드 이미지 생성 (별도 함수로 구현)
const imageUrl = await generateCardImage(card);
const shareContent = {
contentType: 'link',
contentUrl: imageUrl,
contentDescription: card.content,
};
// 공유 다이얼로그 표시
const result = await ShareDialog.show(shareContent);
if (result.isCancelled) {
throw new Error('User cancelled sharing');
}
// 공유 기록 저장
const { data: share, error: shareError } = await supabase
.from('zellyy.social_shares')
.insert({
card_id: card.id,
user_id: supabase.auth.user().id,
platform: 'facebook',
status: 'success',
response_data: result,
})
.select()
.single();
if (shareError) {
console.error('Error recording share:', shareError);
}
return result;
} catch (error) {
console.error('Error sharing to Facebook:', error);
throw error;
}
};
```
### 7.3 Twitter 공유
```javascript
import { TwitterSignIn } from '@react-native-twitter-signin/twitter-signin';
import supabase from '../services/supabase';
const shareToTwitter = async (card) => {
try {
// 소셜 계정 정보 가져오기
const { data: socialAccount, error: socialError } = await supabase
.from('zellyy.social_accounts')
.select('*')
.eq('user_id', supabase.auth.user().id)
.eq('platform', 'twitter')
.single();
if (socialError || !socialAccount) {
throw new Error('Twitter account not connected');
}
// 카드 이미지 생성 (별도 함수로 구현)
const imageUrl = await generateCardImage(card);
// Edge Function 호출하여 트윗 게시
const response = await fetch('https://a11.ism.kr/functions/v1/social-share', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${supabase.auth.session().access_token}`,
},
body: JSON.stringify({
cardId: card.id,
platform: 'twitter',
message: card.content,
}),
});
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to share to Twitter');
}
return result;
} catch (error) {
console.error('Error sharing to Twitter:', error);
throw error;
}
};
```
## 8. 소셜 계정 관리
### 8.1 연결된 계정 목록 조회
```javascript
import { useEffect, useState } from 'react';
import supabase from '../services/supabase';
const SocialAccountsScreen = () => {
const [accounts, setAccounts] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchAccounts();
}, []);
const fetchAccounts = async () => {
try {
setLoading(true);
const { data, error } = await supabase
.from('zellyy.social_accounts')
.select('*')
.eq('user_id', supabase.auth.user().id);
if (error) {
throw error;
}
setAccounts(data || []);
} catch (error) {
console.error('Error fetching social accounts:', error);
alert('Failed to load social accounts');
} finally {
setLoading(false);
}
};
// 컴포넌트 렌더링 코드
};
```
### 8.2 계정 연결 해제
```javascript
const disconnectAccount = async (platform) => {
try {
// 소셜 계정 삭제
const { error } = await supabase
.from('zellyy.social_accounts')
.delete()
.match({
user_id: supabase.auth.user().id,
platform,
});
if (error) {
throw error;
}
// 플랫폼별 로그아웃 처리
if (platform === 'facebook') {
LoginManager.logOut();
} else if (platform === 'twitter') {
TwitterSignIn.logOut();
}
// 계정 목록 새로고침
fetchAccounts();
alert(`${platform} account disconnected`);
} catch (error) {
console.error(`Error disconnecting ${platform} account:`, error);
alert(`Failed to disconnect ${platform} account`);
}
};
```
## 9. 공유 기록 관리
### 9.1 공유 기록 조회
```javascript
import { useEffect, useState } from 'react';
import supabase from '../services/supabase';
const ShareHistoryScreen = () => {
const [shares, setShares] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchShareHistory();
}, []);
const fetchShareHistory = async () => {
try {
setLoading(true);
const { data, error } = await supabase
.from('zellyy.social_shares')
.select(`
id,
platform,
share_url,
shared_at,
status,
cards:card_id (
id,
content,
background_color,
text_color
)
`)
.eq('user_id', supabase.auth.user().id)
.order('shared_at', { ascending: false });
if (error) {
throw error;
}
setShares(data || []);
} catch (error) {
console.error('Error fetching share history:', error);
alert('Failed to load share history');
} finally {
setLoading(false);
}
};
// 컴포넌트 렌더링 코드
};
```
## 10. 카드 이미지 생성
카드를 이미지로 변환하여 소셜 미디어에 공유하기 위한 함수입니다.
```javascript
import ViewShot from 'react-native-view-shot';
import { useRef } from 'react';
import supabase from '../services/supabase';
// 카드 컴포넌트
const Card = ({ card, viewShotRef }) => {
return (
<ViewShot ref={viewShotRef} options={{ format: 'jpg', quality: 0.9 }}>
<View
style={{
width: 300,
height: 300,
backgroundColor: card.background_color,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
}}
>
<Text
style={{
color: card.text_color,
fontFamily: card.font_family,
fontSize: card.font_size,
textAlign: card.text_align,
}}
>
{card.content}
</Text>
</View>
</ViewShot>
);
};
// 이미지 생성 및 업로드 함수
const generateCardImage = async (card) => {
try {
// ViewShot 참조
const viewShotRef = useRef();
// 카드 이미지 캡처
const uri = await viewShotRef.current.capture();
// 파일 이름 생성
const fileName = `${supabase.auth.user().id}/${card.id}_${Date.now()}.jpg`;
// 이미지 파일 생성
const formData = new FormData();
formData.append('file', {
uri,
name: fileName,
type: 'image/jpeg',
});
// Supabase Storage에 업로드
const { data, error } = await supabase
.storage
.from('card-images')
.upload(fileName, formData);
if (error) {
throw error;
}
// 공개 URL 생성
const { publicURL, error: urlError } = supabase
.storage
.from('card-images')
.getPublicUrl(fileName);
if (urlError) {
throw urlError;
}
return publicURL;
} catch (error) {
console.error('Error generating card image:', error);
throw error;
}
};
```
## 11. 문제 해결
### 11.1 일반적인 문제 및 해결 방법
1. **소셜 로그인 실패**:
- 앱 ID와 시크릿이 올바른지 확인
- 리디렉션 URL이 올바르게 설정되었는지 확인
- 앱 권한이 올바르게 설정되었는지 확인
2. **공유 기능 실패**:
- 소셜 미디어 앱이 기기에 설치되어 있는지 확인
- 액세스 토큰이 유효한지 확인
- 필요한 권한이 부여되었는지 확인
3. **이미지 업로드 실패**:
- 스토리지 버킷 권한 설정 확인
- 파일 크기 및 형식 확인
### 11.2 플랫폼별 문제 해결
#### Facebook
- 앱 검토 상태 확인
- 개발 모드에서는 테스트 사용자만 앱에 접근 가능
#### Twitter
- API 키와 시크릿이 올바른지 확인
- 개발자 계정 상태 확인
#### Instagram
- Facebook 개발자 계정과 연결되어 있는지 확인
- Instagram Graph API 권한 확인
## 12. 보안 고려사항
1. **토큰 보안**:
- 액세스 토큰과 리프레시 토큰은 안전하게 저장
- 서버 측에서만 API 시크릿 사용
2. **사용자 데이터 보호**:
- 필요한 최소한의 권한만 요청
- 사용자 동의 없이 데이터를 공유하지 않음
3. **API 키 관리**:
- 환경 변수로 관리하고 소스 코드에 하드코딩하지 않음
- 프로덕션과 개발 환경에 별도의 API 키 사용
## 결론
이 가이드는 Zellyy 앱에서 다양한 소셜 미디어 플랫폼과의 통합 방법을 제공합니다. 각 플랫폼의 API는 지속적으로 변경될 수 있으므로, 최신 문서를 참조하여 구현을 업데이트하는 것이 중요합니다. 소셜 미디어 통합은 사용자 경험을 향상시키고 앱의 확산을 촉진하는 중요한 기능입니다.

750
ZELLYY/zellyy note/02_기술_문서/Supabase_연동_가이드.md Normal file
View File

@@ -0,0 +1,750 @@
# Supabase 연동 가이드
이 문서는 Zellyy 프로젝트에서 Supabase를 연동하고 설정하는 방법을 안내합니다.
## 개요
Zellyy 프로젝트는 백엔드로 자체 호스팅된 Supabase를 사용합니다. 이 가이드는 기존에 설치된 Supabase 인스턴스에 Zellyy 프로젝트를 위한 스키마와 테이블을 설정하는 방법을 설명합니다.
## 사전 요구사항
- 설치된 Supabase 인스턴스 (참조: [[Nginx Supabase 설치 가이드]])
- PostgreSQL 기본 지식
- Supabase API 키 및 URL
## 1. Supabase 프로젝트 설정
### 1.1 스키마 생성
Zellyy 프로젝트를 위한 별도의 스키마를 생성합니다. 이는 기존 프로젝트와의 데이터 분리를 위한 것입니다.
```sql
-- Supabase SQL 편집기에서 실행
CREATE SCHEMA IF NOT EXISTS zellyy;
```
### 1.2 확장 활성화
필요한 PostgreSQL 확장을 활성화합니다.
```sql
-- UUID 생성을 위한 확장
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-- 전문 검색을 위한 확장
CREATE EXTENSION IF NOT EXISTS pg_trgm;
```
## 2. 데이터베이스 테이블 생성
### 2.1 사용자 테이블
```sql
CREATE TABLE zellyy.users (
id UUID REFERENCES auth.users(id) PRIMARY KEY,
email TEXT UNIQUE NOT NULL,
username TEXT UNIQUE,
display_name TEXT,
avatar_url TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
last_login TIMESTAMP WITH TIME ZONE,
is_premium BOOLEAN DEFAULT FALSE,
premium_until TIMESTAMP WITH TIME ZONE
);
-- 트리거 설정
CREATE OR REPLACE FUNCTION zellyy.update_timestamp()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = NOW();
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
CREATE TRIGGER update_users_timestamp
BEFORE UPDATE ON zellyy.users
FOR EACH ROW EXECUTE FUNCTION zellyy.update_timestamp();
```
### 2.2 카드 테이블
```sql
CREATE TABLE zellyy.cards (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
content TEXT NOT NULL,
background_color TEXT DEFAULT '#FFFFFF',
text_color TEXT DEFAULT '#000000',
font_family TEXT DEFAULT 'system',
font_size INTEGER DEFAULT 16,
text_align TEXT DEFAULT 'center',
is_public BOOLEAN DEFAULT FALSE,
is_synced BOOLEAN DEFAULT FALSE,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
deleted_at TIMESTAMP WITH TIME ZONE
);
CREATE TRIGGER update_cards_timestamp
BEFORE UPDATE ON zellyy.cards
FOR EACH ROW EXECUTE FUNCTION zellyy.update_timestamp();
```
### 2.3 카드 태그 테이블
```sql
CREATE TABLE zellyy.card_tags (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
card_id UUID REFERENCES zellyy.cards(id) NOT NULL,
tag_name TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
UNIQUE(card_id, tag_name)
);
```
### 2.4 소셜 공유 테이블
```sql
CREATE TABLE zellyy.social_shares (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
card_id UUID REFERENCES zellyy.cards(id) NOT NULL,
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
platform TEXT NOT NULL,
share_url TEXT,
shared_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
status TEXT DEFAULT 'pending',
response_data JSONB
);
```
### 2.5 소셜 계정 테이블
```sql
CREATE TABLE zellyy.social_accounts (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
platform TEXT NOT NULL,
platform_user_id TEXT,
access_token TEXT,
refresh_token TEXT,
token_expires_at TIMESTAMP WITH TIME ZONE,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
UNIQUE(user_id, platform)
);
CREATE TRIGGER update_social_accounts_timestamp
BEFORE UPDATE ON zellyy.social_accounts
FOR EACH ROW EXECUTE FUNCTION zellyy.update_timestamp();
```
### 2.6 구독 테이블
```sql
CREATE TABLE zellyy.subscriptions (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
plan_type TEXT NOT NULL,
status TEXT NOT NULL,
start_date TIMESTAMP WITH TIME ZONE NOT NULL,
end_date TIMESTAMP WITH TIME ZONE NOT NULL,
payment_provider TEXT,
payment_id TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
CREATE TRIGGER update_subscriptions_timestamp
BEFORE UPDATE ON zellyy.subscriptions
FOR EACH ROW EXECUTE FUNCTION zellyy.update_timestamp();
-- 구독 상태에 따라 사용자의 프리미엄 상태 업데이트
CREATE OR REPLACE FUNCTION zellyy.update_premium_status()
RETURNS TRIGGER AS $$
BEGIN
IF NEW.status = 'active' THEN
UPDATE zellyy.users
SET is_premium = TRUE, premium_until = NEW.end_date
WHERE id = NEW.user_id;
ELSIF NEW.status IN ('canceled', 'expired') AND NEW.end_date <= NOW() THEN
UPDATE zellyy.users
SET is_premium = FALSE, premium_until = NULL
WHERE id = NEW.user_id;
END IF;
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
CREATE TRIGGER update_premium_status_trigger
AFTER INSERT OR UPDATE ON zellyy.subscriptions
FOR EACH ROW EXECUTE FUNCTION zellyy.update_premium_status();
```
## 3. 인덱스 생성
성능 최적화를 위한 인덱스를 생성합니다.
```sql
-- 카드 검색 최적화
CREATE INDEX idx_cards_user_id ON zellyy.cards(user_id);
CREATE INDEX idx_cards_created_at ON zellyy.cards(created_at);
CREATE INDEX idx_cards_is_public ON zellyy.cards(is_public);
-- 태그 검색 최적화
CREATE INDEX idx_card_tags_card_id ON zellyy.card_tags(card_id);
CREATE INDEX idx_card_tags_tag_name ON zellyy.card_tags(tag_name);
-- 소셜 공유 검색 최적화
CREATE INDEX idx_social_shares_user_id ON zellyy.social_shares(user_id);
CREATE INDEX idx_social_shares_card_id ON zellyy.social_shares(card_id);
```
## 4. Row Level Security (RLS) 설정
Supabase의 Row Level Security를 사용하여 데이터 접근을 제한합니다.
### 4.1 사용자 테이블 정책
```sql
-- RLS 활성화
ALTER TABLE zellyy.users ENABLE ROW LEVEL SECURITY;
-- 사용자는 자신의 정보만 읽을 수 있음
CREATE POLICY "사용자는 자신의 정보만 읽을 수 있음" ON zellyy.users
FOR SELECT USING (auth.uid() = id);
-- 사용자는 자신의 정보만 업데이트할 수 있음
CREATE POLICY "사용자는 자신의 정보만 업데이트할 수 있음" ON zellyy.users
FOR UPDATE USING (auth.uid() = id);
```
### 4.2 카드 테이블 정책
```sql
-- RLS 활성화
ALTER TABLE zellyy.cards ENABLE ROW LEVEL SECURITY;
-- 사용자는 자신의 카드만 읽을 수 있음 (또는 공개 카드)
CREATE POLICY "사용자는 자신의 카드만 읽을 수 있음" ON zellyy.cards
FOR SELECT USING (auth.uid() = user_id OR is_public = TRUE);
-- 사용자는 자신의 카드만 생성할 수 있음
CREATE POLICY "사용자는 자신의 카드만 생성할 수 있음" ON zellyy.cards
FOR INSERT WITH CHECK (auth.uid() = user_id);
-- 사용자는 자신의 카드만 업데이트할 수 있음
CREATE POLICY "사용자는 자신의 카드만 업데이트할 수 있음" ON zellyy.cards
FOR UPDATE USING (auth.uid() = user_id);
-- 사용자는 자신의 카드만 삭제할 수 있음
CREATE POLICY "사용자는 자신의 카드만 삭제할 수 있음" ON zellyy.cards
FOR DELETE USING (auth.uid() = user_id);
```
### 4.3 기타 테이블 정책
다른 테이블에도 유사한 방식으로 RLS 정책을 적용합니다.
```sql
-- 카드 태그 테이블
ALTER TABLE zellyy.card_tags ENABLE ROW LEVEL SECURITY;
CREATE POLICY "카드 태그 읽기 정책" ON zellyy.card_tags
FOR SELECT USING (
EXISTS (
SELECT 1 FROM zellyy.cards
WHERE cards.id = card_tags.card_id
AND (cards.user_id = auth.uid() OR cards.is_public = TRUE)
)
);
-- 소셜 공유 테이블
ALTER TABLE zellyy.social_shares ENABLE ROW LEVEL SECURITY;
CREATE POLICY "소셜 공유 읽기 정책" ON zellyy.social_shares
FOR SELECT USING (user_id = auth.uid());
-- 소셜 계정 테이블
ALTER TABLE zellyy.social_accounts ENABLE ROW LEVEL SECURITY;
CREATE POLICY "소셜 계정 읽기 정책" ON zellyy.social_accounts
FOR SELECT USING (user_id = auth.uid());
-- 구독 테이블
ALTER TABLE zellyy.subscriptions ENABLE ROW LEVEL SECURITY;
CREATE POLICY "구독 읽기 정책" ON zellyy.subscriptions
FOR SELECT USING (user_id = auth.uid());
```
## 5. 저장 프로시저 및 함수
자주 사용되는 작업을 위한 저장 프로시저와 함수를 생성합니다.
### 5.1 카드 생성 함수
```sql
CREATE OR REPLACE FUNCTION zellyy.create_card(
content TEXT,
background_color TEXT DEFAULT '#FFFFFF',
text_color TEXT DEFAULT '#000000',
font_family TEXT DEFAULT 'system',
font_size INTEGER DEFAULT 16,
text_align TEXT DEFAULT 'center',
is_public BOOLEAN DEFAULT FALSE,
tags TEXT[] DEFAULT '{}'
)
RETURNS UUID AS $$
DECLARE
card_id UUID;
tag TEXT;
BEGIN
-- 카드 생성
INSERT INTO zellyy.cards (
user_id, content, background_color, text_color,
font_family, font_size, text_align, is_public
) VALUES (
auth.uid(), content, background_color, text_color,
font_family, font_size, text_align, is_public
) RETURNING id INTO card_id;
-- 태그 추가
FOREACH tag IN ARRAY tags
LOOP
INSERT INTO zellyy.card_tags (card_id, tag_name)
VALUES (card_id, tag);
END LOOP;
RETURN card_id;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
```
### 5.2 카드 검색 함수
```sql
CREATE OR REPLACE FUNCTION zellyy.search_cards(
search_query TEXT DEFAULT NULL,
tag_filter TEXT DEFAULT NULL,
page_number INTEGER DEFAULT 1,
items_per_page INTEGER DEFAULT 20
)
RETURNS TABLE (
id UUID,
content TEXT,
background_color TEXT,
text_color TEXT,
font_family TEXT,
font_size INTEGER,
text_align TEXT,
is_public BOOLEAN,
created_at TIMESTAMP WITH TIME ZONE,
updated_at TIMESTAMP WITH TIME ZONE,
tags TEXT[]
) AS $$
BEGIN
RETURN QUERY
WITH filtered_cards AS (
SELECT c.id, c.content, c.background_color, c.text_color,
c.font_family, c.font_size, c.text_align, c.is_public,
c.created_at, c.updated_at
FROM zellyy.cards c
WHERE (c.user_id = auth.uid() OR c.is_public = TRUE)
AND (search_query IS NULL OR c.content ILIKE '%' || search_query || '%')
AND c.deleted_at IS NULL
AND (
tag_filter IS NULL
OR EXISTS (
SELECT 1 FROM zellyy.card_tags ct
WHERE ct.card_id = c.id AND ct.tag_name = tag_filter
)
)
),
cards_with_tags AS (
SELECT fc.*, array_agg(ct.tag_name) as tags
FROM filtered_cards fc
LEFT JOIN zellyy.card_tags ct ON fc.id = ct.card_id
GROUP BY fc.id, fc.content, fc.background_color, fc.text_color,
fc.font_family, fc.font_size, fc.text_align, fc.is_public,
fc.created_at, fc.updated_at
)
SELECT * FROM cards_with_tags
ORDER BY created_at DESC
LIMIT items_per_page
OFFSET (page_number - 1) * items_per_page;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
```
## 6. Supabase 클라이언트 설정
### 6.1 React Native 앱에서 Supabase 클라이언트 설정
`services/supabase.js` 파일을 생성하고 다음 코드를 추가합니다:
```javascript
import { createClient } from '@supabase/supabase-js';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { SUPABASE_URL, SUPABASE_ANON_KEY } from '@env';
const supabaseUrl = SUPABASE_URL;
const supabaseAnonKey = SUPABASE_ANON_KEY;
// AsyncStorage 어댑터 생성
const AsyncStorageAdapter = {
getItem: (key) => AsyncStorage.getItem(key),
setItem: (key, value) => AsyncStorage.setItem(key, value),
removeItem: (key) => AsyncStorage.removeItem(key),
};
// Supabase 클라이언트 생성
const supabase = createClient(supabaseUrl, supabaseAnonKey, {
auth: {
storage: AsyncStorageAdapter,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
},
});
export default supabase;
```
### 6.2 환경 변수 설정
`.env` 파일에 Supabase URL과 익명 키를 추가합니다:
```
SUPABASE_URL=https://a11.ism.kr
SUPABASE_ANON_KEY=your_anon_key
```
## 7. 인증 설정
### 7.1 이메일/비밀번호 인증 활성화
Supabase 대시보드에서:
1. Authentication > Settings로 이동
2. Email Auth를 활성화
3. 필요한 경우 이메일 템플릿 커스터마이징
### 7.2 소셜 로그인 설정 (선택 사항)
소셜 로그인을 활성화하려면:
1. Authentication > Settings > OAuth Providers로 이동
2. 원하는 소셜 로그인 제공자 활성화 (예: Google, Facebook)
3. 각 제공자의 클라이언트 ID와 시크릿 설정
## 8. 스토리지 설정
### 8.1 버킷 생성
Supabase 대시보드에서:
1. Storage로 이동
2. "New Bucket" 클릭
3. 다음 버킷 생성:
- `avatars`: 사용자 프로필 이미지용
- `card-images`: 카드 이미지용
### 8.2 스토리지 정책 설정
각 버킷에 대한 접근 정책을 설정합니다:
```sql
-- avatars 버킷 정책
CREATE POLICY "사용자는 자신의 아바타만 업로드할 수 있음"
ON storage.objects FOR INSERT
WITH CHECK (
bucket_id = 'avatars' AND
auth.uid() = (storage.foldername(name)::uuid)
);
CREATE POLICY "사용자는 자신의 아바타만 업데이트할 수 있음"
ON storage.objects FOR UPDATE
USING (
bucket_id = 'avatars' AND
auth.uid() = (storage.foldername(name)::uuid)
);
CREATE POLICY "아바타는 공개적으로 접근 가능"
ON storage.objects FOR SELECT
USING (bucket_id = 'avatars');
-- card-images 버킷 정책
CREATE POLICY "사용자는 자신의 카드 이미지만 업로드할 수 있음"
ON storage.objects FOR INSERT
WITH CHECK (
bucket_id = 'card-images' AND
auth.uid() = (storage.foldername(name)::uuid)
);
CREATE POLICY "사용자는 자신의 카드 이미지만 업데이트할 수 있음"
ON storage.objects FOR UPDATE
USING (
bucket_id = 'card-images' AND
auth.uid() = (storage.foldername(name)::uuid)
);
CREATE POLICY "카드 이미지는 공개적으로 접근 가능"
ON storage.objects FOR SELECT
USING (bucket_id = 'card-images');
```
## 9. Edge Functions 설정 (선택 사항)
소셜 미디어 공유와 같은 복잡한 기능을 위해 Supabase Edge Functions를 사용할 수 있습니다.
### 9.1 Edge Function 생성
```bash
# Supabase CLI 설치
npm install -g supabase
# 로그인
supabase login
# 프로젝트 연결
supabase link --project-ref your-project-ref
# 소셜 공유 함수 생성
supabase functions new social-share
# 함수 배포
supabase functions deploy social-share
```
### 9.2 소셜 공유 함수 예시
`supabase/functions/social-share/index.ts` 파일:
```typescript
import { serve } from 'https://deno.land/std@0.131.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.0.0';
const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? '';
const supabaseServiceKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? '';
serve(async (req) => {
// CORS 헤더
if (req.method === 'OPTIONS') {
return new Response('ok', {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
},
});
}
try {
// 요청 본문 파싱
const { cardId, platform, message } = await req.json();
// Supabase 클라이언트 생성
const supabase = createClient(supabaseUrl, supabaseServiceKey);
// 인증 확인
const authHeader = req.headers.get('Authorization');
if (!authHeader) {
return new Response(JSON.stringify({ error: 'Unauthorized' }), {
status: 401,
headers: { 'Content-Type': 'application/json' },
});
}
const token = authHeader.replace('Bearer ', '');
const { data: { user }, error: authError } = await supabase.auth.getUser(token);
if (authError || !user) {
return new Response(JSON.stringify({ error: 'Unauthorized' }), {
status: 401,
headers: { 'Content-Type': 'application/json' },
});
}
// 카드 정보 가져오기
const { data: card, error: cardError } = await supabase
.from('zellyy.cards')
.select('*')
.eq('id', cardId)
.single();
if (cardError || !card) {
return new Response(JSON.stringify({ error: 'Card not found' }), {
status: 404,
headers: { 'Content-Type': 'application/json' },
});
}
// 소셜 계정 정보 가져오기
const { data: socialAccount, error: socialError } = await supabase
.from('zellyy.social_accounts')
.select('*')
.eq('user_id', user.id)
.eq('platform', platform)
.single();
if (socialError || !socialAccount) {
return new Response(JSON.stringify({ error: 'Social account not connected' }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// 소셜 미디어 공유 로직 (플랫폼별로 다름)
let shareResult;
let shareUrl;
if (platform === 'facebook') {
// Facebook API 호출 로직
// ...
shareUrl = 'https://facebook.com/post/123456';
} else if (platform === 'instagram') {
// Instagram API 호출 로직
// ...
shareUrl = 'https://instagram.com/p/123456';
} else if (platform === 'twitter') {
// Twitter API 호출 로직
// ...
shareUrl = 'https://twitter.com/user/status/123456';
} else {
return new Response(JSON.stringify({ error: 'Unsupported platform' }), {
status: 400,
headers: { 'Content-Type': 'application/json' },
});
}
// 공유 기록 저장
const { data: share, error: shareError } = await supabase
.from('zellyy.social_shares')
.insert({
card_id: cardId,
user_id: user.id,
platform,
share_url: shareUrl,
status: 'success',
response_data: shareResult
})
.select()
.single();
if (shareError) {
return new Response(JSON.stringify({ error: 'Failed to record share' }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
return new Response(JSON.stringify({ success: true, share }), {
status: 200,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
} catch (error) {
return new Response(JSON.stringify({ error: error.message }), {
status: 500,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
}
});
```
## 10. 백업 및 유지 관리
### 10.1 정기 백업 설정
기존 백업 스크립트를 활용하여 Zellyy 스키마도 백업합니다:
```bash
#!/bin/bash
BACKUP_DIR="/home/ism-admin/backups"
TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
BACKUP_FILE="$BACKUP_DIR/postgres_backup_$TIMESTAMP.sql.gz"
# 백업 디렉토리 생성
mkdir -p $BACKUP_DIR
# 데이터베이스 백업
docker exec supabase-db pg_dumpall -U postgres | gzip > $BACKUP_FILE
# 30일 이상 된 백업 삭제
find $BACKUP_DIR -name "postgres_backup_*.sql.gz" -type f -mtime +30 -delete
```
### 10.2 성능 모니터링
PostgreSQL 성능을 모니터링하기 위한 쿼리:
```sql
-- 느린 쿼리 확인
SELECT
query,
calls,
total_time,
mean_time,
rows
FROM pg_stat_statements
ORDER BY total_time DESC
LIMIT 10;
-- 테이블 크기 확인
SELECT
schemaname,
relname,
pg_size_pretty(pg_total_relation_size(relid)) as total_size
FROM pg_catalog.pg_statio_user_tables
WHERE schemaname = 'zellyy'
ORDER BY pg_total_relation_size(relid) DESC;
```
## 11. 문제 해결
### 11.1 일반적인 문제 및 해결 방법
1. **RLS 정책 문제**:
- 정책이 너무 제한적인지 확인
- `auth.uid()`가 올바르게 작동하는지 확인
2. **성능 문제**:
- 인덱스가 올바르게 생성되었는지 확인
- 쿼리 실행 계획 분석
3. **인증 문제**:
- JWT 토큰이 올바른지 확인
- 세션 만료 시간 확인
### 11.2 로그 확인
```bash
# Supabase 로그 확인
docker logs supabase-db
docker logs supabase-auth
docker logs supabase-rest
```
## 12. 보안 고려사항
1. **API 키 관리**:
- 익명 키와 서비스 키를 안전하게 보관
- 서비스 키는 서버 측 코드에서만 사용
2. **데이터 암호화**:
- 민감한 정보는 암호화하여 저장
- 소셜 미디어 토큰과 같은 민감한 정보는 암호화
3. **정기적인 보안 감사**:
- RLS 정책 검토
- 권한 설정 검토
## 결론
이 가이드는 Zellyy 프로젝트를 위한 Supabase 설정 방법을 제공합니다. 기존 Supabase 인프라를 활용하면서도 데이터를 분리하여 관리함으로써 효율적인 개발과 운영이 가능합니다. 추가적인 기능이나 요구사항이 생기면 이 문서를 업데이트하여 최신 상태를 유지하세요.

26
ZELLYY/zellyy note/02_기술_문서/index.md Normal file
View File

@@ -0,0 +1,26 @@
# 기술 문서
이 폴더에는 Zellyy 프로젝트의 기술적 구현에 관한 문서가 포함되어 있습니다.
## 문서 목록
1. [[데이터 모델 설계]] - 데이터 모델 설계 문서
2. [[ERD 다이어그램]] - 엔티티 관계 다이어그램
3. [[API 명세서]] - API 엔드포인트 및 기능 명세
4. [[React Native 설정 가이드]] - React Native 개발 환경 설정 가이드
5. [[Supabase 연동 가이드]] - Supabase 연동 및 설정 방법
6. [[SNS 통합 가이드]] - 소셜 미디어 플랫폼 연동 방법
## 기술 스택 요약
Zellyy 프로젝트는 다음과 같은 기술 스택을 사용합니다:
- **모바일 앱 프론트엔드**: React Native (iOS, Android)
- **웹 프론트엔드**: React.js 또는 Next.js (2단계)
- **백엔드**: Supabase (자체 호스팅)
- **데이터베이스**: PostgreSQL (Supabase 내장)
- **인증**: Supabase Auth
- **스토리지**: Supabase Storage
- **배포 환경**: Debian 12 서버 (기존 인프라 활용)
이 문서들은 프로젝트의 기술적 구현에 필요한 상세 정보를 제공하며, 개발자가 시스템을 이해하고 구현하는 데 도움을 줍니다.

265
ZELLYY/zellyy note/02_기술_문서/데이터_모델_설계.md Normal file
View File

@@ -0,0 +1,265 @@
# Zellyy 데이터 모델 설계
이 문서는 Zellyy 프로젝트의 데이터베이스 모델 설계에 대한 상세 내용을 제공합니다.
## 스키마 구조
Zellyy 프로젝트는 Supabase의 PostgreSQL 데이터베이스를 사용하며, 모든 테이블은 `zellyy` 스키마 아래에 생성됩니다. 이는 기존 프로젝트와의 분리를 위한 것입니다.
## 핵심 테이블
### 1. zellyy.users
사용자 정보를 저장하는 테이블입니다. Supabase Auth와 연동됩니다.
```sql
CREATE TABLE zellyy.users (
id UUID REFERENCES auth.users(id) PRIMARY KEY,
email TEXT UNIQUE NOT NULL,
username TEXT UNIQUE,
display_name TEXT,
avatar_url TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
last_login TIMESTAMP WITH TIME ZONE,
is_premium BOOLEAN DEFAULT FALSE,
premium_until TIMESTAMP WITH TIME ZONE
);
```
### 2. zellyy.cards
사용자가 작성한 카드 정보를 저장하는 테이블입니다.
```sql
CREATE TABLE zellyy.cards (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
content TEXT NOT NULL,
background_color TEXT DEFAULT '#FFFFFF',
text_color TEXT DEFAULT '#000000',
font_family TEXT DEFAULT 'system',
font_size INTEGER DEFAULT 16,
text_align TEXT DEFAULT 'center',
is_public BOOLEAN DEFAULT FALSE,
is_synced BOOLEAN DEFAULT FALSE,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
deleted_at TIMESTAMP WITH TIME ZONE
);
```
### 3. zellyy.card_tags
카드에 적용된 태그 정보를 저장하는 테이블입니다.
```sql
CREATE TABLE zellyy.card_tags (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
card_id UUID REFERENCES zellyy.cards(id) NOT NULL,
tag_name TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
UNIQUE(card_id, tag_name)
);
```
### 4. zellyy.social_shares
카드의 소셜 미디어 공유 기록을 저장하는 테이블입니다.
```sql
CREATE TABLE zellyy.social_shares (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
card_id UUID REFERENCES zellyy.cards(id) NOT NULL,
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
platform TEXT NOT NULL, -- 'facebook', 'instagram', 'twitter', etc.
share_url TEXT,
shared_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
status TEXT DEFAULT 'pending', -- 'pending', 'success', 'failed'
response_data JSONB
);
```
### 5. zellyy.social_accounts
사용자의 소셜 미디어 계정 연동 정보를 저장하는 테이블입니다.
```sql
CREATE TABLE zellyy.social_accounts (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
platform TEXT NOT NULL, -- 'facebook', 'instagram', 'twitter', etc.
platform_user_id TEXT,
access_token TEXT,
refresh_token TEXT,
token_expires_at TIMESTAMP WITH TIME ZONE,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
UNIQUE(user_id, platform)
);
```
### 6. zellyy.subscriptions
사용자의 구독 정보를 저장하는 테이블입니다.
```sql
CREATE TABLE zellyy.subscriptions (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
user_id UUID REFERENCES zellyy.users(id) NOT NULL,
plan_type TEXT NOT NULL, -- 'monthly', 'yearly', etc.
status TEXT NOT NULL, -- 'active', 'canceled', 'expired'
start_date TIMESTAMP WITH TIME ZONE NOT NULL,
end_date TIMESTAMP WITH TIME ZONE NOT NULL,
payment_provider TEXT, -- 'apple', 'google', 'stripe', etc.
payment_id TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
```
## 보안 정책 (RLS)
Supabase의 Row Level Security(RLS)를 사용하여 데이터 접근을 제한합니다.
### zellyy.users 테이블 정책
```sql
-- 사용자는 자신의 정보만 읽을 수 있음
CREATE POLICY "사용자는 자신의 정보만 읽을 수 있음" ON zellyy.users
FOR SELECT USING (auth.uid() = id);
-- 사용자는 자신의 정보만 업데이트할 수 있음
CREATE POLICY "사용자는 자신의 정보만 업데이트할 수 있음" ON zellyy.users
FOR UPDATE USING (auth.uid() = id);
```
### zellyy.cards 테이블 정책
```sql
-- 사용자는 자신의 카드만 읽을 수 있음 (또는 공개 카드)
CREATE POLICY "사용자는 자신의 카드만 읽을 수 있음" ON zellyy.cards
FOR SELECT USING (auth.uid() = user_id OR is_public = TRUE);
-- 사용자는 자신의 카드만 생성할 수 있음
CREATE POLICY "사용자는 자신의 카드만 생성할 수 있음" ON zellyy.cards
FOR INSERT WITH CHECK (auth.uid() = user_id);
-- 사용자는 자신의 카드만 업데이트할 수 있음
CREATE POLICY "사용자는 자신의 카드만 업데이트할 수 있음" ON zellyy.cards
FOR UPDATE USING (auth.uid() = user_id);
-- 사용자는 자신의 카드만 삭제할 수 있음
CREATE POLICY "사용자는 자신의 카드만 삭제할 수 있음" ON zellyy.cards
FOR DELETE USING (auth.uid() = user_id);
```
## 인덱스
성능 최적화를 위한 인덱스를 생성합니다.
```sql
-- 카드 검색 최적화
CREATE INDEX idx_cards_user_id ON zellyy.cards(user_id);
CREATE INDEX idx_cards_created_at ON zellyy.cards(created_at);
CREATE INDEX idx_cards_is_public ON zellyy.cards(is_public);
-- 태그 검색 최적화
CREATE INDEX idx_card_tags_card_id ON zellyy.card_tags(card_id);
CREATE INDEX idx_card_tags_tag_name ON zellyy.card_tags(tag_name);
-- 소셜 공유 검색 최적화
CREATE INDEX idx_social_shares_user_id ON zellyy.social_shares(user_id);
CREATE INDEX idx_social_shares_card_id ON zellyy.social_shares(card_id);
```
## 트리거 및 함수
자동화된 작업을 위한 트리거와 함수를 정의합니다.
### 업데이트 타임스탬프 트리거
```sql
-- 업데이트 타임스탬프 함수
CREATE OR REPLACE FUNCTION zellyy.update_timestamp()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = NOW();
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
-- 사용자 테이블에 트리거 적용
CREATE TRIGGER update_users_timestamp
BEFORE UPDATE ON zellyy.users
FOR EACH ROW EXECUTE FUNCTION zellyy.update_timestamp();
-- 카드 테이블에 트리거 적용
CREATE TRIGGER update_cards_timestamp
BEFORE UPDATE ON zellyy.cards
FOR EACH ROW EXECUTE FUNCTION zellyy.update_timestamp();
```
### 프리미엄 상태 업데이트 함수
```sql
-- 구독 상태에 따라 사용자의 프리미엄 상태 업데이트
CREATE OR REPLACE FUNCTION zellyy.update_premium_status()
RETURNS TRIGGER AS $$
BEGIN
IF NEW.status = 'active' THEN
UPDATE zellyy.users
SET is_premium = TRUE, premium_until = NEW.end_date
WHERE id = NEW.user_id;
ELSIF NEW.status IN ('canceled', 'expired') AND NEW.end_date <= NOW() THEN
UPDATE zellyy.users
SET is_premium = FALSE, premium_until = NULL
WHERE id = NEW.user_id;
END IF;
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
-- 구독 테이블에 트리거 적용
CREATE TRIGGER update_premium_status_trigger
AFTER INSERT OR UPDATE ON zellyy.subscriptions
FOR EACH ROW EXECUTE FUNCTION zellyy.update_premium_status();
```
## 데이터 마이그레이션 및 초기 설정
프로젝트 초기 설정을 위한 SQL 스크립트입니다.
```sql
-- 스키마 생성
CREATE SCHEMA IF NOT EXISTS zellyy;
-- UUID 확장 활성화
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-- 테이블 생성 (위에서 정의한 모든 테이블)
-- 기본 관리자 사용자 생성
INSERT INTO zellyy.users (id, email, username, display_name, is_premium)
VALUES ('00000000-0000-0000-0000-000000000000', 'admin@zellyy.com', 'admin', 'Zellyy Admin', TRUE);
```
## 확장성 고려사항
1. **샤딩**: 사용자 수가 크게 증가할 경우, 사용자 ID를 기준으로 데이터를 샤딩하는 전략을 고려할 수 있습니다.
2. **아카이빙**: 오래된 카드 데이터는 별도의 아카이브 테이블로 이동하여 주 테이블의 성능을 유지할 수 있습니다.
3. **캐싱**: 자주 접근하는 데이터(예: 공개 카드, 인기 태그)는 Redis와 같은 캐시 시스템을 도입하여 성능을 향상시킬 수 있습니다.
4. **읽기 복제본**: 쿼리 부하가 높아질 경우, 읽기 전용 복제본을 설정하여 부하를 분산할 수 있습니다.
## 데이터 백업 전략
1. **정기 백업**: 매일 전체 데이터베이스 백업을 수행합니다.
2. **증분 백업**: 시간별 WAL(Write-Ahead Log) 백업을 통해 세부적인 복구 지점을 제공합니다.
3. **지리적 복제**: 재해 복구를 위해 다른 지역에 백업을 저장합니다.
## 결론
이 데이터 모델은 Zellyy 프로젝트의 초기 요구사항을 충족하도록 설계되었습니다. 사용자 피드백과 실제 사용 패턴에 따라 모델을 지속적으로 개선하고 확장할 계획입니다.

217
ZELLYY/zellyy note/02_기술_문서/시스템_아키텍처.md Normal file
View File

@@ -0,0 +1,217 @@
# ZELLYY 시스템 아키텍처
## 아키텍처 개요
ZELLYY는 모바일 중심의 카드 제작 애플리케이션으로, 클라이언트-서버 아키텍처를 기반으로 설계되었습니다. 초기 MVP 단계에서는 로컬 저장소 중심으로 구현하고, 이후 클라우드 동기화 기능을 추가하는 방식으로 발전할 예정입니다.
## 시스템 구성 요소
### 클라이언트 애플리케이션
#### 모바일 앱 (React Native)
- **UI 레이어**: React Native 컴포넌트, 스타일링 (Styled Components)
- **상태 관리**: Redux/Redux Toolkit, Context API
- **네비게이션**: React Navigation
- **로컬 저장소**: AsyncStorage, SQLite
- **네트워크**: Axios, React Query
- **오프라인 지원**: 로컬 캐싱, 오프라인 작업 큐
#### 웹 애플리케이션 (향후 개발)
- **프레임워크**: Next.js
- **UI 라이브러리**: React
- **상태 관리**: Redux/Redux Toolkit
- **스타일링**: Tailwind CSS, Styled Components
- **API 통신**: Axios, React Query
### 백엔드 서비스
#### Supabase 기반 백엔드
- **데이터베이스**: PostgreSQL
- **인증**: Supabase Auth (이메일, 소셜 로그인)
- **스토리지**: Supabase Storage (이미지, 에셋 저장)
- **실시간 기능**: Supabase Realtime (향후 협업 기능용)
- **API**: RESTful API, GraphQL (선택적)
#### 추가 서버 컴포넌트 (필요시)
- **Node.js 서버**: 복잡한 비즈니스 로직, 서드파티 API 통합
- **이미지 처리 서비스**: 이미지 최적화, 변환
- **푸시 알림 서비스**: Firebase Cloud Messaging 연동
### 인프라
- **호스팅**: Supabase 자체 호스팅 (Debian 12 서버)
- **CDN**: Cloudflare (정적 자산 배포)
- **CI/CD**: GitHub Actions
- **모니터링**: Sentry, Datadog
- **분석**: Google Analytics, Firebase Analytics
## 데이터 흐름
### 기본 데이터 흐름
1. 사용자가 모바일 앱에서 카드 제작/편집
2. 로컬 저장소에 변경사항 저장
3. 온라인 상태일 때 Supabase에 동기화
4. 다른 기기에서 접속 시 Supabase에서 최신 데이터 가져오기
### 오프라인 지원
1. 오프라인 상태에서 모든 변경사항 로컬에 저장
2. 변경사항을 작업 큐에 추가
3. 온라인 상태가 되면 작업 큐 처리
4. 충돌 발생 시 해결 전략 적용 (최신 타임스탬프 우선, 사용자 선택 등)
## 주요 API 엔드포인트
### 사용자 관리
- `POST /auth/signup`: 회원가입
- `POST /auth/login`: 로그인
- `POST /auth/logout`: 로그아웃
- `GET /auth/user`: 현재 사용자 정보 조회
- `PUT /auth/user`: 사용자 정보 업데이트
### 카드 관리
- `GET /cards`: 사용자의 카드 목록 조회
- `GET /cards/:id`: 특정 카드 상세 조회
- `POST /cards`: 새 카드 생성
- `PUT /cards/:id`: 카드 업데이트
- `DELETE /cards/:id`: 카드 삭제
### 템플릿 관리
- `GET /templates`: 템플릿 목록 조회
- `GET /templates/:id`: 특정 템플릿 상세 조회
- `POST /templates`: 사용자 커스텀 템플릿 생성
- `PUT /templates/:id`: 템플릿 업데이트
- `DELETE /templates/:id`: 템플릿 삭제
### 에셋 관리
- `GET /assets`: 에셋(이미지, 아이콘 등) 목록 조회
- `POST /assets`: 새 에셋 업로드
- `DELETE /assets/:id`: 에셋 삭제
## 보안 아키텍처
### 인증 및 권한 관리
- JWT 기반 인증
- 역할 기반 접근 제어 (RBAC)
- API 요청 제한 (Rate Limiting)
- HTTPS 전용 통신
### 데이터 보안
- 저장 데이터 암호화 (Encryption at Rest)
- 전송 데이터 암호화 (Encryption in Transit)
- 민감 정보 마스킹
- 정기적인 보안 감사
## 확장성 고려사항
### 수평적 확장
- 마이크로서비스 아키텍처로의 점진적 전환 가능성
- 서버리스 함수 활용 (AWS Lambda, Supabase Edge Functions)
- 데이터베이스 샤딩 전략
### 성능 최적화
- 이미지 최적화 및 압축
- CDN 활용한 정적 자산 배포
- 캐싱 전략 (메모리 캐시, 디스크 캐시)
- 데이터베이스 인덱싱 및 쿼리 최적화
## 시스템 아키텍처 다이어그램
```
+------------------+ +------------------+
| | | |
| 모바일 앱 | | 웹 애플리케이션 |
| (React Native) | | (Next.js) |
| | | |
+--------+---------+ +--------+---------+
| |
| |
v v
+------------------------------------------+
| |
| API Gateway |
| |
+------------------+---------------------+
|
|
v
+------------------+---------------------+
| |
| Supabase |
| |
| +-------------+ +-------------+ |
| | | | | |
| | PostgreSQL | | Storage | |
| | | | | |
| +-------------+ +-------------+ |
| |
| +-------------+ +-------------+ |
| | | | | |
| | Auth | | Realtime | |
| | | | | |
| +-------------+ +-------------+ |
| |
+------------------+---------------------+
|
|
v
+------------------+---------------------+
| |
| 추가 서비스 (필요시) |
| |
| +-------------+ +-------------+ |
| | | | | |
| | Node.js | | 이미지 처리 | |
| | 서버 | | 서비스 | |
| +-------------+ +-------------+ |
| |
| +-------------+ +-------------+ |
| | | | | |
| | 푸시 알림 | | 분석 서비스 | |
| | 서비스 | | | |
| +-------------+ +-------------+ |
| |
+------------------------------------------+
```
## 기술 스택 선택 이유
### React Native
- 크로스 플랫폼 개발로 iOS와 Android 동시 지원
- 네이티브 성능과 사용자 경험 제공
- JavaScript/TypeScript 기반으로 개발 효율성 높음
- 풍부한 커뮤니티와 라이브러리 생태계
### Supabase
- Firebase의 오픈소스 대안으로 자체 호스팅 가능
- PostgreSQL 기반으로 강력한 쿼리 기능 제공
- 인증, 스토리지, 실시간 기능 통합 제공
- RESTful API와 GraphQL 지원
- 확장성과 커스터마이징 용이
### Redux/Redux Toolkit
- 예측 가능한 상태 관리
- 디버깅 및 개발 도구 지원 우수
- 미들웨어를 통한 비동기 작업 처리 용이
- 대규모 애플리케이션에서의 상태 관리 효율성
## 향후 아키텍처 발전 계획
### 1단계: MVP (로컬 중심)
- 기본 기능 로컬 저장소 기반 구현
- 최소한의 서버 의존성
### 2단계: 클라우드 동기화
- Supabase 연동 및 데이터 동기화
- 사용자 인증 및 권한 관리 강화
### 3단계: 협업 기능
- 실시간 데이터 동기화
- 팀 워크스페이스 및 공유 기능
### 4단계: 웹 서비스 확장
- Next.js 기반 웹 애플리케이션 개발
- 모바일-웹 간 일관된 경험 제공
### 5단계: AI 기능 통합
- 디자인 추천 및 자동화
- 콘텐츠 분석 및 최적화

355
ZELLYY/zellyy note/03_UI_UX_설계/UI_UX_가이드라인.md Normal file
View File

@@ -0,0 +1,355 @@
# UI/UX 가이드라인
이 문서는 Zellyy 앱의 사용자 인터페이스(UI) 및 사용자 경험(UX) 설계에 대한 가이드라인을 제공합니다.
## 1. 디자인 원칙
Zellyy 앱의 디자인은 다음 원칙을 따릅니다:
### 1.1 단순함 (Simplicity)
- 불필요한 요소를 제거하고 핵심 기능에 집중합니다.
- 사용자가 직관적으로 이해할 수 있는 인터페이스를 제공합니다.
### 1.2 일관성 (Consistency)
- 앱 전체에 걸쳐 일관된 디자인 언어를 사용합니다.
- 색상, 타이포그래피, 아이콘 등의 요소를 일관되게 적용합니다.
### 1.3 피드백 (Feedback)
- 사용자 행동에 대한 명확한 피드백을 제공합니다.
- 로딩 상태, 성공/실패 메시지 등을 시각적으로 표현합니다.
### 1.4 접근성 (Accessibility)
- 다양한 사용자가 앱을 사용할 수 있도록 접근성을 고려합니다.
- 충분한 대비, 적절한 글꼴 크기, 스크린 리더 지원 등을 제공합니다.
### 1.5 효율성 (Efficiency)
- 최소한의 단계로 작업을 완료할 수 있도록 설계합니다.
- 자주 사용하는 기능에 쉽게 접근할 수 있도록 합니다.
## 2. 브랜드 아이덴티티
### 2.1 로고
Zellyy 로고는 앱의 핵심 아이덴티티를 나타냅니다:
- 정사각형 카드 형태를 기반으로 한 심플한 디자인
- 앱 아이콘, 스플래시 화면, 마케팅 자료 등에 일관되게 사용
### 2.2 색상 팔레트
#### 기본 색상
- **주 색상(Primary)**: `#4A6FFF` - 버튼, 링크, 강조 요소에 사용
- **보조 색상(Secondary)**: `#FF6B6B` - 액션 버튼, 알림 등에 사용
- **중립 색상(Neutral)**: `#F8F9FA` ~ `#212529` - 배경, 텍스트 등에 사용
#### 기능적 색상
- **성공(Success)**: `#40C057` - 성공 메시지, 완료 상태 등에 사용
- **경고(Warning)**: `#FD7E14` - 주의가 필요한 상태에 사용
- **오류(Error)**: `#FA5252` - 오류 메시지, 실패 상태 등에 사용
- **정보(Info)**: `#339AF0` - 정보성 메시지에 사용
### 2.3 타이포그래피
#### 기본 글꼴
- **iOS**: San Francisco
- **Android**: Roboto
- **웹**: Inter 또는 시스템 기본 글꼴
#### 글꼴 크기
- **헤더 1**: 24sp/px
- **헤더 2**: 20sp/px
- **헤더 3**: 18sp/px
- **본문 텍스트**: 16sp/px
- **보조 텍스트**: 14sp/px
- **작은 텍스트**: 12sp/px
#### 글꼴 두께
- **Regular**: 400
- **Medium**: 500
- **Bold**: 700
### 2.4 아이콘
- 라인 스타일의 심플한 아이콘 사용
- 일관된 스트로크 두께와 스타일 유지
- 의미가 명확하고 인식하기 쉬운 아이콘 선택
## 3. 레이아웃 및 그리드 시스템
### 3.1 기본 그리드
- 8포인트 그리드 시스템 사용
- 모든 간격, 패딩, 마진은 8의 배수(8, 16, 24, 32, ...)로 설정
- 요소 간 일관된 간격 유지
### 3.2 카드 레이아웃
- 카드는 기본적으로 정사각형 형태 (1:1 비율)
- 그리드 뷰에서는 화면 너비에 따라 2열 또는 3열로 표시
- 카드 간 간격: 16px
### 3.3 화면 패딩
- 기본 화면 좌우 패딩: 16px
- 콘텐츠 영역 상하 패딩: 16px
- 섹션 간 간격: 24px
## 4. 컴포넌트 가이드라인
### 4.1 버튼
#### 기본 버튼
- 높이: 48px
- 패딩: 좌우 16px
- 테두리 반경: 8px
- 텍스트: 16px, Medium
#### 버튼 상태
- **기본(Default)**: 주 색상 배경, 흰색 텍스트
- **비활성화(Disabled)**: 회색 배경, 어두운 회색 텍스트
- **누름(Pressed)**: 어두운 주 색상 배경, 흰색 텍스트
#### 버튼 종류
- **기본 버튼(Primary)**: 주 색상 배경, 흰색 텍스트
- **보조 버튼(Secondary)**: 흰색 배경, 주 색상 테두리, 주 색상 텍스트
- **텍스트 버튼(Text)**: 배경 없음, 주 색상 텍스트
### 4.2 입력 필드
- 높이: 56px
- 패딩: 좌우 16px, 상하 12px
- 테두리 반경: 8px
- 테두리 색상: 중립 색상
- 포커스 상태: 주 색상 테두리
- 오류 상태: 오류 색상 테두리, 오류 메시지 표시
### 4.3 카드 컴포넌트
- 크기: 화면 너비에 따라 조정 (기본적으로 정사각형)
- 테두리 반경: 12px
- 그림자: 약한 그림자 효과
- 배경색: 사용자 설정 또는 기본 흰색
- 텍스트 색상: 사용자 설정 또는 기본 검정색
- 패딩: 16px
### 4.4 탭 바
- 높이: 56px
- 아이콘 크기: 24px
- 레이블 텍스트: 12px, Regular
- 활성 상태: 주 색상 아이콘 및 텍스트
- 비활성 상태: 중립 색상 아이콘 및 텍스트
### 4.5 모달 및 다이얼로그
- 테두리 반경: 16px
- 패딩: 24px
- 배경색: 흰색
- 그림자: 중간 강도의 그림자 효과
- 제목: 20px, Bold
- 내용: 16px, Regular
- 버튼 정렬: 우측 또는 중앙 정렬
## 5. 화면별 설계
### 5.1 온보딩 화면
- 간결한 일러스트레이션과 짧은 텍스트로 핵심 기능 소개
- 최대 3-4개 화면으로 제한
- 건너뛰기 옵션 제공
- 마지막 화면에 시작하기/로그인 버튼 배치
### 5.2 인증 화면
#### 로그인 화면
- 이메일/비밀번호 입력 필드
- 소셜 로그인 옵션
- 비밀번호 찾기 링크
- 회원가입 링크
#### 회원가입 화면
- 이메일, 비밀번호, 사용자 이름 입력 필드
- 약관 동의 체크박스
- 소셜 회원가입 옵션
### 5.3 홈 화면
- 상단에 앱 로고 및 검색 버튼
- 카드 생성 버튼 (플로팅 액션 버튼)
- 카드 그리드 또는 리스트 뷰
- 필터링 및 정렬 옵션
### 5.4 카드 작성 화면
- 전체 화면 편집기
- 상단에 취소 및 저장 버튼
- 텍스트 입력 영역
- 하단에 스타일링 옵션 (배경색, 텍스트 색상, 폰트 등)
- 공개/비공개 설정 토글
- 태그 추가 옵션
### 5.5 카드 상세 화면
- 카드 전체 보기
- 하단에 편집, 삭제, 공유 버튼
- 생성 날짜 및 태그 정보
- 공유 기록 (있는 경우)
### 5.6 프로필 화면
- 사용자 정보 (이름, 프로필 이미지)
- 통계 정보 (카드 수, 공유 수 등)
- 설정 메뉴
- 구독 상태 및 관리 옵션
### 5.7 설정 화면
- 계정 설정
- 알림 설정
- 테마 설정
- 소셜 계정 연동 관리
- 구독 관리
- 로그아웃 및 계정 삭제 옵션
## 6. 상호작용 및 애니메이션
### 6.1 전환 애니메이션
- 화면 전환: 부드러운 슬라이드 또는 페이드 효과
- 모달 표시: 페이드 인 및 스케일 효과
- 전환 시간: 300ms (기본)
### 6.2 피드백 애니메이션
- 버튼 누름: 스케일 다운 효과 (95%)
- 카드 선택: 약간의 확대 및 그림자 강화
- 스와이프 제스처: 부드러운 따라오기 효과
### 6.3 로딩 상태
- 스켈레톤 로딩 UI 사용
- 진행 상태가 명확한 로딩 인디케이터
- 긴 작업의 경우 진행률 표시
### 6.4 제스처
- 카드 스와이프: 좌우 스와이프로 카드 간 이동
- 당겨서 새로고침: 목록 화면에서 당겨서 새로고침
- 길게 누르기: 카드에 대한 추가 옵션 표시
## 7. 반응형 디자인
### 7.1 모바일 화면 (< 600px)
- 카드 그리드: 2열
- 하단 탭 바 네비게이션
- 간소화된 UI 요소
### 7.2 태블릿 화면 (600px ~ 1024px)
- 카드 그리드: 3열 또는 4열
- 사이드 네비게이션 + 하단 탭 바 (가로 모드)
- 분할 화면 레이아웃 지원
### 7.3 데스크톱 화면 (> 1024px)
- 카드 그리드: 4열 이상
- 사이드 네비게이션
- 고급 편집 기능 및 키보드 단축키 지원
## 8. 접근성 가이드라인
### 8.1 색상 대비
- 텍스트와 배경 간 최소 대비율: 4.5:1
- 중요 텍스트와 배경 간 최소 대비율: 7:1
- 색상만으로 정보를 구분하지 않음
### 8.2 터치 타겟
- 최소 터치 영역: 44px x 44px
- 터치 요소 간 최소 간격: 8px
### 8.3 스크린 리더 지원
- 모든 이미지에 대체 텍스트 제공
- 의미 있는 요소에 적절한 레이블 제공
- 논리적인 포커스 순서 유지
### 8.4 키보드 네비게이션
- 모든 기능을 키보드로 접근 가능하도록 설계
- 포커스 상태를 시각적으로 명확하게 표시
- 논리적인 탭 순서 유지
## 9. 다크 모드
### 9.1 색상 조정
- **배경색**:
- 라이트 모드: `#FFFFFF`
- 다크 모드: `#121212`
- **텍스트 색상**:
- 라이트 모드: `#212529`
- 다크 모드: `#E9ECEF`
- **주 색상**:
- 라이트 모드: `#4A6FFF`
- 다크 모드: `#738FFE`
### 9.2 그림자 및 구분선
- 다크 모드에서는 그림자 대신 약간 밝은 배경색으로 구분
- 구분선 색상 조정하여 가시성 유지
### 9.3 이미지 및 아이콘
- 아이콘은 다크 모드에 맞게 색상 반전
- 이미지에 다크 모드용 대체 버전 제공 (필요한 경우)
## 10. 에러 상태 및 빈 상태
### 10.1 에러 상태
- 명확한 오류 메시지 제공
- 문제 해결을 위한 행동 지침 제공
- 친근하고 이해하기 쉬운 언어 사용
- 시각적 아이콘으로 오류 유형 표시
### 10.2 빈 상태
- 데이터가 없는 화면에 적절한 안내 메시지 표시
- 시작하기 위한 행동 유도 (CTA) 제공
- 간단한 일러스트레이션으로 빈 상태 시각화
## 11. 마이크로인터랙션
### 11.1 피드백 마이크로인터랙션
- 카드 저장 시 성공 애니메이션
- 공유 완료 시 축하 효과
- 오류 발생 시 주의 효과
### 11.2 상태 변화 마이크로인터랙션
- 토글 스위치 전환 애니메이션
- 드롭다운 메뉴 펼침/접힘 효과
- 탭 전환 시 부드러운 인디케이터 이동
## 12. 테스트 및 검증
### 12.1 사용성 테스트
- 프로토타입을 사용한 사용자 테스트 진행
- 핵심 사용자 흐름에 대한 태스크 완료율 측정
- 사용자 피드백 수집 및 분석
### 12.2 A/B 테스트
- 중요한 UI 요소에 대한 A/B 테스트 진행
- 데이터 기반 디자인 의사 결정
- 지속적인 개선 사이클 유지
## 결론
이 UI/UX 가이드라인은 Zellyy 앱의 일관된 사용자 경험을 위한 기준을 제공합니다. 디자인 과정에서 이 가이드라인을 참조하여 사용자 중심의 직관적이고 매력적인 인터페이스를 구현하세요. 프로젝트가 발전함에 따라 이 가이드라인도 지속적으로 업데이트될 예정입니다.

422
ZELLYY/zellyy note/03_UI_UX_설계/UI_와이어프레임_추가화면.md Normal file
View File

@@ -0,0 +1,422 @@
# Zellyy - UI 와이어프레임 (추가 화면)
## 1. 온보딩 화면
```
+----------------------------------+
| [건너뛰기] |
+----------------------------------+
| |
| |
| [일러스트레이션] |
| |
| |
| |
| 나만의 카드 만들기 |
| |
| 원하는 내용을 담은 카드를 |
| 쉽고 빠르게 만들어보세요. |
| |
| |
| |
| |
| [○] [○] [●] [○] (페이지 인디케이터) |
| |
| [이전] [다음] |
| |
+----------------------------------+
+----------------------------------+
| [건너뛰기] |
+----------------------------------+
| |
| |
| [일러스트레이션] |
| |
| |
| |
| 카드 공유하기 |
| |
| 만든 카드를 친구들과 공유하고 |
| 소통해보세요. |
| |
| |
| |
| |
| [○] [○] [○] [●] (페이지 인디케이터) |
| |
| [이전] [시작하기] |
| |
+----------------------------------+
```
## 2. 알림 화면
```
+----------------------------------+
| [뒤로] 알림 |
+----------------------------------+
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님의 | |
| | 카드를 좋아합니다. | |
| | 2시간 전 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님을 | |
| | 팔로우했습니다. | |
| | 5시간 전 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [시스템 아이콘] | |
| | 회원님의 카드가 인기 카드에 | |
| | 선정되었습니다. | |
| | 어제 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님의 | |
| | 카드에 댓글을 남겼습니다. | |
| | 어제 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름]님이 회원님의 | |
| | 카드를 공유했습니다. | |
| | 2일 전 | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
```
## 3. 카드 보관함 화면
```
+----------------------------------+
| [뒤로] 보관함 |
+----------------------------------+
| |
| +----------------------------+ |
| | 보관함 필터 | |
| | | |
| | [전체] [생성] [저장] [좋아요] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 정렬 기준 | |
| | | |
| | [최신순 ▼] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카드 보기 방식 | |
| | | |
| | [그리드 ◉] [리스트 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | [그리드 형태로 카드 표시] | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | 1 | | 2 | | 3 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | 4 | | 5 | | 6 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | 7 | | 8 | | 9 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
```
## 4. 설정 화면
```
+----------------------------------+
| [뒤로] 설정 |
+----------------------------------+
| |
| +----------------------------+ |
| | 계정 설정 | |
| | | |
| | 프로필 편집 > | |
| | 비밀번호 변경 > | |
| | 개인정보 설정 > | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 알림 설정 | |
| | | |
| | 푸시 알림 [켜기 ◉] | |
| | 이메일 알림 [켜기 ◯] | |
| | 알림 유형 설정 > | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 앱 설정 | |
| | | |
| | 테마 [라이트 ▼] | |
| | 언어 [한국어 ▼] | |
| | 자동 재생 [켜기 ◉] | |
| | 데이터 사용 > | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 지원 및 정보 | |
| | | |
| | 도움말 센터 > | |
| | 이용약관 > | |
| | 개인정보처리방침 > | |
| | 앱 버전 v1.0.0 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | 로그아웃 | |
| | | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | 계정 삭제 | |
| | | |
| +----------------------------+ |
| |
+----------------------------------+
```
## 5. 카드 공유 화면
```
+----------------------------------+
| [뒤로] 카드 공유 |
+----------------------------------+
| |
| +----------------------------+ |
| | | |
| | [카드 미리보기] | |
| | | |
| +----------------------------+ |
| |
| 공유 옵션: |
| |
| +----------------------------+ |
| | 소셜 미디어 | |
| | | |
| | [인스타] [페이스북] [트위터] | |
| | [카카오] [라인] [기타] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 직접 공유 | |
| | | |
| | [링크 복사] [QR 코드] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 공유 설정 | |
| | | |
| | 공개 범위: | |
| | [전체 공개 ◉] [친구만 ◯] | |
| | | |
| | 댓글 허용: | |
| | [허용 ◉] [비허용 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | 공유하기 | |
| | | |
| +----------------------------+ |
| |
+----------------------------------+
```
## 6. 댓글 화면
```
+----------------------------------+
| [뒤로] 댓글 (23) |
+----------------------------------+
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | 정말 멋진 카드네요! 저도 | |
| | 이런 카드 만들고 싶어요. | |
| | 2시간 전 [좋아요] [답글] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | 어떤 도구로 만드셨나요? | |
| | 5시간 전 [좋아요] [답글] | |
| | | |
| | +------------------------+| |
| | | [사용자 아이콘] || |
| | | [작성자 이름] || |
| | | Zellyy 앱으로 만들었어요!|| |
| | | 3시간 전 [좋아요] || |
| | +------------------------+| |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | 색상 조합이 정말 좋네요. | |
| | 어제 [좋아요] [답글] | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| +----------------------------+ |
| | [댓글 입력] [전송] | |
| +----------------------------+ |
+----------------------------------+
```
## 7. 카드 템플릿 선택 화면
```
+----------------------------------+
| [뒤로] 템플릿 선택 |
+----------------------------------+
| |
| +----------------------------+ |
| | 템플릿 카테고리 | |
| | | |
| | [전체] [인기] [최신] [저장됨] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | T1 | | T2 | | T3 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | T4 | | T5 | | T6 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| | +-----+ +-----+ +-----+ | |
| | | | | | | | | |
| | | T7 | | T8 | | T9 | | |
| | | | | | | | | |
| | +-----+ +-----+ +-----+ | |
| | | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [빈 카드] [선택하기] |
+----------------------------------+
```
## 8. 팔로워/팔로잉 화면
```
+----------------------------------+
| [뒤로] 팔로워 (125) |
+----------------------------------+
| |
| +----------------------------+ |
| | [검색어 입력] [검색] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | [사용자 아이콘] | |
| | [사용자 이름] | |
| | [사용자 소개] | |
| | [팔로우 중 ◉] [팔로우 ◯] | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
```
## 디자인 노트
### 1. 온보딩 화면
- 사용자가 앱을 처음 실행할 때 핵심 기능을 소개하는 화면
- 간결한 일러스트레이션과 짧은 텍스트로 핵심 기능 소개
- 최대 4개 화면으로 제한하여 사용자 피로도 최소화
- 건너뛰기 옵션 제공으로 사용자 선택권 보장
### 2. 알림 화면
- 사용자 활동과 관련된 모든 알림을 시간순으로 표시
- 알림 유형별 아이콘으로 시각적 구분 제공
- 각 알림은 관련 화면으로 직접 이동할 수 있는 링크 역할
- 읽지 않은 알림은 시각적으로 구분 (배경색 또는 표시)
### 3. 카드 보관함
- 사용자가 생성, 저장, 좋아요한 모든 카드를 관리하는 중앙 허브
- 필터링과 정렬 옵션으로 원하는 카드 쉽게 찾기 가능
- 그리드/리스트 뷰 전환으로 사용자 선호에 맞는 보기 방식 제공
- 길게 누르기로 다중 선택 및 일괄 작업 지원 (삭제, 공유 등)
### 4. 설정 화면
- 논리적으로 그룹화된 설정 옵션으로 쉬운 탐색
- 토글 스위치와 드롭다운 메뉴로 직관적인 조작
- 중요 설정(로그아웃, 계정 삭제)은 시각적으로 분리하여 실수 방지
- 각 설정 항목은 충분한 터치 영역 확보
### 5. 접근성 고려사항
- 모든 인터랙티브 요소는 최소 44x44dp 크기 유지
- 색상만으로 정보를 구분하지 않고 아이콘, 텍스트 등 보조 요소 활용
- 스크린 리더 호환성을 위한 적절한 레이블 제공
- 키보드 네비게이션 지원으로 모든 기능 접근 가능

362
ZELLYY/zellyy note/03_UI_UX_설계/UI_와이어프레임_핵심화면.md Normal file
View File

@@ -0,0 +1,362 @@
# Zellyy - UI 와이어프레임 (핵심 화면)
## 1. 로그인/회원가입 화면
```
+----------------------------------+
| |
| [로고 이미지] |
| |
| ZELLYY |
| |
+----------------------------------+
| |
| +----------------------------+ |
| | 이메일 주소 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 로그인 | |
| +----------------------------+ |
| |
| 비밀번호를 잊으셨나요? [찾기] |
| |
| --------- 또는 --------- |
| |
| +----------------------------+ |
| | 소셜 로그인 버튼 | |
| +----------------------------+ |
| |
| 계정이 없으신가요? [회원가입] |
| |
+----------------------------------+
+----------------------------------+
| |
| 회원가입 화면 |
| |
+----------------------------------+
| |
| +----------------------------+ |
| | 이름 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 이메일 주소 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 확인 입력 | |
| +----------------------------+ |
| |
| [ ] 이용약관에 동의합니다 |
| [ ] 개인정보 처리방침에 동의합니다 |
| |
| +----------------------------+ |
| | 회원가입 | |
| +----------------------------+ |
| |
| 이미 계정이 있으신가요? [로그인] |
| |
+----------------------------------+
```
## 2. 메인 대시보드 화면
```
+----------------------------------+
| [메뉴] 대시보드 [알림] |
+----------------------------------+
| |
| 안녕하세요, [사용자 이름]님! |
| |
| +----------------------------+ |
| | 카드 생성하기 | |
| | | |
| | [+ 새 카드 만들기] | |
| | | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 최근 생성한 카드 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [카드 내용 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [카드 내용 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 인기 있는 카드 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [인기 카드 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [인기 카드 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
```
## 3. 카드 생성 화면
```
+----------------------------------+
| [뒤로] 카드 생성 [저장] |
+----------------------------------+
| |
| +----------------------------+ |
| | | |
| | | |
| | | |
| | [카드 편집 영역] | |
| | | |
| | | |
| | | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 배경색 선택 | |
| | [색상1] [색상2] [색상3] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 텍스트 스타일 | |
| | [B] [I] [U] [A] [크기▼] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 텍스트 색상 | |
| | [색상1] [색상2] [색상3] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 태그 추가 | |
| | [입력 필드] [추가] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 공개 설정 | |
| | [공개 ◯] [비공개 ◉] | |
| +----------------------------+ |
| |
+----------------------------------+
| [템플릿] [텍스트] [이미지] [공유] |
+----------------------------------+
```
## 4. 카드 상세 화면
```
+----------------------------------+
| [뒤로] 카드 상세 [메뉴] |
+----------------------------------+
| |
| +----------------------------+ |
| | | |
| | | |
| | | |
| | [카드 내용 표시] | |
| | | |
| | | |
| | | |
| +----------------------------+ |
| |
| 작성자: [사용자 이름] |
| 작성일: 2025년 2월 27일 |
| 태그: #태그1 #태그2 |
| |
| +----------------------------+ |
| | 공유 정보 | |
| | 조회수: 125회 | |
| | 좋아요: 45개 | |
| | 공유: 12회 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 관련 카드 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [관련 카드 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [관련 카드 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| +----------------------------+ |
| |
+----------------------------------+
| [좋아요] [댓글] [저장] [공유] |
+----------------------------------+
```
## 5. 검색 화면
```
+----------------------------------+
| [뒤로] 검색 |
+----------------------------------+
| |
| +----------------------------+ |
| | [검색어 입력] [검색] | |
| +----------------------------+ |
| |
| 인기 검색어: |
| #여행 #요리 #독서 #영화 #음악 |
| |
| +----------------------------+ |
| | 검색 필터 | |
| | | |
| | [✓] 전체 | |
| | [ ] 카드 | |
| | [ ] 사용자 | |
| | [ ] 태그 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 검색 결과 | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [검색 결과 1] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [검색 결과 2] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | +---------------------+ | |
| | | | | |
| | | [검색 결과 3] | | |
| | | | | |
| | +---------------------+ | |
| | | |
| | [더 불러오기] | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
```
## 6. 프로필 화면
```
+----------------------------------+
| [뒤로] 내 프로필 [설정] |
+----------------------------------+
| |
| [프로필 이미지] |
| [사용자 이름] |
| [사용자 소개] |
| |
| 팔로워: 125 | 팔로잉: 78 |
| |
| +----------------------------+ |
| | 내 통계 | |
| | | |
| | 카드: 45개 | |
| | 좋아요 받은 수: 230개 | |
| | 조회수: 1,250회 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 내 카드 | |
| | | |
| | [그리드 형태로 카드 표시] | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 저장한 카드 | |
| | | |
| | [그리드 형태로 카드 표시] | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [검색] [+] [보관함] [프로필] |
+----------------------------------+
```
## 디자인 노트
### 1. 색상 팔레트
- **주요 색상**: #4A6FFF (파란색) - 앱의 주요 브랜드 색상
- **보조 색상**: #FF6B6B (빨간색) - 액션 버튼, 알림 등
- **중립 색상**: #F8F9FA ~ #212529 - 배경, 텍스트 등
- **기능적 색상**:
- 성공: #40C057 - 성공 메시지, 완료 상태
- 경고: #FD7E14 - 주의 필요 상태
- 오류: #FA5252 - 오류 메시지, 실패 상태
- 정보: #339AF0 - 정보성 메시지
### 2. 타이포그래피
- **주요 폰트**:
- iOS: San Francisco
- Android: Roboto
- 웹: Inter 또는 시스템 기본 글꼴
- **크기 계층**:
- 헤더 1: 24sp/px
- 헤더 2: 20sp/px
- 헤더 3: 18sp/px
- 본문 텍스트: 16sp/px
- 보조 텍스트: 14sp/px
- 작은 텍스트: 12sp/px
### 3. 아이콘 및 시각적 요소
- 라인 스타일의 심플한 아이콘 사용
- 카드는 기본적으로 정사각형 형태 (1:1 비율)
- 그리드 뷰에서는 화면 너비에 따라 2열 또는 3열로 표시
- 카드 간 간격: 16px
### 4. 사용자 경험 고려사항
- 한 손 조작을 위한 하단 탭 바 디자인
- 카드 생성을 위한 플로팅 액션 버튼(+)
- 카드 스와이프 제스처로 추가 작업 접근 (수정, 삭제 등)
- 화면 전환: 부드러운 슬라이드 또는 페이드 효과
### 5. 접근성 고려사항
- 텍스트와 배경 간 최소 대비율: 4.5:1
- 중요 텍스트와 배경 간 최소 대비율: 7:1
- 최소 터치 영역: 44px x 44px
- 터치 요소 간 최소 간격: 8px
- 다크 모드 지원

39
ZELLYY/zellyy note/03_UI_UX_설계/index.md Normal file
View File

@@ -0,0 +1,39 @@
# ZELLYY UI/UX 설계
## 목차
1. [UI/UX 가이드라인](UI_UX_가이드라인.md)
2. [UI 와이어프레임 핵심화면](1.%20Project/2.%20ZELLYY/젤리의%20노트/03_UI_UX_설계/UI_와이어프레임_핵심화면.md)
3. [UI 와이어프레임 추가화면](1.%20Project/2.%20ZELLYY/젤리의%20노트/03_UI_UX_설계/UI_와이어프레임_추가화면.md)
4. [사용자 스토리](1.%20Project/2.%20ZELLYY/젤리의%20노트/03_UI_UX_설계/사용자_스토리.md)
5. [사용자 페르소나](1.%20Project/2.%20ZELLYY/젤리의%20노트/03_UI_UX_설계/사용자_페르소나.md)
## UI/UX 설계 개요
ZELLYY 프로젝트의 UI/UX 설계는 사용자 중심 디자인 원칙을 기반으로, 직관적이고 효율적인 사용자 경험을 제공하는 것을 목표로 합니다. 모바일 환경에 최적화된 인터페이스와 워크플로우를 설계하여, 사용자가 최소한의 단계로 원하는 작업을 완료할 수 있도록 합니다.
## 주요 문서
- **UI/UX 가이드라인**: 디자인 원칙, 색상 팔레트, 타이포그래피, 컴포넌트 등 디자인 시스템을 정의한 문서
- **UI 와이어프레임 핵심화면**: 앱의 핵심 화면(홈, 에디터, 갤러리 등)의 와이어프레임
- **UI 와이어프레임 추가화면**: 보조 화면(설정, 프로필, 알림 등)의 와이어프레임
- **사용자 스토리**: 사용자 관점에서의 주요 기능 및 가치 정의
- **사용자 페르소나**: ZELLYY의 주요 타겟 사용자 유형과 특성
## 디자인 원칙
1. **단순함(Simplicity)**: 복잡한 기능을 단순한 인터페이스로 제공하여 사용자의 인지 부하 최소화
2. **직관성(Intuitiveness)**: 사용자가 별도의 학습 없이도 앱을 사용할 수 있도록 직관적인 디자인 적용
3. **효율성(Efficiency)**: 최소한의 탭과 제스처로 작업을 완료할 수 있는 효율적인 워크플로우 설계
4. **일관성(Consistency)**: 모든 화면과 기능에서 일관된 디자인 언어와 상호작용 패턴 유지
5. **피드백(Feedback)**: 사용자 행동에 대한 명확한 시각적, 촉각적 피드백 제공
## 디자인 프로세스
1. **리서치 및 분석**: 사용자 니즈, 경쟁 앱 분석, 트렌드 조사
2. **아이디어 발상**: 디자인 컨셉 및 방향성 설정
3. **와이어프레임 제작**: 주요 화면 및 사용자 흐름 설계
4. **프로토타입 개발**: 인터랙티브 프로토타입 제작
5. **사용성 테스트**: 실제 사용자 대상 테스트 및 피드백 수집
6. **디자인 개선**: 테스트 결과를 반영한 디자인 개선
7. **최종 디자인 전달**: 개발팀에 최종 디자인 및 가이드라인 전달

273
ZELLYY/zellyy note/03_UI_UX_설계/사용자_스토리.md Normal file
View File

@@ -0,0 +1,273 @@
# Zellyy 사용자 스토리
## 1. 사용자 등록 및 온보딩
### 1.1 신규 사용자 등록
- **스토리**: 사용자로서, 나는 앱에 가입하여 개인 계정을 만들고 싶다.
- **인수 기준**:
- 이메일, 소셜 미디어 계정(구글, 페이스북, 애플)으로 가입 가능
- 필수 정보(이름, 이메일, 비밀번호) 입력 후 계정 생성
- 개인정보 처리방침 및 이용약관 동의 절차 포함
- 가입 완료 후 확인 이메일 발송
### 1.2 온보딩 경험
- **스토리**: 신규 사용자로서, 나는 앱의 주요 기능을 빠르게 이해하고 사용 방법을 배우고 싶다.
- **인수 기준**:
- 핵심 기능을 소개하는 4단계 이하의 온보딩 화면 제공
- 각 화면은 하나의 핵심 기능에 집중하여 설명
- 온보딩 건너뛰기 옵션 제공
- 마지막 단계에서 사용자 프로필 설정 안내
### 1.3 로그인 및 인증
- **스토리**: 기존 사용자로서, 나는 쉽고 안전하게 내 계정에 로그인하고 싶다.
- **인수 기준**:
- 이메일/비밀번호 또는 소셜 미디어 계정으로 로그인
- 비밀번호 재설정 기능 제공
- 생체인식(지문, 얼굴인식) 로그인 지원
- 자동 로그인 옵션 제공
## 2. 카드 생성 및 편집
### 2.1 새 카드 생성
- **스토리**: 사용자로서, 나는 새로운 카드를 쉽고 빠르게 생성하고 싶다.
- **인수 기준**:
- 홈 화면에서 1-2단계 내에 카드 생성 시작 가능
- 빈 카드 또는 템플릿 선택 옵션 제공
- 카드 생성 중 자동 저장 기능
- 카드 생성 취소 시 확인 메시지 표시
### 2.2 템플릿 사용
- **스토리**: 사용자로서, 나는 다양한 템플릿을 활용해 전문적인 카드를 빠르게 만들고 싶다.
- **인수 기준**:
- 카테고리별로 정리된 템플릿 라이브러리 제공
- 인기/최신/저장된 템플릿 필터링 옵션
- 템플릿 미리보기 및 상세 정보 확인 가능
- 선택한 템플릿 기반으로 쉽게 커스터마이징 가능
### 2.3 텍스트 편집
- **스토리**: 사용자로서, 나는 카드의 텍스트를 내 필요에 맞게 편집하고 스타일링하고 싶다.
- **인수 기준**:
- 텍스트 추가, 수정, 삭제 기능
- 글꼴, 크기, 색상, 정렬, 강조(굵게, 기울임, 밑줄) 옵션
- 텍스트 블록 이동 및 크기 조절 가능
- 여러 텍스트 스타일 프리셋 제공
### 2.4 시각적 요소 편집
- **스토리**: 사용자로서, 나는 카드의 배경, 색상, 이미지 등을 조정하여 시각적으로 매력적인 카드를 만들고 싶다.
- **인수 기준**:
- 다양한 배경 색상, 그라데이션, 패턴 옵션
- 이미지 추가, 크기 조절, 필터 적용 기능
- 아이콘 및 스티커 라이브러리 제공
- 레이아웃 조정 및 요소 정렬 도구
### 2.5 카드 저장 및 관리
- **스토리**: 사용자로서, 나는 내가 만든 카드를 저장하고 나중에 쉽게 찾아 편집하고 싶다.
- **인수 기준**:
- 카드 제목 및 태그 설정 기능
- 카드 저장 시 성공 메시지 표시
- 저장된 카드는 보관함에서 확인 가능
- 카드 복제, 이동, 삭제 기능 제공
## 3. 카드 공유 및 소셜 기능
### 3.1 카드 공유
- **스토리**: 사용자로서, 나는 내가 만든 카드를 다양한 플랫폼에 쉽게 공유하고 싶다.
- **인수 기준**:
- 주요 소셜 미디어 플랫폼으로 직접 공유 기능
- 링크 복사 및 QR 코드 생성 옵션
- 이미지 형식으로 저장 기능
- 공유 시 공개 범위 설정 가능
### 3.2 공개 설정
- **스토리**: 사용자로서, 나는 내 카드의 공개 범위를 제어하고 싶다.
- **인수 기준**:
- 전체 공개/친구만/비공개 옵션 제공
- 카드별로 다른 공개 설정 가능
- 공개 설정 변경 시 확인 메시지 표시
- 기본 공개 설정 지정 기능
### 3.3 좋아요 및 댓글
- **스토리**: 사용자로서, 나는 다른 사용자의 카드에 반응하고 소통하고 싶다.
- **인수 기준**:
- 카드에 좋아요 표시 기능
- 댓글 작성, 수정, 삭제 기능
- 댓글에 답글 달기 기능
- 부적절한 댓글 신고 옵션
### 3.4 팔로우 기능
- **스토리**: 사용자로서, 나는 관심 있는 사용자를 팔로우하여 그들의 콘텐츠를 지속적으로 확인하고 싶다.
- **인수 기준**:
- 사용자 프로필에서 팔로우/언팔로우 기능
- 팔로잉/팔로워 목록 확인 가능
- 팔로우한 사용자의 새 콘텐츠 알림 설정
- 팔로우 추천 기능
## 4. 탐색 및 발견
### 4.1 카드 검색
- **스토리**: 사용자로서, 나는 특정 주제나 키워드에 관한 카드를 검색하고 싶다.
- **인수 기준**:
- 키워드, 태그, 사용자명으로 검색 가능
- 검색 결과 필터링 및 정렬 옵션
- 최근 검색어 기록 및 인기 검색어 표시
- 검색 중 자동 완성 제안
### 4.2 탐색 피드
- **스토리**: 사용자로서, 나는 새롭고 인기 있는 카드를 발견하여 영감을 얻고 싶다.
- **인수 기준**:
- 개인화된 추천 카드 피드 제공
- 인기 카드, 최신 카드, 트렌딩 카드 섹션
- 카테고리별 탐색 옵션
- 무한 스크롤로 지속적인 콘텐츠 로딩
### 4.3 컬렉션 및 북마크
- **스토리**: 사용자로서, 나는 마음에 드는 카드를 저장하고 컬렉션으로 정리하고 싶다.
- **인수 기준**:
- 카드 저장(북마크) 기능
- 사용자 정의 컬렉션 생성 및 관리
- 저장된 카드를 컬렉션에 추가/제거
- 컬렉션 공개/비공개 설정 옵션
## 5. 사용자 프로필 및 설정
### 5.1 프로필 관리
- **스토리**: 사용자로서, 나는 내 프로필을 관리하고 개인화하고 싶다.
- **인수 기준**:
- 프로필 사진, 이름, 소개 편집 기능
- 내가 만든 카드 및 저장한 카드 확인
- 팔로워/팔로잉 관리
- 프로필 통계(카드 수, 좋아요 수 등) 표시
### 5.2 알림 설정
- **스토리**: 사용자로서, 나는 중요한 활동에 대한 알림을 받고 관리하고 싶다.
- **인수 기준**:
- 알림 유형별(좋아요, 댓글, 팔로우 등) 설정
- 푸시 알림 및 이메일 알림 옵션
- 방해 금지 시간 설정
- 알림 센터에서 모든 알림 확인 및 관리
### 5.3 앱 설정
- **스토리**: 사용자로서, 나는 앱 경험을 내 선호도에 맞게 조정하고 싶다.
- **인수 기준**:
- 테마 설정(라이트/다크 모드)
- 언어 설정
- 데이터 사용 및 저장 옵션
- 접근성 설정
### 5.4 계정 관리
- **스토리**: 사용자로서, 나는 내 계정 정보를 안전하게 관리하고 싶다.
- **인수 기준**:
- 비밀번호 변경 기능
- 연결된 소셜 계정 관리
- 개인정보 다운로드 옵션
- 계정 삭제 기능
## 6. 고급 기능 및 프리미엄
### 6.1 고급 디자인 도구
- **스토리**: 프리미엄 사용자로서, 나는 더 다양하고 고급스러운 디자인 옵션을 사용하고 싶다.
- **인수 기준**:
- 확장된 템플릿 및 요소 라이브러리
- 고급 텍스트 효과 및 애니메이션
- 커스텀 폰트 업로드 기능
- 레이어 관리 및 고급 편집 도구
### 6.2 협업 기능
- **스토리**: 팀 사용자로서, 나는 팀원들과 함께 카드를 만들고 관리하고 싶다.
- **인수 기준**:
- 공동 편집 기능
- 팀 워크스페이스 생성 및 관리
- 역할 및 권한 설정
- 변경 이력 및 버전 관리
### 6.3 분석 및 인사이트
- **스토리**: 콘텐츠 크리에이터로서, 나는 내 카드의 성과와 사용자 반응을 분석하고 싶다.
- **인수 기준**:
- 카드별 조회수, 좋아요, 공유 통계
- 시간대별 참여율 그래프
- 인구통계학적 데이터(가능한 경우)
- 성과 개선을 위한 인사이트 제공
### 6.4 구독 관리
- **스토리**: 사용자로서, 나는 프리미엄 구독을 쉽게 시작, 관리, 취소할 수 있기를 원한다.
- **인수 기준**:
- 명확한 요금제 및 혜택 정보
- 간편한 결제 프로세스
- 구독 상태 및 갱신일 확인
- 구독 변경 및 취소 옵션
## 7. 접근성 및 다국어 지원
### 7.1 접근성 기능
- **스토리**: 장애가 있는 사용자로서, 나는 앱의 모든 기능을 불편 없이 사용하고 싶다.
- **인수 기준**:
- 스크린 리더 호환성
- 키보드 네비게이션 지원
- 고대비 모드 및 텍스트 크기 조정
- 색상 구분 없이 정보 인식 가능
### 7.2 다국어 지원
- **스토리**: 비영어권 사용자로서, 나는 내 모국어로 앱을 사용하고 싶다.
- **인수 기준**:
- 주요 언어(한국어, 영어, 일본어, 중국어 등) 지원
- 언어별 적절한 폰트 및 레이아웃 조정
- 지역에 맞는 날짜, 시간, 숫자 형식
- 사용자 언어 자동 감지 및 수동 설정 옵션
## 8. 성능 및 안정성
### 8.1 오프라인 기능
- **스토리**: 사용자로서, 나는 인터넷 연결이 불안정할 때도 기본적인 기능을 사용하고 싶다.
- **인수 기준**:
- 오프라인 상태에서 저장된 카드 확인 가능
- 오프라인에서 새 카드 작성 및 임시 저장
- 연결 복구 시 자동 동기화
- 오프라인 상태 알림 및 가이드
### 8.2 성능 최적화
- **스토리**: 사용자로서, 나는 앱이 빠르고 부드럽게 작동하기를 원한다.
- **인수 기준**:
- 빠른 앱 시작 및 화면 전환
- 이미지 및 콘텐츠 최적화 로딩
- 배터리 효율적 사용
- 다양한 기기 성능에 맞는 최적화
### 8.3 데이터 백업 및 복구
- **스토리**: 사용자로서, 나는 내 데이터가 안전하게 백업되고 필요시 복구할 수 있기를 원한다.
- **인수 기준**:
- 클라우드 자동 백업 기능
- 수동 백업 옵션
- 기기 변경 시 데이터 이전 가이드
- 실수로 삭제한 콘텐츠 복구 옵션
## 우선순위 매트릭스
### 높은 가치 / 높은 우선순위
1. 새 카드 생성 (2.1)
2. 템플릿 사용 (2.2)
3. 텍스트 편집 (2.3)
4. 시각적 요소 편집 (2.4)
5. 카드 공유 (3.1)
6. 카드 저장 및 관리 (2.5)
### 높은 가치 / 중간 우선순위
1. 신규 사용자 등록 (1.1)
2. 로그인 및 인증 (1.3)
3. 탐색 피드 (4.2)
4. 카드 검색 (4.1)
5. 프로필 관리 (5.1)
### 중간 가치 / 중간 우선순위
1. 온보딩 경험 (1.2)
2. 좋아요 및 댓글 (3.3)
3. 공개 설정 (3.2)
4. 컬렉션 및 북마크 (4.3)
5. 알림 설정 (5.2)
### 향후 개발 고려 사항
1. 고급 디자인 도구 (6.1)
2. 협업 기능 (6.2)
3. 분석 및 인사이트 (6.3)
4. 다국어 지원 (7.2)
이 사용자 스토리는 Zellyy 앱의 개발 및 개선 과정에서 사용자 중심 접근 방식을 유지하기 위한 기준으로 활용됩니다. 각 스토리는 실제 사용자의 니즈와 목표를 반영하며, 인수 기준은 해당 기능이 성공적으로 구현되었는지 평가하는 기준이 됩니다.

172
ZELLYY/zellyy note/03_UI_UX_설계/사용자_페르소나.md Normal file
View File

@@ -0,0 +1,172 @@
# Zellyy 사용자 페르소나
## 페르소나 1: 콘텐츠 크리에이터 지민
![페르소나 이미지: 20대 여성]
### 기본 정보
- **이름**: 김지민
- **나이**: 27세
- **직업**: 프리랜서 콘텐츠 크리에이터
- **거주지**: 서울시 마포구
- **기술 수준**: 중상 (디지털 네이티브, 다양한 앱 사용에 능숙)
### 배경 및 상황
지민은 인스타그램, 유튜브 등에서 라이프스타일 콘텐츠를 제작하는 프리랜서입니다. 주로 일상, 여행, 독서 등의 콘텐츠를 만들고 있으며, 팔로워와 소통하는 것을 중요하게 생각합니다. 항상 새로운 아이디어를 찾고 있으며, 자신만의 독특한 콘텐츠를 만들기 위해 노력합니다.
### 목표와 동기
- 자신의 생각과 아이디어를 시각적으로 매력있게 표현하고 싶음
- 팔로워들과 더 효과적으로 소통할 수 있는 방법을 찾고 있음
- 다른 크리에이터의 아이디어를 탐색하고 영감을 얻고 싶음
- 자신의 브랜드 아이덴티티를 일관되게 유지하면서 콘텐츠 제작 시간 단축 희망
### 좌절 및 고충
- 콘텐츠 아이디어를 정리하고 시각화하는 데 많은 시간이 소요됨
- 여러 앱을 오가며 콘텐츠를 제작하는 과정이 번거로움
- 기존 디자인 도구는 배우기 어렵고 복잡함
- 모바일에서 고품질 콘텐츠를 제작하기 어려움
### 행동 패턴
- 하루에 3-4시간을 콘텐츠 기획 및 제작에 사용
- 주로 스마트폰으로 작업하며, 이동 중에도 아이디어를 기록
- 다양한 소셜 미디어 플랫폼을 활발히 사용
- 새로운 앱과 도구를 빠르게 시도하고 적응함
### Zellyy 사용 시나리오
지민은 Zellyy를 사용해 자신의 여행 경험, 책 리뷰, 일상 팁 등을 시각적으로 매력적인 카드로 만들어 인스타그램 스토리나 피드에 공유합니다. 템플릿을 활용해 시간을 절약하면서도 자신만의 스타일로 커스터마이징하여 브랜드 일관성을 유지합니다. 또한 다른 크리에이터들의 카드를 탐색하며 새로운 아이디어와 영감을 얻습니다.
---
## 페르소나 2: 직장인 현우
![페르소나 이미지: 30대 남성]
### 기본 정보
- **이름**: 이현우
- **나이**: 34세
- **직업**: IT 기업 프로젝트 매니저
- **거주지**: 경기도 분당구
- **기술 수준**: 중 (업무용 앱에 익숙하지만 창의적 도구 사용 경험 적음)
### 배경 및 상황
현우는 바쁜 IT 기업에서 프로젝트 매니저로 일하고 있습니다. 업무 중 많은 아이디어와 정보를 정리하고 팀원들과 공유해야 합니다. 프레젠테이션과 회의 자료를 자주 준비하지만, 디자인 능력이 부족해 시각적으로 매력적인 자료를 만드는 데 어려움을 겪습니다. 퇴근 후에는 취미 생활과 자기 계발에 관심이 많습니다.
### 목표와 동기
- 업무 아이디어와 정보를 효과적으로 정리하고 공유하고 싶음
- 디자인 전문가가 아니어도 전문적으로 보이는 자료를 만들고 싶음
- 개인 생활에서 배운 내용이나 인사이트를 기록하고 정리하고 싶음
- 시간을 효율적으로 사용하면서 더 나은 결과물을 만들고 싶음
### 좌절 및 고충
- 디자인 도구 사용이 어렵고 시간이 많이 소요됨
- 기존 노트 앱은 시각적 표현이 제한적임
- 여러 도구를 사용하다 보니 정보가 분산되어 관리가 어려움
- 모바일에서 작업할 때 PC만큼 효율적이지 못함
### 행동 패턴
- 출퇴근 시간에 모바일로 정보 소비 및 간단한 작업
- 주로 저녁 시간에 다음 날 회의나 발표 자료 준비
- 주말에는 자기 계발 관련 내용 정리 및 학습
- 효율성을 중시하며 시간 절약 가능한 도구 선호
### Zellyy 사용 시나리오
현우는 Zellyy를 사용해 프로젝트 아이디어, 회의 요약, 팀 공지사항 등을 시각적으로 정리합니다. 템플릿을 활용해 빠르게 전문적인 카드를 만들고 팀 채팅방이나 이메일로 공유합니다. 또한 개인적으로 관심 있는 주제(투자, 건강, 취미 등)에 대한 정보를 카드로 만들어 저장하고, 필요할 때 쉽게 찾아볼 수 있습니다.
---
## 페르소나 3: 대학생 수진
![페르소나 이미지: 20대 초반 여성]
### 기본 정보
- **이름**: 박수진
- **나이**: 22세
- **직업**: 대학생 (디자인학과)
- **거주지**: 서울시 관악구
- **기술 수준**: 중상 (디자인 도구 사용 경험 있음, 새로운 앱 적응 빠름)
### 배경 및 상황
수진은 디자인을 전공하는 대학생으로, 학업과 함께 다양한 동아리 활동에 참여하고 있습니다. 수업 노트, 프로젝트 아이디어, 영감을 주는 디자인 등을 수집하고 정리하는 것을 좋아합니다. 소셜 미디어를 활발히 사용하며 친구들과 아이디어를 공유하고 소통합니다. 제한된 학생 예산으로 무료 또는 저렴한 도구를 선호합니다.
### 목표와 동기
- 수업 내용과 프로젝트 아이디어를 시각적으로 정리하고 싶음
- 포트폴리오용 작품을 쉽게 만들고 공유하고 싶음
- 영감을 주는 디자인과 아이디어를 수집하고 정리하고 싶음
- 동아리 활동에 필요한 포스터, 공지사항 등을 쉽게 만들고 싶음
### 좌절 및 고충
- 전문 디자인 소프트웨어는 비용이 부담스럽고 학습 곡선이 가파름
- 모바일에서 작업할 때 기능 제한으로 불편함
- 다양한 플랫폼에 맞는 콘텐츠를 각각 제작해야 하는 번거로움
- 아이디어는 많지만 실현하는 데 시간과 도구의 제약이 있음
### 행동 패턴
- 수업 중이나 이동 중에 스마트폰으로 아이디어 기록
- 주로 밤에 프로젝트 작업이나 창작 활동
- 인스타그램, 핀터레스트 등에서 디자인 영감 탐색
- 친구들과 온라인으로 아이디어와 작업물 공유
### Zellyy 사용 시나리오
수진은 Zellyy를 사용해 수업 노트, 프로젝트 아이디어, 무드보드 등을 시각적인 카드로 만들어 정리합니다. 동아리 행사 포스터나 공지사항을 템플릿을 활용해 빠르게 제작하고 SNS에 공유합니다. 또한 다른 디자이너들의 카드를 탐색하며 영감을 얻고, 자신의 디자인 작업을 카드로 만들어 미니 포트폴리오처럼 활용합니다.
---
## 페르소나 4: 소상공인 민석
![페르소나 이미지: 40대 남성]
### 기본 정보
- **이름**: 강민석
- **나이**: 42세
- **직업**: 카페 운영자
- **거주지**: 부산시 해운대구
- **기술 수준**: 초중 (기본적인 스마트폰 사용은 가능하나 복잡한 앱 사용에 어려움)
### 배경 및 상황
민석은 2년 전부터 작은 카페를 운영하고 있습니다. 소셜 미디어를 통한 홍보의 중요성을 알고 있지만, 디자인 지식이나 기술이 부족해 전문적인 콘텐츠 제작에 어려움을 겪고 있습니다. 메뉴 소개, 이벤트 공지, 영업시간 안내 등의 콘텐츠를 직접 만들고 싶지만, 기존 디자인 도구는 너무 복잡하게 느껴집니다.
### 목표와 동기
- 카페 홍보를 위한 전문적인 이미지와 공지사항을 만들고 싶음
- 복잡한 디자인 도구 없이도 매력적인 콘텐츠를 제작하고 싶음
- 시간을 많이 들이지 않고 효과적인 마케팅 자료를 만들고 싶음
- 고객들에게 일관된 브랜드 이미지를 전달하고 싶음
### 좌절 및 고충
- 디자인 도구 사용법을 배울 시간이 부족함
- 기존 템플릿은 카페 분위기와 맞지 않거나 너무 획일적임
- 디자인 외주는 비용 부담이 큼
- 바쁜 업무 중에 마케팅 콘텐츠 제작까지 하기 어려움
### 행동 패턴
- 주로 영업 준비 시간이나 마감 후 짧은 시간에 콘텐츠 제작
- 스마트폰으로 대부분의 업무와 개인 활동 처리
- 다른 카페의 SNS를 참고하여 아이디어 수집
- 간단하고 직관적인 도구 선호
### Zellyy 사용 시나리오
민석은 Zellyy를 사용해 신메뉴 소개, 영업시간 변경 안내, 이벤트 홍보 등의 카드를 만들어 카페 인스타그램과 카카오톡 채널에 공유합니다. 카페 분위기에 맞는 템플릿을 선택하고 간단히 수정하여 일관된 브랜드 이미지를 유지합니다. 또한 자주 사용하는 디자인 요소를 저장해두고 재활용하여 시간을 절약합니다.
---
## 사용자 페르소나 요약 및 시사점
### 공통 니즈
1. **간편한 디자인 제작**: 모든 페르소나가 복잡한 디자인 도구 없이도 시각적으로 매력적인 콘텐츠를 만들고 싶어함
2. **모바일 최적화**: 이동 중이나 PC가 없는 환경에서도 효율적으로 작업할 수 있는 모바일 경험 중요
3. **시간 절약**: 바쁜 일상 속에서 빠르게 콘텐츠를 제작할 수 있는 템플릿과 도구 필요
4. **공유 용이성**: 다양한 플랫폼에 쉽게 공유할 수 있는 기능 중요
### 차별화된 니즈
1. **콘텐츠 크리에이터(지민)**: 브랜드 일관성 유지와 창의적 커스터마이징 균형
2. **직장인(현우)**: 전문적이고 깔끔한 비즈니스 콘텐츠 제작 및 정보 관리
3. **대학생(수진)**: 다양한 아이디어 수집 및 학업/동아리 활동 지원
4. **소상공인(민석)**: 마케팅 자료의 간편한 제작과 브랜드 이미지 구축
### 디자인 시사점
1. **직관적인 UI/UX**: 다양한 기술 수준의 사용자가 쉽게 사용할 수 있는 인터페이스 설계
2. **다양한 템플릿**: 각 페르소나의 목적에 맞는 다양한 템플릿 제공 (비즈니스, 소셜 미디어, 학업, 마케팅 등)
3. **커스터마이징 옵션**: 템플릿의 편의성과 개인화의 균형 유지
4. **효율적인 워크플로우**: 최소한의 단계로 완성도 높은 결과물 제작 가능하도록 설계
5. **영감 탐색 기능**: 다른 사용자의 콘텐츠를 탐색하고 영감을 얻을 수 있는 커뮤니티 기능
이러한 페르소나 분석을 바탕으로 Zellyy는 다양한 사용자의 니즈를 충족시키는 동시에, 각 사용자 그룹에 특화된 기능과 콘텐츠를 제공하여 차별화된 가치를 전달할 수 있습니다.

53
ZELLYY/zellyy note/03_개발_단계/index.md Normal file
View File

@@ -0,0 +1,53 @@
# ZELLYY 개발 단계
## 목차
1. [개발 로드맵](개발_로드맵.md)
2. [스프린트 계획](스프린트_계획.md)
3. [개발 가이드라인](./개발_가이드라인.md)
4. [테스트 전략](./테스트_전략.md)
## 개발 단계 개요
ZELLYY 프로젝트의 개발 단계에서는 애자일 방법론을 기반으로 2주 단위의 스프린트로 진행합니다. 각 스프린트마다 사용 가능한 기능을 구현하고 테스트하는 방식으로 진행하며, MVP(Minimum Viable Product) 접근법을 통해 핵심 기능을 우선적으로 개발하고, 사용자 피드백을 바탕으로 점진적으로 기능을 확장해 나갈 계획입니다.
## 주요 문서
- **개발 로드맵**: 전체 개발 일정, 마일스톤, 주요 단계별 계획을 정의한 문서
- **스프린트 계획**: 각 스프린트의 목표, 작업 항목, 우선순위를 정의한 문서
- **개발 가이드라인**: 코드 스타일, 아키텍처 패턴, 개발 프로세스 등을 정의한 문서
- **테스트 전략**: 단위 테스트, 통합 테스트, E2E 테스트 등 테스트 방법론을 정의한 문서
## 개발 접근 방식
1. **애자일 개발**: 2주 단위 스프린트로 진행, 지속적인 피드백 및 개선
2. **MVP 우선**: 핵심 기능을 우선적으로 개발하여 빠른 시장 검증
3. **사용자 중심**: 사용자 피드백을 적극 반영한 기능 개발 및 개선
4. **품질 중심**: 자동화된 테스트와 코드 리뷰를 통한 품질 보증
5. **지속적 통합/배포**: CI/CD 파이프라인을 통한 빠른 개발 사이클
## 개발 단계 일정
### 1단계: 기본 인프라 구축 (2024년 1월)
- 개발 환경 설정
- 프로젝트 구조 설정
- 기본 UI 컴포넌트 개발
- 네비게이션 구조 구현
### 2단계: 핵심 기능 개발 (2024년 2-3월)
- 사용자 인증 시스템 구현
- 카드 작성 및 편집 기능 개발
- 기본 스타일링 옵션 구현
- 카드 관리 기능 구현
- 기본 SNS 공유 기능 구현
### 3단계: 베타 테스트 및 개선 (2024년 4-6월)
- 기능 통합 및 안정화
- UI/UX 개선 및 폴리싱
- 베타 테스트 진행
- 피드백 기반 개선
### 4단계: 출시 및 확장 (2024년 7-9월)
- 공식 출시
- 클라우드 동기화 구현
- 프리미엄 기능 개발

265
ZELLYY/zellyy note/03_개발_단계/개발_로드맵.md Normal file
View File

@@ -0,0 +1,265 @@
# ZELLYY 개발 로드맵
## 개발 접근 방식
ZELLYY 프로젝트는 애자일 방법론을 기반으로 개발될 예정입니다. 2주 단위의 스프린트로 진행하며, 각 스프린트마다 사용 가능한 기능을 구현하고 테스트하는 방식으로 진행합니다. MVP(Minimum Viable Product) 접근법을 통해 핵심 기능을 우선적으로 개발하고, 사용자 피드백을 바탕으로 점진적으로 기능을 확장해 나갈 계획입니다.
## 개발 단계
### 1단계: 기획 및 설계 (2023년 Q4)
#### 10월: 요구사항 분석 및 기획
- [x] 사용자 요구사항 수집 및 분석
- [x] 경쟁 앱 분석 및 차별화 전략 수립
- [x] 핵심 기능 정의 및 우선순위 설정
- [x] 사용자 페르소나 및 사용자 여정 맵 작성
#### 11월: UI/UX 설계
- [x] 앱 정보 구조 설계
- [x] 주요 화면 와이어프레임 작성
- [x] 디자인 시스템 구축 (색상, 타이포그래피, 컴포넌트)
- [x] 프로토타입 제작 및 사용성 테스트
#### 12월: 기술 설계
- [x] 시스템 아키텍처 설계
- [x] 데이터베이스 스키마 설계
- [x] API 명세 작성
- [x] 보안 및 개인정보 보호 전략 수립
### 2단계: 모바일 앱 MVP 개발 (2024년 Q1)
#### 1월: 기본 인프라 구축
- [ ] 개발 환경 설정
- [ ] 프로젝트 구조 설정
- [ ] 기본 UI 컴포넌트 개발
- [ ] 네비게이션 구조 구현
#### 2월: 핵심 기능 개발 (1)
- [ ] 사용자 인증 시스템 구현 (이메일, 소셜 로그인)
- [ ] 카드 작성 및 편집 기능 개발
- [ ] 기본 스타일링 옵션 구현 (폰트, 색상, 정렬)
- [ ] 로컬 저장 기능 구현
#### 3월: 핵심 기능 개발 (2)
- [ ] 카드 관리 기능 구현 (목록, 검색, 필터링)
- [ ] 기본 SNS 공유 기능 구현 (인스타그램, 페이스북)
- [ ] 설정 및 프로필 관리 기능 구현
- [ ] 오프라인 모드 지원
### 3단계: 베타 테스트 및 개선 (2024년 Q2)
#### 4월: 베타 버전 완성
- [ ] 기능 통합 및 안정화
- [ ] UI/UX 개선 및 폴리싱
- [ ] 성능 최적화
- [ ] 베타 테스트 환경 구축
#### 5월: 베타 테스트 진행
- [ ] 클로즈드 베타 테스트 진행 (100명 규모)
- [ ] 사용자 피드백 수집 및 분석
- [ ] 버그 수정 및 UI/UX 개선
- [ ] 성능 모니터링 및 최적화
#### 6월: 개선 및 추가 기능 개발
- [ ] 베타 테스트 피드백 기반 개선사항 적용
- [ ] 추가 SNS 플랫폼 지원 (스레드, 트위터)
- [ ] 태그 시스템 구현
- [ ] 앱 안정성 및 성능 최적화
### 4단계: 출시 및 클라우드 동기화 (2024년 Q3)
#### 7월: 공식 출시
- [ ] 앱스토어 및 구글 플레이 스토어 등록
- [ ] 마케팅 캠페인 실행
- [ ] 사용자 지원 시스템 구축
- [ ] 실시간 모니터링 및 이슈 대응
#### 8월: 클라우드 동기화 구현
- [ ] Supabase 연동 및 설정
- [ ] 클라우드 저장 및 동기화 기능 구현
- [ ] 사용자 데이터 마이그레이션 지원
- [ ] 동기화 충돌 해결 메커니즘 구현
#### 9월: 프리미엄 기능 개발
- [ ] 구독 모델 구현 (인앱 결제)
- [ ] 고급 커스터마이징 옵션 개발
- [ ] 워터마크 제거 옵션 구현
- [ ] 프리미엄 사용자 분석 대시보드 개발
### 5단계: 웹 서비스 개발 (2024년 Q4)
#### 10월: 웹 서비스 기본 구조 개발
- [ ] 웹 프론트엔드 프로젝트 설정
- [ ] 사용자 인증 및 기본 UI 구현
- [ ] 반응형 디자인 구현
- [ ] 모바일 앱과의 디자인 일관성 확보
#### 11월: 웹 카드 관리 기능 개발
- [ ] 카드 조회 및 관리 기능 구현
- [ ] 웹용 카드 에디터 개발
- [ ] 모바일-웹 동기화 기능 구현
- [ ] 대량 관리 기능 구현 (웹 전용)
#### 12월: 웹 고급 기능 개발
- [ ] 고급 편집 도구 구현 (웹 전용)
- [ ] 템플릿 갤러리 구현
- [ ] 대시보드 및 통계 기능 개발
- [ ] API 개발 (외부 서비스 연동용)
### 6단계: 커뮤니티 기능 및 확장 (2025년 Q1-Q2)
#### 1-2월: 공개 갤러리 기능 개발
- [ ] 공개 갤러리 UI 구현
- [ ] 카드 공개 설정 및 관리 기능
- [ ] 인기 카드 알고리즘 개발
- [ ] 검색 및 발견 기능 구현
#### 3-4월: 사용자 상호작용 기능 개발
- [ ] 좋아요 및 댓글 기능 구현
- [ ] 사용자 팔로우 시스템 개발
- [ ] 알림 시스템 구현
- [ ] 콘텐츠 신고 및 모더레이션 기능 개발
#### 5-6월: 플랫폼 확장 및 고도화
- [ ] 다국어 지원 구현
- [ ] 고급 분석 및 인사이트 기능 개발
- [ ] API 확장 및 개발자 도구 제공
- [ ] 파트너십 통합 (콘텐츠 제작자, 브랜드 등)
## 개발 팀 구성
### 핵심 팀 (초기 단계)
- **프로젝트 매니저**: 1명 - 전체 프로젝트 조정 및 일정 관리
- **UI/UX 디자이너**: 1명 - 사용자 경험 설계 및 시각적 디자인
- **모바일 개발자**: 2명 - React Native 기반 모바일 앱 개발
- **백엔드 개발자**: 1명 - Supabase 및 서버 기능 개발
- **QA 엔지니어**: 1명 - 품질 보증 및 테스트
### 확장 팀 (후기 단계)
- **웹 프론트엔드 개발자**: 1명 - 웹 서비스 개발
- **DevOps 엔지니어**: 1명 - 인프라 관리 및 배포 자동화
- **마케팅 전문가**: 1명 - 사용자 확보 및 브랜딩 전략
- **콘텐츠 매니저**: 1명 - 공개 갤러리 및 커뮤니티 관리
- **고객 지원 담당자**: 1명 - 사용자 문의 대응 및 지원
## 개발 환경 및 도구
### 개발 환경
- **프론트엔드**: React Native, Redux, TypeScript
- **백엔드**: Supabase, Node.js (필요시)
- **웹 프론트엔드**: React.js, Next.js
- **인프라**: Supabase 자체 호스팅 (Debian 12 서버)
### 개발 도구
- **프로젝트 관리**: Notion, Jira
- **소스 코드 관리**: GitHub
- **CI/CD**: GitHub Actions
- **커뮤니케이션**: Slack, Zoom
- **디자인**: Figma
- **테스트**: Jest, Detox, Cypress
## 품질 보증 전략
### 테스트 전략
- **단위 테스트**: 개별 함수 및 컴포넌트 테스트
- **통합 테스트**: 컴포넌트 간 상호작용 테스트
- **E2E 테스트**: 사용자 시나리오 기반 전체 흐름 테스트
- **성능 테스트**: 로드 테스트 및 스트레스 테스트
- **사용성 테스트**: 실제 사용자 대상 테스트
### 코드 품질 관리
- **코드 리뷰**: 모든 코드 변경에 대한 동료 검토
- **정적 코드 분석**: ESLint, TypeScript
- **코드 컨벤션**: 일관된 코딩 스타일 가이드
- **문서화**: 코드 및 API 문서 자동화
## 위험 관리
### 잠재적 위험 및 대응 전략
1. **기술적 복잡성**
- **위험**: React Native의 네이티브 모듈 통합 문제, 다양한 기기 호환성 이슈
- **대응**: 철저한 테스트, 점진적 기능 구현, 대안 라이브러리 검토
- **완화**: 기술 스파이크를 통한 사전 검증, 경험 있는 개발자 확보
2. **일정 지연**
- **위험**: 기능 구현 복잡성 증가, 예상치 못한 기술적 장애물
- **대응**: 우선순위 재조정, 스프린트 계획 유연성 확보
- **완화**: 버퍼 시간 확보, 주기적 진행 상황 검토
3. **사용자 채택 저조**
- **위험**: 경쟁 앱과의 차별화 부족, 사용자 가치 제안 불명확
- **대응**: 사용자 피드백 기반 개선, 마케팅 전략 조정
- **완화**: 초기 사용자 테스트, 명확한 가치 제안 개발
4. **성능 및 확장성 문제**
- **위험**: 사용자 증가에 따른 성능 저하, 동기화 충돌
- **대응**: 성능 최적화, 아키텍처 개선
- **완화**: 초기부터 확장성 고려한 설계, 성능 테스트 자동화
5. **보안 및 개인정보 이슈**
- **위험**: 데이터 유출, 개인정보 보호 규정 위반
- **대응**: 즉각적인 취약점 패치, 투명한 커뮤니케이션
- **완화**: 정기적인 보안 감사, 개인정보 보호 설계 원칙 적용
## 성공 기준
### 기술적 성공 기준
- 앱 크래시 비율 0.5% 미만
- 평균 앱 로딩 시간 2초 이내
- 카드 저장 및 공유 작업 완료 시간 3초 이내
- 오프라인 모드에서의 완전한 기능성
- 99.9% 이상의 서비스 가용성
### 비즈니스 성공 기준
- 출시 6개월 내 50,000명 이상의 활성 사용자 확보
- 무료 사용자의 5% 이상 유료 구독 전환
- 사용자당 월 평균 10개 이상의 카드 작성
- 작성된 카드의 30% 이상이 SNS에 공유됨
- 앱스토어 평점 4.5/5.0 이상
## 마일스톤 및 주요 일정
### 주요 마일스톤
1. **개념 증명 (PoC)**: 2023년 12월
2. **알파 버전**: 2024년 2월
3. **베타 버전**: 2024년 4월
4. **모바일 앱 출시**: 2024년 7월
5. **클라우드 동기화 및 프리미엄 기능**: 2024년 9월
6. **웹 서비스 출시**: 2024년 12월
7. **커뮤니티 기능 출시**: 2025년 3월
### 주요 일정
- **디자인 시스템 완성**: 2023년 11월 30일
- **기술 아키텍처 확정**: 2023년 12월 15일
- **MVP 개발 완료**: 2024년 3월 31일
- **베타 테스트 시작**: 2024년 4월 15일
- **앱스토어 제출**: 2024년 6월 30일
- **공식 출시 이벤트**: 2024년 7월 15일
- **프리미엄 구독 출시**: 2024년 9월 1일
- **웹 서비스 베타 오픈**: 2024년 11월 15일
## 예산 계획
### 개발 비용
- **인건비**: 핵심 팀 6명 × 12개월 = 약 360,000,000원
- **개발 도구 및 라이선스**: 약 10,000,000원
- **서버 및 인프라**: 약 15,000,000원 (연간)
- **테스트 및 QA**: 약 20,000,000원
### 마케팅 및 운영 비용
- **초기 마케팅 캠페인**: 약 50,000,000원
- **앱스토어 및 플레이스토어 수수료**: 매출의 15-30%
- **사용자 지원 및 운영**: 약 30,000,000원 (연간)
- **콘텐츠 제작 및 파트너십**: 약 25,000,000원
### 총 예상 예산
- **1년차**: 약 510,000,000원
- **2년차**: 약 450,000,000원 (팀 확장 및 운영 비용 포함)
## 결론
ZELLYY 개발 로드맵은 사용자 중심의 접근 방식과 애자일 방법론을 기반으로 설계되었습니다. MVP 접근법을 통해 핵심 기능을 우선적으로 개발하고, 사용자 피드백을 지속적으로 반영하여 서비스를 개선해 나갈 계획입니다.
개발 과정에서 발생할 수 있는 위험을 사전에 식별하고 대응 전략을 마련하여, 프로젝트의 성공적인 완수를 위한 기반을 마련하였습니다. 또한, 명확한 성공 기준을 설정하여 프로젝트의 진행 상황을 객관적으로 평가할 수 있도록 하였습니다.
이 로드맵은 프로젝트의 진행 상황과 사용자 피드백에 따라 유연하게 조정될 수 있으며, 궁극적으로는 사용자들이 자신의 생각과 아이디어를 쉽고 매력적으로 표현할 수 있는 플랫폼을 제공하는 것을 목표로 합니다.

480
ZELLYY/zellyy note/03_개발_단계/스프린트_계획.md Normal file
View File

@@ -0,0 +1,480 @@
# ZELLYY - 스프린트 계획
## 스프린트 개요
ZELLYY 프로젝트는 2주 단위의 스프린트로 개발을 진행합니다. 각 스프린트는 계획, 실행, 리뷰, 회고의 4단계로 구성됩니다. 이 문서는 초기 MVP 개발을 위한 스프린트 계획을 정의합니다.
## 스프린트 일정
### 스프린트 0: 개발 환경 설정 (2024년 1월 1일 ~ 1월 14일)
#### 목표
- 개발 환경 구축 및 프로젝트 초기 설정
- 기본 프로젝트 구조 설계
- 핵심 라이브러리 및 도구 선정
#### 주요 작업 항목
1. **개발 환경 설정**
- React Native 프로젝트 초기화
- TypeScript 설정
- ESLint, Prettier 설정
- Jest 테스트 환경 구성
- CI/CD 파이프라인 구축 (GitHub Actions)
2. **프로젝트 구조 설계**
- 폴더 구조 설계
- 네이밍 컨벤션 정의
- 코드 스타일 가이드 작성
- 컴포넌트 구조 설계
3. **핵심 라이브러리 선정 및 통합**
- 상태 관리: Redux Toolkit 설정
- 네비게이션: React Navigation 설정
- UI 컴포넌트: 자체 컴포넌트 vs 라이브러리 결정
- 스타일링: Styled Components 설정
- 로컬 저장소: AsyncStorage 설정
4. **기본 아키텍처 구현**
- API 클라이언트 설계
- 에러 처리 전략 수립
- 로깅 시스템 구축
- 앱 초기화 프로세스 구현
#### 담당자
- 프로젝트 매니저: 전체 조정
- 모바일 개발자 1: React Native 프로젝트 설정, 네비게이션
- 모바일 개발자 2: 상태 관리, 로컬 저장소
- 백엔드 개발자: API 클라이언트, 인증 시스템 설계
- QA 엔지니어: 테스트 환경 구성
#### 산출물
- 기본 프로젝트 구조
- 개발 환경 설정 문서
- 코드 스타일 가이드
- 기술 스택 문서
---
### 스프린트 1: 기본 UI 컴포넌트 개발 (2024년 1월 15일 ~ 1월 28일)
#### 목표
- 디자인 시스템 구현
- 핵심 UI 컴포넌트 개발
- 기본 네비게이션 구조 구현
#### 주요 작업 항목
1. **디자인 시스템 구현**
- 색상 팔레트 구현
- 타이포그래피 시스템 구현
- 간격 및 크기 시스템 구현
- 테마 관리 시스템 구현
2. **기본 UI 컴포넌트 개발**
- 버튼 컴포넌트
- 입력 필드 컴포넌트
- 카드 컴포넌트
- 모달 및 다이얼로그 컴포넌트
- 탭 및 네비게이션 바 컴포넌트
- 로딩 및 에러 상태 컴포넌트
3. **네비게이션 구조 구현**
- 탭 기반 메인 네비게이션
- 스택 네비게이션 구조
- 화면 전환 애니메이션
- 딥 링크 지원
4. **컴포넌트 문서화**
- Storybook 설정
- 컴포넌트 사용 예제 작성
- 컴포넌트 속성 문서화
#### 담당자
- UI/UX 디자이너: 디자인 시스템 가이드 제공
- 모바일 개발자 1: 디자인 시스템 구현, 기본 컴포넌트
- 모바일 개발자 2: 네비게이션 구조, 고급 컴포넌트
- QA 엔지니어: 컴포넌트 테스트
#### 산출물
- 디자인 시스템 구현 코드
- 기본 UI 컴포넌트 라이브러리
- 네비게이션 구조 구현
- 컴포넌트 문서 및 Storybook
---
### 스프린트 2: 사용자 인증 및 기본 화면 (2024년 1월 29일 ~ 2월 11일)
#### 목표
- 사용자 인증 시스템 구현
- 온보딩 화면 개발
- 홈 화면 및 기본 화면 구조 개발
#### 주요 작업 항목
1. **사용자 인증 시스템**
- 회원가입 화면 및 로직
- 로그인 화면 및 로직
- 소셜 로그인 통합 (Google, Apple)
- 비밀번호 재설정 기능
- 인증 상태 관리
2. **온보딩 화면**
- 앱 소개 슬라이드
- 주요 기능 하이라이트
- 사용자 환영 화면
- 온보딩 상태 관리
3. **홈 화면**
- 최근 작업 카드 표시
- 추천 템플릿 섹션
- 빠른 액션 버튼
- 사용 통계 요약
4. **기본 화면 구조**
- 설정 화면
- 프로필 화면
- 알림 센터
- 도움말 및 지원 화면
#### 담당자
- UI/UX 디자이너: 화면 디자인 및 사용자 흐름
- 모바일 개발자 1: 인증 시스템, 홈 화면
- 모바일 개발자 2: 온보딩 화면, 기본 화면 구조
- 백엔드 개발자: 인증 API 연동
- QA 엔지니어: 인증 흐름 테스트
#### 산출물
- 사용자 인증 시스템
- 온보딩 화면 구현
- 홈 화면 및 기본 화면 구조
- 인증 관련 테스트 케이스
---
### 스프린트 3: 카드 에디터 기본 기능 (2024년 2월 12일 ~ 2월 25일)
#### 목표
- 카드 에디터 기본 UI 구현
- 텍스트 편집 기능 개발
- 기본 스타일링 옵션 구현
#### 주요 작업 항목
1. **카드 에디터 UI**
- 에디터 레이아웃 구현
- 도구 모음 UI
- 실시간 미리보기
- 저장 및 취소 기능
2. **텍스트 편집 기능**
- 텍스트 입력 및 편집
- 여러 텍스트 블록 지원
- 텍스트 정렬 옵션
- 텍스트 크기 조정
3. **기본 스타일링 옵션**
- 폰트 선택 기능
- 텍스트 색상 변경
- 배경 색상 및 그라데이션
- 기본 레이아웃 옵션
4. **에디터 상태 관리**
- 작업 히스토리 관리 (실행 취소/다시 실행)
- 자동 저장 기능
- 에디터 상태 지속성
#### 담당자
- UI/UX 디자이너: 에디터 UI 디자인
- 모바일 개발자 1: 에디터 UI 구현, 텍스트 편집
- 모바일 개발자 2: 스타일링 옵션, 상태 관리
- QA 엔지니어: 에디터 기능 테스트
#### 산출물
- 카드 에디터 기본 UI
- 텍스트 편집 기능
- 기본 스타일링 옵션
- 에디터 상태 관리 시스템
---
### 스프린트 4: 템플릿 시스템 및 카드 저장 (2024년 2월 26일 ~ 3월 10일)
#### 목표
- 템플릿 시스템 구현
- 카드 저장 및 관리 기능 개발
- 기본 갤러리 뷰 구현
#### 주요 작업 항목
1. **템플릿 시스템**
- 템플릿 데이터 구조 설계
- 기본 템플릿 세트 구현
- 템플릿 선택 및 적용 기능
- 템플릿 카테고리 관리
2. **카드 저장 및 관리**
- 로컬 저장소 구현
- 카드 메타데이터 관리
- 카드 수정 및 삭제 기능
- 카드 복제 기능
3. **갤러리 뷰**
- 카드 목록 표시
- 그리드 및 리스트 뷰 옵션
- 정렬 및 필터링 기능
- 카드 검색 기능
4. **성능 최적화**
- 이미지 캐싱
- 리스트 렌더링 최적화
- 메모리 사용 최적화
- 로딩 상태 관리
#### 담당자
- UI/UX 디자이너: 템플릿 디자인, 갤러리 UI
- 모바일 개발자 1: 템플릿 시스템, 갤러리 뷰
- 모바일 개발자 2: 카드 저장 및 관리, 성능 최적화
- 백엔드 개발자: 데이터 구조 설계 지원
- QA 엔지니어: 저장 및 로딩 테스트
#### 산출물
- 템플릿 시스템 구현
- 카드 저장 및 관리 기능
- 갤러리 뷰 구현
- 성능 최적화 보고서
---
### 스프린트 5: 소셜 미디어 공유 및 내보내기 (2024년 3월 11일 ~ 3월 24일)
#### 목표
- 소셜 미디어 공유 기능 구현
- 이미지 내보내기 기능 개발
- 워터마크 및 브랜딩 옵션 구현
#### 주요 작업 항목
1. **소셜 미디어 공유**
- 네이티브 공유 기능 통합
- 인스타그램 스토리/피드 공유 최적화
- 페이스북 공유 최적화
- 기타 소셜 플랫폼 지원
2. **이미지 내보내기**
- 다양한 해상도 및 형식 지원
- 플랫폼별 최적 크기 자동 조정
- 이미지 품질 옵션
- 갤러리 저장 기능
3. **워터마크 및 브랜딩**
- 기본 워터마크 구현
- 워터마크 위치 및 투명도 옵션
- 사용자 브랜딩 요소 추가 기능
- 워터마크 제거 옵션 (프리미엄)
4. **공유 분석**
- 공유 이벤트 추적
- 기본 공유 통계
- 사용자 피드백 수집
#### 담당자
- UI/UX 디자이너: 공유 UI, 워터마크 디자인
- 모바일 개발자 1: 소셜 미디어 공유, 이미지 내보내기
- 모바일 개발자 2: 워터마크 및 브랜딩, 공유 분석
- QA 엔지니어: 다양한 기기 및 플랫폼 테스트
#### 산출물
- 소셜 미디어 공유 기능
- 이미지 내보내기 기능
- 워터마크 및 브랜딩 옵션
- 공유 분석 시스템
---
### 스프린트 6: 설정 및 사용자 환경설정 (2024년 3월 25일 ~ 4월 7일)
#### 목표
- 앱 설정 화면 구현
- 사용자 환경설정 기능 개발
- 알림 시스템 구현
- 오프라인 모드 지원
#### 주요 작업 항목
1. **앱 설정 화면**
- 설정 화면 UI 구현
- 계정 관리 옵션
- 앱 환경설정
- 도움말 및 지원 섹션
2. **사용자 환경설정**
- 테마 설정 (라이트/다크 모드)
- 기본 템플릿 설정
- 기본 스타일 프리셋
- 언어 설정 (향후 다국어 지원)
3. **알림 시스템**
- 푸시 알림 설정
- 인앱 알림 센터
- 알림 환경설정
- 알림 히스토리
4. **오프라인 모드**
- 오프라인 상태 감지
- 오프라인 작업 지원
- 데이터 동기화 전략
- 오프라인 모드 UI 피드백
#### 담당자
- UI/UX 디자이너: 설정 화면 디자인, 알림 UI
- 모바일 개발자 1: 설정 화면, 사용자 환경설정
- 모바일 개발자 2: 알림 시스템, 오프라인 모드
- 백엔드 개발자: 푸시 알림 서버 설정
- QA 엔지니어: 설정 및 오프라인 모드 테스트
#### 산출물
- 앱 설정 화면
- 사용자 환경설정 기능
- 알림 시스템
- 오프라인 모드 지원
---
### 스프린트 7: 통합 테스트 및 안정화 (2024년 4월 8일 ~ 4월 21일)
#### 목표
- 전체 기능 통합 테스트
- 성능 최적화 및 안정화
- 버그 수정 및 UI 폴리싱
- 베타 테스트 준비
#### 주요 작업 항목
1. **통합 테스트**
- 엔드투엔드 테스트 시나리오 작성
- 주요 사용자 흐름 테스트
- 에지 케이스 및 오류 상황 테스트
- 다양한 기기 및 OS 버전 테스트
2. **성능 최적화**
- 앱 시작 시간 최적화
- 메모리 사용량 분석 및 최적화
- 배터리 사용량 최적화
- 네트워크 요청 최적화
3. **UI 폴리싱**
- 애니메이션 및 전환 효과 개선
- 일관된 UI 스타일 확인
- 접근성 개선
- 사용자 피드백 기반 UI 조정
4. **베타 테스트 준비**
- 베타 테스트 계획 수립
- 테스트 그룹 구성
- 피드백 수집 시스템 구축
- 베타 버전 배포 준비
#### 담당자
- 프로젝트 매니저: 베타 테스트 계획
- UI/UX 디자이너: UI 폴리싱, 접근성 검토
- 모바일 개발자 1: 통합 테스트, 버그 수정
- 모바일 개발자 2: 성능 최적화, 안정화
- QA 엔지니어: 테스트 시나리오 작성 및 실행
#### 산출물
- 통합 테스트 보고서
- 성능 최적화 보고서
- UI 폴리싱 완료
- 베타 테스트 계획 및 준비
---
### 스프린트 8: 베타 출시 및 피드백 수집 (2024년 4월 22일 ~ 5월 5일)
#### 목표
- 베타 버전 출시
- 사용자 피드백 수집 및 분석
- 주요 이슈 해결
- 앱스토어 제출 준비
#### 주요 작업 항목
1. **베타 출시**
- TestFlight (iOS) 배포
- Google Play 베타 프로그램 설정
- 베타 테스터 온보딩
- 베타 테스트 모니터링
2. **피드백 수집**
- 인앱 피드백 시스템 구현
- 사용자 설문조사 설계
- 사용 데이터 분석
- 버그 리포트 수집
3. **이슈 해결**
- 우선순위에 따른 버그 수정
- 사용자 피드백 기반 개선
- 성능 이슈 해결
- 안정성 개선
4. **앱스토어 준비**
- 앱스토어 스크린샷 및 프리뷰 비디오 제작
- 앱 설명 및 메타데이터 작성
- 개인정보 처리방침 및 이용약관 최종화
- 앱 심사 대비 체크리스트
#### 담당자
- 프로젝트 매니저: 베타 테스트 관리, 앱스토어 준비
- UI/UX 디자이너: 앱스토어 자료 제작
- 모바일 개발자 1: 베타 배포, 주요 이슈 해결
- 모바일 개발자 2: 피드백 시스템, 버그 수정
- QA 엔지니어: 베타 테스트 모니터링, 이슈 트래킹
#### 산출물
- 베타 버전 출시
- 사용자 피드백 분석 보고서
- 이슈 해결 보고서
- 앱스토어 제출 자료
## 스프린트 진행 방식
### 스프린트 계획 미팅
- **시기**: 스프린트 시작일
- **참석자**: 전체 팀
- **목적**: 스프린트 목표 설정, 작업 항목 선정, 담당자 할당
- **산출물**: 스프린트 백로그, 작업 항목 세부 내용
### 일일 스크럼
- **시기**: 매일 오전 10시
- **참석자**: 개발팀
- **목적**: 진행 상황 공유, 장애물 식별, 일일 계획 수립
- **형식**: 15분 이내의 짧은 미팅 (각자 어제 한 일, 오늘 할 일, 장애물 공유)
### 스프린트 리뷰
- **시기**: 스프린트 마지막 날
- **참석자**: 전체 팀 및 이해관계자
- **목적**: 완료된 작업 시연, 피드백 수집
- **산출물**: 피드백 목록, 다음 스프린트 고려사항
### 스프린트 회고
- **시기**: 스프린트 리뷰 직후
- **참석자**: 개발팀
- **목적**: 스프린트 프로세스 개선점 논의
- **산출물**: 액션 아이템, 프로세스 개선 사항
## 작업 추적 및 관리
### 작업 항목 상태
- **To Do**: 아직 시작되지 않은 작업
- **In Progress**: 현재 진행 중인 작업
- **Review**: 코드 리뷰 중인 작업
- **Done**: 완료된 작업
### 작업 항목 우선순위
- **Critical**: 즉시 해결해야 하는 작업
- **High**: 현재 스프린트에서 반드시 완료해야 하는 작업
- **Medium**: 현재 스프린트에서 가능하면 완료해야 하는 작업
- **Low**: 시간이 허락하면 진행할 작업
### 작업 추적 도구
- GitHub Projects: 작업 항목 관리
- GitHub Issues: 세부 작업 및 버그 추적
- Slack: 일상적인 커뮤니케이션
- Figma: 디자인 공유 및 협업
## 결론
이 스프린트 계획은 ZELLYY 앱의 MVP 개발을 위한 로드맵을 제공합니다. 각 스프린트는 명확한 목표와 작업 항목을 가지고 있으며, 점진적으로 앱의 핵심 기능을 구현해 나갑니다. 이 계획은 프로젝트 진행 상황과 사용자 피드백에 따라 유연하게 조정될 수 있습니다.

293
ZELLYY/zellyy note/04_참고자료/Git_이슈_트래킹_시스템.md Normal file
View File

@@ -0,0 +1,293 @@
# ZELLYY - Git 이슈 트래킹 시스템
## 개요
ZELLYY 프로젝트는 GitHub를 활용하여 이슈 트래킹 및 프로젝트 관리를 진행합니다. 이 문서는 개발팀이 일관된 방식으로 이슈를 생성, 관리, 해결하기 위한 가이드라인을 제공합니다.
## 이슈 유형 분류
ZELLYY 프로젝트에서는 다음과 같은 이슈 유형을 사용합니다:
### 1. 기능 요청 (Feature Request)
새로운 기능 개발이나 기존 기능 확장에 관한 이슈입니다.
### 2. 버그 리포트 (Bug Report)
애플리케이션의 오작동이나 예상치 못한 동작에 관한 이슈입니다.
### 3. 개선 사항 (Enhancement)
기존 기능의 사용성, 성능, 디자인 등을 개선하기 위한 이슈입니다.
### 4. 문서화 (Documentation)
코드, API, 사용자 가이드 등의 문서화에 관한 이슈입니다.
### 5. 기술 부채 (Technical Debt)
코드 리팩토링, 아키텍처 개선 등 기술적 부채 해소를 위한 이슈입니다.
### 6. 질문 (Question)
프로젝트에 관한 질문이나 논의가 필요한 사항에 대한 이슈입니다.
## 이슈 라벨 시스템
### 우선순위 라벨
- `priority:critical` - 즉시 해결해야 하는 중대한 이슈
- `priority:high` - 높은 우선순위로 다음 스프린트에서 처리해야 하는 이슈
- `priority:medium` - 중간 우선순위로 향후 스프린트에서 처리할 이슈
- `priority:low` - 낮은 우선순위로 여유가 있을 때 처리할 이슈
### 상태 라벨
- `status:backlog` - 아직 스프린트에 할당되지 않은 이슈
- `status:ready` - 개발 준비가 완료된 이슈
- `status:in-progress` - 현재 개발 중인 이슈
- `status:review` - 코드 리뷰 중인 이슈
- `status:blocked` - 다른 이슈나 외부 요인으로 인해 진행이 막힌 이슈
### 유형 라벨
- `type:feature` - 새로운 기능
- `type:bug` - 버그 수정
- `type:enhancement` - 기능 개선
- `type:documentation` - 문서화 작업
- `type:refactor` - 코드 리팩토링
- `type:test` - 테스트 관련 작업
### 컴포넌트 라벨
- `component:ui` - UI 관련 이슈
- `component:api` - API 관련 이슈
- `component:database` - 데이터베이스 관련 이슈
- `component:auth` - 인증 관련 이슈
- `component:editor` - 카드 에디터 관련 이슈
- `component:sharing` - 공유 기능 관련 이슈
- `component:storage` - 저장 및 동기화 관련 이슈
### 기타 라벨
- `good-first-issue` - 신규 기여자에게 적합한 이슈
- `help-wanted` - 외부 도움이 필요한 이슈
- `discussion` - 추가 논의가 필요한 이슈
- `wontfix` - 해결하지 않기로 결정된 이슈
- `duplicate` - 중복된 이슈
## 이슈 템플릿
### 기능 요청 템플릿
```markdown
## 기능 설명
[기능에 대한 간결한 설명]
## 사용자 스토리
[사용자 관점에서의 기능 설명, "사용자로서, ~할 수 있기를 원합니다. 그래서 ~할 수 있습니다." 형식]
## 상세 요구사항
- [요구사항 1]
- [요구사항 2]
- [요구사항 3]
## 수용 기준
- [ ] [기준 1]
- [ ] [기준 2]
- [ ] [기준 3]
## 디자인 참조
[관련 디자인 문서, 와이어프레임, 목업 등의 링크]
## 추가 컨텍스트
[기능 구현에 도움이 될 추가 정보]
```
### 버그 리포트 템플릿
```markdown
## 버그 설명
[버그에 대한 간결한 설명]
## 재현 단계
1. [단계 1]
2. [단계 2]
3. [단계 3]
## 예상 동작
[정상적으로 작동했을 때 예상되는 동작]
## 실제 동작
[실제로 발생한 동작]
## 스크린샷
[가능한 경우 스크린샷 첨부]
## 환경 정보
- 기기: [예: iPhone 13 Pro]
- OS: [예: iOS 16.2]
- 앱 버전: [예: 1.2.0]
- 기타 관련 정보
## 가능한 해결 방법
[알고 있는 경우, 가능한 해결 방법 제안]
## 추가 컨텍스트
[문제 해결에 도움이 될 추가 정보]
```
## 이슈 생성 가이드라인
### 이슈 제목 작성법
- 명확하고 간결하게 작성
- 행동 지향적인 동사로 시작 (예: "구현", "수정", "개선")
- 이슈의 핵심을 포함 (예: "카드 에디터에 텍스트 크기 조절 기능 구현")
### 이슈 설명 작성법
- 관련 템플릿 사용
- 충분한 컨텍스트 제공
- 명확한 요구사항 또는 문제점 설명
- 가능한 경우 시각적 자료 첨부 (스크린샷, 다이어그램 등)
- 관련 문서나 이슈 링크 제공
### 이슈 할당 및 마일스톤 설정
- 담당자가 명확한 경우 이슈 생성 시 할당
- 적절한 마일스톤에 이슈 연결 (스프린트 또는 릴리스 버전)
- 예상 완료 일자 설정 (가능한 경우)
## 이슈 관리 워크플로우
### 1. 이슈 생성
- 적절한 템플릿을 사용하여 이슈 생성
- 관련 라벨 적용
- 필요한 경우 담당자 할당
### 2. 이슈 트라이아지 (분류)
- 주간 트라이아지 미팅에서 새 이슈 검토
- 우선순위 및 마일스톤 설정
- 필요한 추가 정보 요청
### 3. 이슈 처리
- 담당자는 이슈를 `status:in-progress`로 변경
- 관련 브랜치 생성 (명명 규칙: `issue/[이슈번호]-[간략한-설명]`)
- 작업 진행 및 커밋
### 4. 코드 리뷰
- 작업 완료 후 Pull Request 생성
- 이슈 상태를 `status:review`로 변경
- 코드 리뷰 진행 및 피드백 반영
### 5. 이슈 종료
- Pull Request가 승인되고 병합되면 이슈 종료
- 이슈에 해결 방법 간략히 기록
- 관련 문서 업데이트 필요 시 언급
## GitHub 프로젝트 보드 구성
ZELLYY 프로젝트는 GitHub 프로젝트 보드를 사용하여 이슈와 작업을 시각적으로 관리합니다.
### 보드 컬럼
1. **Backlog**: 아직 스프린트에 할당되지 않은 이슈
2. **To Do**: 현재 스프린트에 할당되었지만 아직 시작되지 않은 이슈
3. **In Progress**: 현재 작업 중인 이슈
4. **Review**: 코드 리뷰 중인 이슈
5. **Done**: 완료된 이슈
### 자동화 규칙
- 새 이슈는 자동으로 Backlog에 추가
- `status:in-progress` 라벨이 적용된 이슈는 In Progress로 이동
- `status:review` 라벨이 적용된 이슈는 Review로 이동
- 이슈가 종료되면 자동으로 Done으로 이동
## 브랜치 및 커밋 전략
### 브랜치 명명 규칙
- 기능 개발: `feature/[이슈번호]-[간략한-설명]`
- 버그 수정: `bugfix/[이슈번호]-[간략한-설명]`
- 문서 작업: `docs/[이슈번호]-[간략한-설명]`
- 리팩토링: `refactor/[이슈번호]-[간략한-설명]`
### 커밋 메시지 형식
```
[이슈번호] 유형: 간결한 설명
상세 설명 (필요한 경우)
```
예시:
```
[#42] feat: 카드 에디터에 텍스트 크기 조절 기능 추가
- 슬라이더를 사용하여 텍스트 크기 조절 가능
- 8pt에서 72pt까지 조절 가능
- 기본값은 16pt로 설정
```
### 커밋 유형
- `feat`: 새로운 기능 추가
- `fix`: 버그 수정
- `docs`: 문서 변경
- `style`: 코드 포맷팅, 세미콜론 누락 등 (코드 변경 없음)
- `refactor`: 코드 리팩토링
- `test`: 테스트 코드 추가 또는 수정
- `chore`: 빌드 프로세스, 도구 변경 등
## Pull Request 프로세스
### PR 템플릿
```markdown
## 관련 이슈
[관련 이슈 번호 및 링크]
## 변경 사항
[변경 사항에 대한 간결한 설명]
## 변경 유형
- [ ] 새로운 기능
- [ ] 버그 수정
- [ ] 성능 개선
- [ ] 코드 리팩토링
- [ ] 스타일 변경 (코드 기능에 영향 없음)
- [ ] 문서 업데이트
- [ ] 기타 (설명: )
## 테스트 방법
[변경 사항을 테스트하는 방법 설명]
## 스크린샷 (UI 변경의 경우)
[변경 전/후 스크린샷]
## 체크리스트
- [ ] 코드가 스타일 가이드를 준수합니다
- [ ] 자체 코드 리뷰를 수행했습니다
- [ ] 관련 문서를 업데이트했습니다
- [ ] 테스트를 추가/수정했습니다
- [ ] 모든 테스트가 통과합니다
```
### PR 리뷰 가이드라인
- 최소 1명의 승인이 필요
- 코드 품질, 테스트 커버리지, 문서화 확인
- 건설적인 피드백 제공
- 24시간 이내에 리뷰 완료 (가능한 경우)
### 병합 전략
- Squash and merge 사용 (여러 커밋을 하나로 압축)
- 병합 전 CI 파이프라인 통과 확인
- 병합 후 관련 이슈 자동 종료 (키워드 사용: "Closes #이슈번호")
## 릴리스 프로세스
### 버전 관리
ZELLYY는 [Semantic Versioning](https://semver.org/) 체계를 따릅니다:
- **Major 버전 (X.0.0)**: 이전 버전과 호환되지 않는 API 변경
- **Minor 버전 (0.X.0)**: 이전 버전과 호환되는 새로운 기능 추가
- **Patch 버전 (0.0.X)**: 버그 수정 및 작은 개선
### 릴리스 브랜치
- 릴리스 준비: `release/vX.Y.Z` 브랜치 생성
- 릴리스 후보 테스트 및 버그 수정
- 최종 릴리스: 메인 브랜치에 병합 및 태그 생성
### 릴리스 노트
- GitHub Releases 기능 활용
- 주요 기능, 개선 사항, 버그 수정 등 카테고리별 정리
- 사용자 관점에서 이해하기 쉬운 설명 제공
- 스크린샷 또는 GIF 포함 (UI 변경의 경우)
## 결론
이 Git 이슈 트래킹 시스템은 ZELLYY 프로젝트의 효율적인 개발 관리를 위한 가이드라인입니다. 모든 팀원은 이 가이드라인을 따라 일관된 방식으로 이슈를 생성하고 관리함으로써, 프로젝트의 투명성과 협업 효율성을 높일 수 있습니다.
이 문서는 프로젝트의 진행 상황과 팀의 필요에 따라 지속적으로 업데이트될 예정입니다.

34
ZELLYY/zellyy note/04_참고자료/index.md Normal file
View File

@@ -0,0 +1,34 @@
# ZELLYY 참고자료
## 목차
1. [경쟁 앱 분석](경쟁_앱_분석.md)
2. [시장 조사 자료](./시장_조사_자료.md)
3. [디자인 참고 리소스](./디자인_참고_리소스.md)
4. [기술 참고 자료](./기술_참고_자료.md)
## 참고자료 개요
ZELLYY 프로젝트의 참고자료 섹션에서는 프로젝트 개발에 참고할 수 있는 다양한 자료와 리소스를 제공합니다. 경쟁 앱 분석, 시장 조사 자료, 디자인 참고 리소스, 기술 참고 자료 등이 포함됩니다.
## 주요 문서
- **경쟁 앱 분석**: 주요 경쟁 앱의 기능, UI/UX, 비즈니스 모델 등을 분석한 문서
- **시장 조사 자료**: 타겟 시장, 사용자 니즈, 트렌드 등에 관한 조사 자료
- **디자인 참고 리소스**: UI/UX 디자인 참고 자료, 디자인 트렌드, 가이드라인 등
- **기술 참고 자료**: 개발에 참고할 수 있는 기술 문서, 튜토리얼, 라이브러리 정보 등
## 자료 수집 및 관리 원칙
1. **최신성**: 최신 트렌드와 기술을 반영한 자료 수집
2. **관련성**: 프로젝트의 목표와 방향성에 부합하는 자료 선별
3. **다양성**: 다양한 관점과 접근 방식을 포함하는 자료 수집
4. **신뢰성**: 신뢰할 수 있는 출처의 자료 활용
5. **접근성**: 팀원 모두가 쉽게 접근하고 활용할 수 있는 형태로 자료 관리
## 참고자료 활용 방법
- 기획 및 설계 단계에서 경쟁 앱 분석과 시장 조사 자료 참고
- UI/UX 설계 시 디자인 참고 리소스 활용
- 개발 과정에서 기술 참고 자료 활용
- 정기적인 자료 업데이트 및 공유를 통한 지식 확산

236
ZELLYY/zellyy note/04_참고자료/경쟁_앱_분석.md Normal file
View File

@@ -0,0 +1,236 @@
# ZELLYY - 경쟁 앱 분석
## 개요
이 문서는 ZELLYY와 유사한 기능을 제공하는 주요 경쟁 앱들을 분석하여, 시장 동향을 파악하고 ZELLYY의 차별화 전략을 수립하는 데 참고 자료로 활용됩니다.
## 주요 경쟁 앱 분석
### 1. Canva
#### 기본 정보
- **개발사**: Canva Pty Ltd
- **출시일**: 2013년
- **플랫폼**: 웹, iOS, Android
- **가격 정책**: 프리미엄(무료 기본 기능, 유료 구독)
- **주요 타겟**: 디자인 비전문가, 소규모 비즈니스, 소셜 미디어 마케터
#### 주요 기능
- 다양한 디자인 템플릿(소셜 미디어 포스트, 프레젠테이션, 인쇄물 등)
- 드래그 앤 드롭 인터페이스
- 이미지, 텍스트, 그래픽 요소 편집
- 팀 협업 기능
- 클라우드 저장 및 공유
#### 강점
- 방대한 템플릿 라이브러리
- 직관적인 사용자 인터페이스
- 다양한 디자인 에셋(폰트, 이미지, 아이콘 등)
- 강력한 브랜드 인지도
- 웹과 모바일 간 원활한 동기화
#### 약점
- 모바일 앱에서 제한된 기능
- 복잡한 디자인 작업에는 부적합
- 고급 기능은 유료 구독 필요
- 사용자 인터페이스가 다소 복잡함
- 모바일에서 작업 시 화면 크기 제약
### 2. Adobe Spark Post
#### 기본 정보
- **개발사**: Adobe Inc.
- **출시일**: 2016년
- **플랫폼**: 웹, iOS, Android
- **가격 정책**: 프리미엄(무료 기본 기능, Adobe Creative Cloud 구독)
- **주요 타겟**: 소셜 미디어 콘텐츠 크리에이터, Adobe 사용자
#### 주요 기능
- 소셜 미디어 포스트 특화 템플릿
- 애니메이션 및 동적 효과
- Adobe 폰트 및 스톡 이미지 통합
- 브랜드 키트 기능
- 크기 조정 및 플랫폼별 최적화
#### 강점
- Adobe의 디자인 전문성 반영
- 고품질 템플릿 및 디자인 에셋
- 직관적인 모바일 인터페이스
- Adobe Creative Cloud와의 통합
- 애니메이션 및 동적 효과 지원
#### 약점
- 완전한 기능은 Adobe 구독 필요
- 제한된 커스터마이징 옵션
- 웹 버전과 모바일 버전 간 기능 차이
- 학습 곡선이 다소 높음
- 무거운 앱 크기
### 3. Over (현 GoDaddy Studio)
#### 기본 정보
- **개발사**: GoDaddy (이전 Over)
- **출시일**: 2012년 (2019년 GoDaddy 인수)
- **플랫폼**: iOS, Android
- **가격 정책**: 프리미엄(무료 기본 기능, 유료 구독)
- **주요 타겟**: 소셜 미디어 인플루언서, 소규모 비즈니스
#### 주요 기능
- 모바일 중심 디자인 경험
- 레이어 기반 편집
- 소셜 미디어 최적화 템플릿
- 폰트 및 그래픽 라이브러리
- 사진 편집 및 필터
#### 강점
- 모바일에 최적화된 사용자 경험
- 직관적인 레이어 관리
- 트렌디한 디자인 템플릿
- 소셜 미디어 포스트에 특화
- 빠른 편집 워크플로우
#### 약점
- 웹 버전 부재
- 복잡한 프로젝트 관리의 어려움
- 제한된 협업 기능
- 고급 기능은 유료 구독 필요
- GoDaddy 인수 후 브랜드 정체성 변화
### 4. Unfold
#### 기본 정보
- **개발사**: Squarespace (인수)
- **출시일**: 2018년
- **플랫폼**: iOS, Android
- **가격 정책**: 프리미엄(무료 기본 기능, 유료 구독)
- **주요 타겟**: 인스타그램 스토리 크리에이터, 소셜 미디어 인플루언서
#### 주요 기능
- 인스타그램 스토리 특화 템플릿
- 미니멀한 디자인 스타일
- 스토리 시퀀스 및 컬렉션 관리
- 기본 텍스트 및 이미지 편집
- 바이오 사이트 생성
#### 강점
- 세련되고 미니멀한 디자인 미학
- 매우 직관적인 사용자 인터페이스
- 스토리 시퀀스 관리에 최적화
- 빠른 콘텐츠 제작 가능
- 일관된 브랜드 이미지 유지 용이
#### 약점
- 제한된 커스터마이징 옵션
- 특정 디자인 스타일에 국한됨
- 웹 버전 부재
- 다양한 소셜 미디어 플랫폼 지원 제한적
- 고급 편집 기능 부족
### 5. Hype Type
#### 기본 정보
- **개발사**: Lightricks Ltd.
- **출시일**: 2017년
- **플랫폼**: iOS, Android
- **가격 정책**: 프리미엄(무료 기본 기능, 유료 구독)
- **주요 타겟**: 소셜 미디어 콘텐츠 크리에이터, 인플루언서
#### 주요 기능
- 애니메이션 텍스트 효과
- 비디오 및 이미지에 텍스트 오버레이
- 다양한 텍스트 스타일 및 애니메이션
- 소셜 미디어 직접 공유
- 기본 비디오 편집
#### 강점
- 텍스트 애니메이션에 특화
- 직관적인 모바일 인터페이스
- 트렌디한 텍스트 효과
- 빠른 콘텐츠 제작 가능
- 소셜 미디어 통합
#### 약점
- 제한된 템플릿 옵션
- 정적 이미지 편집 기능 제한적
- 고급 기능은 유료 구독 필요
- 협업 기능 부재
- 웹 버전 부재
## 시장 동향 분석
### 주요 트렌드
1. **모바일 중심 경험**
- 대부분의 경쟁 앱들이 모바일 우선 또는 모바일 전용으로 개발됨
- 모바일에서의 직관적인 터치 인터페이스 중요성 증가
2. **템플릿 기반 접근**
- 사용자 경험 간소화를 위한 템플릿 중심 디자인
- 트렌디하고 다양한 템플릿 제공이 경쟁력의 핵심
3. **소셜 미디어 최적화**
- 각 소셜 미디어 플랫폼별 최적화된 형식 지원
- 직접 공유 기능 통합
4. **구독 기반 비즈니스 모델**
- 기본 기능은 무료, 고급 기능은 구독제로 제공
- 월간/연간 구독 옵션 제공
5. **브랜딩 기능 강화**
- 일관된 브랜드 이미지 유지를 위한 기능 증가
- 브랜드 키트, 색상 팔레트, 폰트 세트 등 저장 기능
### 기회 요소
1. **텍스트 중심 특화**
- 대부분의 앱이 이미지 편집에 중점을 두는 반면, 텍스트 표현과 타이포그래피에 특화된 앱은 상대적으로 적음
- 인용구, 생각, 아이디어 등 텍스트 중심 콘텐츠에 특화된 기능 개발 기회
2. **극도의 단순함**
- 경쟁 앱들이 점차 기능을 추가하며 복잡해지는 경향
- 핵심 기능에 집중한 매우 단순한 인터페이스로 차별화 가능
3. **오프라인 기능**
- 대부분의 앱이 클라우드 중심으로 운영되어 오프라인 기능이 제한적
- 강력한 오프라인 모드 지원으로 차별화 가능
4. **개인 아카이브 기능**
- 대부분의 앱이 공유 목적에 초점을 맞추고 있음
- 개인 지식 관리 및 아카이브 기능으로 확장 가능성
5. **빠른 워크플로우**
- 경쟁 앱들은 다양한 기능을 제공하지만 작업 완료까지 여러 단계 필요
- "3탭 이내" 원칙으로 빠른 콘텐츠 제작 워크플로우 제공 가능
## ZELLYY 차별화 전략
### 1. 텍스트 중심 특화
- 텍스트 표현과 타이포그래피에 특화된 기능 개발
- 다양한 텍스트 레이아웃 및 스타일링 옵션 제공
- 텍스트 중심 콘텐츠를 위한 최적화된 템플릿 제공
### 2. 극도의 단순함
- "3탭 이내" 원칙으로 설계된 워크플로우
- 필수 기능만 포함하여 학습 곡선 최소화
- 직관적인 디자인 가이드라인 내장
### 3. 모바일 네이티브 경험
- 모바일 환경에 완전히 최적화된 인터페이스
- 터치 제스처를 활용한 직관적 조작
- 오프라인 작업 지원
### 4. 소셜 미디어 최적화
- 주요 소셜 플랫폼에 최적화된 형식과 크기 지원
- 플랫폼별 특성을 고려한 템플릿
- 공유 과정의 마찰 최소화
### 5. 개인화 및 브랜딩 지원
- 사용자 브랜드 요소 저장 및 적용
- 개인 스타일 프리셋 생성 및 적용
- 일관된 시각적 아이덴티티 유지 지원
## 결론
ZELLYY는 경쟁이 치열한 디자인 앱 시장에서 텍스트 중심 특화, 극도의 단순함, 모바일 네이티브 경험을 통해 차별화할 수 있습니다. 대부분의 경쟁 앱들이 다양한 기능을 추가하며 복잡해지는 경향이 있는 반면, ZELLYY는 핵심 기능에 집중하여 사용자가 빠르고 쉽게 고품질 콘텐츠를 제작할 수 있도록 지원하는 것이 핵심 전략입니다.
특히 텍스트 중심 콘텐츠 제작에 특화된 기능과 소셜 미디어 최적화 기능을 강화하여, 콘텐츠 크리에이터와 소규모 비즈니스 사용자들에게 차별화된 가치를 제공할 수 있을 것으로 기대됩니다.

327
ZELLYY/zellyy note/04_참고자료/시장_조사_보고서.md Normal file
View File

@@ -0,0 +1,327 @@
# ZELLYY - 시장 조사 보고서
## 1. 시장 개요
### 1.1 모바일 디자인 앱 시장 현황
모바일 디자인 및 콘텐츠 제작 앱 시장은 지속적인 성장세를 보이고 있습니다. 소셜 미디어의 보편화와 시각적 콘텐츠의 중요성 증가로 인해, 전문 디자인 지식 없이도 고품질 콘텐츠를 제작할 수 있는 도구에 대한 수요가 크게 증가하고 있습니다.
**주요 시장 지표:**
- 글로벌 모바일 디자인 앱 시장 규모: 2023년 기준 약 5.2억 달러
- 연간 성장률(CAGR): 약 18.7% (2023-2028 예상)
- 주요 성장 동력: 소셜 미디어 사용 증가, 콘텐츠 크리에이터 증가, 비전문가의 디자인 수요 증가
- 주요 시장 세그먼트: 소셜 미디어 콘텐츠 제작, 마케팅 자료 제작, 개인 브랜딩
### 1.2 주요 사용자 그룹
시장 조사 결과, 모바일 디자인 앱의 주요 사용자 그룹은 다음과 같이 분류됩니다:
1. **콘텐츠 크리에이터 (시장 점유율: 35%)**
- 인플루언서, 블로거, 유튜버 등 소셜 미디어에서 활동하는 개인
- 주요 니즈: 빠른 콘텐츠 제작, 브랜드 일관성, 다양한 플랫폼 지원
2. **소상공인 및 스타트업 (시장 점유율: 28%)**
- 마케팅 전담 인력 없이 콘텐츠를 직접 제작하는 소규모 비즈니스
- 주요 니즈: 비용 효율성, 전문적인 결과물, 브랜드 일관성
3. **마케팅 전문가 (시장 점유율: 20%)**
- 기업의 마케팅 담당자, 소셜 미디어 매니저
- 주요 니즈: 팀 협업, 브랜드 가이드라인 준수, 콘텐츠 일정 관리
4. **개인 사용자 (시장 점유율: 17%)**
- 개인적인 용도로 시각 콘텐츠를 제작하는 일반 사용자
- 주요 니즈: 사용 용이성, 무료 옵션, 기본적인 디자인 기능
## 2. 시장 트렌드 분석
### 2.1 주요 트렌드
1. **모바일 중심 경험**
- 데스크톱보다 모바일에서의 콘텐츠 제작 선호도 증가
- 모바일 최적화된 UI/UX에 대한 수요 증가
- 통계: 디자인 앱 사용자의 68%가 주로 모바일에서 콘텐츠 제작
2. **AI 기반 디자인 지원**
- AI를 활용한 디자인 추천 및 자동화 기능 증가
- 텍스트 기반 디자인 생성 기능 인기
- 통계: AI 기능이 있는 디자인 앱의 사용자 만족도 23% 높음
3. **구독 기반 비즈니스 모델**
- 일회성 구매보다 구독 모델로의 전환 가속화
- 프리미엄 기능에 대한 월간/연간 구독 옵션 제공
- 통계: 디자인 앱 수익의 75%가 구독 모델에서 발생
4. **템플릿 중심 접근**
- 사용자 경험 간소화를 위한 템플릿 기반 디자인
- 트렌디한 템플릿에 대한 수요 증가
- 통계: 사용자의 82%가 처음부터 디자인하기보다 템플릿 활용 선호
5. **소셜 미디어 최적화**
- 플랫폼별 최적화된 콘텐츠 제작 도구 수요 증가
- 인스타그램, 틱톡 등 새로운 플랫폼 지원 필요성
- 통계: 다중 플랫폼 지원 앱의 사용자 유지율 35% 높음
### 2.2 사용자 행동 분석
**콘텐츠 제작 빈도:**
- 주 1-3회: 45%
- 주 4-7회: 32%
- 주 7회 이상: 23%
**평균 콘텐츠 제작 시간:**
- 10분 미만: 12%
- 10-30분: 48%
- 30분-1시간: 28%
- 1시간 이상: 12%
**주요 사용 시간대:**
- 오전 (6AM-12PM): 22%
- 오후 (12PM-6PM): 35%
- 저녁 (6PM-12AM): 38%
- 심야 (12AM-6AM): 5%
**디자인 앱 선택 기준 (중요도 순):**
1. 사용 용이성
2. 템플릿 다양성
3. 가격
4. 결과물 품질
5. 공유 기능
## 3. 경쟁 환경 분석
### 3.1 시장 점유율
**주요 경쟁사 시장 점유율 (2023년 기준):**
1. Canva: 34%
2. Adobe Spark: 18%
3. Over (GoDaddy Studio): 12%
4. Unfold: 8%
5. PicCollage: 6%
6. 기타: 22%
### 3.2 가격 전략 비교
| 앱 이름 | 무료 버전 | 구독 가격 (월간) | 구독 가격 (연간) | 주요 프리미엄 기능 |
|---------|-----------|-----------------|-----------------|-------------------|
| Canva | 있음 | $12.99 | $119.99 ($10/월) | 프리미엄 템플릿, 배경 제거, 브랜드 키트 |
| Adobe Spark | 있음 | $9.99 | $99.99 ($8.33/월) | 워터마크 제거, Adobe 폰트, 브랜딩 |
| Over | 있음 | $14.99 | $89.99 ($7.50/월) | 프리미엄 그래픽, 폰트, 템플릿 |
| Unfold | 있음 | $3.99 | $19.99 ($1.67/월) | 프리미엄 템플릿, 고급 폰트 |
| ZELLYY (계획) | 있음 | $4.99 | $39.99 ($3.33/월) | 클라우드 동기화, 고급 템플릿, 워터마크 제거 |
### 3.3 기능 비교 분석
| 기능 | Canva | Adobe Spark | Over | Unfold | ZELLYY (계획) |
|------|-------|-------------|------|--------|--------------|
| 템플릿 수 | 250,000+ | 30,000+ | 20,000+ | 5,000+ | 10,000+ (목표) |
| 모바일 최적화 | 중간 | 중간 | 높음 | 높음 | 매우 높음 |
| 텍스트 편집 기능 | 높음 | 높음 | 중간 | 낮음 | 매우 높음 |
| 소셜 미디어 통합 | 높음 | 높음 | 중간 | 높음 | 높음 |
| 오프라인 기능 | 제한적 | 제한적 | 제한적 | 제한적 | 광범위 |
| 사용 용이성 | 중간 | 중간 | 높음 | 매우 높음 | 매우 높음 |
| 협업 기능 | 있음 | 제한적 | 없음 | 없음 | 계획 중 |
| AI 기능 | 있음 | 있음 | 제한적 | 없음 | 계획 중 |
## 4. 타겟 시장 분석
### 4.1 지역별 시장 기회
**지역별 시장 규모 및 성장률:**
1. 북미: 38% (CAGR 15.2%)
2. 유럽: 27% (CAGR 16.8%)
3. 아시아태평양: 22% (CAGR 22.5%)
4. 중동 및 아프리카: 8% (CAGR 19.3%)
5. 남미: 5% (CAGR 17.6%)
**주요 타겟 국가 (우선순위):**
1. 미국
2. 한국
3. 일본
4. 영국
5. 호주
6. 캐나다
7. 독일
### 4.2 인구통계학적 분석
**연령대별 사용자 분포:**
- 18-24세: 28%
- 25-34세: 42%
- 35-44세: 18%
- 45-54세: 8%
- 55세 이상: 4%
**성별 분포:**
- 여성: 62%
- 남성: 38%
**직업별 분포:**
- 마케팅/PR: 22%
- 학생: 18%
- 프리랜서: 15%
- 소상공인: 14%
- 기업 직원: 12%
- 교육자: 8%
- 기타: 11%
### 4.3 사용자 니즈 분석
**해결되지 않은 사용자 니즈:**
1. **시간 효율성**: 현재 앱들은 여전히 콘텐츠 제작에 많은 시간 소요
- 기회: 3탭 이내 완성 원칙으로 차별화
2. **텍스트 중심 디자인**: 대부분의 앱이 이미지 중심으로 설계됨
- 기회: 텍스트 표현과 타이포그래피에 특화된 기능 개발
3. **모바일 최적화**: 기존 앱들은 데스크톱 기능을 모바일로 축소한 경향
- 기회: 모바일 네이티브 경험 제공
4. **오프라인 기능**: 대부분의 앱이 온라인 연결 필요
- 기회: 강력한 오프라인 모드 지원
5. **개인화**: 사용자별 맞춤형 추천 및 설정 부족
- 기회: 사용 패턴 기반 개인화된 템플릿 및 기능 추천
## 5. SWOT 분석
### 5.1 강점 (Strengths)
- 텍스트 중심 특화로 차별화된 포지셔닝
- 모바일 네이티브 경험에 최적화된 설계
- "3탭 이내" 원칙으로 사용 용이성 극대화
- 강력한 오프라인 기능 지원
- 경쟁사 대비 합리적인 가격 책정
### 5.2 약점 (Weaknesses)
- 신생 앱으로서의 낮은 인지도
- 제한된 초기 템플릿 라이브러리
- 경쟁사 대비 제한된 개발 리소스
- 이미지 편집 기능의 제한
- 초기 사용자 기반 부족
### 5.3 기회 (Opportunities)
- 텍스트 중심 콘텐츠의 인기 증가
- 모바일에서의 콘텐츠 제작 수요 증가
- 소셜 미디어 플랫폼의 지속적 성장
- 비전문가의 디자인 수요 증가
- 구독 기반 모델의 수용성 증가
### 5.4 위협 (Threats)
- 기존 대형 경쟁사의 시장 지배력
- 유사 기능을 제공하는 신규 앱의 등장
- 소셜 미디어 플랫폼의 자체 디자인 도구 개발
- 무료 대안의 증가로 인한 가격 압박
- 빠르게 변화하는 디자인 트렌드와 기술
## 6. 시장 진입 전략
### 6.1 차별화 전략
ZELLYY는 다음과 같은 핵심 차별화 포인트를 중심으로 시장에 진입할 계획입니다:
1. **텍스트 중심 특화**
- 텍스트 표현과 타이포그래피에 특화된 기능 개발
- 다양한 텍스트 레이아웃 및 스타일링 옵션 제공
- 텍스트 중심 콘텐츠를 위한 최적화된 템플릿 제공
2. **극도의 단순함**
- "3탭 이내" 원칙으로 설계된 워크플로우
- 필수 기능만 포함하여 학습 곡선 최소화
- 직관적인 디자인 가이드라인 내장
3. **모바일 네이티브 경험**
- 모바일 환경에 완전히 최적화된 인터페이스
- 터치 제스처를 활용한 직관적 조작
- 오프라인 작업 지원
### 6.2 가격 전략
ZELLYY는 프리미엄(freemium) 모델을 채택하여 기본 기능은 무료로 제공하고, 고급 기능은 구독 모델을 통해 수익화할 계획입니다:
**무료 버전:**
- 기본 카드 제작 및 편집 기능
- 제한된 템플릿 세트 (50개)
- 기본 소셜 미디어 공유 기능
- 워터마크 포함 내보내기
- 로컬 저장 기능
**프리미엄 구독 ($4.99/월 또는 $39.99/년):**
- 모든 템플릿 접근 권한
- 워터마크 제거
- 고급 텍스트 효과 및 스타일링
- 클라우드 저장 및 동기화
- 우선 고객 지원
**초기 프로모션:**
- 출시 후 첫 3개월간 연간 구독 30% 할인
- 얼리 어답터 특별 혜택 (평생 20% 할인)
- 인플루언서 파트너십 프로그램
### 6.3 마케팅 전략
**디지털 마케팅:**
- 인스타그램, 페이스북, 틱톡 등 소셜 미디어 광고
- 구글 검색 및 앱스토어 최적화 (ASO)
- 콘텐츠 마케팅 (블로그, 튜토리얼, 디자인 팁)
- 이메일 마케팅 캠페인
**인플루언서 협업:**
- 디자인, 마케팅, 소셜 미디어 관련 인플루언서 파트너십
- 인플루언서 제작 튜토리얼 및 사용 사례
- 공동 브랜딩 템플릿 개발
**커뮤니티 구축:**
- 사용자 커뮤니티 플랫폼 구축
- 디자인 챌린지 및 콘테스트 개최
- 사용자 제작 템플릿 공유 시스템
**파트너십:**
- 소셜 미디어 플랫폼과의 공식 파트너십
- 소규모 비즈니스 지원 프로그램
- 교육 기관 할인 프로그램
## 7. 결론 및 권장사항
### 7.1 시장 기회 요약
ZELLYY는 다음과 같은 시장 기회를 활용할 수 있습니다:
1. 텍스트 중심 콘텐츠 제작에 특화된 앱에 대한 수요 증가
2. 모바일에서의 콘텐츠 제작 선호도 증가
3. 비전문가의 디자인 도구 사용 증가
4. 소셜 미디어 플랫폼의 지속적 성장
5. 사용 용이성에 대한 높은 가치 부여
### 7.2 주요 권장사항
1. **단계적 출시 전략**
- MVP 출시 후 사용자 피드백 기반 기능 확장
- 핵심 차별화 요소에 집중하여 초기 사용자 확보
2. **타겟 사용자 집중**
- 초기에는 콘텐츠 크리에이터와 소상공인에 집중
- 사용자 성공 사례 구축 및 홍보
3. **지속적인 템플릿 업데이트**
- 트렌드를 반영한 정기적 템플릿 업데이트
- 사용자 생성 템플릿 시스템 구축
4. **데이터 기반 개선**
- 사용자 행동 분석을 통한 지속적 UX 개선
- A/B 테스트를 통한 전환율 최적화
5. **확장 계획**
- 웹 버전 개발을 통한 크로스 플랫폼 지원
- AI 기능 도입을 통한 경쟁력 강화
### 7.3 성공 지표
ZELLYY의 시장 진입 성공을 측정하기 위한 주요 지표:
1. **사용자 확보**: 출시 6개월 내 50,000명 이상의 활성 사용자
2. **구독 전환율**: 무료 사용자의 5% 이상 유료 구독 전환
3. **사용자 참여**: 사용자당 월 평균 10개 이상의 카드 작성
4. **공유율**: 작성된 카드의 30% 이상이 SNS에 공유됨
5. **사용자 유지율**: 30일 사용자 유지율 40% 이상
6. **앱스토어 평점**: 4.5/5.0 이상 유지
이 시장 조사 보고서는 ZELLYY의 시장 진입 및 성장 전략 수립을 위한 기초 자료로 활용될 수 있으며, 시장 상황 변화에 따라 정기적으로 업데이트될 예정입니다.

48
ZELLYY/zellyy note/README.md Normal file
View File

@@ -0,0 +1,48 @@
# ZELLYY 프로젝트
## 프로젝트 개요
ZELLYY는 모바일 중심의 카드 제작 애플리케이션으로, 사용자들이 디자인 전문 지식 없이도 고품질의 시각적 콘텐츠를 쉽고 빠르게 제작할 수 있도록 돕는 서비스입니다. 특히 소셜 미디어에 공유하기 위한 텍스트 중심의 카드(인용구, 생각, 아이디어 등)를 직관적인 인터페이스로 제작하고 관리할 수 있습니다.
## 폴더 구조
- **00_프로젝트_개요/**: 프로젝트의 비전, 미션, 핵심 문제 정의, 사용자 페르소나 등
- **01_기획_및_설계/**: 요구사항 분석, MVP 기능 목록, 주요 사용 시나리오, UI/UX 설계 등
- **02_기술_문서/**: 시스템 아키텍처, 데이터 모델, API 명세 등
- **03_개발_단계/**: 개발 로드맵, 스프린트 계획, 개발 가이드라인 등
- **04_참고자료/**: 경쟁 앱 분석, 시장 조사 자료, 참고 리소스 등
## 주요 문서
- [프로젝트 개요](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/01_프로젝트_소개.md)
- [핵심 문제 정의](핵심_문제_정의.md)
- [사용자 페르소나](1.%20Project/2.%20ZELLYY/젤리의%20노트/00_프로젝트_개요/사용자_페르소나.md)
- [MVP 기능 목록](1.%20Project/2.%20ZELLYY/젤리의%20노트/01_기획_및_설계/MVP_기능_목록.md)
- [주요 사용 시나리오](주요_사용_시나리오.md)
- [시스템 아키텍처](./04_시스템_아키텍처.md)
- [개발 로드맵](./05_개발_로드맵.md)
- [데이터 모델 설계](./06_데이터_모델_설계.md)
## 개발 환경
- **프론트엔드**: React Native, Redux, TypeScript
- **백엔드**: Supabase, Node.js (필요시)
- **웹 프론트엔드**: React.js, Next.js (향후 개발)
- **인프라**: Supabase 자체 호스팅 (Debian 12 서버)
## 팀 구성
- **프로젝트 매니저**: 1명
- **UI/UX 디자이너**: 1명
- **모바일 개발자**: 2명
- **백엔드 개발자**: 1명
- **QA 엔지니어**: 1명
## 프로젝트 일정
- **기획 및 설계**: 2023년 Q4
- **모바일 앱 MVP 개발**: 2024년 Q1
- **베타 테스트 및 개선**: 2024년 Q2
- **출시 및 클라우드 동기화**: 2024년 Q3
- **웹 서비스 개발**: 2024년 Q4
- **커뮤니티 기능 및 확장**: 2025년 Q1-Q2