[바이브코딩기초] HTML·CSS·JavaScript로 AI 홈페이지 수정하기

AI로 홈페이지는 만들었는데, 버튼 하나를 옮기려다 모바일 화면이 깨진 적이 있나요? 바이브코딩에서 수정 요청을 구체적으로 하려면 HTML·CSS·JavaScript의 역할부터 구분하면 도움이 됩니다. AX연구소 셋째 영상(EP.3)의 핵심 내용과 용어 표, 바로 복사해 사용할 요청문, 홈페이지 점검 방법을 함께 정리했습니다.

이 영상이 다루는 문제

“버튼을 옆으로 옮겨줘.” AI가 수정한 뒤 휴대폰 화면이 깨집니다. 다시 고쳐달라고 했더니 이번에는 버튼이 눌리지 않습니다. 결국 이전 버전으로 되돌립니다. 원하는 수정은 작았는데, 어떤 부분을 바꾸고 어떤 부분을 유지해야 할지 제대로 전달하지 못한 상황입니다.

영상의 교육 서비스 홈페이지는 학습용 예제입니다. 강의 목록과 필터 등 화면 동작을 보여주며, 실제 신청·결제·데이터 저장 기능은 연결하지 않았습니다.

같은 버튼이어도 문구를 바꾸는 일, 위치와 간격을 바꾸는 일, 눌렀을 때의 처리를 바꾸는 일은 다릅니다. 코드를 전부 외우기 전에 이 차이를 구분하고, AI에게 바꿀 부분과 유지할 부분을 설명해보세요.

핵심 정리

1. HTML·CSS·JavaScript는 주로 맡는 일이 다릅니다

구분	확인할 질문	강의 홈페이지 예제
HTML · 구조	어떤 내용이 있고, 각각 어떤 역할인가?	대표 제목, 설명 문단, 강의 목록, 안내 링크를 구분합니다.
CSS · 표현	내용을 어떤 모습과 배치로 보여줄까?	카드 간격·글꼴·색상과 큰 화면 3열, 작은 화면 1열 배치를 정합니다.
JavaScript · 동작	사용자의 행동에 맞춰 무엇을 처리하고 바꿀까?	분류를 바꾸면 강의 목록과 결과 개수가 함께 바뀌도록 합니다.

HTML은 내용의 구조와 의미를 표시합니다. 글자를 크게 보이게 만드는 것과 제목이라고 표시하는 것은 다른 일입니다. 대표 제목은 h1, 문단은 p, 이동 링크는 a처럼 요소의 역할에 맞는 표시를 사용합니다.

MDN · HTML로 내용 만들기

CSS는 색상·글꼴·간격·배치 등 표현 규칙을 정합니다. 같은 종류의 카드에 공통 스타일을 적용하면 여러 카드의 모양을 일관되게 관리할 수 있습니다. 화면 폭에 맞춰 배치를 조정하는 반응형 디자인에도 CSS가 중요한 역할을 합니다.

MDN · CSS로 화면 꾸미기

JavaScript는 사용자의 행동에 반응하는 판단과 처리를 작성하는 데 활용합니다. 입문 분류를 선택했으면 해당 강의 목록과 결과 숫자를 함께 바꾸고, 결과가 없으면 안내를 보여주는 식입니다. 링크 이동은 HTML로, 간단한 색 변화나 애니메이션은 CSS로도 할 수 있습니다.

MDN · JavaScript로 상호 작용 만들기

이 구분은 역할을 이해하기 위한 기준입니다. 실제 프로젝트에서는 내용·스타일·동작이 같은 컴포넌트 파일에 들어갈 수 있고, 화면의 문구도 데이터나 코드에서 만들어질 수 있습니다. 수정할 파일은 현재 프로젝트를 보고 확인해야 합니다.

2. React의 컴포넌트와 상태는 화면을 관리하는 기준입니다

React는 사용자 인터페이스를 만들고 관리하는 JavaScript 라이브러리입니다. 강의 카드처럼 재사용하는 화면 단위를 컴포넌트로 묶고, 제목과 설명을 다르게 넣어 여러 곳에서 사용할 수 있습니다. CSS의 공통 규칙이 주로 모양을 다룬다면, 컴포넌트는 관련 구조와 동작도 함께 묶을 수 있습니다.

