대학생 AI 웹 제작 실습 · 1차시

HTML 4개
같이 만들기

설명은 짧게, 만드는 시간은 길게. 정적 카드부터 버튼이 움직이는 퀴즈까지 난이도를 한 단계씩 올립니다.

설치 없음HTML 한 파일AI와 함께 제작휴대폰 강의 모드
수업 바로가기
00–05

오늘은 설명보다
완성이 먼저

작은 결과를 열어 보고 한 가지씩 바꾸는 연습을 네 번 반복합니다.

1. 요청은 그대로 복사처음에는 제공된 요청문으로 같은 출발선에서 시작합니다.
2. 결과는 반드시 열기AI가 완료했다고 말해도 브라우저에서 직접 눌러 봅니다.
3. 수정은 한 번에 하나색상, 문구, 기능 중 한 종류씩 바꿉니다.

시작 전 1분 설정

  • 수업용 새 폴더만 프로젝트로 열기
  • Terminal은 Request Review
  • 프로젝트 밖 파일 접근은 차단

승인 창이 나오면

  • 수업 폴더 안의 작업인지 확인
  • 삭제·설치·업로드인지 확인
  • 모르면 거절하고 목적부터 질문
그대로 말하기“오늘은 HTML 문법을 외우지 않습니다. AI에게 작은 웹페이지를 맡기고, 우리가 결과를 열고 고치는 연습을 네 번 할 겁니다. 승인 창은 수업 폴더 안인지 확인한 다음 누르세요.”
75 MIN

오늘의 제작 순서

행을 누르면 해당 실습 시간으로 타이머가 바뀝니다.

0준비
폴더·권한·결과 확인법
1프로필 카드
글·색·버튼이 있는 첫 화면
2동아리 모집 페이지
여러 구역과 모바일 레이아웃
3점심 랜덤 뽑기
버튼과 JavaScript 동작
43문제 퀴즈
선택·점수·다시 시작
✓공유
옆 사람 결과 눌러 보기
실습 1 · 가장 쉬움

나를 소개하는
프로필 카드

텍스트와 색상을 바꾸면 바로 내 페이지가 되는 첫 성공 경험입니다.

12분

완성할 것

  1. 이름과 전공
  2. 한 줄 소개
  3. 관심사 태그 3개
  4. 인사 버튼

진행 순서

  1. 01-profile 폴더 만들기
  2. 요청문 복사
  3. index.html 생성 승인
  4. 브라우저에서 열기
  5. 내 정보와 색상으로 수정
AI에게 그대로 보내기
01-profile 요청문
index.html 하나로 대학생 프로필 카드를 만들어줘.
화면 가운데 카드가 있고 이름, 전공, 한 줄 소개, 관심사 태그 3개가 보여야 해.
"인사하기" 버튼을 누르면 반가운 메시지가 뜨게 해줘.
CSS와 JavaScript는 HTML 안에 넣고 휴대폰에서도 보기 좋게 만들어줘.
완성 후 내가 바꾸기 쉬운 문구와 색상 위치를 알려줘.
첫 수정 미션
개인화 요청
이름과 전공, 관심사를 내 정보로 바꿔줘.
카드의 주 색상은 내가 좋아하는 색으로 바꾸고 나머지 구조는 유지해줘.
완성 예제 열기다운로드
강사 진행2분 동안 같이 요청하고 5분 동안 개인화합니다. 마지막에는 옆 학생에게 보여 주세요. 설명은 “HTML 한 파일 안에 내용·디자인·동작이 함께 들어갔다” 한 문장만 합니다.
실습 2 · 화면 구성

동아리 모집
랜딩페이지

소개·활동·모집 구역을 가진 긴 페이지를 만듭니다.

15분

완성할 것

  1. 첫 화면 제목과 가입 버튼
  2. 활동 카드 3개
  3. 모집 일정
  4. 버튼을 누르면 신청 구역으로 이동

주제 선택

  • 사진 동아리
  • 축구 동아리
  • 코딩 스터디
  • 축제 부스
  • 직접 정한 주제
AI에게 그대로 보내기
02-club 요청문
대학생 동아리 신입 모집 페이지를 index.html 하나로 만들어줘.
첫 화면에는 동아리 이름, 짧은 소개, "가입하기" 버튼을 넣어줘.
아래에는 주요 활동 카드 3개, 모집 일정, 문의 방법을 넣어줘.
가입 버튼을 누르면 모집 일정 구역으로 부드럽게 이동하게 해줘.
밝고 활동적인 분위기로 만들고 휴대폰에서도 카드가 한 줄로 잘 보여야 해.
CSS와 JavaScript는 HTML 안에 포함해줘.
두 번째 수정 미션
구체적인 수정
내가 선택한 동아리 주제로 모든 문구를 바꿔줘.
첫 화면에 "이번 주 금요일 모집 마감" 배지를 추가해줘.
기존 활동 카드와 가입 버튼 동작은 유지해줘.
완성 예제 열기다운로드
강사 진행창 폭을 줄여 카드가 한 줄로 내려가는지 확인합니다. “더 예쁘게” 대신 “첫 화면 배경을 파란색으로, 활동 카드 구조는 유지”처럼 위치·변경·유지를 말하게 하세요.
실습 3 · 버튼 동작

