HTML웹앱20 [바이브코딩 HTML 웹앱 20일 챌린지] 8일차 - 새로고침해도 할 일이 사라지지 않게 만들기 8일차에서는 새로고침해도 할 일이 사라지지 않도록 `localStorage` 저장 기능을 붙입니다. 지금까지는 페이지를 다시 열면 목록이 초기화됐지만, 오늘부터는 입력한 데이터가 브라우저에 남아 다시 불러와지는 흐름을 구현합니다.이 단계는 웹앱이 "진짜 도구"로 넘어가는 중요한 전환점입니다. 초보자도 저장/불러오기 구조를 한 번 익혀두면 메모, 기분 기록, 다크모드까지 같은 패턴으로 확장할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 할 일 목록 상태를 저장하고 복원하는 것입니다. 할 일을 추가/완료/삭제할 때마다 현재 목록을 .. 2026. 5. 6. [바이브코딩 HTML 웹앱 20일 챌린지] 7일차 - 완료한 일은 체크하고, 필요 없는 일은 삭제하기 7일차에서는 할 일 항목에 완료 체크와 삭제 기능을 붙입니다. 6일차에 "추가"까지 됐다면, 오늘은 목록을 실제로 관리할 수 있게 만드는 단계입니다. 완료 상태 전환 + 개별 삭제가 들어가면 웹앱 사용감이 한 단계 올라갑니다.이 단계의 핵심은 "클릭한 항목만 정확히 제어"하는 흐름입니다. 초보자도 이벤트 타겟 개념을 한 번 익혀두면 이후 필터, 진행률, 저장 기능으로 확장할 때 훨씬 유리합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 기능은 두 가지입니다. 첫째, 체크박스를 눌러 완료 상태를 표시하고 완료 항목 스타일(예: 취소선, 색상 변경)을.. 2026. 5. 5. [바이브코딩 HTML 웹앱 20일 챌린지] 6일차 - 버튼을 누르면 할 일이 추가되게 만들기 6일차에서는 드디어 버튼 클릭으로 할 일이 실제로 추가되게 만듭니다. 5일차에 준비한 입력창, 버튼, 목록 UI에 JavaScript를 연결해서 사용자 입력이 화면에 반영되는 첫 동작을 구현하는 날입니다.이 단계부터 "정적인 페이지"가 아니라 "반응하는 웹앱"으로 넘어갑니다. 초보자 기준에서는 모든 문법을 완벽히 이해하려고 하기보다, 클릭 이벤트가 어떤 순서로 실행되는지 흐름을 잡는 데 집중하면 훨씬 빠르게 성장할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 입력창에 작성한 할 일을 버튼 클릭 한 번으로 목록에 추가하는 것입니다.. 2026. 5. 4. [바이브코딩 HTML 웹앱 20일 챌린지] 5일차 - 할 일을 입력하는 공간 만들기 5일차에서는 사용자가 할 일을 입력할 수 있는 공간을 만듭니다. 지금까지는 보기 좋은 구조와 스타일을 준비했다면, 오늘은 실제 상호작용을 위한 UI를 올리는 단계입니다. 입력창, 추가 버튼, 목록 영역을 먼저 완성해두면 내일 JavaScript 동작을 붙이기 훨씬 쉬워집니다.이 단계의 핵심은 아직 "작동"이 아니라 "준비된 화면"입니다. 초보자 기준에서는 기능 구현 전에 화면 요소를 분리해두는 습관이 중요하고, 바이브코딩에서도 AI에게 요청 범위를 줄여 정확한 코드를 받는 데 큰 도움이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 만들 기능은.. 2026. 5. 3. [바이브코딩 HTML 웹앱 20일 챌린지] 4일차 - 밋밋한 화면을 앱처럼 꾸미기 4일차에서는 3일차에 만든 뼈대 화면에 CSS를 붙여 앱처럼 보이게 다듬습니다. 지금까지는 "보이기만 하는 구조"였다면, 오늘은 여백, 글꼴, 카드 스타일, 버튼 톤을 정리해 사용자가 보기 편한 화면으로 전환하는 단계입니다.바이브코딩 관점에서 디자인 작업은 완성도를 과하게 올리는 날이 아니라, 다음 기능 구현(입력, 클릭, 저장)을 편하게 하기 위한 시각적 정리입니다. 초보자는 오늘 과정을 통해 CSS가 단순 꾸미기가 아니라 정보 전달력을 높이는 도구라는 감각을 익히게 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심은 CSS를 연결해 화면.. 2026. 5. 2. [바이브코딩 HTML 웹앱 20일 챌린지] 3일차 - 웹앱의 기본 뼈대 만들기 3일차에서는 어제 띄운 첫 화면을 앱 구조답게 정리해봅니다. 단순히 텍스트와 박스를 나열하는 단계를 넘어, 상단 헤더와 본문 영역을 나누고 할 일 카드와 메모 카드를 배치해 대시보드 형태의 기본 뼈대를 잡는 날입니다.바이브코딩 흐름에서는 이 시점이 특히 중요합니다. 지금 구조를 깔끔하게 나눠두면 4일차 스타일링, 5~8일차 기능 추가 때 수정 포인트가 명확해지고, 초보자도 "어디를 바꿔야 하는지"를 잃지 않고 따라갈 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심은 "레이아웃 분리"입니다. `header`, `main`, `secti.. 2026. 5. 1. 이전 1 2 3 4 다음
