🌿 Mori 개발 일지 - Day 23 (2025년 7월 29일)
📆 작성일: 2025년 7월 29일 (화)
🎯 작업 목표: PWA 완성도 개선 및 Vercel 최종 배포 안정화, 다크모드 관련 이슈 해결
✅ 오늘의 작업 요약
| 항목 | 상태 | 설명 |
|---|---|---|
tailwind.config.js 다크모드 설정 |
✅ | darkMode: 'class'로 설정, 자동 다크모드 방지 |
| index.html 라이트 테마 강제 지정 | ✅ | <html class="light"> 적용 |
index.css 전역 컬러 수정 |
✅ | :root 내부 흰색 글자 제거 → color: #222로 명시 |
color-scheme: light 적용 |
✅ | 다크모드 자동 반전 방지 |
| input/textarea 글자색 문제 해결 | ✅ | text-black, bg-white 등 클래스 유지 + 전역 CSS 보완 |
| manifest.webmanifest 수정 | ✅ | orientation, lang, scope 등 최종 확장 완료 |
| PWA 설치 테스트 | ✅ | Android에서 홈화면 설치 정상 작동 |
| Vercel 배포 최종 점검 | ✅ | GitHub push → 자동 배포 성공 확인 |
🔧 주요 작업 내역 (파일 단위)
📁 tailwind.config.js
+ darkMode: 'class',📁 index.html
<html lang="ko" class="light">📁 index.css
:root {
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
+ color: #222222;
+ background-color: #ffffff;
color-scheme: light;
}
textarea, input {
background-color: white !important;
color: black !important;
}📁 manifest.webmanifest
{
"orientation": "portrait",
"scope": "/",
"lang": "ko",
...
}🧪 트러블슈팅 사례
🟠 문제: 모바일 다크모드에서 글자가 안 보임
- 원인:
index.css의:root에서color: white설정으로 인해 Tailwind가 덮어씌워짐 - 실험: Tailwind
text-black,darkMode: 'class'설정만으로는 해결되지 않음 - 해결:
color-scheme: light추가 + 전역input, textarea에!important로 색상 지정 - 결과: 절전모드/다크모드 모두에서 글자 정상 표시됨
✨ 작업의 실질적 의미
- 단순 스타일 보정이 아닌, 다양한 디바이스에서의 사용성과 접근성까지 고려한 앱 품질 향상
- 다크모드/절전모드/브라우저 자동 반전 같은 실제 사용자 환경에서의 문제까지 해결함
- PWA 설치, 테마 통일, 배포 자동화까지 포함하여 완성도 있는 제품으로 정리
🔚 다음 작업
✅ 본 프로젝트의 기능 개발은 최종 완료되었습니다.
README.md 업데이트 및 QA 마무리 후 기술 블로그 시리즈 종료 예정입니다.
우측 링크에서 다운로드 가능 합니다. Mori
'사이드프로젝트' 카테고리의 다른 글
| [Mori] 17일차 (3) | 2025.07.25 |
|---|---|
| [Mori] 16일차 (4) | 2025.07.23 |
| [Mori] 15일차 (0) | 2025.07.22 |
| [Mori] 14일차 (1) | 2025.07.18 |
| [Mori] 13일차 (1) | 2025.07.17 |