서비스 연결하기
DB, 인증, 결제, 이메일 등 외부 서비스를 앱에 어떻게 연결하는지 알려드립니다.
📋 이 글을 읽기 전에
아래 내용을 먼저 읽으면 이 가이드를 더 쉽게 따라할 수 있습니다.
Ad Space — guide-connect-top
01서비스 연결이란?
앱을 만들면 보통 여러 외부 서비스가 필요합니다. 데이터 저장(DB), 로그인(인증), 결제, 이메일 발송 등. 이 서비스들은 각각의 회사가 제공하며, API 키로 연결합니다.
란 서비스에 접근하기 위한 비밀번호 같은 것입니다. 보통 파일에 저장합니다.
어떤 서비스를 선택해야 할지 모르겠다면 뭘 써야 할지 모를 때 가이드를 참고하세요.
🏗️ 쉽게 이해하기
앱을 집이라고 생각하세요. 프레임워크(Next.js)는 집의 구조이고, DB는 창고, 인증은 현관 잠금장치, 결제는 계산대, 이메일은 우편함입니다. 각각의 서비스는 전문 업체가 제공하고, API 키라는 열쇠로 연결합니다.
개발자들은 새로운 서비스를 연결할 때 항상 "공식 문서의 Quick Start"부터 따라합니다. 유튜브 튜토리얼보다 공식 문서가 더 정확하고 최신이에요. 막히면 그때 검색하는 게 효율적입니다.
02데이터베이스 연결
사용자 데이터를 저장하려면 데이터베이스가 필요합니다:
왜 필요한가요? 사용자가 입력한 데이터(회원정보, 게시글, 설정 등)를 영구적으로 저장하려면 데이터베이스가 필요합니다. localStorage는 브라우저에만 저장되어 다른 기기에서 접근할 수 없고, 브라우저 데이터를 지우면 사라집니다.
Supabase
무료 티어 있음PostgreSQL + 인증 + 파일 저장. 올인원 솔루션. 초보자에게 가장 추천.
Neon
무료 티어 있음서버리스 PostgreSQL. 빠르고 가볍고 무료 티어가 넉넉함.
PlanetScale
유료MySQL 기반. 대규모 트래픽에 강함.
각 DB의 자세한 비교는 데이터베이스 비교를 확인하세요.
- 1서비스에 가입하고 프로젝트/데이터베이스를 생성합니다.
- 2대시보드에서 연결 URL(Connection String)을 복사합니다.
- 3.env.local 파일에 DATABASE_URL=복사한URL 형태로 저장합니다.
- 4(Prisma 또는 Drizzle)을 설치하고 스키마를 정의합니다.
- 5AI에게 '이 스키마로 CRUD API를 만들어줘'라고 요청합니다.
# .env.local 예시
DATABASE_URL=postgresql://user:password@db.xxx.supabase.co:5432/postgres
비개발자분들이 가장 놀라는 부분이 이거예요 — "DB가 왜 별도 서비스인가요? 앱 안에 포함되어 있는 거 아닌가요?" 웹 앱은 코드(로직)와 데이터(저장)가 분리되어 있습니다. 마치 식당의 주방(코드)과 냉장고(DB)가 다른 것처럼요.
03인증 (로그인) 연결
사용자 로그인 기능을 추가하는 방법:
왜 필요한가요? 사용자마다 다른 데이터를 보여주려면 누가 접속했는지 알아야 합니다. 또한 비밀번호 저장, 소셜 로그인, 비밀번호 재설정 등의 보안 로직을 직접 만드는 것은 매우 위험하고 복잡합니다. 전문 서비스를 사용하는 것이 안전합니다.
Clerk
무료 / $25/월가장 쉬운 인증. UI 컴포넌트 제공. 소셜 로그인 기본 포함.
Auth.js (NextAuth)
무료오픈소스. 직접 커스터마이징 가능. 학습 곡선 있음.
Supabase Auth
무료Supabase 사용 중이면 별도 설치 없이 바로 사용 가능.
더 자세한 비교는 인증 서비스 비교를 참고하세요.
로그인 기능은 개발자들이 가장 "직접 만들고 싶지 않은" 기능 1위입니다. 비밀번호 해싱, 세션 관리, 소셜 로그인 연동... 보안 실수 하나가 전체 서비스를 위험에 빠뜨릴 수 있어서, 차라리 전문 서비스에 맡기는 게 낫습니다.
Ad Space — guide-connect-mid
04결제 연결
유료 서비스를 만들려면 결제 기능이 필요합니다:
왜 필요한가요? 서비스로 수익을 내려면 결제 기능이 필수입니다. 카드 정보를 직접 다루는 것은 PCI DSS 인증이 필요하고 법적 책임이 따르므로, Stripe 같은 전문 결제 서비스를 사용합니다. 수수료(2.9%)를 떼가지만 보안과 편의성을 모두 해결해줍니다.
- 1Stripe에 가입하고 API 키를 받습니다.
- 2STRIPE_SECRET_KEY와 STRIPE_PUBLISHABLE_KEY를 .env.local에 저장합니다.
- 3AI에게 'Stripe Checkout으로 결제 기능을 만들어줘'라고 요청합니다.
- 4을 설정해 결제 완료 이벤트를 받습니다.
- 5테스트 모드에서 충분히 테스트한 후 라이브 모드로 전환합니다.
결제 기능은 반드시 "테스트 모드"에서 먼저 확인합니다. Stripe는 테스트용 카드번호(4242 4242 4242 4242)를 제공해요. 실제 돈이 오가기 전에 모든 시나리오(성공, 실패, 취소, 환불)를 테스트하는 게 개발자의 기본입니다.
05이메일 발송
환영 이메일, 비밀번호 재설정 등 이메일을 보내려면:
왜 필요한가요? 환영 이메일, 비밀번호 재설정, 결제 확인 등 사용자에게 중요한 정보를 전달해야 합니다. Gmail로 직접 보내면 스팸으로 분류되고 대량 발송이 불가능합니다. 전문 이메일 서비스는 높은 전달률을 보장합니다.
06파일 저장 (이미지, 동영상 등)
사용자가 업로드하는 파일을 저장하려면:
왜 필요한가요? 프로필 사진, 첨부파일, 제품 이미지 등 사용자가 업로드하는 파일을 저장할 곳이 필요합니다. 서버에 직접 저장하면 용량 관리가 어렵고 비용이 높습니다. 클라우드 스토리지는 자동으로 확장되고, CDN으로 전 세계에서 빠르게 접근할 수 있습니다.
관련 콘텐츠
Ad Space — guide-connect-bottom