DAY 08AI 프롬프트 엔지니어링 1

기획안 고도화와 간단한 웹페이지 제작 체험

마지막 시간입니다. 1교시에는 기획안 초안을 AI와 피드백을 주고받으며 근거 · 숫자 · 예상 질문까지 갖춘 완성본으로 다듬습니다. 2교시에는 그 기획안을 소개하는 웹페이지를 말로 요청해서 만들어 보는 바이브코딩을 체험합니다.

1.오늘의 수업

지난 시간 돌아보기 · DAY 07

문제부터 정하기 펼치기 → 기준으로 좁히기 → 반대 입장 기획안 뼈대 8칸 목표는 숫자로

난이도

초급 ~ 중급

수업 방식

피드백 주고받기 · 체험

사용 도구

ChatGPT

결과물

기획안 최종본 · 소개 웹페이지

오늘의 핵심목표

AI를 심사자 · 질문자 · 편집자로 활용해 기획안을 완성하고, 그 내용을 말로 요청해서 웹페이지로 만들어 본다.

2.오늘 배우는 내용 & 준비

1교시 — AI를 활용한 기획안 고도화

2교시 — 간단한 웹페이지 제작 체험

오늘은 다음 순서로 진행합니다

1심사자에게 점수 받기

2근거와 숫자 채우기

3예상 질문에 미리 답하기

4읽는 사람별 버전

5기획안 최종본

6소개 웹페이지 만들기

7말로 고치기

8파일로 저장하고 열어 보기

9선택형 이야기 만들기

준비 — 기획안 초안이 없어도 괜찮습니다

• DAY 07에 저장한 "기획안_초안"이 있으면 새 채팅에 파일로 올리거나 내용을 붙여 넣고 시작합니다.
• 없다면 15번 준비 자료의 예시 기획안을 복사해서 씁니다.

오늘도 같은 틀 — 프롬프트 7칸

DAY 02의 5칸에 줄 자료 · 확인할 것을 더한 틀입니다. 오늘 실습에서는 7칸이 이렇게 쓰입니다. 혼자 써 보기에서도 이 7칸으로 빠진 곳을 점검하세요.

목적 — 승인받기 · 참여하게 만들기

상황 — 기획안 초안을 다듬는 단계

대상 — 사장님 · 참여자 · 페이지 방문자

조건 — 고친 곳 표시 · 근거는 지어내지 않기

결과 형식 — 평가표 · 3줄 보고 · HTML 파일 하나

줄 자료 — 기획안 초안 · 참여자 안내문

확인할 것 — 숫자 · 미리보기 화면

3.초안과 완성본은 무엇이 다를까?

1교시 · AI를 활용한 기획안 고도화

초안

• 무엇을 할지는 있음
• [확인 필요]가 군데군데
• "왜 이렇게 하나?"에 대한 근거가 약함
• 누가 읽어도 같은 내용

완성본

• 근거와 숫자가 확인되어 있음
• 위험 요소와 대응이 적혀 있음
• 읽는 사람이 물을 질문에 미리 답함
• 읽는 사람에 맞춘 길이와 강조

오늘은 AI에게 심사자 · 질문자 · 편집자 세 가지 역할을 차례로 맡겨 초안을 완성본으로 만듭니다. 고치는 결정은 매번 내가 합니다.

4.SET 01. 심사자에게 피드백 받기

새 채팅에 기획안 초안을 올리고(또는 붙여 넣고) 심사를 맡깁니다. "좋네요"만 듣지 않도록 점수 기준과 형식을 정해 줍니다.

우선순위 3가지 중 내가 동의하는 것만 고릅니다. 실제 상황과 맞지 않는 지적(예: 예산을 두 배로 늘리라는 제안)은 "그건 어려워. 다른 방법을 알려줘"라고 답해도 됩니다.

혼자 써 보기 ①

방금은 결정하는 사람의 입장에서 심사를 받았습니다. 이번에는 틀 없이, 다른 입장의 심사 요청을 처음부터 직접 써 보세요.

상황 — 이번에는 기획에 실제로 참여할 사람(손님 · 직원 · 참가자)의 입장에서 기획안을 평가받고 싶습니다.

