https://gemini.google.com/share/7fad4b20e4ed

Gemini 미드 슈퍼내쳐럴로 영어 공부하기 웹앱 만들기 CoSTAR 프롬프트 

1. Context (C)

사용자는 드라마 '슈퍼내추럴(Supernatural)'의 팬이며, 드라마 속 대사를 통해 영어 관용구를 학습하고 싶어 합니다. 딘(Dean)과 샘(Sam)의 캐릭터성을 반영한 다크하고 스타일리시한 UI가 필요하며, 특히 모바일 사용자 경험을 최적화해야 합니다.

2. Objective (O)

슈퍼내추럴 시즌 1~2의 에피소드별 명대사와 관용구 10개를 학습할 수 있는 단일 파일 기반의 React 웹 애플리케이션을 제작합니다. 주요 기능은 에피소드 네비게이션, 음성 합성(TTS) 연동, 학습 완료 체크 기능입니다.

3. Style (S)

• Visual Style: 블랙과 다크 그레이 중심의 인터페이스, 레드 컬러 포인트를 사용한 '헌터(Hunter)' 스타일의 디자인.

• Typography: 굵고 강렬한 이탤릭체 헤드라인(예: 폰트 스타일링), 가독성 좋은 샌즈세리프 본문.

• Tone: 긴장감 넘치고 전문적인 느낌 (예: "Loading Intel", "Case Files" 등의 용어 사용).

4. Tone (T)

사용자에게 친절하지만, 드라마의 컨셉에 맞춰 '헌터 훈련소(Hunters Training Lab)'에 들어온 듯한 몰입감을 주는 톤앤매너를 유지합니다.

5. Audience (A)

영어를 공부하고자 하는 한국인 슈퍼내추럴 팬. 따라서 영어 문장, 한국어 해석, 그리고 관용구(Idiom) 설명이 명확하게 매칭되어야 합니다.

6. Response (R)

아래의 기술적 요구사항을 포함한 단일 .jsx 파일을 생성하십시오:

• Framework: React (Tailwind CSS 활용).

• Core Features:

  1. Data Structure: 시즌 1~2(각 22화)를 지원하는 객체 구조. 각 에피소드는 최소 10개의 관용구 데이터를 포함 (id, en, ko, idiom).

  2. TTS Integration: Google Gemini API를 사용하여 Fenrir 음성으로 텍스트를 오디오로 변환. PCM 데이터를 WAV로 변환하는 로직 포함.

  3. Navigation: 하단 바와 풀스크린 모달을 통한 직관적인 시즌/에피소드 전환.

  4. State Management: learnedLines 상태를 통해 학습 완료 항목 시각적 처리(투명도 및 스케일 변화).

  5. UX: 초기 시작 화면(Enter Lab), 데이터 로딩 스피너, 음성 자동 백그라운드 로딩 로직.

주의 사항: 모든 코드와 로직은 하나의 파일 내에 포함되어야 하며, iFrame 환경에서 실행 가능하도록 alert() 대신 커스텀 UI를 사용하십시오.