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