학습 목표
- 서비스에 맞는 기술 스택 고르기의 역할과 적용 조건을 설명할 수 있다.
- 검색·실시간·모바일·관계형 조회·예상 트래픽 요구를 표로 적으세요.
- 선택 조합과 선택하지 않은 이유를 결정 문서에 남기세요.
사전 지식
앞선 AI에게 작업을 요청하는 순서를 먼저 읽으면 용어를 이해하기 쉽습니다. 이미 아는 내용이면 이 장부터 시작해도 됩니다.
개념 이해
기술 스택은 화면·서버·데이터·배포 도구의 조합입니다. 인기보다 서비스가 요구하는 검색, 관계, 실시간, 사용자 환경과 운영 역량을 기준으로 선택합니다.
프론트엔드 선택
HTML/CSS/JavaScript는 작은 정적 화면에 단순합니다. TypeScript는 값의 형태를 확인하고, React·Vue는 상태가 많은 화면을 구성합니다. Next.js는 React 기반 라우팅·서버 기능을, Flutter는 여러 플랫폼의 앱 UI를 다룹니다.
백엔드 선택
Firebase·Supabase는 인증·데이터·스토리지 같은 관리형 기능을 제공합니다. Node.js는 JavaScript/TypeScript 서버에, Django는 업무 기능을 묶은 Python 서버에, FastAPI는 타입 기반 Python API에 맞는 선택지입니다.
데이터베이스 선택
Firestore는 문서 중심 접근과 실시간 구독에, PostgreSQL·MySQL은 관계와 SQL 조회에 적합합니다. SQLite는 로컬·작은 단일 환경에 단순하고, Redis는 빠른 임시 저장·캐시에 자주 쓰지만 영구 주 저장소를 무조건 대체하지 않습니다.
호스팅과 운영 부담
Firebase Hosting·Vercel·Netlify·Cloudflare·Render·Railway는 지원 런타임·리전·빌드·저장·실행 과금이 다릅니다. 무료 한도와 서버가 필요한 기능을 먼저 확인합니다.
추천 구성의 조건
작은 웹은 React+Firebase Auth+Firestore+Hosting으로 시작할 수 있습니다. SEO 웹은 Next.js+PostgreSQL+서버 API, 모바일은 Flutter+Firebase/Supabase, 복잡한 업무는 React/Next.js+Django/FastAPI+PostgreSQL을 검토합니다. Redis는 병목이 확인될 때 추가합니다.
실제 사용 사례
검색 노출이 중요한 공개 서비스 소개 화면과 개인 메모 앱은 요구가 다릅니다. 소개 화면은 서버 렌더링과 검색 메타데이터가 중요하고, 메모 앱은 사용자별 접근과 실시간 저장 경험이 더 중요할 수 있습니다.
단계별 실습
실습은 운영 서비스가 아닌 별도 연습 프로젝트에서 진행하세요. 기존 파일이 있다면 변경 전 기록을 남깁니다.
- 검색·실시간·모바일·관계형 조회·예상 트래픽 요구를 표로 적으세요.
- 화면·서버·DB·호스팅 후보를 2개씩 골라 장단점과 학습 난이도를 비교하세요.
- 예상 읽기·쓰기·API·이미지 사용량으로 비용 변수를 적으세요.
- 선택 조합과 선택하지 않은 이유를 결정 문서에 남기세요.
코드와 프롬프트
아래 요청에서 대괄호 부분을 내 프로젝트에 맞게 바꾼 뒤 AI 도구에 전달하세요.
[서비스]의 검색·실시간·모바일·데이터 관계·예상 요청량은 [요구]야. 화면/서버/DB/호스팅 후보를 장점·단점·난이도·비용 특성·추천 프로젝트로 비교하고 최소 구성 하나를 제안해줘. 특정 기술이 무조건 우수하다고 단정하지 말아줘.자주 발생하는 문제와 해결
| 문제와 원인 | 해결 방법과 확인 기준 |
|---|---|
| 처음부터 Redis와 여러 서버를 붙임 | 현재 병목을 측정하기 전에는 단순한 관리형 구성으로 시작합니다. |
| 정적 호스팅에 서버 API를 배포함 | 런타임과 서버 기능 지원 여부를 배포 문서에서 확인합니다. |
핵심 요약
- 운영할 수 있는 최소 구성을 고릅니다.
- 기술별 요금과 지원 기능은 공식 문서에서 재확인합니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 요금·사용 한도·제품 기능·설정 경로는 변경될 수 있으므로 작업 직전 공식 문서와 설치 버전을 확인하세요.