일반인 대상 · 따라 하기 실습

여행계획안부터
미니 웹앱까지

자료 찾기부터 MD · PPT · 인포그래픽 · 웹앱까지
결과물 중심 AI 활용법

여행계획안 MDPPT 구성안디자인 PDF인포그래픽포스터미니 웹앱공유 링크
넘기는 방법 키보드 ← → · 화면 아래 다음 버튼 · 오른쪽 위 목차. 한 화면에 한 단계씩, 보이는 순서대로 따라 하면 됩니다.
시작하기강사 소개
오늘의 주강사

안녕하세요,
오승곤입니다

  • 시각디자인 전공
  • 디자이너로 10년
  • 내 일의 불편함을 AI로 풀다가 앱 · 게임까지 직접 만들게 됨
함께하는 보조강사 배재현 · 황정례
최근 강의
  1. 공무원 대상 시연AI, 내 부하로 만들기
  2. 7시간 수업디자인 씽킹: 문제의 정의와 해결 방안 설계
  3. 대학생 부트캠프문제 문장에서 화면까지: AI 툴로 만드는 첫 프로토타입
  4. 고등학교 진로 특강AI 시대, 앱 개발자는 무엇을 할까?
시작하기오늘의 주제
부모님 두 분과 자녀가 부산 바닷가를 함께 걷는 그림
60대 부모님 2 + 성인 자녀 1빡빡하지 않은 일정관광 · 식사 · 휴식 균형경비 · 준비물 포함

오늘의 주제는
부산 2박3일 가족여행

모두 같은 주제로

각자 다른 주제로 흩어지지 않고 끝까지 같은 주제로 진행합니다.

AI는 하나만

ChatGPT, Claude, Gemini 중 한 가지를 정해서 끝까지 씁니다.

막혀도 멈추지 않기

앞 단계를 못 끝냈다면 강사가 준비한 샘플 파일로 이어서 합류하면 됩니다.

시작하기오늘 배우는 것

겉은 여행계획서, 속은 MD 문서 다루는 법

오늘 만드는 건 부산 여행계획서지만, 손에 남는 건 아래 네 가지입니다. 다른 주제에도 그대로 쓸 수 있습니다.

겉으로 만드는 것
부산 2박3일
여행계획서
① 만들기 · ② 다듬기
MD 원본 1개.md · 메모장으로도 열림
③ 변환
PPT 구성안
디자인 PDF
인포그래픽 · 포스터
미니 웹앱
④ 공개
공개 링크휴대폰 · 카톡으로 공유
1차시
2차시
3차시
4차시
5차시
6차시
①MD 개념과 만드는 법
.md 파일 만들기
②MD 다듬어 다시 쓰기
PPT 구성안
③다른 형식으로 변환
PDF → 인포그래픽 · 포스터 → 웹앱
④결과물 공개(배포)
공개 링크 · 공유
시작하기준비 확인

시작 전에 확인하세요

다섯 가지가 준비되면 시작할 수 있습니다. 카드를 눌러 체크해 보세요.

알아두세요프롬프트를 길게 타이핑하기 어렵다면 마이크를 켜고 사람에게 설명하듯 말해도 됩니다. 이 화면의 프롬프트 상자에는 복사 버튼이 있어서 눌러서 붙여넣어도 됩니다.
시작하기마크다운

왜 마크다운(.md) 문서를
쓸까요?

시작하기확장자

이 파일들, 이름 끝에 무엇이 붙어 있나요?

파일 이름 끝 점(.) 뒤의 글자를 확장자라고 합니다. 컴퓨터는 이 글자를 보고 어떤 프로그램으로 열지 정합니다.

엑셀.xlsx표 · 숫자 계산
한글.hwp
.hwpx
공문 · 보고서
워드.docx문서 · 편지
PDF.pdf인쇄용 · 배포용
사진.jpg
.png
사진 · 캡처
메모장.txt꾸밈 없는 글
한 줄 정리확장자는 “이 파일은 어떤 프로그램으로 여세요”라고 알려 주는 이름표입니다.
시작하기AI가 읽는 문서

