실시간 음력 달력 & 달 위상 시각화 웹앱 만들기 (feat. CO-STAR 프롬프트)
요즘 달의 변화나 음력 일정을 챙기시는 분들 많으시죠? 오늘은 현재 날짜를 기준으로 실시간 음력 날짜와 달의 위상(Moon Phase)을 한눈에 볼 수 있는 매력적인 인터랙티브 웹앱 제작기를 공유해 보려고 합니다.
이번 프로젝트는 생성형 AI의 결과물을 극대화하기 위해 CO-STAR 프롬프트 프레임워크를 활용하여 기획했습니다. 제가 AI에게 어떻게 명령을 내렸는지, 그 세세한 과정을 공개합니다!
💡 CO-STAR 프롬프트 구성
1. Context (배경)
단순히 정지된 데이터가 아닌, 실시간성을 반영하는 것이 핵심입니다. 사용자가 앱을 켜자마자 현재 날짜를 기준으로 음력 날짜와 달의 위상을 즉시 확인할 수 있는 인터랙티브 환경을 구축하고자 했습니다.
2. Objective (목표)
자동 날짜 인식: 사용자의 현재 시스템 날짜(
new Date())를 자동으로 읽어와 시작하는 반응형 음력 달력을 만듭니다.정밀한 시각화: 보름달(음력 15일) 전후의 아주 미세한 위상 차이까지 SVG 그래픽을 통해 정밀하게 구현합니다.
자동 천문 브리핑: 현재 보고 있는 달의 주요 천문 일정(삭, 상현, 보름, 하현)을 자동으로 추출해 브리핑 섹션에 보여줍니다.
3. Style (스타일)
UI/UX: 밤하늘과 잘 어울리는 다크 모드 기반(Tailwind CSS 활용)의 세련된 카드 레이아웃을 채택합니다.
시각화 기법: 정현파(Cosine) 함수를 이용해 달의 그림자가 변하는 모습을 부드럽고 자연스럽게 표현합니다.
언어: 모든 UI 텍스트와 브리핑 내용은 자연스러운 한국어로 제공합니다.
4. Tone (어조)
정보를 명확하게 전달하면서도, 신뢰할 수 있는 전문 천문 가이드가 설명해 주는 듯한 차분하고 전문적인 어조를 유지합니다.
5. Audience (청중)
음력 절기를 챙겨야 하거나, 밤하늘 달의 모양 변화를 관찰하고 즐기는 모든 일반 사용자가 대상입니다.
6. Response (핵심 요구사항)
🛠️ [기술적 로직]
동적 날짜 로딩: 앱 실행 시
today변수를 시스템 날짜로 자동 설정하여, 해당 월의 달력을 첫 화면에 즉시 렌더링합니다.정밀한 SVG 렌더링: 보름달인 음력 15일은 완벽한 원으로, 14일과 16일은 아주 미세하게 깎인 모습으로 육안으로도 구분되도록 SVG 반경(
rx) 로직을 세밀하게 보정합니다.정확한 음력 계산: 천문학적 삭망월 주기인 29.53059일을 사용하여 월령을 계산하고, 특정 시점(예: 2026년 음력 윤달 및 특정 월 시작일)의 달 변화를 오차 없이 처리합니다.
✨ [기능 요구사항]
실시간 헤더: '오늘' 버튼을 배치하여, 달력을 넘겨보다가도 언제든 현재 날짜로 즉시 복귀할 수 있게 합니다.
메인 인포메이션: 화면 상단에 직관적으로 '음력 X월 X일'을 명시하고, 선택한 날짜의 달 모양을 큼직하게 보여줍니다.
자동 브리핑 기능: 달력 하단에 해당 월의 주요 음력 일자(1일, 8일, 15일, 23일)가 양력으로 며칠인지 자동으로 매칭하여 리스트 형태로 브리핑해 줍니다.
🔍 팩트 체크 및 개발 노트
음력 주기 산출: 프롬프트에 명시된
29.53059일은 실제 천문학에서 사용하는 삭망월(Synodic month)의 평균 주기로, 매우 정확한 접근 방식입니다.SVG 시각화: 코사인 함수를 활용한 그림자 처리는 웹에서 달의 위상을 가볍고 부드럽게 그릴 수 있는 최적의 프론트엔드 최적화 기법입니다.
🚀 완성된 웹앱 확인하기
위의 체계적인 프롬프트를 통해 완성된 결과물은 아래 링크에서 바로 확인해 보실 수 있습니다!