누구의 입장인지 · 무엇을 기준으로 볼지 · 결과 모양 (점수표 · 이유 · 고칠 점) · 말투

다 썼으면 복사해서 ChatGPT에 입력하고 결과를 확인하기

□ 사장님 · 팀장님 심사와 다른 지적이 나왔나?□ 반영할 지적을 내가 골랐나?□ 7칸 중 빠진 칸은 없나?□ 마음에 안 들면 한 줄 고쳐서 다시 입력

[예시 프롬프트 — 정답이 아니라 하나의 예입니다] 너는 이 원데이 클래스에 참가할지 고민하는 동네 주민(30대 직장인) 역할이야. 첨부한 기획안을 참가자 입장에서 평가해줘. 기준: 참가하고 싶은가 · 시간과 참가비가 부담 없는가 · 준비물과 신청 방법이 쉬운가 · 또 오고 싶어질까 기준마다 5점 만점 점수, 이유 한 줄, 아쉬운 점 한 줄을 표로 써주고, 마지막에 "이것만 바뀌면 신청하겠다" 한 가지를 말해줘. [설계 포인트] · 누구의 입장인지 나이 · 상황까지 구체적으로 · 그 사람이 실제로 신경 쓰는 기준으로 바꾸기 · 결정적인 한 가지를 물으면 고칠 곳이 선명해집니다

5.SET 02. 근거와 숫자 채우기

"왜 이걸 해야 하나?"에 답하는 것이 근거입니다. AI에게 근거를 지어내게 하지 말고, 어떤 근거가 필요한지 목록을 받아 내가 채웁니다 (DAY 02의 할루시네이션 줄이기).

근거를 바로 확인할 수 없다면 [확인 필요]로 그대로 두는 것이 맞습니다. 그럴듯한 가짜 숫자가 들어간 기획안은 나중에 더 큰 문제가 됩니다.

6.SET 03. 예상 질문에 미리 답하기

예상 질문과 답은 기획안 맨 뒤에 "자주 묻는 질문"으로 붙여 두면 읽는 사람이 편합니다.

7.SET 04. 읽는 사람별 버전 만들기

같은 기획이라도 결정하는 사람과 참여하는 사람이 알고 싶은 것은 다릅니다. 내용은 그대로 두고 길이와 강조만 바꿉니다.

버전 B 안내문은 2교시 웹페이지의 내용으로 그대로 씁니다. 복사해 두세요.

8.SET 05. 최종본 정리하기

□ 심사에서 고른 우선순위 3가지를 고쳤는가?

□ 숫자와 합계를 직접 확인했는가?

□ 남은 [확인 필요]는 왜 남았는지 아는가?

□ 처음 보는 사람이 읽어도 이해되는가?

답 아래의 복사 버튼으로 전체를 복사해 Word에 붙여 넣고 "기획안_최종"으로 저장합니다.

10분 휴식

9.말로 웹페이지를 만든다는 것 — 바이브코딩 맛보기

2교시 · 간단한 웹페이지 제작 체험

바이브코딩 (Vibe Coding)

코드를 직접 외워서 쓰지 않고, 만들고 싶은 화면을 말로 설명해서 AI가 코드를 쓰게 하는 방식입니다. 지금까지 배운 프롬프트 요령 — 목적 · 대상 · 조건 · 한 번에 하나씩 고치기 — 이 그대로 쓰입니다.

HTML뼈대 — 제목, 글, 버튼이 무엇인지

CSS옷 — 색, 글꼴, 배치

JavaScript움직임 — 누르면 일어나는 일

세 가지 이름만 알면 충분합니다. 오늘은 ChatGPT에게 한 장짜리 웹페이지 코드를 받고, 답 안의 코드 칸에서 바로 미리보기로 확인합니다.

10.SET 06. 기획안 소개 페이지 만들기

새 채팅을 열고, SET 04의 참여자용 안내문을 붙여 넣어 요청합니다.

답에 나온 코드 칸 위쪽의 미리보기(Preview) 버튼을 누르면 코드가 실제 웹페이지 모양으로 보입니다. 버튼이 보이지 않으면 걱정하지 말고 SET 08처럼 파일로 저장해서 브라우저로 열어 보세요. 버튼 이름과 위치는 계정 · 업데이트에 따라 다를 수 있습니다.