상태는 현재 선택한 분류, 검색어, 확인창의 열림 여부처럼 화면이 기억해야 하는 바뀔 수 있는 값입니다. 같은 선택을 기준으로 버튼 표시·강의 목록·결과 개수가 함께 바뀌도록 구성합니다. 상태를 만들었다고 새로고침 뒤에도 정보가 자동 저장되는 것은 아니므로, 계속 남겨야 하는 값에는 별도의 저장 방식이 필요합니다.

React · 컴포넌트와 상태

3. TypeScript와 Tailwind CSS는 돕는 역할이 다릅니다

TypeScript는 숫자나 문자열처럼 코드에서 다루는 값의 타입을 명시하고 검사하도록 돕습니다. 일반적인 웹 제작에서는 타입 정보를 제거한 JavaScript 형태로 브라우저에 전달합니다. 타입 검사가 있어도 사용자 입력이나 외부 데이터가 실제로 올바른지는 별도 확인이 필요합니다.

TypeScript · 기본 개념과 타입 검사

Tailwind CSS는 여백·글자 크기·배경색 등을 정하는 작은 스타일 클래스를 조합하는 CSS 프레임워크입니다. CSS를 적용하고 관리하는 한 가지 방식입니다. TypeScript는 타입 검사 쪽, Tailwind CSS는 스타일 작성 쪽을 돕습니다.

Tailwind CSS · 유틸리티 클래스

4. 화면과 제작 도구, 빌드와 배포를 구분합니다

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 하는 환경입니다. 프론트엔드 작업에서는 개발 도구를 실행하거나 파일을 처리하는 데도 사용합니다. npm은 프로젝트의 패키지를 설치하고 관리하는 도구이고, Vite는 개발 서버와 배포용 파일을 만드는 빌드 기능을 제공합니다.

필요한 패키지 준비개발 화면 확인배포용 파일 빌드서비스 환경에 배포

제작 과정 예시 · 어떤 명령을 쓰는지는 현재 프로젝트 설정에 따라 다릅니다.

package.json에는 사용하는 패키지와 실행할 명령 등이 적혀 있습니다. npm 프로젝트의 package-lock.json 같은 잠금 파일에는 구체적인 의존성 조합이 기록됩니다. 환경을 맞출 때는 Node.js 버전 등도 함께 확인합니다. 빌드가 끝났다고 인터넷에 공개되는 것은 아니며, 실제 공개는 배포 단계에서 확인해야 합니다.

npm · package-lock.json

Next.js는 React를 기반으로 페이지 주소 연결과 렌더링 방식 등 사이트 차원의 기능을 제공하는 프레임워크입니다. React 다음에 반드시 Vite와 Next.js를 차례로 넣어야 하는 순서는 없습니다. 모든 홈페이지에 같은 도구가 필요한 것도 아니므로, 현재 구성과 필요한 기능에 맞춰 선택합니다.

Next.js · React 기반 프레임워크

AI에게 이렇게 요구하세요

요청문을 그대로 쓰기보다 내 화면의 이름과 조건으로 바꿔보세요. 핵심은 구조·표현·동작과 기능 범위를 함께 설명하고, 수정할 때는 유지할 부분도 적는 것입니다.

첫째, 홈페이지를 구조·표현·동작으로 나눠 요청합니다.

가상의 교육 서비스 홈페이지 시안을 만들어줘.

[구조]
서비스 소개, 강의 목록, 이용 안내 순서로 구성해줘.
강의 카드는 세 개로 만들어줘.
각 카드에는 제목, 대상, 설명, 강의 안내 버튼을 넣어줘.
각 요소의 역할에 맞는 HTML 구조를 사용해줘.

[표현]
큰 화면에서는 강의 카드를 3열로, 작은 화면에서는 1열로 보여줘.
제목이 길거나 설명이 두 줄이 되어도 읽기 편하게 만들어줘.
카드와 버튼의 스타일은 일관되게 적용해줘.

[동작]
입문·실무 분류를 선택하면 강의 목록과 결과 개수가 함께 바뀌게 해줘.
결과가 없으면 조건을 바꿔달라는 안내를 보여줘.

[범위]
이번에는 화면 시안만 만들고, 실제 신청·결제·데이터 저장은 연결하지 마.
강의 안내 버튼의 동작이 예시라는 것도 구분해줘.

화면에 넣을 내용, 배치 규칙, 사용자의 행동 이후 상황, 실제 서비스와 예제의 범위를 함께 전달합니다.

둘째, 바꿀 부분과 유지할 부분을 함께 말합니다.

강의 카드의 안내 버튼을 카드 하단 오른쪽에 배치해줘.

