코딩 없이 AI로 웹서비스 만들기: 내 앱에 AI 탑재! (4부)
카페를 운영한다고 상상해보세요. 카페의 주력은 커피지만, 손님을 끌어들이는 건 종종 디저트나 빵이죠. 그런데 그 빵이 늘 카페에서 직접 만들어지는 건 아닙니다. 어떤 빵은 제빵 공장에서 완성된 상태로 납품받아 그냥 진열합니다. 어떤 빵은 반죽만 받아서 카페 오븐에 굽기만 합니다. 손님 눈에는 '카페 브랜드의 빵'처럼 보이지만, 핵심 기술은 외부 전문가가 제공한 것이죠. AI도 마찬가지입니다. 내 서비스가 AI 회사에 요청을 보내고, AI가 결과를 돌려주면, 그 결과를 사용자에게 보여주면 됩니다. 사용자 입장에서는 내 서비스 안에 AI가 내장된 것처럼 느껴지지만, 실제로는 외부 AI 회사의 기술을 연결해서 쓰는 것이죠. 이때 카페(내 서비스)와 제빵 공장(AI 회사)을 이어주는 다리 역할을 하는 것이 바로 API(Application Programming Interface)입니다. [toc] AI를 활용해서 만들 수 있는 기능들 | 기능 | 예시 | | --- | --- | | 💬 AI 챗봇 | 쇼핑몰의 '24시간 고객 상담 봇', 병원 예약 사이트의 '증상 안내 봇', SaaS 서비스의 '온보딩 도우미' | | ✍️ 콘텐츠 자동 생성 | 상품 등록 시 설명 문구 자동 생성, 부동산 사이트에서 매물 소개글 초안 작성, 블로그 플랫폼의 제목 추천 | | 🖼️ 이미지 분석 | 중고거래 앱에서 사진 업로드 시 카테고리 자동 분류, 패션 앱에서 옷 사진으로 코디 추천, 음식 앱에서 사진으로 칼로리 추정 | | 🗂️ 자동 분류·태깅 | 고객 문의를 '기술/결제/배송'으로 자동 분류해 담당자에게 배정, 콘텐츠 플랫폼에서 게시글 자동 카테고리 분류 | | 🔍 스마트 검색 | 키워드가 아닌 자연어로 검색 가능 ('빨간 원피스' → 관련 상품 연결), 사내 문서 검색 고도화 | 주요 AI API 서비스 비교 | 서비스 | 특징 | 추천 용도 | | --- | --- | --- | | Google (Gemini) | Gemini 2.5 Flash가 현재 안정 버전. Gemini 3.1 시리즈 Preview 공개 중. 무료 티어 유지, 텍스트·이미지·음성·영상 멀티모달 지원. Google Search 연동 기능 내장. 4월 초 추론량 기반 신규 요금 체계 도입. | 초기 테스트, 이미지·영상 분석, 비용 절감 | | OpenAI (ChatGPT) | GPT-4.1이 GPT-4o를 대체한 현재 권장 프로덕션 모델. 컨텍스트 창 100만 토큰으로 대폭 확대, GPT-4o보다 저렴($2/$8). 경량 버전 GPT-4.1 mini·nano 출시. GPT-5 시리즈도 공개되어 복잡한 추론·코딩에 활용. 생태계 가장 큼. | 챗봇, 요약, 코딩, 긴 문서 처리 | | Anthropic (Claude) | Claude Opus 4.6(2026년 2월 출시)이 최신 플래그십. 컨텍스트 창 100만 토큰을 2026년 3월부터 추가 요금 없이 표준 제공. 복잡한 멀티에이전트 '팀' 기능 지원. 긴 문서·한국어 품질·안전성 평가에서 높은 점수. 코딩·추론 벤치마크 최상위권. | 긴 문서 분석, 복잡한 추론, 고품질 한국어 응답 | | OpenRouter (그 외 다수) | OpenAI·Anthropic·Google 등 200개 이상의 AI 모델을 하나의 API Key로 통합 접근. 무료 모델 다수 포함 (Llama, Gemma, Mistral, DeepSeek 등). 모델별 가격 비교·전환이 쉬워 비용 최적화에 유리. 프로토타입 제작·모델 실험에 최적. | 무료·저렴한 모델 탐색, 멀티모델 비교, 비용 절감 | API 비용은 얼마나 드나요? API 비용은 쓴 만큼만 내는 종량제입니다. 수도 요금이나 전기세처럼 많이 쓰면 많이 내고, 적게 쓰면 적게 냅니다. 월정액 구독과 달리, 서비스 이용자가 없으면 비용도 0원입니다. 과금 단위는 '토큰(Token)'입니다. AI가 텍스트를 읽고 처리하는 최소 단위라고 생각하면 됩니다. 영어 기준 약 4글자가 1토큰이고, 한국어는 글자당 약 1~2토큰입니다. AI 회사마다 기준이 조금씩 다르지만, ChatGPT의 경우 공식 홈페이지에서 직접 확인해볼 수 있어요. https://platform.openai.com/tokenizer 비용 주의! API는 사용한 만큼 청구됩니다. 사용자가 몰리거나 구현 과정에서 실수가 생기면 예상치 못한 큰 비용이 발생할 수 있습니다. 반드시 사용 한도(Usage Limit)를 설정하세요. (참고) OpenRouter란? — AI 업계의 ‘유통 전문 회사’ 앞서 나온 카페-베이커리 비유로 돌아가면, OpenRouter는 여러 베이커리(AI 회사)와 한 번에 계약을 맺어주는 중간 유통사와 같습니다. 각 회사마다 별도로 계약(API Key 발급)하지 않아도 됩니다. 하나의 API Key로 OpenAI, Anthropic, Google, Meta, Mistral 등 200개 이상의 모델을 호출할 수 있습니다. 무료 모델도 다수 포함되어 있어, 비용 없이 시작하기에 최적입니다. 처음 시작한다면? OpenRouter의 무료 모델로 시작하세요. Meta Llama, Google Gemma, Mistral 등 강력한 AI 모델들을 무료로 사용해볼 수 있습니다. AI 연동의 전 과정을 비용 없이 경험한 뒤, 필요에 맞는 유료 모델로 이동하면 됩니다. OpenRouter에서 쓸 수 있는 무료·저렴한 모델 예시 (2026년 4월 기준) | 모델 | 만든 곳 | 특징 | 비용 | | --- | --- | --- | --- | | Qwen 3.6 Plus | Alibaba | 2026년 4월 무료 모델 사용량 1위. 1M 컨텍스트. 코딩·에이전트·추론 매우 강력. SWE-bench 점수 78.8점으로 적어도 코딩 작업에서 GPT-5급 성능에 근접. | 무료 | | Llama 4 Maverick | Meta | MoE 구조(400B의 파라미터 중 17B 활성화). 1M 컨텍스트. 이미지+텍스트 멀티모달. 범용 다중언어 지원. | 일부 무료 | | Nemotron 3 Super | NVIDIA | 262K 컨텍스트. Mamba-Transformer 하이브리드 구조. 긴 문서 처리에 특화, 빠른 생성 속도. | 무료 | | GPT-OSS 120B | OpenAI | OpenAI의 최초 오픈웨이트 모델 (Apache 2.0). GPT-4급 성능을 무료로 제공. | 무료 | AI 코딩 툴로 연결하기 STEP 1 — API Key 발급 API Key는 AI 회사가 '누가 요청을 보냈는지' 확인하는 비밀 열쇠입니다. OpenAI: platform.openai.com/api-keys Anthropic: console.anthropic.com/settings/keys Google Gemini: aistudio.google.com/apikey API Key = 신용카드 번호와 같습니다. 절대 프론트엔드 코드나 GitHub에 올리지 마세요. 유출되면 타인이 내 비용으로 API를 사용할 수 있습니다. 웹서비스를 공개하기 전에, AI 코딩 툴을 활용해 보안 점검을 반드시 한 번 더 진행하세요. STEP 2 — 환경 변수 설정 AI 코딩 툴에 이렇게 요청하세요: "OpenAI API 키를 .env 파일에 저장해줘. 변수명은 OPENAIAPIKEY로" ".env 파일이 .gitignore에 포함되어 있는지 확인해줘" STEP 3 — API 호출 코드 작성 AI API는 반드시 서버에서만 호출해야 합니다. 프론트엔드에서 직접 호출하면 API Key가 외부에 노출될 수 있습니다. "Next.js API Route로 OpenAI GPT-4.1에 요청 보내는 코드 만들어줘. 사용자 입력을 받아서 요약 결과를 돌려줘" "대화 기록을 유지해서 이전 대화 맥락을 기억하게 해줘" STEP 4 — 비용 제한 설정 ⚠️ 각 서비스 대시보드에서 월간 사용량 상한(Usage Limit) 설정 "사용자당 하루 20번까지만 AI 요청 가능하게 제한해줘. Upstash Redis로 횟수 추적해줘" STEP 5 — 프론트엔드 UI 연결 "AI 응답이 오는 동안 로딩 애니메이션 보여주고, 스트리밍으로 한 글자씩 표시해줘" "에러 응답이 오면 '잠시 후 다시 시도해주세요' 메시지 보여줘" AI를 내 서비스 안에 접목시키기 핵심 개념 — "프롬프트로 자동화한다" 평소 여러분이 ChatGPT나 Claude에서 하던 일을 떠올려보세요. "이 문장을 한국어로 번역해줘" "다음 리뷰를 긍정/부정/중립으로 분류해줘" "아래 계약서 핵심 조항을 3줄로 요약해줘" API로 연결한다는 건, 바로 이 대화를 여러분의 웹서비스 안에서 자동으로 반복 실행되도록 만드는 것입니다. 사용자가 버튼을 누르거나, 파일을 올리거나, 폼을 제출할 때마다 서버가 AI에게 프롬프트를 전송하고, 결과를 받아 화면에 보여주는 구조입니다. | 채팅 앱에서 직접 쓸 때 | 내 웹서비스에 API로 붙이면 | | --- | --- | | 사용자가 직접 프롬프트를 입력 | 서비스가 자동으로 프롬프트 생성·전송 | | 매번 수동으로 복사·붙여넣기 | 버튼 클릭 한 번으로 자동 처리 | | 결과를 직접 보고 수동 저장 | 결과가 자동으로 DB에 저장되거나 화면에 표시 | | 나 혼자만 사용 가능 | 수천 명의 사용자가 동시에 사용 가능 | 결국 "AI API를 서비스에 붙인다"는 것은 "내가 채팅 앱에서 직접 하던 작업을 서비스가 자동으로 대신한다"는 뜻입니다. 시나리오 1 — 고객 문의 자동 분류 + 담당자 배정 하루에도 쉴 새 없이 쏟아지는 고객 문의. 쇼핑몰, SaaS, 예약 플랫폼을 운영하다 보면 매일 반복되는 분류 작업에 금세 지치게 됩니다. '이건 기술팀, 저건 결제팀…' 한숨을 쉬며 화면을 바라보던 순간, 시스템이 조용히 움직이기 시작합니다. 고객이 문의 폼을 제출하는 순간 서버가 알아서 AI에게 분류를 맡기고, 결과는 DB에 차곡차곡 쌓입니다. 내가 손가락 하나 까딱하지 않아도 알림은 이미 각 담당자에게 도착해 있죠. AI 코딩 툴 프롬프트 예시 고객이 문의를 제출하면 OpenAI GPT-5 Nano API를 호출해서 문의 내용을 '기술문제 / 결제·환불 / 배송 / 기타' 4가지 카테고리 중 하나로 분류해줘. 분류 결과를 Supabase DB에 저장하고, 카테고리별 담당자 이메일로 Resend를 통해 알림을 보내줘. 추천 모델 & 비용 GPT-5 Nano — 단순 분류 작업이므로 가장 저렴한 모델로 충분 문의 1건당 약 $0.0001 이하 (사실상 무시 가능한 수준) 시나리오 2 — 상품 설명 자동 생성 오늘도 신상품 수십 개를 등록해야 하는 막막한 아침. 커머스와 마켓플레이스를 운영하다 보면 그럴듯한 상품 설명을 매번 직접 써야 하는 일이 은근히 큰 부담입니다. '이 옷은 소재가 좋고...' 키보드 위에서 멈춰 있던 손가락. 이제는 상품명과 카테고리, 주요 특징만 입력하고 'AI 설명 생성' 버튼을 누르면 됩니다. 눈 깜짝할 사이에 매력적이면서도 검색에 유리한 설명문 초안이 채워지고, 살짝만 다듬어 등록하면 끝입니다. AI 코딩 툴 프롬프트 예시 상품 등록 폼에서 상품명, 카테고리, 주요 특징(쉼표 구분) 3가지를 입력받아 Gemini 3 Flash로 200자 내외의 한국어 상품 설명을 생성하는 버튼을 만들어줘. 생성된 텍스트는 설명 입력창에 자동으로 채워지고, 판매자가 수정할 수 있어야 해. 추천 모델 & 비용 Gemini 3 Flash — 자연스러운 한국어 생성에 적합 설명 1건 생성 비용 약 $0.001 (100원 미만) 시나리오 3 — 24시간 AI 고객 상담 챗봇 새벽 3시. SaaS 서비스나 병원 예약 사이트에는 밤낮이 따로 없습니다. 담당자가 모두 퇴근한 시간에도 다급한 사용자의 질문은 채팅창에 끊임없이 올라옵니다. 예전이라면 다음 날 아침까지 기다려야 했겠지만, 이제는 챗봇이 대화 맥락을 파악해 즉각적으로 답변합니다. 모두가 잠든 사이에도 고객은 불편함 없이 궁금증을 해결하고, 우리 서비스는 24시간 멈추지 않습니다. AI 코딩 툴 프롬프트 예시 우리 서비스의 FAQ 내용을 시스템 프롬프트에 넣어서 Gemini 3 Flash 기반 챗봇을 만들어줘. 대화 기록은 최근 10턴만 유지해서 컨텍스트로 전달하고, 답변은 스트리밍으로 실시간 표시해줘. 시스템 프롬프트: '당신은 [서비스명]의 친절한 고객 상담사입니다. 아래 FAQ를 기반으로 답변하세요. 모르는 내용은 고객센터 연결을 안내하세요.' 추천 모델 & 비용 Gemini 3 Flash 또는 GPT-5 Mini — 빠른 응답 속도와 비용 균형 대화 1회(10턴 기준) 약 $0.005~0.01 시나리오 4 — 사진으로 카테고리 자동 분류 (이미지 분석) 수많은 사용자가 매일 물건을 사고파는 중고거래 앱과 패션 플랫폼에서는, 사진을 올릴 때마다 카테고리와 상태를 일일이 선택하게 하면 이탈률이 높아지기 쉽습니다. 하지만 이제는 다르죠. 사용자가 무심코 찍은 옷 사진 한 장을 업로드하는 순간, 백엔드의 AI가 이미지를 분석해 '여성복/원피스', '상태: 양호'처럼 빈칸을 척척 채워 넣습니다. 번거로운 과정이 사라지면 사용자는 놀라움과 함께 훨씬 더 자연스럽게 다음 단계로 넘어가게 됩니다. AI 코딩 툴 프롬프트 예시 사용자가 상품 사진을 업로드하면 Gemini 3 Flash API로 이미지를 분석해서 ①카테고리(의류/전자기기/가구/기타), ②상태(새것/양호/사용감 있음), ③한 줄 설명을 JSON 형태로 반환하는 API를 만들어줘. 반환된 값으로 상품 등록 폼을 자동으로 채워줘. 추천 모델 & 비용 Gemini 3 Flash — 이미지 분석 가성비 최강 이미지 1장 분석 비용 약 $0.005~0.02 시나리오 5 — 긴 문서 요약 (리뷰·계약서·리포트) 수십 장짜리 판례, 끝없이 이어지는 영문 리뷰, 복잡한 B2B 계약서. 이런 긴 텍스트 앞에서 사용자가 느끼는 피로감은 결코 작지 않습니다. '어디서부터 읽어야 하지...' 막막하게 화면을 바라보던 시간은 이제 끝났습니다. 문서를 올리는 순간, AI가 핵심만 깔끔하게 추려 3~5줄짜리 요약본을 바로 보여줍니다. 아무리 긴 문서라도 이제는 단 몇 초 만에 핵심을 파악할 수 있습니다. AI 코딩 툴 프롬프트 예시 사용자가 텍스트(최대 5,000자)를 붙여넣으면 Gemini 3.1 Flash-Lite API로 다음 3가지를 추출해서 보여줘: ①한 줄 요약, ②핵심 포인트 3가지(불릿), ③주의해야 할 내용(있는 경우만). 한국어로 출력하고 마크다운 형식으로 보여줘. 추천 모델 & 비용 Gemini 3.1 Flash-Lite — 한국어 요약 품질이 높고 비용 효율적 A4 1장 요약 비용 약 $0.003~0.005 각 AI 모델의 성능과 비용 등을 더 알고 싶으면 아래 페이지를 참조하세요. - 내게 맞는 AI 찾기 - AI 성능 비교
