AI랑 같이하는 코딩

복잡한 분석 기능 없이도 "기분 선택 → 화면 표시 → 저장" 흐름만 구현하면 실사용성이 크게 올라갑니다. 초보자에게도 부담이 적고, localStorage 재활용 연습까지 함께 할 수 있는 좋은 확장 과제입니다.

1. 오늘 만들 기능 소개

오늘 기능은 사용자가 기분 버튼을 누르면 선택 상태가 표시되고, 그 값이 저장되는 구조입니다. 예를 들어 😀 🙂 😐 😫 같은 버튼을 만들고, 선택한 버튼에 활성 스타일을 주며, 화면 아래에 "오늘의 기분: 🙂"처럼 결과를 보여주면 됩니다.

핵심은 상태를 하나만 유지하는 것입니다. 여러 버튼이 동시에 선택되지 않도록 이전 선택을 해제하고 새 선택만 활성화하면 UI가 명확해집니다.

2. AI에게 요청할 프롬프트

AI에게는 버튼 그룹, 선택 상태, 저장 키를 함께 요청하면 구현이 깔끔해집니다.

하루 관리 웹앱 10일차 작업이야.
오늘의 기분 버튼 4~5개를 만들고, 버튼 클릭 시 선택된 기분을 화면에 표시해줘.
선택한 기분은 localStorage("todayMood")에 저장하고,
페이지 로드 시 마지막 선택 상태를 복원하는 JavaScript 코드를 작성해줘.

응답을 받은 뒤에는 클래스명(`active`)과 저장 키(`todayMood`)를 고정해두면 11일차 이후 기능 추가 시 충돌을 줄일 수 있습니다.

3. 코드 작성과 실행 과정

먼저 메모 카드 아래 또는 별도 카드에 기분 버튼 그룹을 배치합니다. 버튼에는 `data-mood` 속성을 넣어 이모지/텍스트 값을 구분하고, 클릭 시 모든 버튼의 active를 제거한 뒤 현재 버튼에만 active를 적용합니다.

테스트할 때는 기분을 한 번 선택한 뒤 새로고침해서 유지되는지 확인하세요. 직접 바꿔보기 미션으로 "기분 코멘트"를 함께 출력해보면 좋습니다. 예: 🙂 선택 시 "집중이 잘 되는 하루예요" 같은 문구를 조건문으로 보여줄 수 있습니다.

4. 코드 이해하기

오늘 핵심 개념은 "단일 선택 상태 관리"입니다. 버튼 그룹에서는 체크박스처럼 다중 선택이 아니라 라디오처럼 1개만 활성화되는 UX가 일반적입니다. 그래서 클릭할 때 기존 active를 지우고 새 active를 주는 순서를 익혀두는 것이 중요합니다.

또 localStorage 저장은 값 하나(문자열)만 다루므로 구현이 단순합니다. 작은 상태 저장을 반복해서 익히는 것이 큰 기능 확장의 기반이 됩니다.

5. 오늘 만든 내용 정리

오늘은 기분 선택 버튼을 추가하고, 선택 상태 표시와 localStorage 저장/복원까지 연결했습니다. 이제 하루 관리 웹앱이 할 일과 메모를 넘어 감정 기록까지 포함하는 개인 대시보드로 확장되었습니다. 다음 11일차에서는 집중 타이머를 추가해 생산성 기능을 한 단계 더 강화해보겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기