AI랑 같이하는 코딩

20일차에서는 지금까지 만든 웹앱을 전체 점검하고, 다음 확장 방향을 정리합니다. 기능을 하나씩 쌓아온 흐름을 돌아보며 무엇이 완성됐고 무엇을 개선할지를 명확히 하는 마무리 단계입니다.이번 회차의 핵심은 새로운 기능 추가보다 회고와 우선순위 설정입니다. 완성본을 점검하고 다음 프로젝트로 자연스럽게 이어질 수 있는 기준을 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 이전 단계 돌아보기1. 오늘 만들 기능 소개오늘 목표는 20일 동안 구현한 기능을 체크리스트로 검토하는 것입니다. 할 일, 메모, 기분 기록, 타이머, 습관 체크, 진행률, 다크모드, 검색/필터, 반응형, 배포까지 핵..

19일차에서는 완성한 웹앱을 GitHub Pages로 배포합니다. 이제 로컬에서만 보던 프로젝트를 링크로 공유할 수 있게 되며, "만드는 단계"에서 "보여주는 단계"로 전환되는 중요한 시점입니다.초보자에게 배포는 어렵게 느껴질 수 있지만, 저장소 생성 → 파일 업로드 → Pages 설정 순서만 지키면 안정적으로 완료할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 GitHub 저장소를 만들고 웹앱 파일을 업로드한 뒤, GitHub Pages를 활성화해 실제 접속 가능한 배포 URL을 얻는 것입니다. 이 링크를 통해 다른 사람도 내 ..

18일차에서는 지금까지 만든 웹앱에 이름과 소개 문구를 붙입니다. 기능 완성만큼 중요한 것이 정체성 정리이고, 앱의 톤과 목적을 한 문장으로 설명하는 작업이 브랜딩의 시작입니다.오늘은 AI와 함께 이름 후보를 뽑고, 헤더 문구와 버튼 텍스트를 다듬어 "내가 만든 앱"이라는 느낌을 더 분명하게 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 앱 이름 선정과 UI 문구 정리입니다. 예를 들어 앱 타이틀, 서브 설명, 빈 목록 안내 문구, 버튼 라벨을 통일된 톤으로 바꾸면 같은 기능이라도 훨씬 완성도 있게 보입니다.2. AI에게 ..

17일차에서는 기능이 늘어나며 복잡해진 코드를 파일별로 정리합니다. 지금까지 빠르게 기능을 붙였다면, 오늘은 유지보수하기 쉬운 구조로 다듬는 날입니다. 파일 분리와 역할 분리를 해두면 이후 수정 속도와 안정성이 크게 좋아집니다.특히 초보자에게 리팩토링은 "어려운 최적화"가 아니라 코드를 읽기 쉬운 상태로 정돈하는 습관이라는 점이 중요합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 HTML, CSS, JavaScript 파일을 역할 중심으로 정리하고, 중복 코드와 길어진 이벤트 로직을 함수 단위로 분리하는 것입니다. 기능 추가는 잠시 멈추고..

16일차에서는 모바일 화면에서도 보기 좋은 반응형 레이아웃을 적용합니다. 데스크톱에서는 괜찮던 구성도 작은 화면에서는 답답해질 수 있어서, 화면 크기에 맞춰 구조를 바꾸는 CSS 전략이 필요합니다.오늘은 `media query`를 중심으로 카드 배치, 여백, 버튼 크기, 입력창 너비를 조정해 스마트폰에서도 자연스럽게 사용할 수 있는 웹앱으로 개선합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 모바일 가독성과 조작성을 높이는 것입니다. 카드가 가로로 길게 배치되어 있다면 세로 스택으로 바꾸고, 작은 화면에서 텍스트와 버튼이 겹치지 않도록 간..

15일차에서는 할 일 검색과 상태 필터 기능을 추가합니다. 항목이 많아질수록 원하는 할 일을 찾기 어려워지기 때문에, 키워드 검색 + 완료/미완료 필터는 사용성을 크게 높여줍니다.오늘 구현의 핵심은 목록 전체를 다시 만들지 않고, 조건에 맞는 항목만 보여주거나 숨기는 방식으로 가볍게 처리하는 것입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 두 가지를 만듭니다. 첫째, 입력한 키워드가 포함된 할 일만 보여주는 검색 기능. 둘째, 전체/완료/미완료 조건으로 목록을 나눠 보는 상태 필터입니다.2. AI에게 요청할 프롬프트검색 기준과 필터 종류를 함..

14일차에서는 밝은 화면과 어두운 화면을 전환하는 다크모드를 추가합니다. 기능 자체는 단순하지만 사용성이 크게 좋아지고, 사용자 환경에 맞는 UI 제어를 익히는 좋은 단계입니다.오늘은 버튼 하나로 테마를 바꾸고, 선택한 테마를 localStorage에 저장해 다시 접속해도 같은 모드가 유지되도록 구현합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 테마 전환 토글입니다. 버튼을 클릭하면 `body`에 `dark-mode` 클래스를 붙이거나 제거하고, CSS에서 이 클래스 기준으로 배경색/글자색/카드색을 바꿔서 전체 톤을 전환합니다.2. AI..

13일차에서는 오늘 해낸 양을 숫자와 막대로 보여주는 진행률 기능을 만듭니다. 지금까지 쌓은 할 일/습관 데이터를 바탕으로 완료 비율을 시각화하면 사용자는 하루 성취를 더 직관적으로 확인할 수 있습니다.이 기능은 단순 계산처럼 보여도 사용자 동기 유지에 매우 효과적입니다. 초보자도 완료 개수와 전체 개수만 정확히 계산하면 쉽게 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 완료한 할 일과 체크한 습관을 기준으로 진행률을 계산해 보여주는 것입니다. 예를 들어 완료 5개 / 전체 8개라면 62%를 출력하고, 진행률 바 너비도 6..

12일차에서는 매일 반복하는 습관을 체크할 수 있는 목록을 만듭니다. 할 일은 그날그날 바뀌지만, 습관은 반복된다는 점이 다르기 때문에 고정 항목 + 체크 상태 저장 흐름을 따로 구현하는 것이 핵심입니다.오늘 기능이 들어가면 하루 관리 웹앱이 단기 작업 관리에서 생활 루틴 관리까지 확장됩니다. 초보자도 체크박스 이벤트와 localStorage 저장 패턴을 재사용해 안정적으로 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 물 마시기, 스트레칭, 책 읽기 같은 습관 항목을 고정 리스트로 표시하고, 항목별 체크 상태를 저장/복원하는 기..

11일차에서는 집중 타이머를 추가해 생산성 기능을 강화합니다. 할 일과 메모를 정리하는 것에서 한 걸음 더 나아가, 집중 시간을 직접 측정하고 관리하는 흐름을 웹앱에 붙이는 단계입니다.오늘은 25분 타이머 기준으로 시작, 정지, 초기화 버튼을 구현합니다. 초보자에게도 적합한 `setInterval` 패턴을 익히면 이후 카운트다운/알림 기능 확장도 쉬워집니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심 기능은 카운트다운 타이머입니다. 25:00에서 시작해 1초마다 시간이 줄어들고, 00:00이 되면 자동으로 멈추게 만듭니다. 버튼은 `시작`, ..