"AI는 천재가 아니라 기억력만 좋은 신입 인턴이다." 챗봇이 왜 거짓말(할루시네이션)을 하고 훈화를 읊는지 이해하고 프롬프트 제약의 필요성 체득.
모범 예시 3개를 쥐어주는 퓨샷 기법. AI에게 수정을 시키기 전에 정상 작동하던 파일을 복사해 두는 안전 롤백 습관을 첫날부터 장착.
무료 호스팅을 통해 첫 수업 30분 만에 인터넷 공개 주소를 생성하여, 다른 기기 브라우저에서 내 소개·안내 페이지 띄우기 성공 체험.
기존 유료 AI 구독 하나로, 나만의 웹 도구를 직접 만들고 검증하고 배포하는 6주. 과대광고 없이, 1주 차 첫 배포부터 안전한 검증·재배포까지 완결하는 현실적 실전 로드맵
우리는 6주 만에 인공지능 천재 엔지니어를 만들어준다는 거짓말을 하지 않습니다. 하지만 챗봇에게 날씨나 묻고 메일 초안이나 복사해서 쓰는 대화형 사용자에만 머무는 것도 아쉽습니다.
이 수업의 목표는 명확합니다. 내가 일상과 업무에서 필요한 안내서, 카드, 계산기 같은 웹 도구를 자연어로 직접 띄우고, 오류가 났을 때 당황하지 않고 안전 백업본을 챙기며 스스로 원인을 찾아 고친 뒤, 다시 인터넷 링크로 배포할 수 있는 자립형 바이브 빌더로 성장하는 것입니다.
마지막 주에 허겁지겁 코딩하지 않습니다. 1주 차 첫 수업 30분 만에 1페이지를 먼저 인터넷에 배포해 보고, 6주 동안 '하나의 완성도 높은 실전 웹 도구'로 매주 기획-제작-검증-재배포 루프를 돌며 살을 붙여나갑니다.
대다수의 사람들은 챗봇 대화창 안에서 글자만 주고받습니다. 우리의 목표는 유료 구독 하나로 대화창 밖으로 나와, 직접 누르고 작동하는 웹 소프트웨어를 빚어내는 실전 영역으로 진입하는 것입니다.
복잡한 종량제 API 추가 결제가 일절 없습니다. 이미 사용 중인 ChatGPT Plus 또는 Claude Pro 단 1개와 지정 무료 호스팅 범위 안에서 전 과정을 끝냅니다.
마지막 주에 허겁지겁 코딩하지 않습니다. 1주 차에 기본 1페이지를 먼저 배포하고, 매주 '요약 카드 ➡️ 디자인 개편 ➡️ 인터랙션 ➡️ 검증'으로 키웁니다.
촌스러운 AI 보라색 그라데이션을 배제합니다. 딱 2색 팔레트와 자연스러운 한글 어절 줄바꿈
(keep-all)으로 개발자 냄새 없는 정갈한 화면을 마감합니다.
"AI는 천재가 아니라 기억력만 좋은 신입 인턴이다." 챗봇이 왜 거짓말(할루시네이션)을 하고 훈화를 읊는지 이해하고 프롬프트 제약의 필요성 체득.
모범 예시 3개를 쥐어주는 퓨샷 기법. AI에게 수정을 시키기 전에 정상 작동하던 파일을 복사해 두는 안전 롤백 습관을 첫날부터 장착.
무료 호스팅을 통해 첫 수업 30분 만에 인터넷 공개 주소를 생성하여, 다른 기기 브라우저에서 내 소개·안내 페이지 띄우기 성공 체험.
내 업무 문서나 메모장을 먹이고 "여기서만 찾아 답해" 가두기. 100% 차단이 아닌 출처 표시와 원문 대조 검증의 중요성 학습.
"문서에 없는 질문은 솔직히 모른다고 밝히고 추측하지 마라." 답변마다 원문 출처를 구체적으로 인용하게 만드는 프롬프트 제약.
내 문서 핵심 내용을 AI로 정제하여, 1주 차 안내 웹페이지 하단에 3단 카드 형태로 결합하고 원문 대조 확인 완료.
스킬은 대단한 코드가 아니라 '알바생 매뉴얼 마크다운'이다. 오픈소스 디자인 스킬 파일을 열어보고 지침서의 구조와 작동 방식 이해.
매번 긴 지시를 반복하지 않고 챗봇이 내 작업 스타일과 디자인 규칙을 기억하게 만드는 1장짜리 영구 프롬프트 지침서 작성.
촌스러운 보라색 네온 금지! 딱 2색 팔레트와 한글 어절 줄바꿈(keep-all)을 적용해 웹페이지의 시각적 완성도 대폭 업그레이드.
정적인 글 읽기 화면에서 벗어나, 버튼을 누르고 숫자가 바뀌며 결과가 도출되는 클라이언트 브라우저 연산 구조 이해.
한 번에 모든 걸 시켜서 코드가 깨지지 않게 "버튼 클릭 시 합산 금액이 즉시 바뀌게 해줘"처럼 기능을 단계별로 쪼개서 붙이는 대화법.
방문자가 옵션을 선택하고 수량을 입력하면 즉시 계산되는 실시간 견적/비용 계산기를 기존 웹페이지에 자연스럽게 결합.
화면이 깨지거나 계산이 안 먹힐 때, 코드를 직접 읽지 않고 증상을 정확히 전달해 고치고, 필요 시 안전 백업본으로 되돌리는 요령.
"이 버튼을 눌렀을 때 원래 계산 결과가 나와야 하는데 공백으로 떠. 에러 문구는 이거야." 정확한 피드백을 주는 프롬프트 훈련.
강사가 일부러 심어둔 버그를 프롬프트와 백업본으로 직접 복구해 보고,
같은 실수를 피하는 나만의 오답 노트 완성.
①정상 입력, ②빈칸/오류 입력, ③기존 기능 정상 동작(사이드이펙트 방지), ④원문 출처 대조의 4단계 체크리스트로 결과물 품질 검증.
처음 보는 간단한 새 요구사항(할인율 옵션 추가, 색상 변경)을 AI에게 지시해 혼자 수정하고 다시 배포해보는 진짜 자립 테스트.
동료나 지인에게 공유하여 "설명 없이도 쓸 수 있는지" 실제 사용자 1명의 반응을 확인하고 완성하는 최종 웹 프로덕트.
| 주차 | 단계 | 이론적 멘탈 모델 | 프롬프트 & 디버깅 테크닉 | 디자인 & 실전 실습 | 주차별 실전 산출물 |
|---|---|---|---|---|---|
| W1 | 입문 1 | 손발 없는 인턴과 확률 예측 구조 | 퓨샷(Few-Shot) 지시 & 안전 백업 습관 | HTML 1장으로 기본 안내 페이지 작성 | 첫날 전 세계 라이브 웹 배포 |
| W2 | 입문 2 | 문맥(Context) 주입과 문서 대조 | 안전 가드레일 & 모름 지침 강제 | 3단 카드형 시선 동선(Hierarchy) | 출처 포함 정보 요약 카드 섹션 추가 |
| W3 | 초급 1 | 스킬 마크다운 업무 매뉴얼 파일 해부 | 커스텀 인스트럭션 1장 지침서 작성 | 안티-슬롭 2색 팔레트, 어절 줄바꿈 | 웹페이지 UI 디자인 감도 업그레이드 |
| W4 | 초급 2 | 웹 클릭 반응 및 브라우저 연산 원리 | 기능별 분할 점진적 디렉팅 기법 | 버튼 클릭 시 반응하는 손맛 부여 | 실시간 견적/비용 계산 유틸리티 장착 |
| W5 | 중급 1 | 코드를 몰라도 버그를 잡는 원리 | 에러 화면 4단 전달법(증상·기대값) | 고의 에러 발생 후 안전 복구(Rollback) | 내 프로젝트 실패 일기(오답 노트) 1호 |
| W6 | 완성 | 기능 검증 4대 체크리스트 (Eval) | 혼자 힘으로 기능 1개 수정 실습 | 시그니처 푸터 장착 및 실제 사용자 테스트 | 자립 검증 완료 라이브 웹 배포 |