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

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는 다양한 사용자의 니즈를 충족시키는 동시에, 각 사용자 그룹에 특화된 기능과 콘텐츠를 제공하여 차별화된 가치를 전달할 수 있습니다.