https://gemini.google.com/share/69f477d610cf

퀴즈네르 수막대 구구단 시뮬레이터 제작 COSTAR 프롬프트

1. Context (배경)

초등학교 3학년 학생들이 구구단의 원리를 시각적으로 이해할 수 있는 교육용 웹앱을 개발 중입니다. 이 앱은 벨기에의 교사 '조르주 퀴즈네르'가 개발한 수막대(Cuisenaire Rods) 모델을 기반으로 합니다. 단순 암기가 아닌, 수의 길이를 통해 곱셈의 원리를 깨닫게 하는 것이 목적입니다.

2. Objective (목표)

2단부터 9단까지의 구구단을 시뮬레이션할 수 있는 React 기반 단일 페이지 애플리케이션을 제작하세요. 사용자가 단(2~9)과 곱하는 수(1~9)를 선택하면, 수막대 애니메이션을 통해 계산 과정을 시각적으로 보여줘야 합니다.

3. Style (스타일)

• 디자인: 파스텔톤의 부드러운 색상, 둥근 모서리(Rounded), 깔끔한 타이포그래피를 사용하여 아이들에게 친숙하고 현대적인 UI를 제공하세요.

• 언어: 초등학교 3학년 수준의 친절하고 쉬운 한국어를 사용하세요. (예: "똑 떼어내면 끝!", "상상해봐요")

4. Tone (어조)

• 격려하고 응원하는 교육적인 어조.

• 수식 위주의 딱딱한 설명보다는 원리를 풀어서 설명하는 다정한 선생님 같은 느낌.

5. Audience (청중)

• 주 타겟: 구구단을 처음 배우거나 원리 이해가 필요한 초등학교 3학년 학생.

• 부 타겟: 아이들에게 수학적 개념을 시각적으로 가르치고 싶은 학부모 및 교사.

6. Response (핵심 요구사항 및 제약사항)

• 전략의 이원화 (필수):

  • 2~6단 (누적 전략): 짧은 수막대를 위로 차곡차곡 쌓아가는 '덧셈의 반복' 연출.

  • 7~9단 (보수 전략): 10개짜리 수막대 틀에서 부족한 만큼(10-n)을 잘라내는 '뺄셈' 연출.

• 창시자 강조: 조르주 퀴즈네르(Georges Cuisenaire)와 그의 수막대 교육 철학을 하단 가이드에 명시하세요.

• 기술 스택: React, Tailwind CSS, Lucide-React 아이콘 사용. 모든 코드는 단일 파일로 작성하세요.

• 수식 사용 제한: $10 \times n$과 같은 추상적인 변수 기호 대신 "10개씩 3개"와 같이 구체적인 한글 표현을 사용하세요.

https://gemini.google.com/share/ee89aebf529b

초등학교 필수 영단어 마스터 웹앱 제작을 위한 COSTAR 프롬프트

[C] Context (문맥)

• 당신은 프론트엔드 개발자이자 교육 콘텐츠 전문가입니다.

• 초등학생(3~6학년)이 교육부 권장 필수 영단어 800개를 재미있고 효율적으로 학습할 수 있는 단일 파일(Single File) 웹 애플리케이션을 제작해야 합니다.

[O] Objective (목표)

• 3, 4, 5, 6학년별로 각각 200단어씩 총 800개의 실제 영단어 데이터를 포함한 플래시카드 앱을 구축하세요.

• 기능적 요구사항:

  1. 학년별 선택 시스템.

  2. 단어/뜻/예문을 포함한 앞뒤 반전(Flip) 플래시카드 UI.

  3. Web Speech API를 활용한 원어민 발음(영어 단어 및 예문) 듣기 기능.

  4. '학습 완료' 버튼 클릭 시 해당 단어를 리스트에서 제거하고 진도율(Progress Bar) 업데이트.

  5. 한 학년을 모두 마쳤을 때 축하 메시지와 재도전 기능을 제공하는 완료 화면.

[S] Style (스타일)

• 현대적이고 깔끔한 UI/UX를 지향하세요. Tailwind CSS를 사용하여 디자인합니다.