그렇다면, AI가 가장 읽기 편한 문서는 무엇일까요?

AI는 결국 글자를 읽습니다. 꾸밈과 프로그램 전용 구조가 많을수록 글을 찾아내는 일이 먼저 생기고, 글과 구조만 있을수록 바로 읽습니다.

꾸밈 · 전용 구조가 많다글과 구조만 있다
사진.jpg · .png

그림 속 글자를 먼저 알아봐야 해요

PDF.pdf

꾸밈과 글이 섞여 순서가 꼬이기도 해요

한글 · 엑셀 · 워드.hwp · .xlsx · .docx

그 프로그램만의 구조를 먼저 풀어야 해요

메모장.txt

글은 바로 읽지만 제목 · 목록 구분이 없어요

????.??

글 + 제목 · 목록 · 표 이름표까지 있는 문서

생각해 보기오른쪽 끝 ? 자리에 들어갈 문서는 무엇일까요? 다음 장에서 확인합니다.
시작하기마크다운

마크다운(MD)이란?

앞 장의 ? 자리가 바로 마크다운(.md)입니다. 글에 “이름표”를 붙여 두는 방법입니다. 여기는 제목, 여기는 목록, 여기는 굵게. 이런 표시를 기호 몇 개로 적어 두는 것이 전부입니다. 코딩이 아니라 메모장에 쓰는 글쓰기 규칙입니다.

내가 쓰는 글 (MD 파일)
# 부산 2박3일 가족여행

## 1일차
- 해운대 산책
- 점심: 돼지국밥

**꼭 챙기기:** 우산

| 항목 | 내용 |
|---|---|
| 기간 | 2박3일 |
| 인원 | 3명 |
화면에 보이는 모습

부산 2박3일 가족여행

1일차
  • 해운대 산책
  • 점심: 돼지국밥

꼭 챙기기: 우산

항목내용
기간2박3일
인원3명
시작하기마크다운 기호

기호는 이 정도면 충분합니다

#가장 큰 제목# 제목
##중간 제목## 소제목
-점 목록- 항목
**굵은 글씨**중요**
|표| 항목 | 내용 |
- [ ]체크박스- [ ] 우산
외울 필요 없습니다AI가 알아서 써 줍니다. 우리는 “제목, 표, 체크리스트를 사용해줘”라고 말로 요청하면 됩니다.

오늘 왜 MD로 만들까요?

AI가 가장 잘 읽습니다

구조가 분명해서 “2일차만 고쳐줘” 같은 부분 수정도 잘 알아듣습니다.

어디로든 옮겨 쓸 수 있습니다

MD 하나가 PPT, PDF, 인포그래픽, 웹앱으로 이어집니다.

메모장으로도 열립니다

파일 확장자는 .md입니다. 특별한 프로그램이 없어도 읽힙니다.

시작하기파일 저장

MD 파일 저장하는 법 · 오늘 여러 번 씁니다

  1. AI 답변 아래의 복사 버튼을 누릅니다. (없으면 글을 드래그한 뒤 Ctrl+C)
  2. 메모장을 엽니다.
  3. Ctrl+V로 붙여넣습니다.
  4. 파일 → 다른 이름으로 저장을 누릅니다.
  5. 파일 형식을 모든 파일로 바꾸고, 이름 끝에 .md를 붙여 부산여행 폴더에 저장합니다.
파일 이름 예시부산_2박3일_가족여행_계획안.md
자주 하는 실수파일 형식을 “모든 파일”로 바꾸지 않으면 .md.txt로 저장됩니다. 이름 끝이 .md인지 꼭 확인하세요.
1차시

목적 있는 프롬프트로
여행계획안 만들기

