AI코딩24 [바이브코딩 HTML 웹앱 20일 챌린지] 17일차 - 복잡해진 코드를 파일별로 정리하기 17일차에서는 기능이 늘어나며 복잡해진 코드를 파일별로 정리합니다. 지금까지 빠르게 기능을 붙였다면, 오늘은 유지보수하기 쉬운 구조로 다듬는 날입니다. 파일 분리와 역할 분리를 해두면 이후 수정 속도와 안정성이 크게 좋아집니다.특히 초보자에게 리팩토링은 "어려운 최적화"가 아니라 코드를 읽기 쉬운 상태로 정돈하는 습관이라는 점이 중요합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 HTML, CSS, JavaScript 파일을 역할 중심으로 정리하고, 중복 코드와 길어진 이벤트 로직을 함수 단위로 분리하는 것입니다. 기능 추가는 잠시 멈추고.. 2026. 5. 15. [바이브코딩 HTML 웹앱 20일 챌린지] 16일차 - 모바일에서도 보기 좋은 화면으로 바꾸기 16일차에서는 모바일 화면에서도 보기 좋은 반응형 레이아웃을 적용합니다. 데스크톱에서는 괜찮던 구성도 작은 화면에서는 답답해질 수 있어서, 화면 크기에 맞춰 구조를 바꾸는 CSS 전략이 필요합니다.오늘은 `media query`를 중심으로 카드 배치, 여백, 버튼 크기, 입력창 너비를 조정해 스마트폰에서도 자연스럽게 사용할 수 있는 웹앱으로 개선합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 모바일 가독성과 조작성을 높이는 것입니다. 카드가 가로로 길게 배치되어 있다면 세로 스택으로 바꾸고, 작은 화면에서 텍스트와 버튼이 겹치지 않도록 간.. 2026. 5. 14. [바이브코딩 HTML 웹앱 20일 챌린지] 15일차 - 할 일을 검색하고 상태별로 걸러보기 15일차에서는 할 일 검색과 상태 필터 기능을 추가합니다. 항목이 많아질수록 원하는 할 일을 찾기 어려워지기 때문에, 키워드 검색 + 완료/미완료 필터는 사용성을 크게 높여줍니다.오늘 구현의 핵심은 목록 전체를 다시 만들지 않고, 조건에 맞는 항목만 보여주거나 숨기는 방식으로 가볍게 처리하는 것입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 두 가지를 만듭니다. 첫째, 입력한 키워드가 포함된 할 일만 보여주는 검색 기능. 둘째, 전체/완료/미완료 조건으로 목록을 나눠 보는 상태 필터입니다.2. AI에게 요청할 프롬프트검색 기준과 필터 종류를 함.. 2026. 5. 13. HTML, CSS, JavaScript를 한 번에 요청하면 안 되는 이유 목차1. 한 번에 요청하면 생기는 문제2. 분리 요청이 품질을 높이는 이유3. 실전 분할 요청 순서4. 협업과 유지보수 관점에서의 장점5. 자주 묻는 질문1. 한 번에 요청하면 생기는 문제“HTML, CSS, JavaScript까지 한 번에 다 만들어줘”라는 요청은 얼핏 효율적으로 보입니다. 하지만 실제로는 결과 품질이 흔들릴 가능성이 큽니다. 이유는 각 영역의 관심사가 다르기 때문입니다. HTML은 구조와 의미, CSS는 시각 표현과 반응형, JavaScript는 상태와 동작을 다룹니다. 세 가지를 한 번에 요청하면 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. [바이브코딩 HTML 웹앱 20일 챌린지] 13일차 - 오늘 얼마나 해냈는지 진행률로 보여주기 13일차에서는 오늘 해낸 양을 숫자와 막대로 보여주는 진행률 기능을 만듭니다. 지금까지 쌓은 할 일/습관 데이터를 바탕으로 완료 비율을 시각화하면 사용자는 하루 성취를 더 직관적으로 확인할 수 있습니다.이 기능은 단순 계산처럼 보여도 사용자 동기 유지에 매우 효과적입니다. 초보자도 완료 개수와 전체 개수만 정확히 계산하면 쉽게 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 완료한 할 일과 체크한 습관을 기준으로 진행률을 계산해 보여주는 것입니다. 예를 들어 완료 5개 / 전체 8개라면 62%를 출력하고, 진행률 바 너비도 6.. 2026. 5. 11. 이전 1 2 3 4 다음