버튼 문구와 클릭했을 때의 동작은 유지해줘.
큰 화면의 3열 배치와 작은 화면의 1열 배치도 유지해줘.
제목이 길어져도 버튼이 글자와 겹치거나 카드 밖으로 나가지 않게 해줘.

수정 전에 현재 코드에서 배치와 클릭 처리가 어디에 있는지 확인해줘.
변경 후에는 수정한 파일과 변경 이유를 설명해줘.

위치 수정에서 문구와 클릭 동작까지 달라지지 않도록 요청합니다. 실제 파일과 적용 규칙은 현재 코드를 보고 확인하도록 합니다.

셋째, 버튼을 누른 뒤의 결과와 예외를 정합니다.

강의 목록의 분류·검색 동작을 점검해줘.

분류를 바꾸면 선택된 버튼 표시, 목록, 결과 개수가 같은 조건을 따르게 해줘.
검색 결과가 없으면 “조건에 맞는 강의가 없습니다”라는 안내를 보여줘.
조건을 초기화하면 전체 목록과 개수도 다시 맞아야 해.
마우스뿐 아니라 키보드로도 분류 버튼과 검색창을 사용할 수 있게 해줘.

수정 후 각 조건의 기대 결과와 실제 확인 결과를 표로 정리해줘.
직접 실행한 결과와 코드만 보고 판단한 내용을 구분해줘.

입문 강의가 나오는지만 확인하지 않고 결과 없음, 초기화, 키보드 사용까지 점검합니다. AI의 완료 메시지는 직접 동작을 확인한 기록과 구분하세요.

넷째, 새 도구와 실행 명령의 이유를 먼저 확인합니다.

현재 프로젝트가 어떤 기술과 제작 도구를 쓰는지 먼저 확인해줘.
이 기능에 새 도구가 필요하다면 어떤 문제를 해결하는지 설명해줘.
기존 구성으로 가능하면 불필요한 도구를 추가하지 마.

설치, 개발 화면 실행, 빌드, 배포를 각각 구분해서 설명해줘.
package.json이 있다면 실제 scripts를 읽고 이 프로젝트의 실행 명령을 알려줘.
해당 파일이 없는 방식이라면 지금 구성에 맞는 확인 방법을 알려줘.

빌드가 완료된 상태와 실제 서비스에 배포된 상태를 구분해줘.

npm run dev, npm run build 같은 이름만 외우지 말고, 현재 프로젝트에서 실제로 실행되는 내용을 확인합니다. 이 글은 모든 프로젝트에 같은 설치 명령을 적용하라는 안내가 아닙니다.

용어·약어 정리

화면의 기본 개념

용어	영문·약자	뜻
HTML	HyperText Markup Language	제목·문단·목록·링크 등 내용의 구조와 의미를 표시하는 언어.
CSS	Cascading Style Sheets	색상·글꼴·간격·배치 등 화면의 표현을 정하는 언어.
JavaScript	JS	사용자의 행동에 반응하는 판단과 처리 등을 작성하는 프로그래밍 언어.
반응형 디자인	Responsive Design	화면 폭 등에 맞춰 배치를 조정하는 방식.
컴포넌트	Component	관련 구조와 동작을 묶어 재사용하는 화면 단위.
상태	State	선택한 분류·검색어처럼 화면이 기억해야 하는 바뀔 수 있는 값.

화면을 만들고 관리하는 도구와 파일

이름	주로 돕는 일
React	컴포넌트와 상태를 이용해 사용자 인터페이스를 구성하고 관리합니다.
TypeScript	코드에서 다루는 값의 타입을 명시하고 검사하도록 돕습니다.
Tailwind CSS	작은 스타일 클래스를 조합해 CSS를 적용하고 관리합니다.
Node.js	JavaScript를 브라우저 밖에서 실행하는 환경입니다.
npm	프로젝트에서 사용하는 패키지를 설치하고 관리하는 도구입니다.
package.json	프로젝트 정보와 사용 패키지, 실행 명령 등을 담는 파일입니다.
package-lock.json	npm 프로젝트의 구체적인 의존성 조합을 기록하는 잠금 파일입니다.
Vite	개발 서버와 배포용 결과물을 만드는 빌드 기능을 제공하는 도구입니다.
Next.js	React를 기반으로 페이지 연결과 렌더링 등 사이트 차원의 기능을 제공하는 프레임워크입니다.
빌드 · Build	작성한 파일을 배포에 사용할 결과물로 처리하는 단계입니다.
배포 · Deploy	결과물을 서비스 환경에 올려 사용자가 접근할 수 있게 하는 단계입니다.

