# 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 기능 통합
- 디자인 추천 및 자동화
- 콘텐츠 분석 및 최적화