publish: true
포도 기술 아키텍처
아키텍처 개요
포도는 BaaS(Backend-as-a-Service) 중심 아키텍처를 채택했다. 별도 백엔드 서버 구현 없이 Supabase가 인증·DB·Storage·Realtime을 모두 담당하며, 프론트엔드 클라이언트(웹 + 모바일)가 Supabase에 직접 접근하는 구조다. 선택 배경은 adr-001-supabase 참조.
기술 스택 요약
상세 선택 이유는 stack 참조.
클라이언트
| 기술 | 역할 |
|---|---|
| React | 웹 UI |
| React Native (Expo) | iOS/Android 크로스플랫폼 모바일 앱 |
| TypeScript | 전체 코드베이스 타입 안정성 |
| Zustand | 경량 클라이언트 상태관리 |
| TanStack Query | 서버 상태관리 (캐싱, 동기화) |
| Tailwind CSS | 유틸리티 기반 스타일링 |
| Zod | 런타임 스키마 검증 + OpenAPI 자동 생성 파이프라인 |
| Vite | 웹 빌드 도구 |
| Metro | React Native 번들러 |
인프라 / 백엔드
| 기술 | 역할 |
|---|---|
| Supabase | BaaS — PostgreSQL, Auth, Storage, Realtime 통합 제공 |
| PostgreSQL | Supabase 내장 DB |
| GitHub Actions | CI/CD |
| n8n | 팀 자동화 워크플로우 |
디자인 시스템
Figma 기반 컴포넌트 설계를 실제 코드 컴포넌트로 전환하는 방식으로 운영한다.
- 디자인 토큰: 색상·타이포그래피·간격 등 반복되는 스타일 요소를 토큰으로 코드화
- 목적: 디자인과 개발 간 표현 불일치 최소화, 개발 생산성 확보
- 화면 정의서는 기획자·개발자가 공동으로 작성, 사용자 흐름 시각화
데이터베이스 설계
- DB: PostgreSQL (Supabase 내장)
- ERD 관리: ERDCloud로 시각화 (https://www.erdcloud.com/d/ufeSkHAAPej96zwTB)
- 스키마 변경 이력은 ERDCloud에서 추적
API 설계
Supabase 자동 생성 API를 기반으로 클라이언트 친화적인 스키마 설계 추가.
- Zod → OpenAPI → Redoc 파이프라인: Zod 스키마로 타입 검증 → OpenAPI 스펙 자동 생성 → Redoc으로 API 문서 시각화
- 목적: 명확한 API 스펙 공유, 프론트-백 불일치 방지
연구소 (개발환경 문서 위치)
Notion 연구소 페이지에 Frontend·Backend·Devops별 개발환경 설정 문서가 있음.
- Frontend 개발환경: https://www.notion.so/1d1b542c84fa81aaacf8c34b823220ca
- Backend 개발환경: https://www.notion.so/1d1b542c84fa8102868aeea1da07ce08
- Devops 개발환경: https://www.notion.so/1d1b542c84fa81ca9da3ceb03ad5139b