“부산 여행계획 짜줘”와, 누구와 왜 어떤 방식으로 갈지 설명하고 결과 형식까지 요청하는 프롬프트는 결과의 품질이 다릅니다. 직접 비교하면서 확인합니다.

노트북으로 AI에게 여행 계획을 부탁하는 사람
이 차시에서 만드는 것부산_2박3일_가족여행_계획안.md
오늘의 한 줄“AI에게 질문하지 말고, 원하는 결과를 설명하며 일을 맡긴다.”
1차시STEP 1

한 줄로 부탁해 보기

  1. AI 입력창에 오른쪽 문장을 그대로 입력합니다.
  2. 결과가 나오면 지우지 말고 그대로 둡니다.
  3. 아래 네 가지 질문에 스스로 답해 봅니다.
눌러서 하나씩 체크해 보세요
프롬프트 ①
부산 2박3일 여행계획 짜줘.
막히면결과가 옆 사람과 조금 달라도 정상입니다. AI는 매번 다르게 답합니다.
1차시STEP 2

좋은 부탁에는 5가지가 들어 있습니다

목적무엇을 만들 것인가?부산 2박3일 가족여행 계획
대상누구를 위한 것인가?60대 부모님 두 분 + 성인 자녀 1명
상황어떤 조건인가?하루 방문 장소 3곳 이하, 식사·휴식 충분히
컨셉어떤 분위기인가?많이 걷지 않고 여유 있게
결과형식어떤 형태로 받을 것인가?7가지 순서로, Markdown 형식
기억할 것프롬프트가 길어서 좋은 것이 아닙니다. AI가 판단할 기준을 충분히 줬기 때문에 결과가 좋아집니다.
1차시STEP 3

5가지를 넣어 다시 부탁하기

  1. 앞의 결과 아래에 이어서 오른쪽 프롬프트를 붙여넣습니다.
  2. 결과가 나올 때까지 기다립니다.
  3. 두 결과를 위아래로 비교할 수 있게 둡니다.
이렇게 되면 성공여행 컨셉, 전체 일정표, 1~3일차 세부일정, 예상 경비, 준비물 체크리스트가 순서대로 나옵니다.
막히면결과가 한 번에 안 나오면 “이어서 계속해줘”라고 입력합니다. 막혔다면 샘플 01_부산여행_기본자료.md로 이어가도 됩니다.
프롬프트 ②
60대 부모님 두 분과 성인 자녀 1명이 함께 가는 부산 2박3일 가족여행 계획을 만들고 싶어. 여행 컨셉은 '많이 걷지 않고, 맛있는 음식과 부산다운 장소를 여유 있게 즐기는 가족여행'이야. 하루 방문 장소는 3곳 이하로 하고, 식사와 휴식시간을 충분히 넣어줘. 결과는 다음 순서로 정리해줘. 1. 여행 컨셉 2. 여행 전체 일정표 3. 1일차 세부일정 4. 2일차 세부일정 5. 3일차 세부일정 6. 예상 경비 7. 준비물 체크리스트 Markdown 형식으로 작성해줘.
1차시STEP 4

두 결과를 비교해 보기

STEP 1의 결과와 STEP 3의 결과를 나란히 놓고 하나씩 확인해 보세요.

눌러서 하나씩 체크해 보세요
STEP 1한 줄 부탁

누구를 위한 건지, 어떤 여행인지 알 수 없는 일반적인 답

STEP 35가지를 넣은 부탁

대상과 컨셉이 보이고, 정해 준 순서대로 정리된 답

이렇게 되면 성공두 번째 결과가 더 쓸 만하다고 느껴집니다. 그 차이를 만든 것은 길이가 아니라 기준입니다.
1차시STEP 5

결과를 대화로 고쳐 보기

  1. 오른쪽 프롬프트를 이어서 입력합니다.
  2. 일정이 바뀌었는지 확인합니다.
  3. 마음에 안 드는 부분이 있으면 같은 방식으로 한 번 더 말해 봅니다.
