하지만 "이 틀에 맞춰서, 내가 정한 대상과 설명만 바꿔줘"라고 모범 코드를 쥐어주면 1초 만에 완벽한 결과를 냅니다.
2
2단계 [3~8분] 첫 성공: 기본 프롬프트로 5분 만에 화면 띄우기
먼저 index.html을 복사하여 index_backup.html로 백업해 둡니다. 아래 지시문을 AI에 붙여넣으세요.
너는 시니어 웹 퍼블리셔이자 초보자를 돕는 코딩 디렉터야.
내가 아래 제공하는 [HTML 원본 코드]의 디자인과 틀은 그대로 유지하면서, 내 내용만 정확하게 바꿔줘.
[엄격한 출력 규칙]
1. `/* 생략 */`이나 `` 같은 축약은 절대 금지한다. `<!DOCTYPE html>`부터 `</html>`까지 전체 코드를 한 글자도 빠짐없이 출력해 줘.
2. 기존 Tailwind CSS 클래스, Wanted Sans 웹폰트, `word-break: keep-all;` 속성은 절대 변경하지 마.
3. 아래 항목만 찾아서 바꿔줘:
- 프로젝트 제목: 송도 AI 아카데미 1주차 스타터
- 슬로건: 누구나 30분 만에 만드는 나만의 첫 웹사이트
- 제작자 정보: [내 이름]
- 개요 본문: 코딩 문법을 몰라도 AI와 함께라면 30분 만에 실제 인터넷에 작동하는 웹을 띄울 수 있습니다.
[HTML 원본 코드]
(여기에 starter-kit/index.html 코드 붙여넣기)
3
3단계 [8~17분] 나만의 결정: 3가지 선택지 중 1개 골라 개조하기
9분 집중
복붙만 하면 AI의 결과물이지만, 누구를 위해 무엇을 바꿀지 내가 정하면 내 작품이 됩니다.
옵션 A. 친구를 위한 취향 프로필
좋아하는 음악, 카페, 취미 3가지를 소개하는 위트 있는 카드
옵션 B. 고객을 위한 1인 명함
전문성과 제공 서비스 3가지, 연락처를 담은 비즈니스 프로필
옵션 C. 소모임·스터디 안내장
모임 일시, 장소, 준비물 3가지를 담은 정갈한 안내 카드
// AI에게 보낼 내 선택 프롬프트 예시:
"이 웹페이지는 [선택한 대상: 예: 잠재 클라이언트]를 위한 프로필 카드야.
제목을 '[내가 정한 제목]'으로 바꾸고, 본문에 [내가 제공하는 핵심 가치 2가지]를 정갈한 불릿 포인트로 넣어줘.
수정 후 전체 HTML 코드를 출력해 줘."
4
4단계 [17~24분] 한계 실험 & 3초 복구
7분 실험
실험 1초장문 제목 넣기: 제목 글자를 100자 이상 길게 넣고, 브라우저 창을 모바일 폭(375px)으로 줄여 줄바꿈이 정상 유지되는지 확인합니다.
복구 23초 타임머신 복구: 화면이 깨지면, 미리 복사해 둔 index_backup.html 내용을 그대로 붙여넣어 즉시 원래 상태로 되돌립니다.
5
5단계 [24~30분] 성취 증명: 셀프 체크
완료 확인
2주차 · 문맥 통제총 실습 시간: 약 30분
거짓말쟁이 AI를 똑똑한 비서로 길들이기 (내 문서 가두기 & 출처 카드)
AI에게 내 메모나 업무 규정을 건네주고 "없는 이야기는 절대 지어내지 마"라고 울타리를 칩니다. 요약 문장마다 [출처]를 인용하는 3단 카드를 웹에 결합합니다.
1
1단계 [0~3분] 학습 목표: "문서에 없으면 '모릅니다'라고 말하게 만들기"
3분
AI는 모르는 질문을 받으면 그럴듯한 거짓말(환각)을 지어냅니다.
해결책은 명확합니다: "내가 준 문서 안에서만 찾아서 답하고, 없는 내용은 모른다고 답해"라는 제약을 걸어주는 것입니다.
2
2단계 [3~8분] 첫 성공: 문서 가두기 프롬프트
너는 팩트 기반 정보 검증 전문 에디터야.
내가 아래 제공하는 [참고 원문 문서]만을 근거로 삼아 정보를 요약해 줘.
[엄격한 신뢰성 규칙]
1. 문서에 명시되지 않은 사실은 절대 추측하거나 상상해서 지어내지 마라.
2. 문서에서 찾을 수 없는 질문이 있다면 "제공된 문서에 해당 내용이 없습니다"라고 솔직하게 답변해.
3. 모든 요약 문장 끝에는 반드시 원문의 출처(단락 제목이나 조항)를 [출처: ...] 형태로 명기해.
[요약 형식: 3단 카드 규격]
- CARD 01 [핵심 배경과 목적]: 2문장 요약 + [출처]
- CARD 02 [해결책 및 주요 데이터]: 2문장 요약 + [출처]
- CARD 03 [주의사항 및 실행 팁]: 2문장 요약 + [출처]
[참고 원문 문서]
(여기에 내 안내문, 메모, 기획서 텍스트 500자 붙여넣기)
3
3단계 [8~17분] 나만의 결정: 내 문서로 3단 카드 만들기
9분 집중
옵션 A. 매장·가게 이용 안내문
영업시간, 주차 방법, 환불 규정 3단 카드
옵션 B. 사내 업무 가이드 요약
비용 정산, 휴가 신청, 긴급 연락망 3단 카드
옵션 C. 스터디·모임 규칙 카드
과제 마감일, 벌금 규칙, 회비 사용 내역 3단 카드
4
4단계 [17~24분] 거짓말 유도 실험 & 복구
7분 실험
실험 1없는 사실 유도 질문: 원문에 적히지 않은 내용을 질문했을 때, AI가 지어내지 않고 "문서에 내용이 없습니다"라고 올바르게 방어하는지 시험합니다.
복구 2출처 누락 시 교정: [출처] 태그가 빠진 경우, "출처가 없는 문장은 삭제하고 다시 출력해"라고 지시하여 100% 신뢰도를 확보합니다.
5
5단계 [24~30분] 성취 증명: 셀프 체크
완료 확인
3주차 · 안티슬롭 디자인총 실습 시간: 약 30분
어지러운 색 싹 빼고, 딱 2색으로 완성하는 정갈한 디자인
AI 특유의 촌스러운 보라색 네온 그라데이션을 걷어내고, 메인 잉크색 1개와 포인트 강조색 1개만으로 프로 수준의 UI를 완성합니다.
1
1단계 [0~3분] 학습 목표: "색은 2개까지만 써라. 더 쓰면 지저분해진다"
3분
전문가와 초보자의 차이는 '더하는 것'이 아니라 '과감하게 빼는 것'에 있습니다.
먹색(Slate-900)과 포인트색 1개만 남기면 가독성과 신뢰감이 단번에 올라갑니다.
2
2단계 [3~8분] 첫 성공: 안티슬롭 2색 디자인 가이드 프롬프트
# [송도 AI 아카데미 안티-슬롭 2색 디자인 원칙]
너는 엔지니어링 냄새가 나지 않는 정갈한 디지털 프로덕트 디자이너다. 나에게 웹 UI 코드를 작성해 줄 때는 아래 원칙을 반드시 준수한다.
1. 컬러 제한:
- 촌스러운 보라색(#7c3aed), 핑크, 형광 네온 컬러를 절대 사용하지 않는다.
- 단 2가지 색상만 사용한다: 메인 잉크색(Slate-900 / #0f172a), 포인트 강조색(Emerald-600 / #059669).
- 배경은 눈이 편안한 오프화이트(#f8fafc)와 순백색 카드(#ffffff)만을 중첩한다.
2. 타이포그래피 (한글 최적화):
- 모든 텍스트 컨테이너에 `word-break: keep-all;`을 필수로 적용하여 단어가 어색하게 쪼개지지 않도록 한다.
- 제목 태그(h1, h2, h3)에는 `text-wrap: balance;`를 적용하여 양쪽 균형을 맞춘다.
3. 레이아웃:
- 불필요한 3D 회전 애니메이션은 배제하고, 마우스 호버 시 부드러운 1~2px 상승 효과만 절제되게 허용한다.
3
3단계 [8~17분] 나만의 결정: 2색 포인트 컬러 고르기
9분 집중
옵션 A. 에메랄드 그린
친환경, 교육, 신뢰감 주는 차분한 톤
옵션 B. 클래식 네이비
전문직, 금융, B2B 업무용 정갈한 톤
옵션 C. 미니멀 모노크롬
흑백 농담만으로 깊이감을 주는 하이엔드 톤
4
4단계 [17~24분] 색상 오염 점검 & 3초 복구
7분 실험
실험 1무지개색 오염 점검: 화면에 노랑, 빨강, 파랑 등 3개 이상의 색상이 섞여 있는지 눈으로 스캔합니다.
복구 22색 정제 지시: 잡다한 색이 발견되면 "포인트 컬러 1개만 남기고 나머지는 Slate 계열로 통일해"라고 지시해 3초 만에 정리합니다.
5
5단계 [24~30분] 성취 증명: 셀프 체크
완료 확인
4주차 · 인터랙션총 실습 시간: 약 30분
새로고침 없이 1초 만에 척척 계산되는 실시간 계산기 장착
단순 글자 읽기를 넘어, 버튼을 누르면 실시간으로 합계와 할인 금액이 계산되는 인터랙티브 웹 도구로 격상시킵니다.
1
1단계 [0~3분] 학습 목표: "문서에서 '작동하는 기계'로의 진화"
3분
읽기만 하는 웹페이지는 잊혀집니다. 내가 직접 숫자를 조작하고 결과를 확인하는 순간 '진짜 도구'가 됩니다.
자바스크립트 문법을 외울 필요 없이, AI에게 명확한 입출력 규칙만 제시하면 됩니다.
2
2단계 [3~8분] 첫 성공: 실시간 계산기 프롬프트
너는 인터랙티브 프론트엔드 엔지니어다.
내 기존 웹페이지의 1~3주차 헤더, 프로필, 3단 요약 카드는 절대 삭제하거나 위치를 바꾸지 말고, `WEEK 04 SLOT` 자리에 [실시간 비용/견적 계산기] 섹션을 추가해 줘.
[계산기 요구사항]
1. 입력 항목:
- 기본 옵션 선택 (라디오 버튼 또는 클릭 카드 형태)
- 수량 증가/감소 (+, - 버튼)
- 추가 할인 체크박스
2. 동작 원칙:
- 버튼을 누를 때마다 브라우저 새로고침 없이 즉각 하단 [예상 합계 금액] 숫자가 콤마(,)와 함께 재계산되어야 한다.
- 0 이하의 음수 입력은 방어해야 한다.
3. 코드는 생략 없이 완성형 전체 HTML로 출력해 줘.
3
3단계 [8~17분] 나만의 결정: 계산 공식 선택
9분 집중
옵션 A. 매장 주문 계산기
단품 메뉴 가격 + 수량 + 포장 할인
옵션 B. 프리랜서 외주 견적기
기본 작업비 + 페이지 수 + 긴급 납기 옵션
옵션 C. 모임 더치페이 계산기
총 회식비 / 참석 인원수 1인당 금액 계산
4
4단계 [17~24분] 음수 버그 실험 & 복구
7분 실험
실험 1마이너스 연타 시험: 수량 0인 상태에서 마이너스(-) 버튼을 여러 번 눌렀을 때, 금액이 -10,000원처럼 음수로 내려가지 않고 0원에서 방어되는지 확인합니다.
복구 2Math.max 방어: 음수가 나오면 AI에게 "수량이 0 이하로 내려가지 못하도록 Math.max(0, qty) 방어 코드를 넣어줘"라고 지시합니다.
5
5단계 [24~30분] 성취 증명: 셀프 체크
완료 확인
5주차 · 에러 복구총 실습 시간: 약 30분
화면이 멈춰도 3초 만에 살려내는 타임머신 복구 & 디버깅 대화법
화면이 하얗게 멈추거나 버튼이 먹통이 되어도 당황하지 않습니다. F12 콘솔 에러 로그를 읽고 AI에게 격리 수정을 지시하는 평생 자립 습관을 마스터합니다.
1
1단계 [0~3분] 학습 목표: "에러는 실패가 아니라, AI가 길을 잃었다는 신호입니다"
3분
"갑자기 안 돼요 고쳐줘"라고 울부짖으면 AI는 멀쩡한 코드까지 뒤엎어 더 망가뜨립니다.
[현재 증상]과 [원래 기대 동작], [F12 빨간 글씨] 3가지만 건네주면 3초 만에 정확히 환부만 도려내어 복구합니다.
2
2단계 [3~8분] 첫 성공: 디버깅 격리 프롬프트
내 웹페이지에서 문제가 발생했어. 아래 4가지 상황을 보고 원인을 찾아 안전하게 수정해 줘.
1. [현재 겪고 있는 증상]:
- [예: 계산기에서 플러스(+) 버튼을 눌러도 숫자가 올라가지 않고 그대로 멈춰 있음]
2. [원래 기대했던 동작]:
- [예: 버튼을 누르면 숫자가 1씩 올라가고 총금액에 반영되어야 함]
3. [의심되는 에러 문구 (F12 콘솔에 보이는 글자)]:
- [예: Uncaught TypeError: Cannot read properties of null]
4. [수정 원칙]:
- 다른 정상 작동 영역(헤더, 요약 카드 등)은 절대 건드리지 마.
- 문제 원인이 무엇이었는지 12살도 이해할 수 있게 2줄로 설명하고, 수정된 전체 코드를 출력해 줘.
3
3단계 [8~17분] 나만의 결정: 고의 에러 발생시키기
9분 집중
상황 A. ID 오타 에러
버튼 ID 이름 하나를 고의로 바꿔 클릭 먹통 만들기
상황 B. 태그 누락 에러
닫는 태그(</div>) 하나를 지워 화면 찌그러뜨리기
상황 C. 스크립트 오타 에러
함수 철자를 일부러 틀리게 적어 F12 에러 띄우기
4
4단계 [17~24분] 3초 롤백 복구 훈련
7분 실험
훈련 1F12 콘솔 확인: 브라우저에서 F12를 누르고 빨간색 에러 메시지를 마우스로 긁어 복사합니다.
복구 23초 스냅샷 롤백: 직전 커밋이나 백업 파일로 3초 만에 덮어써 복구한 뒤, 에러 로그를 프롬프트에 넣어 안전하게 해결합니다.
5
5단계 [24~30분] 성취 증명: 셀프 체크
완료 확인
6주차 · 최종 검증총 실습 시간: 약 30분
4대 핵심 역량 Eval 통과 & 내 실전 프로덕트 공식 런칭
내가 만든 웹 도구가 스마트폰에서 링크 하나로 완벽히 작동하는지 4가지 잣대로 검증하고, 수료 인증서를 발급받습니다.
1
1단계 [0~3분] 학습 목표: "남의 코드를 흉내 내는 사람에서, 내 프로덕트를 지닌 디렉터로"
3분
단순히 강의를 끝까지 들은 것이 중요한 것이 아닙니다.
내 스마트폰 홈 화면에 설치되어 가족과 고객이 매일 실사용하는 살아있는 도구를 손에 쥐는 것이 진짜 수료입니다.
