[바이브코딩 HTML 웹앱 20일 챌린지] 5일차 - 할 일을 입력하는 공간 만들기
5일차에서는 사용자가 할 일을 입력할 수 있는 공간을 만듭니다. 지금까지는 보기 좋은 구조와 스타일을 준비했다면, 오늘은 실제 상호작용을 위한 UI를 올리는 단계입니다. 입력창, 추가 버튼, 목록 영역을 먼저 완성해두면 내일 JavaScript 동작을 붙이기 훨씬 쉬워집니다.
이 단계의 핵심은 아직 "작동"이 아니라 "준비된 화면"입니다. 초보자 기준에서는 기능 구현 전에 화면 요소를 분리해두는 습관이 중요하고, 바이브코딩에서도 AI에게 요청 범위를 줄여 정확한 코드를 받는 데 큰 도움이 됩니다.
1. 오늘 만들 기능 소개
오늘 만들 기능은 할 일 입력 UI입니다. 구체적으로는 텍스트 입력창, "추가" 버튼, 그리고 입력된 할 일이 표시될 목록 영역을 준비합니다. 아직 클릭해도 목록이 늘어나지는 않지만, 동작을 연결할 자리를 정확히 마련하는 것이 오늘의 목표입니다.
하루 관리 웹앱의 핵심은 할 일을 빠르게 적고 확인하는 경험입니다. 그래서 입력창 위치, 버튼 문구, 목록 영역 제목처럼 사용자가 가장 자주 보는 요소를 지금 단계에서 깔끔하게 정리해두면 이후 확장이 훨씬 자연스럽습니다.
2. AI에게 요청할 프롬프트
AI에게는 "동작 없는 UI"를 명확하게 요청하는 게 포인트입니다. 범위를 좁혀 요청하면 6일차에서 JavaScript를 붙일 때 코드가 덜 꼬입니다.
하루 관리 웹앱 5일차 작업이야.
할 일 카드 안에 입력창(input), 추가 버튼(button), 목록(ul)을 넣는 HTML 구조를 만들어줘.
아직 JavaScript 동작은 넣지 말고, class와 id 이름은 6일차에 쓰기 쉽게 간단히 정리해줘.AI 응답 후에는 id 이름을 확인하세요. 예를 들어 `todoInput`, `addTodoBtn`, `todoList`처럼 목적이 드러나면 내일 이벤트 연결할 때 실수를 크게 줄일 수 있습니다.
3. 코드 작성과 실행 과정
먼저 할 일 카드 section 안에 입력 그룹을 만듭니다. 입력 그룹에는 `input`과 `button`을 넣고, 그 아래에 `ul` 목록 영역을 배치합니다. 사용자 안내를 위해 placeholder 문구를 넣어주면 화면 이해도가 높아집니다.
| 요소 | 오늘 추가 내용 | 다음 회차 연결 |
|---|---|---|
| input | 할 일 입력창 + placeholder | 입력값 읽기 |
| button | "추가" 버튼 배치 | 클릭 이벤트 연결 |
| ul | 할 일 목록 컨테이너 생성 | li 항목 동적 추가 |
브라우저에서 확인할 때는 버튼 클릭 동작 여부를 기대하지 마세요. 오늘 체크 포인트는 입력창/버튼/목록이 보기 좋게 배치되어 있는지입니다. 직접 바꿔보기 미션으로 버튼 문구를 "추가하기"로 바꾸거나, placeholder를 "예: 물 1L 마시기"처럼 구체적으로 바꿔보면 사용자 경험이 바로 달라집니다.
4. 코드 이해하기
초보자가 오늘 꼭 이해할 부분은 "UI와 동작을 분리한다"는 개념입니다. UI는 HTML/CSS로 먼저 만들고, 동작은 JavaScript로 나중에 붙입니다. 이렇게 나누면 문제가 생겼을 때 어디를 고쳐야 할지 빠르게 판단할 수 있습니다.
또 id와 class 이름을 명확히 잡아두는 습관이 중요합니다. `todoInput`처럼 읽기 쉬운 이름은 AI와 협업할 때도 큰 장점이 됩니다. 좋은 이름은 디버깅 시간을 줄여주는 가장 쉬운 최적화입니다.
5. 오늘 만든 내용 정리
오늘은 할 일 입력창, 추가 버튼, 목록 영역을 추가해 하루 관리 웹앱의 핵심 화면 UI를 완성했습니다. 아직 동작은 없지만, 내일 6일차에서 버튼 클릭 이벤트와 입력값 처리 로직을 붙이면 실제로 할 일이 화면에 추가되는 첫 기능이 완성됩니다.
6. 자주 묻는 질문
Q1. 버튼을 눌러도 아무 반응이 없는데 정상인가요?
정상입니다. 5일차는 동작 없는 UI 단계라서 클릭 이벤트를 아직 연결하지 않았습니다. 6일차에서 JavaScript를 붙이면 반응이 생깁니다.
Q2. id와 class를 둘 다 써야 하나요?
보통 동작 연결은 id, 스타일 재사용은 class로 나누면 관리가 편합니다. 꼭 절대 규칙은 아니지만 초보 단계에서는 이 기준이 실수를 줄여줍니다.
Q3. 목록은 ul 말고 div로 만들어도 되나요?
가능하지만 할 일 항목처럼 "목록" 의미가 분명한 경우 ul/li가 더 적절합니다. 구조 의미가 분명할수록 유지보수와 접근성에 유리합니다.