이렇게 되면 성공날짜마다 “꼭 가볼 곳”과 “체력이 되면 추가할 곳”이 나뉘고, 하루 일정이 줄어듭니다.
막히면마지막 줄 “전체 구조는 그대로 유지해줘”가 중요합니다. 이 말이 없으면 잘 만든 부분까지 통째로 바뀔 수 있습니다.
프롬프트 ③
부모님이 피곤하지 않도록 오전 1곳, 오후 1~2곳 정도로 조정해줘. 식사 후에는 최소 1시간 여유를 넣고, 각 날짜마다 '꼭 가볼 곳'과 '체력이 되면 추가할 곳'을 구분해줘. 전체 구조는 그대로 유지해줘.
1차시STEP 6

MD 파일로 저장하기

  1. 최종 결과를 복사합니다.
  2. 메모장에 붙여넣고 저장합니다. (저장 방법은 “MD 파일 저장하는 법” 화면 참고)
  3. 저장 위치가 부산여행 폴더인지 확인합니다.
이렇게 되면 성공폴더 안에 .md로 끝나는 파일이 보입니다. 이 파일이 오늘 모든 결과물의 원본이 됩니다.
파일 이름부산_2박3일_가족여행_계획안.md
눌러서 하나씩 체크해 보세요
2차시

MD 자료를 다듬고
PPT로 확장하기

1차시의 MD를 한 번 쓰고 버리는 답변이 아니라 다시 쓸 수 있는 원본 자료로 정리합니다. 그다음 같은 자료를 PPT 구조로 바꿉니다.

이 차시에서 만드는 것완성 MD + PPT 구성안
오늘의 한 줄“지금부터는 새로 만들어 달라고 하지 않습니다. 아까 만든 MD를 계속 재료로 씁니다.”
2차시STEP 1

MD를 원본으로 다듬기

  1. 1차시에서 만든 결과가 있는 대화창에서 이어서 시작합니다. (닫았다면 저장한 MD 파일을 첨부하거나 내용을 붙여넣기)
  2. 오른쪽 프롬프트를 입력합니다.
  3. 제목, 소제목, 표, 체크리스트로 정리되었는지 봅니다.
이렇게 되면 성공중복이 줄고 표와 체크리스트가 생겼습니다. 일정 내용은 그대로입니다.
막히면실제 여행에 쓸 계획이라면 장소 이름, 영업시간, 휴무일은 꼭 공식 정보로 다시 확인하세요. AI 답이 틀릴 수 있습니다.
프롬프트 ④
이 여행계획안을 나중에 PPT, PDF, 인포그래픽, 웹앱으로 다시 활용할 수 있도록 내용을 더 명확하게 구조화해줘. 제목, 소제목, 표, 체크리스트를 사용하고 중복되는 내용은 줄여줘. Markdown 형식은 유지해줘.
2차시STEP 2

PPT 6장 구성안 만들기

  1. 이 MD 문서를 바탕으로 한다는 점이 중요합니다. 같은 대화창에서 이어서 입력합니다.
  2. 오른쪽 프롬프트를 입력합니다.
  3. 슬라이드마다 네 가지가 있는지 확인합니다.
1 표지2 여행 컨셉3 1일차4 2일차5 3일차6 예상경비·준비물
이렇게 되면 성공슬라이드 6장 각각에 제목, 핵심 문구 2~3줄, 넣으면 좋은 이미지, 발표자 설명이 있습니다.
프롬프트 ⑤
이 Markdown 문서를 바탕으로 일반인이 보기 좋은 6장짜리 PPT 구성안을 만들어줘. 각 슬라이드마다 다음을 작성해줘. - 슬라이드 제목 - 핵심 문구 2~3줄 - 넣으면 좋은 이미지 - 발표자가 설명할 내용 전체 분위기는 가족여행 안내자료처럼 편안하고 친근하게 구성해줘.
2차시STEP 3