• 애니메이션: 카드가 뒤집히거나 사라질 때 부드러운 Transition 효과를 추가하세요.

• 폰트: 가독성이 좋은 둥근 서체(예: Nanum Round)를 사용하고, 학년별로 상징적인 테마 컬러(노랑, 초록, 파랑, 빨강)를 적용하세요.

[T] Tone (톤)

• 아이들의 흥미를 유발할 수 있도록 밝고 경쾌하며 격려하는 어조를 유지하세요.

• UI 요소에 이모지(🌱, 🌿, 🌳, 🌲, 🎊)를 적절히 배치하여 친근감을 줍니다.

[A] Audience (대상)

• 주 사용자는 초등학생 어린이들과 이들을 지도하는 학부모/교사입니다.

• 복잡한 메뉴 대신 직관적인 아이콘과 큰 버튼을 배치하여 누구나 쉽게 조작할 수 있도록 만드세요.

[R] Response (응답 형식)

• 모든 HTML, CSS, JavaScript가 포함된 단 하나의 .html 파일로 출력하세요.

• 코드 내부의 주석과 사용자에게 보여지는 모든 텍스트(뜻, 예문 해석, 버튼 이름 등)는 한국어로 작성하세요.

• 단어 데이터는 실제 초등 필수 영단어를 기반으로 하되, 코드 양이 너무 방대해질 경우 핵심 단어를 우선 배치하고 나머지는 확장이 용이한 구조로 작성하세요.

https://gemini.google.com/share/d21f7426eced

원주율의 개념 이해하기 시뮬레이터 개발 CO-STAR 프롬프트 

1. Context (배경)

사용자가 원의 지름과 원주(둘레)의 관계를 시각적으로 이해하지 못하는 문제를 해결해야 합니다. 실을 이용해 지름이 원주에 몇 번 들어가는지 측정하며 '원주율(3.14)'의 개념을 깨닫게 합니다.

2. Objective (목표)

사용자가 인터랙티브하게 원의 지름과 동일한 길이의 '실'을 꺼내어 원의 둘레에 감아보는 시뮬레이션 웹 앱을 개발하세요. 최종적으로 지름이 약 3.14번 감긴다는 것을 보여주어 원주율(π)의 개념을 시각적으로 증명해야 합니다.

3. Style (스타일)

• 교육용 도구로서 신뢰감을 주면서도 '유레카'의 순간을 강조하는 활기차고 세련된 스타일.

• 현대적인 UI 라이브러리(Tailwind CSS)를 사용하여 깔끔하고 부드러운 느낌을 유지합니다.

4. Tone (어조)

• 친절하고 직관적인 어조. 사용자가 다음 단계를 쉽게 따라올 수 있도록 안내 텍스트를 제공합니다.

5. Audience (청중)

• 수학의 개념을 처음 배우는 학생이나, 원주율의 원리를 시각적으로 확인하고 싶은 일반인.

6. Response (응답 요구사항)

핵심 기능 (Mandatory)

1. 단계별 프로세스:

   • 0단계: 기본 원과 지름 가이드라인 표시.

   • 1~3단계: 직선 형태의 지름 실이 나타나고, 이것이 원의 위쪽으로 이동하며 곡선(호)으로 변해 원주를 감싸는 애니메이션.

   • 4단계: 남은 미세한 틈을 채우는 0.14 지름 실 애니메이션.

   • 5단계: "유레카!" 문구와 함께 전체 공식(원주 = π × 지름) 표시.

2. 시각적 시뮬레이션 로직:

   • HTML5 Canvas를 사용하여 직선에서 곡선으로 변하는 실의 궤적을 부드럽게 표현.

   • 각 단계마다 실의 색상을 다르게 하여(예: 파랑, 보라, 분홍, 주황) 구분감 제공.

3. 인터랙티브 요소:

   • '다음 단계' 버튼과 '초기화' 버튼 제공.

   • 진행 상황을 나타내는 상태 바(Progress Bar) 및 숫자 카운터.

기술 스택

• React (Functional Components, Hooks)

• Tailwind CSS (Styling)

• Lucide-react (Icons)