11.SET 07. 말로 고치기 — 한 번에 하나씩

코드를 몰라도 화면을 보고 어디를 어떻게 바꾸고 싶은지 말하면 됩니다. 여러 곳을 한꺼번에 고치면 무엇이 바뀌었는지 놓치기 쉬우니 하나씩 요청하고 미리보기로 확인하세요.

X 막연한 요청

"좀 더 예쁘게 해줘."

O 위치 + 무엇을 + 어떻게

"첫 화면 제목을 지금보다 크게, 신청하기 버튼은 진한 갈색으로 바꿔줘. 다른 부분은 그대로 둬."

이렇게 말해 보세요 — 골라서 하나씩

"일정 · 장소 부분을 카드 3개로 나란히 보여줘."

"자주 묻는 질문은 누르면 답이 펼쳐지게 해줘."

"신청하기 버튼을 누르면 신청 방법 부분으로 부드럽게 내려가게 해줘."

"전체 색을 [초록 계열]로 바꿔줘. 배치는 그대로 둬."

"휴대폰 화면에서 글씨가 작아. 휴대폰에서만 조금 키워줘."

"방금 바꾼 게 마음에 안 들어. 바로 전 상태로 되돌려줘."

신청 버튼을 눌러도 실제로 신청이 저장되지는 않습니다. 실제로 신청을 받으려면 데이터를 저장하는 서버가 필요합니다. 오늘은 화면을 만드는 경험까지입니다.

혼자 써 보기 ②

이번에는 기획안과 상관없이, 내가 만들고 싶은 웹페이지를 처음부터 요청해 봅니다. 새 채팅에서 입력하세요.

상황 — 만들고 싶은 페이지를 하나 정하세요. 예: 내 자기소개 페이지, 동네 맛집 소개, 우리 동호회 안내, 좋아하는 책 소개.

무엇을 위한 페이지 · 보는 사람 · 페이지 구성 (위에서 아래 순서) · 분위기와 색 · 휴대폰에서도 보기 좋게 · HTML 파일 하나로

다 썼으면 복사해서 ChatGPT에 입력하고 결과를 확인하기

□ 미리보기나 파일로 열어서 확인했나?□ 한 번에 하나씩 고쳐 봤나?□ SET 08처럼 다른 이름(예: mypage.html)으로 저장해 열어 봤나?□ 7칸 중 빠진 칸은 없나?□ 마음에 안 들면 한 줄 고쳐서 다시 입력

[예시 프롬프트 — 정답이 아니라 하나의 예입니다] 내 자기소개 웹페이지를 만들어줘. 보는 사람: 처음 만나는 동호회 사람들 페이지 구성: 첫 화면(이름 + 한 줄 소개) → 내가 좋아하는 것 3가지(카드) → 요즘 배우는 것 → 연락 방법 분위기: 밝은 하늘색과 흰색, 둥근 모서리, 편안한 느낌 휴대폰에서도 보기 좋게, 사진 없이 글과 색만으로 꾸며줘. HTML 파일 하나에 CSS까지 모두 넣어서 코드 하나로 만들어줘. [설계 포인트] · 보는 사람이 정해지면 들어갈 내용이 정해집니다 · 페이지 구성은 위에서 아래 순서로 · "파일 하나로"를 적어야 저장하고 열기가 쉽습니다

12.SET 08. 파일로 저장하고 열어 보기

1코드 칸 오른쪽 위의 복사 버튼으로 코드 전체 복사

2메모장 열고 붙여넣기

3다른 이름으로 저장 → 파일 이름 index.html, 인코딩 UTF-8

4저장한 파일을 더블클릭 → 브라우저로 열림

한글이 깨져 보이면 저장할 때 인코딩을 UTF-8로 골랐는지 확인하세요. 메모장 저장 창 아래쪽에 인코딩 선택이 있습니다. 확장자가 .txt로 붙어 버렸다면 파일 형식을 "모든 파일"로 바꿔 다시 저장합니다.