말로 지시해 보기 (선택)

  1. 입력창의 마이크 아이콘을 누릅니다. 아이콘이 없으면 입력창을 클릭하고 윈도우 키+H.
  2. 오른쪽 문장을 소리 내어 읽어 봅니다.
  3. 글자로 입력된 것을 확인하고 전송합니다.
이렇게 되면 성공말한 내용이 글자로 입력되고, 결과가 PPT 6장 구성으로 나옵니다.
막히면마이크가 안 되면 브라우저의 마이크 권한을 허용했는지 확인하세요. 안 되면 복사 버튼으로 진행해도 됩니다.
말로 해 볼 문장
이 여행 계획을 발표자료 6장으로 만들어줘. 부모님과 함께 가는 여행이라 글자가 너무 작지 않았으면 좋겠어.
2차시STEP 4

두 파일 저장하기

  1. 정리된 MD를 복사해 메모장에 붙여넣고 저장합니다.
  2. PPT 구성안도 같은 방법으로 따로 저장합니다.
  3. 두 파일 모두 부산여행 폴더에 있는지 확인합니다.
이렇게 되면 성공폴더에 .md 파일이 두 개 있습니다. 3차시부터는 완성 MD 파일을 계속 사용합니다.
파일 이름 ①부산_2박3일_가족여행_완성.md
파일 이름 ②부산_가족여행_PPT_구성안.md
3차시

MD를 디자인 PDF로 바꾸기

오전에 만든 내용은 바꾸지 않습니다. 같은 내용에 옷을 입혀 봅니다. 색상, 글꼴, 여백, 배치에 따라 같은 정보도 전혀 다른 인상을 줍니다.

이 차시에서 만드는 것디자인 PDF 1개
오늘의 한 줄“PDF를 새로 만드는 것이 아니라, 같은 내용을 다른 형식으로 내보내는 것이다.”
3차시STEP 1

스타일 하나 고르기

  1. 부산_2박3일_가족여행_완성.md를 AI에 첨부합니다. (첨부가 안 되면 내용을 붙여넣기)
  2. A 또는 B 중 하나만 골라 프롬프트를 입력합니다.
  3. 결과 화면을 확인합니다.
이렇게 되면 성공같은 내용인데 A와 B는 분위기가 다릅니다.
막히면특정 브랜드를 그대로 따라 하는 것이 아니라 색감, 여백, 글자 같은 디자인 원리만 참고합니다.
A. 따뜻하고 친근한 스타일
이 여행계획서를 가족이 함께 보기 좋은 PDF 디자인으로 만들어줘. 디자인 조건: - 따뜻하고 친근한 분위기 - 넉넉한 여백 - 큰 제목 - 둥근 카드형 정보박스 - 주황 계열 포인트 컬러 - 사진이 들어갈 자리 확보 - 글자는 너무 작지 않게
B. 깔끔하고 정돈된 스타일
깔끔하고 신뢰감 있는 모바일 금융서비스 같은 분위기로 만들어줘. 밝은 배경, 선명한 파란색 포인트, 간결한 아이콘과 충분한 여백을 사용해줘.
3차시STEP 2

점검하고 PDF로 저장하기

네 가지만 봅니다.

눌러서 하나씩 체크해 보세요

고치고 싶다면 “제목을 더 크게 해줘”, “글자를 조금 더 크게 해줘”처럼 한 가지씩 말합니다.

파일 이름부산_가족여행_디자인PDF.pdf
  1. AI가 PDF 파일을 바로 주면 다운로드해서 저장합니다.
  2. 화면(HTML)으로 보여 주면 Ctrl+P → 대상을 PDF로 저장 → 저장합니다.
막히면안 되면 강사 샘플 PDF를 받아서 다음 단계로 이어가도 됩니다.
4차시