• HTML5 Canvas API (Drawing Logic)

제약 사항

• 모든 코드는 하나의 파일(.jsx)로 작성할 것.

• 외부 이미지 파일을 사용하지 말고 SVG나 Canvas 드로잉으로 대체할 것.

• 모바일 환경에서도 터치로 조작 가능하도록 반응형 레이아웃 적용.

https://gemini.google.com/share/6e93055a2880

'손자병법 데일리 지혜 웹앱' 개발을 위한 COSTAR 프롬프트

[CONTEXT]

당신은 고전 문학에 조예가 깊은 웹 개발자이자 UI/UX 디자이너입니다. 현대 직장인들이 고전인 《손자병법(孫子兵法)》의 지혜를 통해 사회생활의 처세를 배울 수 있는 미니멀하고 고급스러운 단일 페이지 웹 애플리케이션을 제작하고자 합니다. 이 앱은 복잡한 기능보다는 깊이 있는 콘텐츠 전달과 정갈한 사용자 경험에 집중해야 합니다.

[OBJECTIVE]

다음 기능을 포함하는 반응형 HTML 웹앱을 제작하십시오:

1. 접속 시 매일 하나의 병법 구절을 무작위로 추천하는 '오늘의 지혜' 기능.

2. 사용자가 원할 때 다른 구절을 즉시 확인할 수 있는 '새로고침/다른 지혜 보기' 버튼.

3. 각 콘텐츠는 [한자 원문, 핵심 제목, 우리말 번역, 고등학생 수준의 세련된 영문 해석, 현대적 사회생활 지침]의 5가지 요소를 반드시 포함해야 합니다.

4. 모든 데이터를 외부 파일 없이 하나의 HTML 파일 내에 자바스크립트 객체 배열로 포함하십시오.

[STYLE]

• 디자인 컨셉: 동양적인 여백의 미와 현대적인 미니멀리즘의 조화.

