Point 1
Vibe Coding
코드보다 먼저, AI가 이해하는 방식으로 설명하는 법.
ROLE · OBJECT · CONTEXT
"왜 코딩보다 ‘설명하는 능력’이 더 중요할까?"
AI가 이해하는 Role / Object / Context 프레임으로 나와 일을 설명하는 법을 익힙니다.
같은 요청이라도 역할·목적·맥락을 어떻게 전달하느냐에 따라 결과가 완전히 달라지는 예시를 통해, AI와 협업하는 기본 루프를 몸으로 익힙니다.
기본형 자기소개 → 카피라이터 버전 → 발표자료용 버전까지, 같은 정보를 다른 톤과 맥락으로 재구성하는 연습을 합니다.
Point 2
AI Docs
뉴스레터부터 PRD까지, 한 번의 설명으로 문서 번들 생성.
TEXT → DOCS
"무엇부터 써야 할지 막막한 문서, 구조부터 AI가 잡아줍니다."
뉴스레터, 리포트, 서비스 기획서(PRD)까지 요약 → 구조화 → 문체 변경 루틴으로 자동화합니다.
ChatGPT에 역할·목표·톤을 설정해 주고, 나만의 뉴스 큐레이션 / 산업 리서치 리포트 / 웹 개발용 PRD를 생성하는 실습을 진행합니다.
한 번 설계해 둔 프롬프트 루틴은 이후 실무 문서에도 그대로 복붙해 재사용할 수 있습니다.
Point 3
Product Brief
“진짜 서비스에 쓸 수 있는” 웹사이트 PRD를 함께 씁니다.
BRIEF → PRD
"홈페이지 만들 PRD 말고, 트렌디한 웹 경험을 위한 실전 PRD."
템플릿 수준이 아닌, 프로젝트 개요·목표·핵심 지표·타깃 정의까지 포함된 Web Experience v1.0 PRD를 함께 작성합니다.
일반적인 회사 소개 사이트가 아니라, 방문자 10초 안에 ‘무언가 각인되는 웹 경험’을 목표로 하는 KPI와 구조를 세우는 법을 배웁니다.
이 PRD는 이후 랜딩·포트폴리오·게임 실습의 기반이 되어, 5주간 하나의 스토리라인을 형성합니다.
Point 4
Landing & Web
설명만으로 랜딩페이지와 모바일 웹까지 완성.
TEXT → WEB
"‘AI로 웹을 만든다’는 감각을 손에 잡히는 결과물로 경험합니다."
Codex를 “자연어 → HTML/CSS/JS 변환기”처럼 사용해, 버튼 클릭·텍스트 변경 등 인터랙션이 있는 페이지를 만들어 봅니다.
Hero–Features–CTA 구조의 브랜드 랜딩페이지를 만들고, 데스크탑에서 모바일까지 반응형으로 확장하는 과정을 실습합니다.
완성된 페이지는 GitHub–Vercel 흐름을 따라 실제 URL로 배포해, 언제든 공유 가능한 형태로 남습니다.
Point 5
BIO & Portfolio
AI가 정리해 준 BIO로, 나만의 포트폴리오 웹을 만든다.
BIO → PORTFOLIO
"이력서를 넘어, ‘웹 명함’ 수준의 BIO 페이지까지."
AI가 만들어 준 BIO 템플릿(소개·강점·프로젝트·경력)을 기반으로, 사이드바·카드·섹션이 있는 포트폴리오 레이아웃을 구현합니다.
컬러·폰트·UI 스타일을 Codex와 함께 조정하면서, 브랜드에 맞는 나만의 스타일을 찾는 과정을 거칩니다.
최종 주차에는 BIO 페이지를 계속 개선해 가며, “AI와 함께 다듬은 나의 최종 버전”을 완성합니다.
Point 6
Game & Deploy
마케팅용 하이퍼캐주얼 게임까지 만들어, 인터넷에 배포.
PLAY → DEPLOY
"클릭하면 점프하고, 점수 오르고, 링크로 공유되는 내 게임."
HTML Canvas를 기반으로 클리커/터치형 하이퍼캐주얼 게임을 기획하고, 캐릭터 점프·점수 시스템·색상 변화 이펙트를 구현합니다.
UI 카피는 ChatGPT와 함께 브랜딩하고, GitHub → Vercel 배포 파이프라인을 따라 실제로 접속 가능한 게임 URL을 만듭니다.
강의가 끝나면 랜딩페이지, BIO 포트폴리오, 게임까지 최소 3개의 “진짜 서비스 링크”를 손에 쥐게 됩니다.