인포그래픽과
여행 포스터 만들기

같은 MD 자료로 정보형 결과물과 감성형 결과물의 차이를 체험합니다. 인포그래픽은 정보를 빠르게 이해하게 하고, 포스터는 분위기와 메시지를 전합니다.

이 차시에서 만드는 것인포그래픽 1개 + 포스터 1개
오늘의 한 줄“하나는 정보를 한눈에, 하나는 여행 가고 싶게 만든다.”
4차시STEP 1

인포그래픽 만들기

  1. 부산_2박3일_가족여행_완성.md(또는 3차시 PDF)를 첨부합니다.
  2. 오른쪽 프롬프트를 입력합니다.
  3. 이미지가 나오면 글자가 깨지지 않았는지 확인합니다.
이렇게 되면 성공제목, 컨셉, DAY 1·2·3, 예상 경비, 준비물 5개가 한 장에 정리됩니다.
막히면정보가 너무 많으면 “준비물은 5개만, 글자는 더 크게”라고 한 번 더 요청하세요.
프롬프트 ⑨
첨부한 부산 2박3일 가족여행 계획의 핵심만 뽑아 한 장짜리 인포그래픽 이미지로 구성해줘. 구성: - 제목 - 여행 컨셉 - DAY 1 / DAY 2 / DAY 3 - 예상 경비 - 준비물 5개 정보가 너무 많지 않게 하고 부모님과 자녀가 함께 보기 쉬운 구조로 만들어줘.
4차시STEP 2

여행 포스터 만들기

  1. 오른쪽 프롬프트를 입력합니다.
  2. 포스터 글자가 깨졌는지 확인합니다.
이렇게 되면 성공“우리 가족 부산 2박3일 여행”이 크게 보이고, 밝고 따뜻한 분위기의 포스터가 나옵니다.
막히면이미지 AI는 한글이 깨질 때가 있습니다. 깨졌다면 문구를 정확히 적어 다시 요청하세요. 지연되면 강사 샘플로 다음 단계에 합류해도 됩니다.
프롬프트 ⑩
부산 2박3일 가족여행을 홍보하는 여행 포스터 이미지를 만들어줘. 분위기: - 따뜻하고 행복한 가족여행 - 부산 바다와 도시의 느낌 - 부모님과 성인 자녀가 함께 여행하는 분위기 - 밝고 따뜻한 색감 포스터 안의 긴 설명문은 최소화하고 '우리 가족 부산 2박3일 여행'이라는 메시지가 잘 보이게 구성해줘.
4차시STEP 3

비교하고 저장하기

두 결과물을 나란히 놓고 생각해 보세요.

눌러서 하나씩 체크해 보세요
파일 이름 ①부산_가족여행_인포그래픽.png
파일 이름 ②부산_가족여행_포스터.png
  1. 이미지를 마우스 오른쪽 버튼으로 눌러 이미지 저장 (또는 다운로드 버튼)
  2. 부산여행 폴더에 위 이름으로 저장
5차시

내 여행계획안이
미니 웹앱이 된다

지금까지는 보는 결과물이었습니다. 이제부터는 누르면 반응하는 결과물을 만듭니다. 코드를 외울 필요는 없고, 필요한 기능을 말로 설명하면 됩니다.

입력→기능→결과
예시 ①여행 경비 입력 → 계산 버튼 → 총 여행비 표시
예시 ②준비물 목록 → 체크하기 → 완료 항목 표시
5차시STEP 1

MD를 넣고 웹앱 요청하기

  1. 부산_2박3일_가족여행_완성.md를 첨부합니다.
  2. 오른쪽 프롬프트를 입력합니다.
  3. AI가 만든 결과(파일 또는 코드)를 기다립니다.
