본문으로 건너뛰기
AI 바이브코딩 입문 · 2회차

화면을 말로 설명하면 버튼, 입력 폼, 목록이 만들어진다.

프롬프트로 원하는 화면 만들기

  • 프롬프트 9
  • 개념 6
  • 링크 3
내 진행 0/9

시작 전에 — 준비물

  • 1주 차에 만든 작업 폴더
  • 브라우저에서 열어 볼 수 있는 index.html
  • 화면에 넣고 싶은 기능 한 가지 (예: 방문 예약 폼, 할 일 목록)
STEP 010/2

화면 구성을 말로 정리

만들기 전에 어떤 화면이 필요한지 먼저 말로 그려 보았나요?

화면을 어떻게 만들지 AI에게 바로 맡기기보다, 먼저 무엇이 보여야 하는지 목록으로 정리합니다.

AI가 질문을 먼저 하게 하면 내가 놓친 조건을 찾을 수 있습니다.

P1

화면 구성 인터뷰

AI의 질문에 답하며 화면에 필요한 요소를 정합니다.

나는 [무엇을 하는 화면]을 만들고 싶어. 만들기 전에 필요한 것을 알아야 하니 질문을 한 번에 하나씩 해 줘. 화면에 보여야 할 것, 사용자가 누를 것, 입력할 것 순서로 물어봐 줘. 대답이 모이면 화면 구성안을 목록으로 정리해 줘.
P2

요구사항 목록 만들기

만들 기능을 필수와 나중에 할 일로 나눕니다.

위에서 정리한 화면 구성안을 '꼭 필요한 것'과 '나중에 해도 되는 것'으로 나눠 줘. 꼭 필요한 것은 오늘 안에 만들 수 있는 양으로 줄여서 번호를 붙여 줘.

만들기 전에 필요한 요소를 목록으로 정리하면 수정 횟수가 줄어듭니다.

STEP 020/3

버튼과 입력 폼

버튼을 누르면 무슨 일이 일어나야 하는지 정확히 말할 수 있나요?

버튼은 누르는 순간 일어날 일까지 함께 말해야 합니다. '버튼을 만들어 줘'보다 '누르면 입력한 내용이 아래 목록에 추가되게 해 줘'가 정확합니다.

입력 폼은 어떤 항목이 필수인지, 잘못 입력하면 어떤 안내를 보일지도 함께 정합니다.

  • 버튼을 눌렀을 때 일어날 일을 한 문장으로 적었다
  • 필수로 받을 항목을 정했다
P3

동작하는 버튼 만들기

버튼을 누르면 화면이 바뀌도록 만듭니다.

[파일 이름]에 '[버튼 이름]' 버튼을 추가해 줘. 이 버튼을 누르면 [일어나야 할 일]이 되게 해 줘. 버튼은 손가락으로 누르기 편한 크기로 하고, 눌렀다는 것을 알 수 있게 화면에 표시해 줘.
산출물 · index.html
P4

입력 폼 만들기

이름, 연락처 같은 입력 항목을 가진 폼을 만듭니다.

[파일 이름]에 입력 폼을 추가해 줘. 항목은 [항목1], [항목2], [항목3]이고, 이 중 [필수 항목]은 꼭 입력해야 해. 제출 버튼을 누르면 입력한 내용을 화면 아래에 보여 줘.
산출물 · index.html
P5

잘못된 입력 안내

빈칸이나 틀린 형식에 친절한 안내를 보여 줍니다.

방금 만든 입력 폼에서 필수 항목이 비어 있거나 [연락처 / 이메일] 형식이 맞지 않으면 어떤 항목이 왜 문제인지 해당 칸 아래에 알려 줘. 안내 문구는 짧고 차분한 말투로 써 줘.

산출물 · index.html

버튼은 눌렀을 때 일어날 일까지 함께 말합니다.

STEP 030/4

목록으로 보여 주기

입력한 내용이 쌓이면 어떤 모양으로 보여 주면 좋을까요?

목록은 추가, 삭제, 빈 상태를 함께 생각해야 쓸 만해집니다.

한 번에 모두 요청하지 말고, 보여 주기, 추가하기, 지우기 순서로 나눠 확인합니다.

P6

목록 보여 주기

입력한 항목이 아래로 쌓이는 목록을 만듭니다.

입력 폼에서 제출한 내용이 [항목 이름]별로 아래 목록에 한 줄씩 쌓이게 해 줘. 가장 최근 것이 위에 보이게 하고, 아직 아무것도 없을 때는 '[비어 있을 때 보여 줄 문구]'라고 보여 줘.
산출물 · index.html
P7

삭제와 완료 표시

목록의 항목을 지우거나 끝낸 일로 표시합니다.

목록의 각 줄에 '삭제' 버튼과 '완료' 표시를 추가해 줘. 완료한 항목은 글자에 취소선을 그어서 색이 아니라 모양으로도 구분되게 해 줘.
P8

화면 모양 다듬기

여백과 글자 크기를 읽기 편하게 정리합니다.

지금 화면을 휴대폰과 노트북 모두에서 읽기 편하게 다듬어 줘. 글자 크기, 여백, 버튼 간격만 조정하고 기능은 바꾸지 마. 바꾼 내용은 목록으로 알려 줘.
P9

휴대폰에서 점검하기

좁은 화면에서 깨지는 곳을 찾습니다.

이 화면을 휴대폰처럼 좁은 폭에서 볼 때 깨지거나 불편해질 곳을 점검해 줘. 문제가 있으면 위치와 이유를 알려 주고, 내가 허락하면 그때 고쳐 줘.

빈 상태, 추가, 삭제를 나눠서 확인하면 목록이 단단해집니다.

개념·이론

HTML·CSS·JavaScript웹 화면을 이루는 세 가지 언어

HTML은 화면에 무엇이 있는지, CSS는 어떻게 보이는지, JavaScript는 누르면 어떻게 움직이는지를 맡습니다. 직접 쓰지 않아도 어느 부분이 어떤 역할인지 알면 AI에게 정확히 시킬 수 있습니다.

입력 폼사용자가 정보를 적어 내는 화면

이름, 연락처처럼 사용자가 정보를 입력하고 제출하는 화면 요소입니다. 필수 항목과 입력 형식을 미리 정해 두면 잘못된 입력을 줄일 수 있습니다.

이벤트누르기·입력하기 같은 사용자 동작

버튼을 누르거나 글자를 입력하는 것처럼 화면에서 일어나는 사용자의 동작입니다. '이 동작이 일어나면 이렇게 해 줘'라고 말하는 것이 화면을 움직이는 기본 지시입니다.

반응형 화면화면 크기에 맞게 바뀌는 구성

휴대폰, 태블릿, 노트북 같은 서로 다른 화면 폭에 맞춰 배치가 달라지는 화면입니다. 가장 좁은 화면에서 먼저 확인하면 문제를 빨리 찾을 수 있습니다.

입력 검증입력값이 올바른지 확인하는 과정

빈칸이나 형식이 틀린 값을 제출하기 전에 걸러 내는 과정입니다. 무엇이 왜 잘못됐는지 짧게 알려 주면 사용자가 바로 고칠 수 있습니다.

반복 개선만들고 확인하고 고치기를 되풀이

결과를 눈으로 확인하고 한 가지씩 고쳐 달라고 요청하는 과정입니다. 화면 작업에서는 바꾼 곳만 확인하면 되어 속도가 빠릅니다.

2회차 자료실

자료 준비 중입니다. 교육을 진행한 뒤 이곳에 올립니다.