AI코딩24 [바이브코딩 HTML 웹앱 20일 챌린지] 12일차 - 매일 반복할 습관 체크리스트 만들기 12일차에서는 매일 반복하는 습관을 체크할 수 있는 목록을 만듭니다. 할 일은 그날그날 바뀌지만, 습관은 반복된다는 점이 다르기 때문에 고정 항목 + 체크 상태 저장 흐름을 따로 구현하는 것이 핵심입니다.오늘 기능이 들어가면 하루 관리 웹앱이 단기 작업 관리에서 생활 루틴 관리까지 확장됩니다. 초보자도 체크박스 이벤트와 localStorage 저장 패턴을 재사용해 안정적으로 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 물 마시기, 스트레칭, 책 읽기 같은 습관 항목을 고정 리스트로 표시하고, 항목별 체크 상태를 저장/복원하는 기.. 2026. 5. 10. [바이브코딩 HTML 웹앱 20일 챌린지] 11일차 - 집중 시간을 알려주는 타이머 만들기 11일차에서는 집중 타이머를 추가해 생산성 기능을 강화합니다. 할 일과 메모를 정리하는 것에서 한 걸음 더 나아가, 집중 시간을 직접 측정하고 관리하는 흐름을 웹앱에 붙이는 단계입니다.오늘은 25분 타이머 기준으로 시작, 정지, 초기화 버튼을 구현합니다. 초보자에게도 적합한 `setInterval` 패턴을 익히면 이후 카운트다운/알림 기능 확장도 쉬워집니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심 기능은 카운트다운 타이머입니다. 25:00에서 시작해 1초마다 시간이 줄어들고, 00:00이 되면 자동으로 멈추게 만듭니다. 버튼은 `시작`, .. 2026. 5. 9. [바이브코딩 HTML 웹앱 20일 챌린지] 10일차 - 오늘의 기분을 기록하는 버튼 만들기 10일차에서는 오늘의 기분을 버튼으로 기록하는 기능을 만듭니다. 지금까지 할 일과 메모를 쌓았다면, 오늘은 감정 상태까지 한 화면에서 관리해 하루 대시보드의 개인화 수준을 높이는 단계입니다.복잡한 분석 기능 없이도 "기분 선택 → 화면 표시 → 저장" 흐름만 구현하면 실사용성이 크게 올라갑니다. 초보자에게도 부담이 적고, localStorage 재활용 연습까지 함께 할 수 있는 좋은 확장 과제입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 기능은 사용자가 기분 버튼을 누르면 선택 상태가 표시되고, 그 값이 저장되는 구조입니다. 예를 들어 😀 ?.. 2026. 5. 8. [바이브코딩 HTML 웹앱 20일 챌린지] 9일차 - 오늘의 메모를 남기는 공간 만들기 9일차에서는 하루 관리 웹앱에 메모장 기능을 추가합니다. 지금까지 할 일 목록을 중심으로 만들었다면, 오늘은 짧은 생각이나 기록을 남길 수 있는 공간을 붙여 개인 대시보드로서의 활용도를 높이는 단계입니다.핵심은 복잡한 에디터가 아니라 "빠르게 쓰고 저장하는 메모"입니다. 초보자 기준에서는 textarea, 저장 버튼, localStorage 연동만 제대로 구현해도 실사용 가능한 기능이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 메모 입력 영역과 저장 흐름을 만드는 것입니다. 사용자가 textarea에 텍스트를 입력하고 저장 버튼을 누.. 2026. 5. 7. [바이브코딩 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. 이전 1 2 3 4 다음