• 색상 팔레트: Off-white (#f8f5f0) 배경, 짙은 먹색 (#1a1a1a) 텍스트, 포인트 컬러로 깊은 붉은색 (#991b1b) 사용.

• 타이포그래피: 제목은 진중한 세리프체(Noto Serif KR), 본문은 깔끔한 산세리프체(Noto Sans KR)를 사용하십시오.

• 애니메이션: 콘텐츠 전환 시 부드러운 Fade-in 효과를 적용하여 명상적인 느낌을 주십시오.

[TONE]

• 사용자에게 전달되는 문체는 격조 있고 단호하면서도 따뜻한 조언자의 어조를 유지해야 합니다.

• 영문 해석은 단순한 번역을 넘어 고등학생 수준의 어휘(예: adversary, peril, feign 등)를 사용하여 지적인 신뢰감을 주어야 합니다.

[AUDIENCE]

• 주 타겟은 조직 생활에서 인간관계와 전략적 선택에 고민이 많은 20~50대 직장인입니다.

• 보조 타겟은 고전의 문구와 영문 표현을 동시에 학습하고자 하는 중고등학생 및 일반인입니다.

[RESPONSE]

• 기술 스택: 순수 HTML5, Tailwind CSS (CDN), Font-Awesome (CDN), Vanilla JavaScript를 사용하십시오.

• 코드 구조: 모든 HTML, CSS, JS가 포함된 단일 파일 형태여야 합니다.

• 필수 데이터: 최소 10개 이상의 손자병법 핵심 구절(병문졸속, 지피지기, 부전이굴인지병 등)을 데이터셋에 포함하십시오.

• 모바일 우선: 스마트폰에서 최적의 가독성을 가지도록 여백과 폰트 크기를 조정하십시오.

https://gemini.google.com/share/da8ef9d4b943

'성경 잠언에서 배우는 지혜로운 사회생활 지침 웹앱' 제작을 위한 COSTAR 프롬프트

[Context]

사용자가 일상 속에서 지혜로운 행동 지침을 얻을 수 있도록 돕는 웹앱을 제작하려고 합니다. 성경의 잠언(Proverbs) 중에서 종교적 교리(예: 여호와를 경외하라)는 배제하고, 인간관계, 언행, 근면, 절제 등 실용적인 처세와 관련된 구절들만 엄선해야 합니다. 이 앱은 매일 한 구절씩 사용자에게 제시하며 묵상과 실천을 돕는 것이 목적입니다.

[Objective]

다음의 핵심 요소를 포함하는 단일 HTML 파일 웹앱을 작성하세요:

1. 잠언의 한글 원문 제시.

2. 해당 구절을 초등/중학생도 이해할 수 있는 아주 쉬운 현대식 영어(Easy English)로 번역하여 병기.

3. 성인을 대상으로 한 구체적인 일상/사회생활 실천 수칙(Practice Guide) 작성.

4. 날짜에 따라 구절이 바뀌는 기능과 이전/다음 구절 탐색 기능 구현.

[Style]

• Design: 미니멀하고 정갈한 디자인. 베이지(Beige)와 스톤(Stone) 컬러 톤을 사용하여 마음이 차분해지는 '명상 가이드' 느낌을 줄 것.

• Typography: 한글은 가독성 좋은 세리프(Serif)체, 영어는 친근하고 현대적인 산세리프(Sans-serif)체 사용.

• Tone: 실천 수칙은 성인에게 조언하는 성숙하고 격조 있는 문체(예: ~하십시오)를 사용할 것.

[Tone]

• 전체적인 UI 문구는 따뜻하지만 신중함이 느껴지도록 구성하세요.

[Audience]

• 바쁜 일상 속에서 자기계발과 마음의 평화를 얻고자 하는 성인 남녀.

• 쉬운 영어 구절을 통해 영어 학습 효과도 얻고자 하는 사용자.

[Response]

• Technology Stack: HTML5, Tailwind CSS, Vanilla JavaScript (외부 라이브러리 최소화).

• Data Structure: 최소 10개 이상의 잠언 데이터를 JavaScript 배열 형태로 포함(한글 원문, 쉬운 영어 번역, 성인용 실천 수칙, 장절 정보).

• Functionality:

  • 접속 날짜를 기준으로 오늘의 구절 자동 선정.

  • 반응형 디자인(모바일/데스크톱 최적화).

  • 부드러운 페이드 인(Fade-in) 애니메이션 효과.

[Example Data Point to include]

• 한글 원문: "말이 많으면 허물을 면하기 어려우나 그 입술을 제어하는 자는 지혜가 있느니라."

• Easy English: "If you talk too much, you will make mistakes. It is smart to know when to be quiet."

• 실천 수칙: "사회적 관계에서 불필요한 언행은 오해와 실수를 낳습니다. 침묵의 가치를 인식하고 말의 무게를 신중히 다스리십시오."

https://gemini.google.com/share/3ed3d68ee2ad

'초등학생을 위한 명심보감 학습 웹앱' 제작을 위한 COSTAR 프롬프트

Context (배경)

초등학생들이 한자 원문의 지혜를 현대적인 관점에서 쉽고 재미있게 배울 수 있는 웹 애플리케이션을 제작하려고 합니다. 명심보감에는 현대 윤리에 맞지 않는 구절(가부장적, 신분제 등)이 포함되어 있으므로, 이를 배제하고 아이들에게 교육적으로 도움이 되는 문구(성실, 우정, 정직, 절제)만 엄선해야 합니다.

Objective (목표)

• 사용자가 버튼을 클릭할 때마다 명심보감 구절이 하나씩 랜덤하게 나타나는 단일 페이지 웹앱을 제작한다.

• 각 구절은 '한자 원문(대구 포함)', '한글 음독', '쉬운 번역', '초등학생 눈높이 해설'의 4가지 요소를 포함해야 한다.

Style (스타일)

• 디자인: 아이들에게 친근한 귀엽고 따뜻한 스타일. 파스텔 톤(노란색, 주황색) 배경과 둥근 모서리를 사용한다.

• 언어: 아이들이 이해하기 쉬운 다정한 어투(~단다, ~해봐요).

Tone (톤)

• 격려하고 교훈을 주는 다정하고 따뜻한 선생님과 같은 목소리.

Audience (청중)

• 8세~13세 초등학생. 어려운 한자 용어보다는 일상적인 비유를 통해 의미를 전달받아야 함.

Response (응답 형식 및 규칙)

• 기술 스택: HTML5, CSS3 (Tailwind CSS 활용 가능), JavaScript (Vanila JS).

• 단일 파일: 모든 HTML, CSS, JS는 하나의 .html 파일 안에 포함되어야 한다.

• 콘텐츠 규칙:

  1. 인일시지분(忍一時之忿)과 같이 짝이 있는 문구는 반드시 면백일지우(免百일之憂)와 함께 표시한다.

  2. 현대 윤리에 반하는 내용은 제외한다.

  3. 구절이 바뀔 때 부드러운 애니메이션(Fade-in 등)을 적용한다.

  4. 폰트는 가독성이 좋은 웹 폰트(Google Fonts 등)를 호출하여 사용한다.

[필수 포함 구절 리스트]

1. 선자는 천보지이복... (착한 일과 복)

2. 일근천하무난사... (부지런함과 조심성)

3. 지족자 빈천역락... (만족과 감사)

4. 구시화지문... (언어 습관의 중요성)

5. 인일시지분... (인내와 화 참기)

6. 여선인거... (좋은 친구와 우정)

7. 물이선소이불위... (사소한 선행과 악행에 대한 경계)

https://gemini.google.com/share/8b7bc91bb7c3

'초등학생을 위한 오늘의 위인 명언 웹앱'을 제작하기 위한 COSTAR 프롬프트

1. Context (배경)

사용자는 초등학생 자녀나 학생들을 둔 교육자 또는 학부모입니다. 아이들이 매일 아침 웹사이트에 접속하여 짧지만 깊은 울림을 주는 '오늘의 한 줄'을 읽으며 긍정적인 마음가짐으로 하루를 시작하기를 원합니다.

2. Objective (목표)

위인의 이름, 명언(원본), 그리고 초등학생 눈높이에 맞춘 쉬운 해설이 포함된 단일 파일(Single File) HTML 웹 애플리케이션을 생성합니다. 사용자가 접속할 때마다 새로운 내용을 보여주어야 하며, 시각적으로 매력적이어야 합니다.

3. Style (스타일)

• 디자인: 초등학생들이 좋아할 만한 따뜻하고 아기자기한 스타일 (둥근 모서리, 부드러운 파스텔톤 컬러 사용, 충분한 여백).

• 폰트: 구글 폰트의 'Gaegu' 또는 'Nanum Pen Script'를 사용하여 부드러운 느낌을 줍니다.

• 이미지: 별도의 외부 이미지 파일 없이 CSS 애니메이션, SVG 아이콘, 이모지만을 활용하여 생동감을 줍니다.

4. Tone (어조)

• UI 텍스트: 아이들에게 말을 건네는 듯한 친근하고 격려하는 말투 (~해요, ~있어요).

• 해설 내용: 어려운 한자어나 관용구 대신 아이들이 학교나 집에서 겪을 법한 상황(친구 관계, 숙제, 도전 등)에 빗대어 설명하는 따뜻한 어조.

5. Audience (타겟)

• 주 타겟: 8세~13세 사이의 초등학생 (가독성이 높고 이해하기 쉬운 문장 구성 필요).

• 부 타겟: 학생들에게 좋은 메시지를 매일 공유하고 싶은 교사 및 학부모.

6. Response (형식 및 요구사항)

• 기술 스택: HTML5, CSS3 (Tailwind CSS CDN 활용), Vanilla JavaScript.

• 주요 구조:

  • Header: 앱 제목(예: 🌟 오늘의 지혜 한 조각)과 따뜻한 환영 메시지.

  • Main Card: 위인 이름(배지 형태), 명언(큰 따옴표 스타일 적용), 쉬운 해석(눈에 띄는 박스 형태).

  • Interaction: '다른 위인 보기' 혹은 '오늘의 행운 명언 뽑기' 버튼 (클릭 시 페이드 효과와 함께 데이터 변경).

• 데이터:

  • 최소 10개 이상의 위인 명언 데이터를 포함할 것.

  • 위인 예시: 세종대왕, 이순신, 에디슨, 헬렌 켈러, 링컨, 마더 테레사, 안중근, 김구, 간디 등.

• 파일 제약: 모든 로직(JS), 스타일(CSS), 구조(HTML)는 하나의 .html 파일 내에 완결된 형태로 작성할 것.

7. Additional Instruction (추가 지시)

• 페이지가 로드될 때마다 무작위로 하나의 명언이 선택되어 나타나게 하세요.

• 명언이 바뀔 때 부드러운 전환 효과(Transition)를 추가하여 사용자 경험을 높여주세요.

https://gemini.google.com/share/0f7ebc2a6b88

업로드한 이미지를 분석하여 '수학 컬러링 학습지'로 변환해주는 웹앱 COSTAR 프롬프트

1. Context (컨텍스트)

초등학생들이 수학 연산을 재미있게 학습할 수 있도록, 사용자가 업로드한 이미지를 분석하여 '수학 컬러링 학습지'로 변환해주는 웹 애플리케이션을 개발하고자 합니다. 학생들은 칸 안에 적힌 수학 문제(나눗셈, 곱셈 등)를 풀고, 정답에 해당하는 색상을 칠해 숨겨진 그림을 완성합니다.

2. Objective (목표)

사용자가 이미지를 업로드하면 이를 픽셀화(Pixelation)하고, 각 픽셀에 수학 문제(나눗셈, 곱셈, 덧셈/뺄셈)를 자동으로 생성하여 인쇄 가능한 형태의 학습지를 만드는 React 기반 싱글 페이지 애플리케이션을 구축합니다.

3. Style (스타일)

• UI/UX: 깔끔하고 현대적인 교육용 대시보드 스타일 (Tailwind CSS 활용).

• 톤앤매너: 밝고 신뢰감 있는 블루/인디고 컬러 테마, 둥근 모서리, Lucide-React 아이콘 사용.

• 가독성: 인쇄 시 가독성을 위해 픽셀 안의 숫자는 뚜렷하고 굵은 폰트를 사용.

4. Tone (어조)

• 친절하고 직관적인 사용자 경험을 제공하며, 교사나 학부모가 복잡한 설정 없이 바로 사용할 수 있도록 안내하는 어조.

5. Audience (대상)

• 초등학교 교사, 학부모, 그리고 수학을 시각적으로 즐겁게 학습하고 싶은 초등학생들.

6. Response (응답 구조 및 기술 요구사항)

[기술 스택]

• React (Single File), Tailwind CSS, Lucide-React Icons.

[핵심 기능]

1. 이미지 처리 및 픽셀화:

   • HTML5 Canvas를 활용하여 업로드된 이미지를 설정된 그리드 크기(예: 20x20)로 리사이징.

   • 각 픽셀의 색상을 분석하여 미리 정의된 8가지 교육용 표준 색상(Brown, Yellow, Red 등) 중 가장 가까운 색으로 매칭.

2. 수학 문제 자동 생성:

   • 사용자가 선택한 연산(나눗셈, 곱셈, 덧셈/뺄셈)에 맞춰 문제 생성.

   • 예를 들어, 픽셀의 색상 ID가 '4'라면 나눗셈 모드에서 '12 ÷ 3'과 같은 식이 생성되어야 함.

3. 인쇄 시스템 (핵심):

   • window.open을 사용한 새 창 인쇄 방식 적용 (팝업 창에서 인쇄 전용 레이아웃 렌더링).

   • @media print 스타일을 통해 버튼 등 UI를 제외하고 오직 학습지만 출력되도록 설정.

   • 배경색 인쇄(-webkit-print-color-adjust: exact) 강제 적용.

4. 사용자 인터페이스:

   • 이미지 업로드 버튼, 연산 유형 선택(Select), 해상도 조절(Slider).

   • '도안 모드'(문제 노출)와 '정답 모드'(색상 채워짐) 전환 기능.

[제약 조건]

• 외부 이미지 URL 대신 인라인 SVG나 이모지를 활용할 것.

• 모든 코드와 로직은 하나의 파일(.jsx)에 포함될 것.

• 브라우저의 alert() 대신 커스텀 UI 메시지를 사용할 것.

웹 애니메이션을 위한 빠르고 다재다능한 JavaScript 라이브러리주소 https://animejs.com

https://animejs.com

Anime.js는 웹 애니메이션을 위한 빠르고 다재다능한 JavaScript 라이브러리입니다. 가볍고 강력한 API를 제공하여 다양한 웹 요소를 쉽게 애니메이션화할 수 있습니다. 

주요 특징은 다음과 같습니다:

다양한 대상 지원: CSS 속성, SVG, DOM 속성 및 JavaScript 객체 등을 애니메이션할 수 있습니다. 

가벼움: 용량이 가볍고(약 10KB gzipped) 의존성이 없습니다. 

직관적인 API: 사용하기 쉬운 API를 통해 복잡한 애니메이션 효과를 구현할 수 있습니다. 

유연한 타임라인: 유연한 키프레임 시스템과 타임라인 기능을 제공합니다.

웹사이트 인터랙션 및 브랜딩 효과를 극대화하는 데 널리 사용됩니다. 

날씨 앱 제작 COSTAR 프롬프트

https://gemini.google.com/share/0aac75a9ddae

 

날씨 앱 제작 COSTAR 프롬프트

1. Context (컨텍스트)

사용자는 한국 내 다양한 지역의 날씨를 확인하고 싶어 합니다. 기존의 무료 지오코딩 API들은 '부산'이나 '거제' 검색 시 한국의 상세 행정구역을 오인하여 엉뚱한 지역(예: 전남의 작은 마을)을 보여주는 문제가 있습니다. 이를 해결하기 위해 한국 주요 도시 데이터를 내장하고 정확한 기상 정보를 제공하는 웹 앱이 필요합니다.

2. Objective (목표)

API 키 없이 무료로 작동하며, 한국 지명에 최적화된 고정밀 날씨 예보 웹 애플리케이션을 단일 HTML 파일로 개발합니다.

3. Style (스타일)

• UI/UX: 모던하고 미니멀한 '글래스모피즘(Glassmorphism)' 스타일.

• 분위기: 시간대(낮/밤)에 따라 배경 그라데이션이 변하는 동적인 디자인.

• 컴포넌트: Tailwind CSS를 사용하고 Font Awesome 아이콘으로 시각적 직관성 확보.

4. Tone (톤)

전문적이면서도 사용자 친화적이어야 하며, 데이터 로딩 중에는 애니메이션을 통해 시스템이 작동 중임을 명확히 알립니다.

5. Audience (청중)

복잡한 설정 없이 한국 지역 날씨를 정확하고 빠르게 확인하고 싶은 일반 한국인 사용자.

6. Response (응답 구조 및 제약 사항)

필수 기능:

1. 데이터 내장(Hard-coded Data): 지명 검색 오류 방지를 위해 한국의 주요 광역시 및 시/군(거제, 부산, 서울 등)의 정확한 좌표와 행정구역명을 JSON 객체 형태로 내부에 포함할 것.

2. 날씨 API: Open-Meteo API(무료, 키 불필요)를 사용하여 실시간 기온, 습도, 강수량, 풍속 데이터를 호출할 것.

3. 검색 로직: 사용자가 입력한 키워드에 따라 내장된 도시 리스트에서 즉시 필터링하여 결과를 보여주는 검색창 구현.

4. 자동 위치 파악: 브라우저 Geolocation API를 사용하여 접속 시 현재 위치 날씨를 먼저 보여주고, 거부 시 기본값으로 '부산' 또는 '거제'를 출력.

5. 시간별 예보: 향후 24시간 동안의 기온 변화를 가로 스크롤 형태로 제공.

6. 반응형 디자인: 모바일과 데스크톱 모두에서 최적화된 뷰를 제공할 것.

기술 스택:

• HTML5, CSS3 (Tailwind CSS CDN), JavaScript (ES6+), Font Awesome (Icon).

파일 구조:

• 모든 HTML, CSS, JS는 하나의 .html 파일 안에 포함되어야 함.