[바이브코딩 HTML 웹앱 20일 챌린지] 3일차 - 웹앱의 기본 뼈대 만들기
3일차에서는 어제 띄운 첫 화면을 앱 구조답게 정리해봅니다. 단순히 텍스트와 박스를 나열하는 단계를 넘어, 상단 헤더와 본문 영역을 나누고 할 일 카드와 메모 카드를 배치해 대시보드 형태의 기본 뼈대를 잡는 날입니다.
바이브코딩 흐름에서는 이 시점이 특히 중요합니다. 지금 구조를 깔끔하게 나눠두면 4일차 스타일링, 5~8일차 기능 추가 때 수정 포인트가 명확해지고, 초보자도 "어디를 바꿔야 하는지"를 잃지 않고 따라갈 수 있습니다.
1. 오늘 만들 기능 소개
오늘의 핵심은 "레이아웃 분리"입니다. `header`, `main`, `section` 같은 시맨틱 태그를 활용해 화면을 역할별로 나누고, 사용자 입장에서 제목 영역과 실제 작업 영역이 구분되도록 만듭니다.
특히 하루 관리 웹앱은 정보 블록이 계속 늘어나는 구조라서, 초반에 카드 단위 구성을 잡아두는 것이 중요합니다. 오늘 만든 뼈대 위에 이후 할 일 입력창, 버튼, 목록, 메모 저장 기능이 순서대로 올라가므로 기능 확장을 위한 바닥 공사라고 생각하면 이해가 쉽습니다.
2. AI에게 요청할 프롬프트
오늘은 AI에게 "구조 중심"으로 요청하는 것이 포인트입니다. 디자인 요구를 너무 많이 넣기보다, 어떤 영역을 어떤 태그로 나눌지 명확히 전달해보세요.
하루 관리 웹앱 3일차 작업이야.
index.html을 header, main, section 구조로 정리해줘.
header에는 앱 제목/설명, main에는 할 일 카드와 메모 카드를 배치하고,
초보자가 이해하기 쉽게 태그 역할 주석도 짧게 넣어줘.이렇게 요청하면 AI가 코드 길이를 통제하면서도 구조를 분명하게 제안해줍니다. 만약 답변이 복잡하면 "오늘은 레이아웃만, JavaScript 없이"라고 범위를 다시 좁혀 재요청하세요.
3. 코드 작성과 실행 과정
먼저 기존 `index.html`에서 제목과 카드 영역을 `header`와 `main` 안으로 재배치합니다. 그다음 `main` 내부에 `section` 두 개를 만들어 "할 일"과 "메모"를 분리합니다. 각 section에는 제목(`h2` 또는 `h3`)과 간단한 안내 문장을 넣어 블록 목적이 바로 보이게 구성합니다.
| 구성 요소 | 오늘 수정 내용 | 기대 효과 |
|---|---|---|
| header | 앱 제목과 설명을 상단으로 고정 | 첫 인지 정보가 명확해짐 |
| main | 실제 작업 영역을 별도 분리 | 콘텐츠 구조가 깔끔해짐 |
| section | 할 일/메모 카드 영역 분리 | 기능 추가 시 수정 범위 축소 |
저장 후 브라우저에서 확인할 때는 "내용이 보이는지"뿐 아니라, 구조가 논리적으로 나뉘었는지 같이 체크해보세요. 직접 바꿔보기 미션으로 카드 순서를 바꿔보거나 section 제목을 원하는 표현으로 수정해보면, HTML 구조를 스스로 컨트롤하는 감각이 훨씬 빨리 생깁니다.
4. 코드 이해하기
초보자가 오늘 꼭 이해해야 할 포인트는 "태그의 역할 분리"입니다. `header`는 소개, `main`은 핵심 콘텐츠, `section`은 기능 단위 묶음이라는 기준을 기억해두면 다음 회차에서 코드가 길어져도 길을 잃지 않습니다.
또한 구조를 먼저 잘 나누면 CSS 클래스 이름도 자연스럽게 정리됩니다. 예를 들어 `todo-card`, `memo-card`처럼 목적 기반 이름을 쓰면, 스타일을 입히거나 JavaScript를 연결할 때도 훨씬 읽기 쉬워집니다. 오늘의 이해 포인트는 문법 암기보다 구조적 사고입니다.
5. 오늘 만든 내용 정리
오늘은 2일차의 단순 첫 화면을 대시보드형 레이아웃으로 발전시켜, header/main/section 기반의 기본 뼈대를 완성했습니다. 이제 웹앱이 "페이지"에서 "앱"처럼 보이기 시작했고, 이후 회차에서 기능을 붙일 자리도 명확해졌습니다. 다음 4일차에서는 CSS를 연결해 지금 만든 구조를 실제 앱처럼 보이게 꾸며보겠습니다.
6. 자주 묻는 질문
Q1. section을 꼭 나눠야 하나요? div만 써도 되지 않나요?
div로도 만들 수 있지만, 초보 단계에서는 역할이 드러나는 태그를 쓰는 편이 이해에 유리합니다. 구조 의미가 분명해져서 나중에 유지보수할 때 훨씬 편해집니다.
Q2. header와 main을 나눴는데 화면 차이가 크게 안 보여요.
정상입니다. 오늘은 구조를 정리하는 날이라 시각 변화가 크지 않을 수 있습니다. 내일 CSS를 적용하면 지금 나눈 구조가 디자인 차이로 확실히 드러납니다.
Q3. AI가 class 이름을 너무 많이 만들면 어떻게 하죠?
"필수 class만 남기고 단순화해줘"라고 요청해보세요. 현재 단계에서는 꼭 필요한 이름만 남기는 것이 학습과 유지보수 모두에 좋습니다.