버튼 하나가 작동하는 화면 읽기
AI가 만든 화면을 고치려면 HTML은 구조, CSS는 모양, JavaScript는 행동이라는 구분이 필요합니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
HTML, CSS, JavaScript의 역할
웹 화면은 보통 세 가지 층으로 나눠 볼 수 있습니다. HTML은 제목, 버튼, 입력창 같은 구조를 만듭니다. CSS는 색상, 간격, 크기, 배치 같은 모양을 정합니다. JavaScript는 버튼을 눌렀을 때 숫자가 증가하거나 목록에 항목이 추가되는 행동을 담당합니다.
AI가 코드를 만들어주면 파일이 길어 보여 겁날 수 있습니다. 그럴 때는 전체를 이해하려고 하지 말고 '내가 바꾸고 싶은 것이 구조인지, 모양인지, 행동인지'부터 나누세요. 버튼 문구는 HTML, 색상은 CSS, 클릭 결과는 JavaScript에 있을 가능성이 큽니다.
작은 화면을 읽는 순서
처음에는 완성된 앱보다 버튼 하나가 있는 화면이 더 좋은 연습입니다. 버튼의 HTML 요소를 찾고, 그 버튼에 적용된 CSS 클래스를 찾고, 클릭 이벤트가 어디에 연결되어 있는지 따라가 보세요. 이 작은 흐름을 읽을 수 있으면 더 큰 화면도 같은 방식으로 나눠 읽을 수 있습니다.
AI에게도 이 순서로 설명을 요구할 수 있습니다. '이 코드에서 HTML 구조, CSS 스타일, JavaScript 동작을 나눠서 주석으로 설명해줘'라고 물어보면 막연한 코드 덩어리가 읽을 수 있는 덩어리로 바뀝니다.
고치는 연습
처음부터 새로 만들려고 하기보다 만들어진 예제를 작게 고쳐보세요. 버튼 문구를 바꾸고, 색을 바꾸고, 클릭할 때 증가하는 숫자를 바꿔보는 식입니다. 변경 전후를 비교하면 어느 코드가 어떤 결과를 만드는지 감각이 생깁니다.
이 감각은 바이브코딩에서 매우 중요합니다. AI가 만든 결과가 마음에 들지 않을 때 '더 예쁘게 해줘'보다 '버튼 간격을 12px로 줄이고, 클릭 후 문구를 저장 완료로 바꿔줘'라고 요청할 수 있게 됩니다.
화면은 구조, 모양, 행동으로 나뉩니다
공부 기록 앱의 버튼 하나도 HTML 구조, CSS 스타일, JavaScript 행동이 합쳐져서 작동합니다.
- 01 HTML 구조
버튼, 입력창, 목록 같은 화면 뼈대입니다.
구조를 만듭니다 - 02 CSS 모양
색상, 간격, 크기 같은 보이는 스타일입니다.
모양을 입힙니다 - 03 JS 행동
클릭과 입력에 반응하는 코드입니다.
행동을 붙입니다 - 04 작동 화면
세 가지가 합쳐져 사용자가 누를 수 있는 화면이 됩니다.
핵심 정리
HTML 요소는 화면의 뼈대, CSS 규칙은 시각 스타일, JavaScript 이벤트는 클릭이나 입력에 반응하는 행동입니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "버튼 하나가 작동하는 화면 읽기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 AI가 만든 화면을 고치려면 HTML은 구조, CSS는 모양, JavaScript는 행동이라는 구분이 필요합니다.
아래 HTML/CSS/JS 코드에서 버튼 텍스트, 색상, 클릭했을 때 동작을 각각 어디서 바꾸는지 주석으로 설명해줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 바꾸려는 글자가 들어 있는 HTML 요소를 찾습니다., 색상과 간격을 바꾸는 CSS 규칙을 찾습니다., 클릭했을 때 실행되는 JavaScript 코드를 찾습니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- 바꾸려는 글자가 들어 있는 HTML 요소를 찾습니다.
- 색상과 간격을 바꾸는 CSS 규칙을 찾습니다.
- 클릭했을 때 실행되는 JavaScript 코드를 찾습니다.
실습
AI에게 카운터 버튼 예제를 만들게 한 뒤 버튼 문구와 색상, 증가 숫자를 바꿔보세요.
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 HTML: 제목, 입력창, 저장 버튼, 목록 영역
- 공부 기록 앱 CSS: 입력 영역과 기록 카드를 읽기 좋게 배치
- 공부 기록 앱 JavaScript: 저장 버튼을 누르면 목록에 기록 추가
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.