English | 한국어 | 简体中文 | 日本語 | Português
이 문서는 풀스택 스타터 템플릿의 기술 선정 배경과 이유를 다룹니다.
- 서버 컴포넌트 (RSC): 클라이언트 JS 번들 최소화, 초기 로딩 속도 최적화
- App Router: 레이아웃, 로딩 UI, 에러 처리가 내장된 파일 시스템 기반 라우팅
- Turbopack: Webpack 대비 월등히 빠른 개발 서버 구동 및 빌드 성능
- React 19: Concurrent 기능, Actions,
use()훅 등 최신 성능 최적화 기능 활용
- Zero Runtime: 모든 스타일을 빌드 시점에 컴파일하여 런타임 오버헤드 제거
- Lightning CSS: PostCSS 기반 v3 대비 처리 속도 100배 향상
- CSS 우선: 복잡한 JS 설정 없이 네이티브 CSS 문법 활용
- 최적화된 번들: 미사용 스타일 자동 제거로 최소한의 CSS 파일 생성
- 코드 소유권: npm 의존성 없이 컴포넌트 코드를 직접 프로젝트에 복사하여 완전한 제어권 확보
- Radix UI 기반: 웹 접근성(ARIA, 키보드 탐색) 표준 준수
- Tailwind 네이티브: 프로젝트 전반의 스타일링 방식과 일관성 유지
- 유연한 커스터마이징: 디자인 시스템 제약 없이 자유로운 수정 가능
- 강력한 캐싱: 자동 중복 제거, 백그라운드 갱신, SWR(Stale-While-Revalidate) 전략 지원
- DevTools: 쿼리 상태 시각화 및 디버깅 도구 내장
- 플랫폼 독립성: React Native(모바일)에서도 동일한 개념과 패턴 적용 가능
- Optimistic Updates: 즉각적인 UI 반응성을 위한 낙관적 업데이트 지원
- Atomic 모델: 상태를 원자(Atom) 단위로 구성하여 의존성 기반의 정밀한 렌더링 최적화
- 불필요한 리렌더 방지: 변경된 Atom을 구독하는 컴포넌트만 정확히 업데이트
- TypeScript 친화적: 별도 설정 없이 뛰어난 타입 추론 지원
- 경량화: 약 3KB의 작은 크기, Provider 없는 간편한 사용성
- Headless & Composable:
withFormHOC 패턴으로 UI와 로직을 분리한 모듈형 폼 구성 - 타입 안전성: 폼 값 변화와 검증 로직에 대한 완벽한 TypeScript 추론
- 간결한 API: React Hook Form이나 Formik 대비 직관적이고 깔끔한 인터페이스
- AI/ML 생태계 연동: Python 기반의 방대한 AI 라이브러리(LangChain, Transformers 등) 직접 활용
- 비동기(Async) 네이티브: Starlette 기반의 고성능 비동기 처리 지원
- 문서 자동화: OpenAPI(Swagger) 및 ReDoc 문서 자동 생성
- Pydantic 검증: Python 타입 힌트를 활용한 강력한 데이터 검증
- 확장성: Stateless 아키텍처로 손쉬운 수평 확장 가능
- 유연한 ORM: ORM의 편리함과 Raw SQL의 세밀한 제어를 모두 지원
- 비동기 지원:
asyncpg드라이버를 통한 완전한 비동기 DB 처리 - 마이그레이션: Alembic과의 완벽한 통합으로 체계적인 스키마 버전 관리
- 안정성: 오랜 기간 엔터프라이즈 환경에서 검증된 성숙한 생태계
- ACID 준수: 엄격한 트랜잭션 관리로 데이터 무결성 보장
- JSONB 지원: 정형 데이터와 비정형 데이터(JSON)를 하나의 DB에서 효율적으로 처리
- 벡터 연산 (pgvector): AI 임베딩 저장 및 유사도 검색을 위한 벡터 확장 기능 지원
- 고성능: 고도화된 쿼리 플래너, 병렬 쿼리 실행, 파티셔닝 지원
- 풍부한 확장성: PostGIS(지리정보), 전문 검색(Full-text Search) 등 다양한 기능 내장
- 초저지연 처리: 인메모리 구조를 통한 밀리초(ms) 단위 응답 속도
- 다용도 활용: 캐싱, 세션 저장소, Pub/Sub 메시징, 속도 제한(Rate Limiting) 등
- 데이터 영속성: RDB 스냅샷 및 AOF 로그를 통한 데이터 보존 옵션 제공
- 클러스터링: 대규모 트래픽 처리를 위한 수평 확장 지원
- S3 호환성: AWS S3 API와 완전 호환되어 프로덕션 Cloud Storage로 무리 없이 마이그레이션 가능
- 로컬 개발 환경: 프로덕션 환경과 동일한 API로 개발, 벤더 락인 없이 자유로운 개발
- 셀프 호스팅: Docker/Podman으로 로컬에서 실행, 외부 의존성이나 서비스 계정 불필요
- 오픈 소스: 데이터에 대한 완전한 제어권을 가진 엔터프라이즈급 오브젝트 스토리지
- 전자정부 표준프레임워크 v5: 한국 전자정부 표준 모바일 프레임워크로 공식 선정
- 버전 관리 용이성: 프로젝트별 Flutter/Dart 버전을 명시하여 안정적인 유지보수 가능
- 핫 리로드: 코드 수정 사항을 1초 내에 UI에 반영하여 개발 생산성 극대화
- 네이티브 성능: ARM 코드로 직접 컴파일되어 JS 브릿지 없는 빠른 성능 제공
- 컴파일 타임 안전성: 코드 작성 단계에서 의존성 오류 조기 발견
- 테스트 편의성: Flutter 위젯 트리와 독립적인 상태 관리로 단위 테스트 용이
- Context 독립성:
BuildContext없이도 어디서나 상태에 접근 가능 - 코드 생성:
riverpod_generator를 통해 반복적인 보일러플레이트 코드 최소화
- 선언적 라우팅: 웹 URL 방식의 직관적인 내비게이션 구조
- 딥링크 지원: iOS/Android 딥링크 및 유니버셜 링크 처리에 최적화
- 타입 안전성: 라우트 파라미터에 대한 타입 체크 지원(코드 생성 활용)
- 중첩 내비게이션: 바텀 탭, 셸 라우트(Shell Route) 등 복잡한 UI 구조 쉽게 구현
- Flutter용 shadcn/ui: 웹(shadcn/ui)과 통일된 디자인 언어 및 사용자 경험 제공
- 테마 시스템: Tailwind 스타일의 토큰 시스템으로 일관된 테마 적용
- 접근성 준수: 모바일 환경에 맞는 ARIA 준수 및 시맨틱 요소 지원
- 경량화: 필수적인 위젯만 포함하여 앱 용량 최적화
- 실시간 크래시 모니터링: 운영 환경의 오류를 즉시 감지하고 알림
- 사용자 경로 추적(Breadcrumbs): 오류 발생 직전의 사용자 행동 로그 제공
- 난독화 해제: Flutter/Dart 스택 트레이스를 원본 코드로 자동 복원하여 디버깅 용이
- 무료 등급: 대부분의 앱 서비스에 충분한 무료 사용량 제공
- 배포 자동화: 빌드, 서명, 스토어 업로드까지 명령어 하나로 처리
- 크로스 플랫폼: iOS와 Android 배포 파이프라인을 단일 도구로 관리
- CI 통합: GitHub Actions 등 CI 도구와 완벽하게 연동
- 메타데이터 관리: 스크린샷, 앱 설명, 릴리스 노트 등을 코드로 관리
- IaC (Infrastructure as Code): 인프라를 코드로 정의하여 버전 관리 및 리뷰 가능
- 선언적 구성: 원하는 최종 상태만 정의하면 배포 과정은 도구가 자동 처리
- 상태 관리: 인프라 변경 사항을 추적하고 배포 전 영향도 분석(Plan) 가능
- 모듈화: 인프라 구성 요소를 재사용 가능한 모듈로 관리
- 초기 혜택: 신규 계정 $300 크레딧 및 상시 무료(Always Free) 등급 제공
- 서버리스 컨테이너: 서버 관리 부담 없이 트래픽에 따라 0까지 자동 스케일링(Scale to Zero)
- 합리적 비용: 실제 요청 처리 시간에 대해서만 과금
- 완전 관리형 DB: 백업, 고가용성(HA), 유지보수를 구글이 전담
- 글로벌 CDN: Cloud CDN을 통한 전 세계 빠른 콘텐츠 전송
- 키리스(Keyless) 인증: 보안 취약점이 될 수 있는 장기 서비스 키 관리 불필요
- GitHub 통합: Push, PR, 스케줄 등 다양한 이벤트 트리거 기본 지원
- 매트릭스 빌드: 여러 버전/환경에서의 병렬 테스트 수행
- 생태계: 수천 개의 검증된 커뮤니티 액션 활용 가능
압도적인 속도를 위해 핵심 개발 도구들을 Rust 기반으로 구성했습니다.
- Biome: 린터와 포매터 통합, 기존 ESLint+Prettier 대비 100배 빠른 속도
- uv: Python 패키지 매니저, pip/poetry 대비 10~100배 빠른 설치 속도
- Turbopack: Webpack보다 월등히 빠른 Next.js 전용 차세대 번들러
- Lightning CSS: PostCSS 대비 100배 빠른 TailwindCSS v4 컴파일러
- 폴리글랏 환경 통합: Node, Python, Flutter, Terraform 등 다양한 언어 버전을 하나로 관리
- 프로젝트별 격리:
.mise.toml을 통해 프로젝트마다 독립적이고 일관된 개발 환경 보장 - 통합 태스크 러너: npm scripts, Makefile 등을 대체하는 통합 실행 명령어 제공
- 고성능: Rust로 작성되어 실행 오버헤드가 거의 없음
- 단일 저장소: Web, API, Mobile, Infra 코드를 한곳에서 통합 관리
- 명확한 경계: 각 언어/프레임워크의 의존성과 설정을 디렉토리별로 격리
- 원자적 커밋: 프론트엔드와 백엔드의 변경 사항을 하나의 PR로 처리하여 동기화 문제 해결
- 도구 통일: 언어에 상관없이
mise명령어로 일관된 개발 경험 제공
| 선택 | 대안 | 트레이드오프 | 수용 이유 |
|---|---|---|---|
| Next.js | Remix, SvelteKit | 상대적으로 큰 번들, 높은 복잡도 | React 19 최신 기능 지원, 방대한 생태계 |
| Next.js | Flutter Web | 모바일과 별도 코드베이스 | SEO, SSR, 작은 번들, 웹 생태계 호환성 |
| FastAPI | Node.js (NestJS) | 두 가지 런타임 관리 (Node+Python) | Python의 강력한 AI/ML 라이브러리 활용, 확장성 |
| Flutter | React Native | 앱 용량 증가, 독자적인 렌더링 엔진 | 전자정부 표준 준수, OS 업데이트에 덜 민감한 UI 일관성 |
이 기술 스택은 다음 네 가지 핵심 가치에 최적화되어 있습니다.
- 개발 속도: 핫 리로드, 강력한 타입 시스템, 코드 생성 자동화
- 운영 안정성: 검증된 관리형 서비스, 서버리스 자동 확장, 견고한 CI/CD
- 확장성: 명확한 아키텍처 경계, 공용 도구, 문서화된 표준
- 지속 가능성: 활발한 커뮤니티와 장기적인 기술 지원이 보장된 기술 선정