AI랑 같이하는 코딩

14일차에서는 밝은 화면과 어두운 화면을 전환하는 다크모드를 추가합니다. 기능 자체는 단순하지만 사용성이 크게 좋아지고, 사용자 환경에 맞는 UI 제어를 익히는 좋은 단계입니다.

오늘은 버튼 하나로 테마를 바꾸고, 선택한 테마를 localStorage에 저장해 다시 접속해도 같은 모드가 유지되도록 구현합니다.

1. 오늘 만들 기능 소개

오늘 목표는 테마 전환 토글입니다. 버튼을 클릭하면 `body`에 `dark-mode` 클래스를 붙이거나 제거하고, CSS에서 이 클래스 기준으로 배경색/글자색/카드색을 바꿔서 전체 톤을 전환합니다.

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

테마 전환과 저장 복원을 함께 요청하면 구현이 깔끔합니다.

하루 관리 웹앱 14일차 작업이야.
다크모드 토글 버튼을 만들고 클릭 시 body에 dark-mode 클래스를 토글해줘.
선택한 테마를 localStorage("theme")에 저장하고,
페이지 로드 시 저장된 테마를 자동 적용하는 코드도 작성해줘.

3. 코드 작성과 실행 과정

먼저 헤더 영역에 다크모드 버튼을 추가합니다. CSS에는 기본 테마 스타일과 `.dark-mode` 오버라이드 스타일을 분리해 작성합니다. JavaScript에서는 버튼 클릭 시 클래스 토글, localStorage 저장, 초기 로드 복원 순서로 구현합니다.

4. 코드 이해하기

오늘 핵심은 "클래스 기반 상태 전환"입니다. 직접 스타일 값을 JS에서 바꾸는 대신 클래스 하나만 토글하면 CSS가 담당할 영역과 JS가 담당할 영역이 명확히 분리됩니다.

테마는 기능이 아니라 사용자 경험의 지속성입니다. 저장 복원 로직까지 붙여야 실제로 완성된 다크모드라고 볼 수 있습니다.

5. 오늘 만든 내용 정리

오늘은 다크모드 토글을 구현하고 테마 상태를 저장/복원하도록 완성했습니다. 웹앱 사용성이 개선됐고, 시각 설정을 기억하는 개인화 기능도 갖추게 됐습니다. 다음 15일차에서는 검색과 상태 필터를 붙여 목록 탐색 효율을 높여보겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기