오늘 뭐 먹지?
랜덤 점심 뽑기

버튼을 누를 때마다 결과가 바뀌는 작은 웹앱을 만듭니다.

18분

완성할 것

  1. 메뉴 후보 입력칸
  2. 랜덤 뽑기 버튼
  3. 결과 표시
  4. 빈 입력 안내와 기록

테스트 방법

  1. 쉼표로 메뉴 5개 입력
  2. 버튼 세 번 누르기
  3. 입력칸을 비우고 누르기
  4. 기록 지우기 확인
AI에게 그대로 보내기
03-lunch 요청문
index.html 하나로 "오늘 뭐 먹지?" 랜덤 점심 뽑기를 만들어줘.
사용자가 쉼표로 구분해서 메뉴 후보를 입력하고 "뽑기" 버튼을 누르면 그중 하나를 무작위로 크게 보여줘.
입력이 비어 있으면 안내를 보여주고 결과가 나올 때 짧은 애니메이션을 넣어줘.
CSS와 JavaScript는 HTML 안에 넣고 모바일에서 사용하기 편하게 만들어줘.
기능 추가 미션
한 단계 더
방금 뽑힌 메뉴를 아래 기록에 최대 3개까지 보여줘.
"기록 지우기" 버튼도 추가해줘.
기존 입력과 랜덤 뽑기 기능은 바꾸지 마.
완성 예제 열기다운로드
강사 진행코드보다 버튼을 눌러 결과부터 확인합니다. “입력 → 버튼 → 결과” 세 칸만 칠판에 적으세요. 오류가 난 학생은 Console 오류와 직전 요청을 AI에게 주게 합니다.
실습 4 · 점수

3문제
미니 퀴즈

정답을 고르고 점수를 계산하는 오늘의 최종 작품입니다.

20분

완성할 것

  1. 객관식 문제 3개
  2. 정답/오답 표시
  3. 현재 문제 번호
  4. 최종 점수와 다시 시작

주제 선택

  • 학교 상식
  • 영화·음악
  • 전공 기초
  • 친구 퀴즈
  • 오늘 배운 내용
AI에게 그대로 보내기
04-quiz 요청문
index.html 하나로 객관식 미니 퀴즈를 만들어줘.
문제는 3개이고 한 번에 한 문제만 보여줘. 각 문제에는 선택지 3개가 있어야 해.
선택하면 정답 또는 오답을 바로 알려주고 "다음 문제" 버튼을 보여줘.
마지막에는 3점 만점 점수와 점수별 메시지, "다시 시작" 버튼을 보여줘.
문제 데이터는 JavaScript 위쪽에 모아 두어 내가 쉽게 바꿀 수 있게 해줘.
모바일에서도 버튼을 누르기 쉽게 만들어줘.
나만의 퀴즈로 변경
콘텐츠 수정
퀴즈의 구조와 점수 기능은 유지하고 문제 3개만 내가 정한 주제로 바꿔줘.
정답을 고른 뒤에는 다른 선택지를 다시 누를 수 없게 해줘.
마지막 결과 화면에는 다시 시작 버튼을 유지해줘.
완성 예제 열기다운로드
강사 진행완성보다 테스트에 비중을 둡니다. 정답, 오답, 마지막 문제, 다시 시작을 모두 눌러야 완료입니다. 빠른 학생은 문제 수를 늘리지 말고 모바일 버튼 크기를 확인하게 하세요.
SOS

막혔을 때
이 순서만 확인

새로 만들기 전에 현재 파일과 오류를 기준으로 고칩니다.

파일이 안 보여요파일명이 정확히 index.html인지 확인합니다.
화면이 하얘요Console의 빨간 오류를 복사해 AI에게 줍니다.
버튼이 안 눌려요무엇을 눌렀고 어떤 변화가 없었는지 말합니다.
디자인이 이상해요위치·문제·원하는 상태·유지할 것을 적습니다.
공통 오류 해결 요청
현재 index.html에서 문제가 발생했어.
재현 방법: [무엇을 눌렀는지]
실제 결과: [무슨 일이 생겼는지]
원하는 결과: [어떻게 되어야 하는지]
오류 메시지: [있으면 붙여넣기]
원인을 먼저 설명하고 필요한 부분만 수정해줘. 이미 작동하는 기능과 디자인은 유지해줘.
70–75

마지막 5분은
서로 눌러 보기

코드를 발표하지 않고 만든 화면을 옆 사람에게 줘서 사용하게 합니다.

완주 0 / 6
마무리 멘트“오늘 외워야 할 코드는 없습니다. 요청하고, 파일을 열고, 직접 눌러 보고, 한 가지씩 수정하는 네 번의 반복이 오늘 배운 전부입니다.”