이 이름들은 같은 일을 하는 도구의 나열이 아닙니다. 기존 프로젝트의 구조를 먼저 확인하고, 추가할 도구가 해결할 문제를 설명할 수 있을 때 선택하세요.

홈페이지 수정 요청 연습하기

1) 작은 홈페이지 시안부터 만들기

위의 첫째 요청문으로 강의 카드 세 개가 있는 시안을 만듭니다. 도구를 많이 추가하기보다 화면의 구조·표현·동작을 구분하는 데 집중하세요. 실제 신청이나 결제는 연결하지 않습니다.

2) 한 번에 바꿀 범위를 좁히기

둘째 요청문으로 안내 버튼의 위치를 바꿔봅니다. 모바일 배치, 버튼 문구, 클릭했을 때의 동작이 유지됐는지 함께 확인합니다. 변경 전 상태를 되돌릴 수 있게 남겨두면 결과를 비교하기 쉽습니다.

3) 기대 결과와 실제 결과를 비교하기

확인 상황	기대 결과
휴대폰 폭으로 줄이기	카드가 한 열로 배치되고 화면 밖으로 글자나 버튼이 나가지 않습니다.
긴 제목·설명 넣기	글자와 버튼이 겹치지 않고 내용을 읽을 수 있습니다.
입문·실무 분류 바꾸기	버튼 표시·강의 목록·결과 개수가 같은 조건을 따릅니다.
검색 결과가 없는 조건	빈 공간만 남기지 않고 결과가 없다는 안내가 보입니다.
조건 초기화하기	전체 목록과 결과 개수가 다시 맞습니다.
키보드로 이동·선택하기	주요 버튼과 검색창에 접근할 수 있고, 초점 위치를 확인할 수 있습니다.

표는 이번 연습에서 정한 기대 결과입니다. 실제 화면에서 확인한 결과를 나란히 기록하고, 코드만 읽어 판단한 내용과 직접 실행한 결과를 구분하세요.

4) 현재 제작 방식 확인하기

넷째 요청문으로 사용하는 기술과 실행 방법을 정리합니다. package.json이 있는 프로젝트라면 개발 화면 실행과 빌드 명령의 실제 내용을 확인합니다. 그런 도구 없이 HTML·CSS·JavaScript 파일을 직접 제공하는 방식이라면 그 구성에 맞춰 확인하세요. 마지막으로 빌드 결과와 실제 공개된 화면을 각각 확인합니다.

내 홈페이지 자가 점검 체크리스트

수정할 내용과 유지할 내용이 분명한가?
작은 화면과 긴 제목에서도 글자·버튼이 잘리거나 겹치지 않는가?
선택한 분류·검색 조건과 목록·결과 개수가 일치하는가?
결과가 없거나 조건을 초기화했을 때의 화면도 확인했는가?
키보드로 주요 버튼과 입력창을 사용할 수 있고 초점 위치가 보이는가?
예제 화면의 반응, 실제 신청·저장 처리, 빌드 완료, 서비스 공개를 구분했는가?

AI가 만든 화면을 이해한다는 것은 코드를 전부 외운다는 뜻이 아닙니다. 무엇을 바꾸려는지, 어떤 조건에서 확인해야 하는지, 어떤 동작이 빠졌는지 설명할 기준을 갖는 것입니다.

타임라인

00:00 만든 홈페이지, 왜 수정하기 어려울까?
00:51 HTML: 내용의 구조와 의미
02:40 CSS: 디자인 규칙과 반응형 화면
04:25 JavaScript: 버튼·필터·화면의 동작
06:09 React: 컴포넌트와 상태
08:39 TypeScript·Tailwind CSS: 서로 다른 역할
10:00 Node.js·npm·Vite: 제작 도구와 빌드
12:17 Next.js: 사이트 차원의 기능
13:08 AI에게 다르게 요청하는 실전 프롬프트
15:02 핵심 정리와 마무리

참고 자료

기본 개념을 더 확인하고 싶다면 다음 공식 학습 문서를 참고하세요. 필요한 주제부터 골라 읽으면 됩니다.

화면을 고칠 때는 무엇이 들어갈지, 어떻게 보여줄지, 사용자의 행동에 맞춰 무엇을 바꿀지 나눠 설명해보세요. 기술 이름이 낯설어도 원하는 화면을 설명하는 기준은 만들 수 있습니다.

영상 채널은 AX연구소(@peteraxlab)입니다.

이 블로그 검색

피터의 AX연구소