7.6 KiB
7.6 KiB
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
데이터 흐름
기본 데이터 흐름
- 사용자가 모바일 앱에서 카드 제작/편집
- 로컬 저장소에 변경사항 저장
- 온라인 상태일 때 Supabase에 동기화
- 다른 기기에서 접속 시 Supabase에서 최신 데이터 가져오기
오프라인 지원
- 오프라인 상태에서 모든 변경사항 로컬에 저장
- 변경사항을 작업 큐에 추가
- 온라인 상태가 되면 작업 큐 처리
- 충돌 발생 시 해결 전략 적용 (최신 타임스탬프 우선, 사용자 선택 등)
주요 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 기능 통합
- 디자인 추천 및 자동화
- 콘텐츠 분석 및 최적화