음력 중심 달력 및 위상 시각화 웹앱 제작 CO-STAR 프롬프트
1. Context (배경)
사용자가 현재 날짜를 기준으로 음력 날짜와 달의 위상(Moon Phase)을 즉시 확인할 수 있는 인터랙티브 웹 앱을 제작해야 합니다. 정지된 데이터가 아니라 실시간성을 반영하는 것이 중요합니다.
2. Objective (목표)
사용자의 현재 시스템 날짜(
new Date())를 자동으로 인식하여 시작하는 반응형 음력 달력 제작.보름달(음력 15일) 전후의 미세한 위상 차이를 SVG로 정밀하게 시각화.
현재 보고 있는 달의 주요 천문 일정(삭, 상현, 보름, 하현)을 자동으로 추출하여 브리핑 섹션에 표시.
3. Style (스타일)
UI/UX: 다크 모드 기반 (Tailwind CSS 활용), 세련된 카드 레이아웃.
시각화: 정현파(Cosine) 함수를 이용한 부드러운 달의 그림자 변화.
언어: UI 텍스트 및 브리핑 내용은 한국어로 작성.
4. Tone (어조)
정보 전달이 명확하며, 신뢰감 있는 천문 가이드의 느낌을 주는 어조.
5. Audience (청중)
음력 절기를 챙기거나 달의 모양 변화를 관찰하고자 하는 일반 사용자.
6. Response (핵심 요구사항)
[기술적 로직]
동적 날짜 로딩: 앱 실행 시
today변수를 시스템 날짜로 설정하고, 해당 월의 달력을 첫 화면에 렌더링.정밀 시각화: 보름달인 음력 15일은 완벽한 원으로, 14일과 16일은 아주 미세하게 깎인 모습으로 구분되도록 SVG 반경(
rx) 로직 보정.음력 계산:
29.53059일주기를 사용하여 월령을 계산하고, 특정 시점(예: 2026년 4월 17일 음력 3월 시작)의 월 변화를 정확히 처리.
[기능 요구사항]
실시간 헤더: '오늘' 버튼을 포함하여 현재 날짜로 즉시 복귀하는 기능 제공.
메인 인포: 상단에 '음력 X월 X일' 형식을 명시하고 선택한 날짜의 달 모양을 크게 표시.
자동 브리핑: 달력 하단에 해당 월의 음력 1일, 8일, 15일, 23일이 양력 며칠인지 자동으로 리스트업하여 브리핑.