이렇게 되면 성공여행 소개, DAY 1·2·3 일정, 준비물 체크리스트, 여행경비 계산기가 들어 있는 웹앱이 만들어집니다.
막히면오래 걸리거나 안 되면 강사 샘플 HTML(07_부산여행_웹앱_샘플.html)로 다음 단계를 이어가도 됩니다.
프롬프트 ⑪
첨부한 부산 2박3일 가족여행 Markdown 문서를 바탕으로 모바일에서도 사용할 수 있는 간단한 여행 웹앱을 만들어줘. 화면에는 다음 기능을 넣어줘. 1. 여행 소개 2. DAY 1 / DAY 2 / DAY 3 일정 보기 3. 준비물 체크리스트 4. 여행경비 계산기 5. 가족이 쉽게 볼 수 있는 큰 글자와 버튼 한 페이지에서 쉽게 사용할 수 있게 만들고, 초보자가 수정하기 쉬운 구조로 만들어줘.
5차시STEP 2

내 컴퓨터에서 열어 보기

  1. AI가 파일을 주면 다운로드합니다.
  2. 코드로 보여 주면 복사해서 메모장에 붙여넣고, 파일 형식을 모든 파일로 바꿔 부산여행앱.html로 저장합니다.
  3. 저장한 파일을 더블클릭하면 인터넷 브라우저에서 열립니다.
이렇게 되면 성공브라우저에 여행 웹앱 화면이 나타납니다.
파일 이름 예시부산여행앱.html
알아두세요지금은 내 컴퓨터에서만 열립니다. 다른 사람에게 보내는 방법은 6차시에서 합니다.
5차시STEP 3

눌러 보며 테스트하기

하나씩 직접 눌러 보세요.

눌러서 하나씩 체크해 보세요
안 되는 게 있다면고장이 아니라 고칠 곳을 찾은 것입니다. 무엇을 눌렀는데 어떻게 됐는지를 메모해 두세요. 6차시에서 그대로 사용합니다.
이렇게 되면 성공다섯 가지 중 대부분이 됩니다. 안 되는 것은 6차시에서 고칩니다.
5차시STEP 4

첫 번째 수정 요청하기

  1. 오른쪽 프롬프트를 입력합니다.
  2. 수정된 파일(코드)을 같은 방법으로 다시 저장하고 열어 봅니다.
이렇게 되면 성공글자가 커지고, DAY 버튼이 눈에 띄고, 체크리스트가 일정 아래에 있습니다.
막히면수정은 한 번에 한두 가지씩 하는 것이 안전합니다. 한꺼번에 많이 요청하면 잘 되던 부분이 바뀔 수 있습니다.
프롬프트 ⑫
전체 글자를 조금 더 크게 해줘. DAY 1, DAY 2, DAY 3 버튼을 더 눈에 잘 띄게 해줘. 준비물 체크리스트를 여행 일정 아래로 옮겨줘.
6차시

웹앱 수정하고
카카오톡으로 공유하기

AI가 처음 만든 앱은 완성품이 아닙니다. 수정하고, 테스트하고, 공유하는 것까지 직접 해 봅니다.

이 차시에서 만드는 것최종 웹앱 + 공유 링크
오늘의 한 줄“코드를 몰라도 괜찮다. 무엇을 눌렀는데 무엇이 안 됐는지만 정확히 말하면 된다.”
6차시STEP 1

디자인 다듬기

  1. 오른쪽 프롬프트를 입력합니다.
  2. 수정본을 저장하고 열어 봅니다.
이렇게 되면 성공가족여행 분위기의 따뜻한 색감, 큰 버튼, 한눈에 보이는 제목이 됩니다.
막히면휴대폰 화면 크기로도 한 번 확인해 보세요. 브라우저 창을 좁게 줄이면 비슷하게 볼 수 있습니다.
프롬프트 ⑬
이 웹앱을 가족여행 분위기에 맞게 수정해줘. - 따뜻한 색감 - 버튼은 크게 - 제목은 한눈에 보이게 - 모바일 화면에서 여백 확보 - 너무 많은 색은 사용하지 않기
6차시STEP 2

