외부 API를 연결하고, 자동화를 구성하고, 실제 인터넷에 배포합니다.
이 모듈이 끝나면 실제 URL이 있는 도구 하나가 세상에 존재하게 됩니다.
이 모듈에서 배울 것
API가 무엇인지 비유로 이해하고, 실제로 공개 API에 요청을 보내는 실습을 합니다. 날씨, 환율, 뉴스 등 무료 API를 활용해 내 도구에 실시간 데이터를 연결합니다. fetch() 함수 사용법부터 응답 데이터를 화면에 표시하는 것까지 순서대로 진행합니다.
핵심 포인트 — API는 식당 메뉴판같은 것입니다. 원하는 것을 정해진 방식으로 요청하면 데이터를 가져다줍니다. 이 원리만 이해하면 어떤 API도 쓸 수 있습니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
내 도구에 [원하는 데이터 종류] API를 연동하고 싶어. JavaScript fetch()를 사용해서 데이터를 가져오고 화면의 [특정 요소]에 표시하는 코드를 작성해줘. API 주소: [API URL 또는 "무료 API 추천해줘"] 표시할 데이터: [어떤 정보를 보여줄지] API 경험이 없는 초보자 기준으로 설명도 함께 해줘.
"매번 수동으로 해야 하는 것"을 자동으로 실행되게 만드는 방법을 배웁니다. 타이머 기반 자동 업데이트, 조건에 따른 자동 알림, 데이터 자동 백업 등 실제 도구의 유용함을 높이는 자동화 패턴을 실습합니다.
핵심 포인트 — 자동화는 "내가 잊어버려도 알아서 되는 것"을 만드는 일입니다. setInterval, localStorage, 이벤트 리스너 — 이 3가지로 대부분의 자동화가 됩니다.
vibelab 폴더에서 claude 실행 후 붙여넣으세요
내 도구에 자동화 기능을 추가하고 싶어. 자동으로 처리할 것: [자동화하고 싶은 작업] 실행 조건: [언제 / 얼마나 자주 / 어떤 조건에서] 현재 코드: [코드 붙여넣기] 이 조건에 맞는 자동화 코드를 추가해줘. 브라우저 탭이 열려있는 동안 계속 동작해야 해.
내 컴퓨터에서만 보이는 것을 전 세계 누구나 접근할 수 있는 URL로 만드는 과정입니다. Vercel, Netlify 등 무료 호스팅 서비스를 활용해 드래그 앤 드롭으로 배포하고, 커스텀 도메인 연결까지 단계별로 진행합니다.
핵심 포인트 — 배포는 어렵지 않습니다. Vercel에 파일을 끌어다 놓으면 30초 안에 URL이 생깁니다. 이 URL이 여러분의 첫 번째 작품 주소입니다.
claude.ai 에서 새 대화를 열고 붙여넣으세요
HTML, CSS, JavaScript로 만든 정적 웹사이트를 배포하려고 해. 파일 구조: [파일 목록] 무료로 배포할 수 있는 서비스 중에 가장 쉬운 방법을 알려줘. Vercel 또는 Netlify 기준으로, 계정 만들기부터 URL 공유까지 전체 과정을 스크린샷 없이 텍스트로만 설명해줘.
배포 후 주변 사람들에게 공유하고 실제 피드백을 수집합니다. "좋아요"보다 "불편한 점"을 적극적으로 모으는 방법과 받은 피드백을 AI와 함께 기능 개선으로 전환하는 사이클을 익힙니다.
핵심 포인트 — "불편해요"는 선물입니다. 불편함을 구체적으로 말해주는 사람이 여러분 도구의 가장 값진 테스터입니다.
claude.ai 에서 새 대화를 열고 붙여넣으세요
내 도구 [URL 또는 설명]에 대해 아래 피드백을 받았어: 피드백 1: [피드백 내용] 피드백 2: [피드백 내용] 피드백 3: [피드백 내용] 이 피드백을 기반으로: 1. 우선순위 높은 개선사항 3가지 선정 2. 각 개선사항을 어떻게 구현할지 방법 제안 3. 현재 코드에서 수정해야 할 부분 알려줘
MODULE 3-4를 통해 만든 도구를 최종 정리합니다. README 작성, 사용 방법 정리, 스크린샷 준비까지 — 남에게 보여줄 수 있는 형태로 마무리합니다. 수강생들이 서로의 프로젝트를 공유하는 발표 시간을 가집니다.
핵심 포인트 — 완성은 "더 이상 고칠 게 없는 상태"가 아닙니다. "남에게 자신 있게 보여줄 수 있는 상태"가 완성입니다.
claude.ai 에서 새 대화를 열고 붙여넣으세요
내가 만든 [도구 이름]을 소개하는 README를 작성해줘. 도구 설명: [한 줄 설명] 주요 기능: [기능 목록] 사용 대상: [누가 쓰면 좋은지] 접속 URL: [배포 URL] 개발자가 아닌 일반 사용자도 이해할 수 있게 써줘. 이모지를 적절히 사용해서 읽기 쉽게 만들어줘.