초보코딩22 [바이브코딩 HTML 웹앱 20일 챌린지] 15일차 - 할 일을 검색하고 상태별로 걸러보기 15일차에서는 할 일 검색과 상태 필터 기능을 추가합니다. 항목이 많아질수록 원하는 할 일을 찾기 어려워지기 때문에, 키워드 검색 + 완료/미완료 필터는 사용성을 크게 높여줍니다.오늘 구현의 핵심은 목록 전체를 다시 만들지 않고, 조건에 맞는 항목만 보여주거나 숨기는 방식으로 가볍게 처리하는 것입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 두 가지를 만듭니다. 첫째, 입력한 키워드가 포함된 할 일만 보여주는 검색 기능. 둘째, 전체/완료/미완료 조건으로 목록을 나눠 보는 상태 필터입니다.2. AI에게 요청할 프롬프트검색 기준과 필터 종류를 함.. 2026. 5. 13. [바이브코딩 HTML 웹앱 20일 챌린지] 14일차 - 눈이 편한 다크모드 추가하기 14일차에서는 밝은 화면과 어두운 화면을 전환하는 다크모드를 추가합니다. 기능 자체는 단순하지만 사용성이 크게 좋아지고, 사용자 환경에 맞는 UI 제어를 익히는 좋은 단계입니다.오늘은 버튼 하나로 테마를 바꾸고, 선택한 테마를 localStorage에 저장해 다시 접속해도 같은 모드가 유지되도록 구현합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 테마 전환 토글입니다. 버튼을 클릭하면 `body`에 `dark-mode` 클래스를 붙이거나 제거하고, CSS에서 이 클래스 기준으로 배경색/글자색/카드색을 바꿔서 전체 톤을 전환합니다.2. AI.. 2026. 5. 12. “투두앱 만들어줘”보다 더 좋은 요청 방식은 무엇일까? 목차1. 왜 “투두앱 만들어줘”는 아쉬운 요청일까2. 좋은 요청이 갖춰야 할 4요소3. 실제로 바꿔 쓰는 프롬프트 예시4. 작업 속도를 높이는 운영 팁5. 자주 묻는 질문1. 왜 “투두앱 만들어줘”는 아쉬운 요청일까처음 AI 코딩을 시작하면 가장 많이 쓰는 문장이 “투두앱 만들어줘”입니다. 짧고 편하지만, 실전에서는 이 방식이 오히려 시간을 늘릴 때가 많습니다. 이유는 간단합니다. 이 요청에는 기능 범위, 사용 기술, 데이터 저장 방식, UI 기준, 예외 처리 규칙이 모두 빠져 있기 때문입니다. AI는 빠르게 결과를 내지만, 빠른 결과와 맞는 결과는 다릅니다.예를 들어 어떤 사용자는 로컬스토리지를 원하고, 어떤 사용자는 서버 API 연동을 원합니다. 어떤 사람은 모바일 반응형이 필수고, 어떤 사람은 데스.. 2026. 5. 12. [바이브코딩 HTML 웹앱 20일 챌린지] 13일차 - 오늘 얼마나 해냈는지 진행률로 보여주기 13일차에서는 오늘 해낸 양을 숫자와 막대로 보여주는 진행률 기능을 만듭니다. 지금까지 쌓은 할 일/습관 데이터를 바탕으로 완료 비율을 시각화하면 사용자는 하루 성취를 더 직관적으로 확인할 수 있습니다.이 기능은 단순 계산처럼 보여도 사용자 동기 유지에 매우 효과적입니다. 초보자도 완료 개수와 전체 개수만 정확히 계산하면 쉽게 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 완료한 할 일과 체크한 습관을 기준으로 진행률을 계산해 보여주는 것입니다. 예를 들어 완료 5개 / 전체 8개라면 62%를 출력하고, 진행률 바 너비도 6.. 2026. 5. 11. [바이브코딩 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. 이전 1 2 3 4 다음
