AI랑 같이하는 코딩

2일차에서는 드디어 브라우저에 첫 화면을 띄워봅니다. 1일차에 앱 방향을 정했다면, 오늘은 그 방향을 실제 화면으로 연결하는 시작점입니다. 아직 화려한 기능은 없지만, 내가 만든 HTML 파일이 직접 열리고 텍스트가 보이는 경험이 웹앱 개발의 첫 자신감을 만들어줍니다.

바이브코딩 방식에서는 이 단계에서 완벽한 구조를 만들기보다 "작게 만들어서 바로 확인"하는 흐름이 중요합니다. 오늘은 제목, 설명, 기본 카드 영역까지 간단히 만들고, 내일 레이아웃 확장과 스타일링으로 자연스럽게 이어가겠습니다.

1. 오늘 만들 기능 소개

오늘의 목표는 하루 관리 웹앱의 첫 HTML 화면을 띄우는 것입니다. 화면에는 앱 제목, 한 줄 설명, 그리고 앞으로 할 일/메모/타이머 같은 기능이 들어갈 기본 카드 영역을 배치합니다. 이 단계에서 중요한 것은 "완성도"보다 "실행 가능성"입니다.

즉, 예쁜 디자인보다 브라우저에서 정상적으로 열리고 구조가 눈에 보이는 상태를 먼저 만드는 게 핵심입니다. 초보자는 이 단계를 통해 HTML 문서 구조와 태그 역할을 자연스럽게 익힐 수 있고, 이후 CSS와 JavaScript를 붙일 준비가 훨씬 수월해집니다.

2. AI에게 요청할 프롬프트

오늘은 AI에게 "첫 화면용 최소 구조"를 요청하는 방식이 가장 효율적입니다. 아래처럼 현재 단계와 필요한 요소를 구체적으로 주면, 불필요하게 복잡한 코드 없이 따라 하기 좋은 결과를 얻을 수 있습니다.

나는 HTML 초보자야.
하루 관리 웹앱 2일차로, 브라우저에 첫 화면을 띄우는 index.html 예시를 만들어줘.
요소는 앱 제목, 설명 문장, 카드 2개(할 일 영역/메모 영역)만 넣고,
복잡한 스타일은 빼고 구조가 잘 보이게 작성해줘.

응답을 받은 뒤에는 코드 전체를 외우려고 하지 말고, "어떤 태그가 어떤 블록을 만들었는지" 정도만 파악해도 충분합니다. 오늘은 구조를 만드는 날이라는 기준을 잊지 않으면 훨씬 덜 막힙니다.

3. 코드 작성과 실행 과정

먼저 프로젝트 폴더에 `index.html` 파일을 만들고 기본 문서 구조를 작성합니다. 그다음 `body` 안에 제목, 설명, 카드 섹션을 넣은 뒤 저장하고 브라우저로 열어 확인합니다. 만약 더블클릭으로 열었을 때 아무것도 안 보인다면 파일 저장 인코딩이나 확장자(`.html`)를 먼저 점검해보세요.

직접 바꿔보기 미션으로, 카드 제목을 "할 일"과 "메모"에서 "오늘 목표"와 "빠른 메모"처럼 원하는 문구로 바꿔보세요. 작은 텍스트 수정만 해도 내가 화면을 제어하고 있다는 감각이 빠르게 생깁니다.

4. 코드 이해하기

오늘 꼭 이해해야 할 핵심은 두 가지입니다. 첫째, HTML은 화면의 뼈대를 만드는 언어라서 "무엇을 어디에 배치할지"를 정의합니다. 둘째, 태그를 잘게 나눠두면 나중에 CSS 스타일 적용과 JavaScript 동작 연결이 쉬워집니다.

예를 들어 카드 영역을 `section`으로 분리해두면, 3일차와 4일차에서 레이아웃을 나누거나 꾸밀 때 수정 범위를 명확히 잡을 수 있습니다. 처음부터 완벽한 코드보다, 다음 단계로 확장 가능한 구조를 만드는 것이 오늘의 정답입니다.

5. 오늘 만든 내용 정리

오늘은 `index.html`을 만들어 브라우저에 첫 화면을 띄우고, 앱 제목/설명/기본 카드 영역으로 웹앱의 출발 구조를 완성했습니다. 아직 동작은 없지만, 이제 화면 뼈대가 생겼기 때문에 다음 회차에서 레이아웃을 더 명확히 나누고 앱다운 구조로 발전시킬 수 있습니다. 3일차에서는 상단 헤더와 메인 영역을 정리해 대시보드 형태를 더 선명하게 만들겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기