기능 추가하기

  1. 오른쪽 프롬프트를 입력합니다.
  2. 경비 계산기에서 직접 확인합니다.
눌러서 하나씩 체크해 보세요
막히면기능은 “쓰는 사람이 어디서 불편할까?”를 생각하면 떠올릴 수 있습니다.
프롬프트 ⑭
여행경비 계산기에 초기화 버튼을 추가해줘. 금액에는 천 단위 쉼표를 넣어줘. 인원수를 입력하지 않으면 안내문을 보여줘.
6차시STEP 3

오류는 말로 설명해서 고치기

이렇게 말하세요

무엇을 눌렀는데 + 어떻게 됐는지

예: “계산하기 버튼을 눌렀는데 결과가 나오지 않아.”

  1. 안 되는 부분을 오른쪽 문장으로 요청합니다.
  2. 수정된 전체 버전을 받아 다시 저장하고 열어 봅니다.
이렇게 되면 성공버튼을 눌렀을 때 결과가 나옵니다.
막히면“전체 버전”을 요청하는 이유는, 일부 코드만 받으면 어디에 붙일지 몰라 막히기 때문입니다.
프롬프트 ⑮
계산하기 버튼을 눌렀는데 결과가 나오지 않아. 문제를 찾아 수정해줘. 수정된 전체 버전을 다시 보여줘.
6차시STEP 4

공개 링크 만들기

01웹앱 파일
02웹에 올리기
03공개 주소(URL) 생성
04주소 복사
오늘 사용할 배포 서비스Netlify Drop (넷리파이 드롭)https://app.netlify.com/drop
구글에서 넷리파이 드롭을 검색한 결과 화면. 맨 위 Netlify Drop 링크
  1. 구글에서 넷리파이 드롭을 검색하거나, 위 주소로 접속합니다.
  2. 저장해 둔 웹앱 파일(부산여행앱.html)을 화면에 끌어다 놓습니다.
  3. 생성된 공개 주소를 복사합니다.
이렇게 되면 성공https://로 시작하는 주소가 생기고, 그 주소를 누르면 내 웹앱이 열립니다.
막히면주소가 열리지 않으면 공개 설정이 되었는지, 주소를 끝까지 복사했는지 확인하세요.
6차시STEP 5

카카오톡으로 보내서 확인하기

  1. 복사한 공개 주소를 카카오톡으로 옆 사람(또는 나에게)에게 보냅니다.
  2. 받은 사람이 휴대폰에서 주소를 눌러 열어 봅니다.
눌러서 하나씩 체크해 보세요
이렇게 되면 성공상대방 휴대폰에서 내가 만든 웹앱이 열립니다. 내 컴퓨터에서만 열리는 파일과 링크로 보낼 수 있는 웹앱의 차이가 바로 공개 링크입니다.
발표해 본다면

① 무엇을 만들었나요? ② 어떤 부분을 수정했나요? ③ 누구에게 보내고 싶나요?

마무리오늘의 결과물

오늘 만든 결과물을 점검해 보세요

오늘의 핵심 메시지

검색으로 끝내지 않습니다.

목적을 정하고 → MD로 만들고 → 디자인하고 → 이미지로 바꾸고 → 웹앱으로 만들고 → 다른 사람에게 공유합니다.

마무리커뮤니티

수업이 끝나도 함께 이어가요

휴대폰 카메라로 QR 코드를 비추면 바로 들어갈 수 있습니다.

01 · 국립순천대학교AI 인력양성 밴드 국립순천대학교 AI 인력양성 밴드 초대 QR 코드와 초대 코드

초대 코드 VDW-8HY-QP

02 · 광양시광양시 AI 커뮤니티 광양시 AI 커뮤니티 참여 QR 코드

QR 코드를 비추면 참여 화면이 열립니다