HTML과 CSS와 JavaScript를 집 구조와 꾸밈과 동작으로 나누기

AI에게 "버튼을 예쁘게 만들어 줘"라고 했는데 버튼 문구까지 사라지거나 클릭 기능이 망가질 때가 있습니다. 웹 화면의 세 가지 기본 역할을 구분하지 않은 채 한꺼번에 수정했기 때문일 수 있습니다. HTML, CSS, JavaScript는 함께 쓰이지만 같은 일을 하는 언어가 아닙니다.

집을 만들 때 방의 위치, 벽지 색, 전등 스위치가 서로 다른 역할을 맡는 것처럼 웹도 구조와 꾸밈과 동작을 나눕니다. 이 구분을 알면 직접 코드를 다 쓰지 못해도 AI에게 어느 부분을 바꿀지 더 정확히 요청하고 결과를 검토할 수 있습니다.

HTML은 화면의 구조와 의미를 적는다

HTML은 HyperText Markup Language의 약자로, 브라우저에 내용의 구조와 의미를 알려 주는 마크업 언어입니다. 마크업 언어는 글을 계산하는 대신 "이 문장은 제목", "이 항목은 링크"처럼 역할을 표시하는 형식입니다. MDN은 HTML이 웹페이지와 내용의 구조를 만드는 코드라고 설명합니다.

<h1>은 페이지의 대표 제목, <p>는 문단, <button>은 누를 수 있는 버튼을 나타냅니다. 단순히 글자를 크게 보이게 하려고 제목 태그를 쓰는 것이 아니라 문서에서 맡은 의미에 맞게 고릅니다. 그래야 검색엔진과 화면 읽기 도구도 구조를 이해할 수 있습니다.

• 대표 제목은 페이지 목적을 설명합니다.
• 문단은 한 덩어리의 설명을 묶습니다.
• 링크는 다른 주소로 이동하는 행동을 뜻합니다.
• 버튼은 현재 화면에서 실행할 행동을 뜻합니다.
• 이미지에는 내용을 대신 설명하는 대체 텍스트를 둡니다.

CSS는 같은 구조를 읽기 좋게 꾸민다

CSS는 Cascading Style Sheets의 약자로, HTML 요소의 색, 글꼴, 크기, 간격, 배치를 정하는 스타일 언어입니다. 집의 뼈대를 바꾸지 않고 벽지와 가구 배치를 바꾸는 일에 가깝습니다. 제목이 파란색인지, 버튼 모서리가 둥근지, 모바일에서 한 줄로 놓일지를 CSS가 결정합니다.

CSS 규칙은 어떤 요소를 고를지 나타내는 선택자와 무엇을 바꿀지 나타내는 속성으로 이루어집니다. .primary-button은 해당 클래스를 가진 요소를 고르고, background는 배경색을 정합니다. CSS 파일이 로드되지 않으면 내용은 남아 있지만 꾸밈과 배치가 사라진 기본 문서처럼 보일 수 있습니다.

JavaScript는 상태와 행동을 바꾼다

JavaScript는 브라우저에서 사용자 입력과 사건을 받아 화면이나 데이터를 바꾸는 프로그래밍 언어입니다. 프로그래밍 언어는 조건과 순서에 따라 계산하고 동작을 실행하는 규칙을 적습니다. 버튼을 클릭했을 때 문구를 바꾸거나 서버에서 새 자료를 불러오는 일이 대표적입니다.

JavaScript가 꺼지거나 오류가 나도 HTML로 만든 제목과 설명은 보일 수 있습니다. 반대로 클릭 뒤 아무 일도 일어나지 않는다면 JavaScript 연결이나 실행 오류를 살펴볼 수 있습니다. 모든 기능을 JavaScript로만 그리면 스크립트가 늦거나 실패할 때 핵심 내용이 비어 보일 수 있으므로 중요한 본문은 HTML에도 남기는 편이 좋습니다.

세 기술은 한 장면에서 이렇게 만난다

아래는 버튼 하나를 만드는 아주 작은 예입니다. HTML이 버튼을 만들고, CSS가 모양을 정하고, JavaScript가 클릭 뒤 문구를 바꿉니다.

<button class="save-button" id="save">저장하기</button>
<style>
  .save-button { background: navy; color: white; padding: 12px; }
</style>
<script>
  document.querySelector("#save").addEventListener("click", (event) => {
    event.currentTarget.textContent = "저장됨";
  });
</script>

버튼 자체가 보이지 않으면 HTML을 먼저 확인합니다. 버튼은 보이지만 색과 간격이 다르면 CSS를 봅니다. 모양은 맞는데 눌러도 문구가 바뀌지 않으면 JavaScript 오류를 확인합니다. 이 분류는 원인을 확정하는 답은 아니지만 조사할 범위를 크게 줄여 줍니다.

AI에게 요청할 때 역할을 분리한다

"로그인 화면을 고쳐 줘"보다 구조, 꾸밈, 동작을 나눠 말하면 예상하지 않은 변경이 줄어듭니다. 예를 들어 "HTML의 이메일 입력과 제출 버튼은 유지하고, CSS에서 모바일 간격만 줄이며, JavaScript 제출 동작은 바꾸지 말아 줘"처럼 요청할 수 있습니다.

변경 뒤에는 눈에 보이는 모양만 확인하지 않습니다. 제목과 입력 이름이 남았는지, 키보드로 버튼에 갈 수 있는지, 클릭 결과가 맞는지 각각 봅니다. AI가 세 파일을 함께 수정했다면 파일별 차이를 읽고 요청 범위를 벗어난 변경이 없는지 확인해야 합니다.

오늘 바로 해볼 작은 실습

1. 새 index.html 파일을 만들고 위 예제를 그대로 넣습니다.
2. 브라우저에서 파일을 열어 버튼 문구와 색을 확인합니다.
3. CSS의 navy를 green으로 바꾸고 새로고침합니다.
4. HTML의 저장하기를 메모하기로 바꾸고 다시 확인합니다.
5. JavaScript의 저장됨을 메모됨으로 바꾸고 버튼을 누릅니다.
6. 세 변경이 각각 구조, 꾸밈, 동작 중 어디에 해당하는지 적습니다.

모르는 스크립트를 <script> 안에 붙여 넣거나 외부 주소에서 바로 불러오지 마세요. 브라우저 JavaScript에 API 비밀키를 넣으면 방문자가 볼 수 있습니다. 결제, 삭제, 회원 정보 변경 기능은 화면 동작만 믿지 말고 서버 권한과 실제 저장 결과까지 별도로 확인해야 합니다.