* 목차 *

2026년 1월 15일 목요일

Gemini 영국 드라마 닥터 후로 배우는 영어 공부 웹앱 CoSTAR 프롬프트

https://gemini.google.com/share/24dbd348745f


Gemini 영국 드라마 닥터 후로 배우는 영어 공부 웹앱 CoSTAR 프롬프트

1. Context (문맥)

  • 당신은 언어 학습 앱 개발자이자 '닥터 후(Doctor Who)' 시리즈의 열성적인 팬입니다.

  • 사용자는 닥터 후의 명대사와 숙어를 통해 영어를 배우고 싶어 합니다.

  • 앱은 사용자가 타디스(TARDIS)를 타고 시공간을 여행하는 것 같은 몰입형 UI를 제공해야 합니다.

2. Objective (목표)

  • React(Tailwind CSS 포함)를 사용하여 싱글 파일 기반의 'Time Lord Academy' 앱을 생성합니다.

  • 각 에피소드별로 10개의 핵심 문장(영어, 한국어 해석, 숙어, 설명)을 제공해야 합니다.

  • Gemini TTS API(gemini-2.5-flash-preview-tts)를 통합하여 닥터의 목소리로 문장을 읽어주는 기능을 포함합니다.

3. Style (스타일)

  • UI 디자인: '닥터 후' 테마에 맞춘 다크 블루(#00122e, #050b18) 톤의 공상과학(Sci-Fi) 스타일.

  • 글꼴 및 요소: 굵은 이탤릭체, 네온 블루 효과, 루사이드(Lucide) 아이콘 사용.

  • 톤앤매너: 신비롭고 에너지 넘치는 '타임로드'의 분위기.

4. Tone (어조)

  • 시스템 메시지 및 텍스트는 닥터가 제자에게 말하는 듯한 격려와 지적인 분위기를 유지합니다.

5. Audience (대상)

  • 닥터 후 시리즈를 좋아하면서 실용적인 영어 숙어를 익히고 싶은 중급 영어 학습자.

6. Response (응답 형식 및 규칙)

  • 기술 스택: React, Tailwind CSS, Lucide-React, API 기반 TTS.

  • 데이터 구조: ACADEMY_DATA 상수에 시즌별, 에피소드별로 문장 데이터를 구조화합니다.

  • 필수 기능:

    1. 시작 화면 (타디스 진입 연출).

    2. 사이드바 (시즌 및 에피소드 선택 미션 로그).

    3. 학습 카드 (영문, 한글, 숙어 설명, 체크박스).

    4. TTS 재생 (지정된 Gemini API 엔드포인트 및 Fenrir 보이스 사용).

    5. 진도율 계산기 (전체 학습 마스터리 표시).

  • 중요 규칙: 모든 코드는 단 하나의 .jsx 파일에 포함되어야 하며, API 호출 시 에러 핸들링과 지수 백오프(Exponential Backoff)를 구현해야 합니다.

[데이터 예시 - 시즌 추가 시 참고]

seasonX: [
  { 
    id: "sxex", 
    title: "Episode Title", 
    lines: [
      { id: "sxex-1", en: "English sentence", ko: "한국어 해석", idiom: "Main idiom", desc: "Meaning and usage" },
      ...
    ]
  }
]
By 시간: