AI로 만드는 나의 첫 서비스

만드는 것 · 내 컴퓨터에서 클로드 코드가 돌아가고, 첫 파일을 만들어본 상태

LLM · 멀티모달 · 클로드 제품군 · 터미널

1. 1강AI 개념 정리 + 개발환경 세팅

만드는 것 · 웹 전체 지도 한 장 + 에러 읽는 법. 개발용어사전 PDF 배포

웹 전체 지도 · 폴더 해부 · 에러 읽는 4단계

1. 2강개발 용어 한눈에 — 지도를 그린다

만드는 것 · 실제 도메인으로 접속되는 내 소개 사이트. 친구에게 링크를 보낼 수 있는 상태

HTML · CSS · Git · GitHub · Vercel · 도메인

1. 3강페이지를 만든다
2. 4강이력을 남긴다 (Git · GitHub)
3. 5강세상에 올린다 (Vercel · 도메인)

만드는 것 · 스크롤에 반응하고 3D 요소가 움직이는 제품/서비스 랜딩페이지

CSS 애니메이션 · 스크롤 인터랙션 · Motion · Three.js / Spline · Tailwind

1. 6강움직임의 원리
2. 7강스크롤에 반응하기
3. 8강3D 넣기

만드는 것 · .md 파일을 넣으면 글이 자동으로 올라가는 블로그. 이후 자동화의 발행 대상이 됨

npm · Node.js · Next.js · React 컴포넌트 · 라우팅 · 빌드

1. 9강프로젝트를 연다
2. 10강컴포넌트로 쪼갠다
3. 11강마크다운을 글로 바꾼다
4. 12강완성하고 배포한다

만드는 것 · 내 사이트 안에서 도는 AI 도구 (긴 글 요약기 / 문의 분류기)

Claude API · .env · 서버 라우트 · 토큰과 비용 · 스트리밍

1. 13강키를 안전하게 다루는 법
2. 14강첫 호출
3. 15강실전 도구로 만들기

만드는 것 · 주제를 입력하면 발표용 .pptx 파일을 만들어 내려받는 웹 도구

구조화 출력 · 파일 생성 · 다운로드 · 템플릿 설계

1. 16강구조를 정해서 받기
2. 17강파일로 뽑기

만드는 것 · 로그인해서 내 데이터를 저장·조회·수정·삭제하는 서비스 (개인 메모 / 간이 CRM)

Supabase · 테이블/스키마 · SQL 맛보기 · 인증 · RLS · CRUD · 파일 업로드

1. 18강데이터를 표로 설계한다
2. 19강읽고 쓴다 (CRUD)
3. 20강로그인을 붙인다
4. 21강남의 데이터를 못 보게 막는다 (RLS)

만드는 것 · 주제만 넣으면 초안이 생성되고, 승인하면 여러 플랫폼에 동시 발행되는 파이프라인

크론 · 외부 발행 API · 파이프라인 설계 · 승인 게이트 · 재시도 · 멱등성

1. 22강파이프라인을 설계한다
2. 23강글을 생성한다
3. 24강여러 곳에 동시에 보낸다
4. 25강알아서 돌게 만든다

만드는 것 · 본문 흐름에 맞는 이미지와 표가 자동으로 들어간 글

이미지 생성/검색 API · 이미지 최적화 · 표 데이터 구조화 · 저작권

1. 26강이미지를 넣는다
2. 27강표와 도식을 넣는다

만드는 것 · 구독 신청을 받고, 정해진 시각에 자동으로 메일이 나가는 뉴스레터 시스템

이메일 발송 API · HTML 메일 템플릿 · 구독자 관리 · 수신거부 · 발송 지표

1. 28강구독을 받는다
2. 29강메일을 만든다
3. 30강자동으로 나가게 한다

만드는 것 · 매일 아침 관심 주제 뉴스를 모아 요약해 슬랙 채널에 올려 주는 봇

슬랙 앱 등록 · 권한(스코프) · 웹훅 · 메시지 블록 · 스케줄러 · 뉴스 수집

1. 31강슬랙에 봇을 심는다
2. 32강뉴스를 모은다
3. 33강매일 알아서 돌게 한다

만드는 것 · 한 워크스페이스 안에 역할이 다른 봇 여러 개 (카피 검수봇 · 데이터 조회봇 · 회의 준비봇)

슬래시 커맨드 · 멘션 이벤트 · 스레드 대화 · 역할 프롬프트 · 도구 연결

1. 34강말을 거는 봇
2. 35강역할을 나눈다

만드는 것 · 녹음 파일을 올리면 회의록을 만들어 담당자별 할 일을 각자에게 DM으로 보내 주는 봇

음성→텍스트(STT) · 화자 분리 · 긴 텍스트 처리 · 담당자 매칭 · DM 발송

1. 36강소리를 글자로
2. 37강회의록으로 만든다
3. 38강담당자에게 배달한다

만드는 것 · 내 인스타 계정 화면에서 내 지표를 모아 분석 리포트를 보여 주는 크롬 확장

Manifest V3 · 콘텐츠 스크립트 · 서비스 워커 · 확장 저장소 · 권한 · DOM 읽기

1. 39강확장 프로그램의 구조
2. 40강화면에서 내 데이터를 읽는다
3. 41강분석 리포트를 만든다

만드는 것 · 내 주문내역을 정리해 소비 패턴을 분석하고 CSV로 뽑아 주는 확장

페이지네이션 처리 · 데이터 정규화 · CSV 내보내기 · 소비 분석

1. 42강여러 페이지에서 모은다
2. 43강분석하고 뽑아낸다

만드는 것 · 지역을 선택하면 상권·실거래 데이터가 지도 위에 시각화되는 웹 서비스

지도 API · 공공데이터 API · 좌표계 · 지오코딩 · 대용량 데이터 시각화

1. 44강지도를 띄우고 점을 찍는다
2. 45강공공데이터를 길들인다
3. 46강수만 개를 화면에 그린다
4. 47강인사이트를 붙인다

만드는 것 · 주제만 넣으면 대본·음성·자막·영상이 만들어져 유튜브에 자동 업로드되는 파이프라인

TTS · 자막 타이밍 · 영상 합성(FFmpeg / Remotion) · 유튜브 Data API

1. 48강기획과 대본
2. 49강목소리와 자막
3. 50강영상으로 합친다
4. 51강올리고 돌린다

만드는 것 · 시간대를 골라 예약하고, 양쪽에 알림이 가고, 캘린더에 자동 등록되는 예약 서비스

시간 슬롯 설계 · 동시성 처리 · 타임존 · 캘린더 API · 알림

1. 52강시간을 데이터로 표현한다
2. 53강두 사람이 동시에 누르면
3. 54강알리고 연결한다

만드는 것 · 전략을 백테스트하고, 모의투자로 검증한 뒤, 실계좌로 소액 자동매매하는 봇

증권/거래소 API · 시세 데이터 · 지표 계산 · 백테스트 · 리스크 관리 · 주문 멱등성

1. 55강시세를 가져오고 전략을 정의한다
2. 56강과거로 검증한다 (백테스트)
3. 57강리스크를 설계한다
4. 58강모의투자로 돌린다
5. 59강실계좌로 넘어간다

만드는 것 · 실기기에서 도는 React Native 앱 + 앱인토스 미니앱 제출 준비 완료

React Native · Expo · 모바일 UI · 기기 기능 · 미니앱 플랫폼

1. 60강앱 프로젝트를 연다
2. 61강앱다운 화면을 만든다
3. 62강서버와 연결한다
4. 63강앱인토스 미니앱으로 만든다

만드는 것 · 내 옵시디언 노트를 근거로 답하고 출처를 함께 보여 주는 개인 AI 위키

청킹 · 임베딩 · 벡터 검색 · RAG · 출처 표기 · MCP

1. 64강AI에게 내 자료를 읽히는 원리
2. 65강검색되는 위키를 만든다
3. 66강답변하고 출처를 보여 준다

만드는 것 · 각자 자기 문제를 풀기 위해 처음부터 끝까지 혼자 만든 서비스

새 기술 없음 — 배운 것을 조합하는 능력

1. 67강기획하고 검증받는다
2. 68강중간 점검
3. 69강발표하고 마무리한다