개발자용 AI 강의 정리: React로 AI 챗봇과 구조화 출력 앱 만들기

핵심 메시지

• 이 강의는 프런트엔드 기초(모던 JS/TS, 기본 React)를 아는 개발자가 애플리케이션에 AI를 넣어 더 똑똑하게 만드는 법을 다룬다.
• 튼튼한 기초부터 시작한다: 언어모델, 토큰, 컨텍스트 윈도, 모델 선택, 모델 설정값, 프롬프트 엔지니어링.
• 실전 프로젝트로 가상의 테마파크 질문에 답하는 챗봇과, 고객 피드백을 분석해 실행 가능한 인사이트를 주는 도구를 만든다.
• JSON과 JSON 스키마로 모델 출력을 원하는 구조로 강제해 애플리케이션에서 파싱하기 쉽게 만든다.
• 컨트롤러·서비스·리포지터리로 책임을 분리하는 클린 아키텍처를 적용해 코드를 작고 단일 책임 모듈로 정리한다.

쉽게 이해하기

강사 모쉬 하마다니는 AI가 어디에나 있지만 정작 그것으로 무언가를 직접 만들어 봤는지 묻는다. 이 강의의 목표는 구글·아마존 같은 앱에서 보던 실제 AI 기능을 직접 구현하는 것이다. 다만 "1시간 만에 AI 앱 만들기" 류의 기적 같은 강의가 아니라, 기초를 다지고 모범 사례를 따르며 제대로 된 앱을 만드는 데 초점을 둔다고 선을 긋는다.

대상 수강생은 모던 JavaScript·TypeScript(화살표 함수, 구조 분해, 프로미스, async/await)에 익숙하고 간단한 React 앱(컴포넌트, JSX, state·effect 훅)을 만들 줄 아는 사람이다. 백엔드·데이터베이스나 AI 사전 지식은 없어도 단계별로 안내한다. 사용 도구로는 Bun, Tailwind, shadcn, Prisma, Ollama 같은 현대적 스택이 등장한다.

기초 파트에서는 언어모델의 동작과 토큰·컨텍스트 윈도 개념, 모델 선택과 temperature·최대 출력 토큰 같은 설정값, 프롬프트 엔지니어링을 다룬다. 특히 모델 응답을 평문 대신 JSON으로 받게 하고, 더 나아가 JSON 스키마로 응답의 형태(객체·배열·속성)를 명확히 정의하는 방법을 보여준다. 스키마 자체가 복잡하므로 AI에게 예시를 주고 스키마를 생성하게 하는 실용적 요령도 소개한다.

첫 프로젝트인 챗봇에서는 서버에 /api/chat 같은 엔드포인트를 만들고, 모델을 GPT-4o-mini로 설정한 뒤 컨텍스트 윈도(예: 128k 토큰), temperature(정확하고 일관된 답을 위해 낮게, 예: 0.2), 최대 출력 토큰(짧은 응답을 위해 예: 100) 같은 값을 상황에 맞춰 정한다. 강사는 이런 값에 정답이 있는 게 아니라 테스트하며 조정하는 "과학이라기보다 예술"에 가깝다고 설명한다.

백엔드는 단일 index.ts 파일에서 출발해 점진적 리팩터링으로 책임을 분리한다. 리포지터리는 데이터 접근, 서비스는 애플리케이션 로직(LLM 호출과 대화 상태 갱신), 컨트롤러는 HTTP 요청을 받아 검증하고 응답을 돌려주는 게이트웨이, 라우트는 경로 정의를 담당한다. Express에서는 요청 본문의 JSON을 파싱하도록 express.json 미들웨어를 등록하는 등 실무적 설정도 짚는다. 영상은 7시간 전체 강의 중 앞 2시간 분량의 미리보기다.

주요 인사이트

• 구조화 출력(JSON·JSON 스키마)은 모델 응답을 애플리케이션 코드에서 안정적으로 파싱하기 위한 핵심 기법으로, 자유 형식 텍스트보다 훨씬 다루기 쉽다.
• temperature·최대 출력 토큰·컨텍스트 윈도 같은 설정값은 정해진 정답이 없고, 만들려는 기능(예: 정확성이 중요한 챗봇)에 맞춰 실험으로 조정해야 한다.
• 컨트롤러·서비스·리포지터리로 책임을 나누는 클린 아키텍처는 AI 기능을 넣을 때도 유지보수성을 좌우하는 기본기다.
• "1시간 속성 강의"가 아니라 기초·모범 사례를 강조하는 접근은, AI를 단순히 붙이는 것과 제대로 된 제품을 만드는 것의 차이를 보여준다.

자주 묻는 질문

관련 AI 소식