지금 만든 페이지는 내 컴퓨터에서만 열립니다. 인터넷 주소로 다른 사람에게 보여 주려면 서버에 올리는 과정(배포)이 필요합니다. 더 배우고 싶다면 바이브코딩 과정에서 Claude Code로 웹사이트를 만들고 인터넷에 공개하는 법까지 다룹니다.

13.SET 09. 선택형 이야기 만들기 — ChatGPT에게 기획부터 맡기기

버튼을 누를 때마다 이야기가 갈라지고, 고른 길에 따라 다른 엔딩을 보는 웹 콘텐츠를 만들어 봅니다. 처음부터 혼자 쓰기는 어려우니 새 채팅을 열고 ChatGPT에게 기획부터 맡긴 뒤, 나는 고르고 고치는 역할을 합니다. 하나의 아이디어를 기획 → 이야기 → 웹 화면으로 여러 단계에 걸쳐 키워 가는 연습입니다.

시작 장면

선택 A / 선택 B

갈라진 장면 2개

각각 다시 선택

엔딩 4개

이야기 주제 예시

카페 아르바이트 첫날 무인도에서 탈출하기 신입사원의 첫 회의 잃어버린 고양이 찾기 원데이 클래스 손님 응대 (직원 교육용)

바꿔 보기 — 처음 한 번은 그대로, 다음엔 내 주제로

주제 카페 아르바이트 첫날 → 위 예시 중 하나 · 내가 정한 이야기 / 보는 사람 20~30대 → 초등학생 · 우리 회사 신입 직원

코드 칸의 미리보기로 열어 처음부터 끝까지 눌러 보세요. 엔딩 4개를 모두 볼 수 있는지 확인하고, SET 08처럼 story.html로 저장해 브라우저에서 열어 봅니다.

"장면이 바뀔 때 글자가 부드럽게 나타나게 해줘."

"지금 몇 번째 장면인지 위에 작게 보여줘."

"엔딩마다 배경색을 다르게 해줘."

"세 번째 장면 문장을 더 긴장감 있게 바꿔줘. 다른 장면은 그대로 둬."

14.8일 과정 되돌아보기

1생성형 AI 이해 · 안전 · 맞춤설정

2프롬프트 구조 · 오류 줄이기

3이미지 프롬프트 · 참고 이미지

44컷 콘텐츠 · 광고 비주얼

5Excel 데이터 만들기 · 분석

6챗봇 기획 · 나만의 GPT

7아이디어 기획 · 기획안 구조

8기획안 고도화 · 웹페이지 체험

8일 동안 바뀌지 않은 원칙 — 글이든 이미지든 데이터든 웹페이지든, 좋은 결과는 목적 · 대상 · 조건을 분명히 → 한 번에 끝내지 않고 고치기 → 마지막 확인은 사람이에서 나옵니다.

15.오늘 만든 것 · 확인하기

오늘 만든 것

1기획안 최종본 (파일)

23줄 보고 · 참여자 안내문

3소개 웹페이지 (index.html)

4선택형 이야기 (story.html)

기획안

□ 8칸이 모두 있다
□ 목표가 숫자로 되어 있다
□ 숫자 · 합계를 직접 확인했다
□ 자주 묻는 질문이 붙어 있다

웹페이지

□ 첫 화면에서 무엇을 하는지 보인다
□ 일정 · 장소 · 신청 방법이 있다
□ 휴대폰 크기에서도 읽힌다
□ 내 컴퓨터에서 파일로 열린다

오늘의 핵심

AI는 심사자 · 질문자 · 편집자 · 개발자 역할을 모두 할 수 있습니다. 하지만 무엇을 고칠지, 무엇이 사실인지, 언제 끝낼지는 사람이 정합니다. AI에게 일을 정확히 설명하고, 결과를 끝까지 확인하는 사람이 AI를 가장 잘 쓰는 사람입니다.

8일 동안 수고 많으셨습니다.

16.준비 자료 (수강생 복사용)

DAY 07의 기획안 초안이 없을 때 쓰는 예시입니다. 수업용 가상 자료이며 실제 가게와 관계없습니다. "복사하기"를 눌러 새 채팅에 붙여 넣고 SET 01부터 시작하세요.

수강생 확인이 필요합니다