歸藏(guizang.ai)(@op7418)의 스레드

AI Studio의 빌드 모드에서 한 번의 클릭으로 작업을 완료하는 데 사용할 수 있는 프롬프트 세트를 모아봤습니다. 세계적인 수준의 프런트엔드 엔지니어이자 UI/UX 디자이너로서 활동하세요. React(es6 모듈), Tailwind CSS, Google Gemini API(@google/genai)를 사용하여 "고충실도 대화형 비주얼 노벨" 웹 애플리케이션을 만들어 보세요. ### 1. 디자인 철학 및 UI 스타일(중요) UI는 반드시 "일본 상업용 갈게임(비주얼 노벨)"의 미학을 엄격히 따라야 합니다. - **분위기:** 다크 판타지, 사이버펑크, 폴란드, 하이엔드. - **AI 생성을 위한 아트 스타일:** 생성된 모든 이미지에 "일본 셀룰로이드 애니메이션 스타일(셀룰로이드/平图)"을 적용합니다. - **대화 상자:** 단순한 사각형이 아닙니다. 다음 사항을 포함해야 합니다. - "유리모피즘" 배경(어둡고 흐릿함). - 장식적인 기술/판타지 테두리(이중선, 청록색/금색의 빛나는 네온 악센트). - 상자 왼쪽 상단에 전용의 양식화된 "명판"이 부착되어 있습니다. - 왼쪽에는 장식용 프레임이 달린 크고 직사각형 모양의 캐릭터 아바타(3:4 비율)가 있습니다. - **타이포그래피:** 타이핑 라이터 효과가 적용된 깔끔하고 읽기 쉬운 세리프 또는 산세리프체입니다. - **애니메이션:** 배경/캐릭터에 부드러운 페이드인, 강렬한 장면에 대한 흔들림 효과, 전투에 대한 플래시 효과. ### 2. 핵심 기능 1. **스토리 엔진:** 미리 정의된 스크립트를 반복합니다(아래에 스토리 내용을 제공하겠습니다). 2. **AI 이미지 생성(Gemini Nano/Flash):** - **배경:** `gemini-2.5-flash-image`를 사용하여 현재 플롯 위치를 기반으로 장면 배경을 자동으로 생성합니다. - **캐릭터 타치(인물 사진):** 캐릭터 스탠딩 이미지를 자동으로 생성합니다. "카드" 스타일 프레임(둥근 모서리, 안쪽 그림자, 테두리)을 적용하여 원본 사진이 아닌 세련된 이미지처럼 보이게 합니다. - **프롬프트 엔지니어링:** 모든 이미지 프롬프트에 "일본 셀룰로이드 애니메이션 스타일, 걸작, 단색"을 자동으로 추가하여 일관성을 보장합니다. 3. **텍스트 음성 변환(TTS):** 웹 음성 API를 사용하여 대화를 읽어줍니다. 캐릭터마다 다른 음높이/속도를 지정할 수 있습니다(예: 몬스터에는 낮음/느림, 주인공에는 보통). 4. **제미니 인사이트:** `gemini-2.5-flash`를 사용하여 현재 장면의 감정과 이야기를 분석하는 버튼입니다. ### 3. 데이터 구조 - 스토리 스크립트를 저장하려면 상수 파일을 사용하세요. - 속성을 사용하여 문자를 정의합니다: `id`, `name`, `visualDescription`(AI 생성용), `voicePitch`, `voiceRate`. - `type`, `visualDescription` 속성을 사용하여 배경을 정의합니다. ### 4. 스토리 내용(소설) 다음 소설 내용을 구조화된 스크립트로 구문 분석해 주세요. [소설의 본문을 여기에 붙여 넣으세요] ### 5. 기술 요구 사항 - Gemini의 경우 `process.env.API_KEY`를 사용하세요. - 비동기 이미지 생성을 원활하게 처리합니다(UI에 "생성 중..." 로더 표시). - 단일 파일 구조 또는 표준 모듈형 구조(앱, 구성 요소, 서비스)가 선호됩니다. - 레이아웃이 반응형이면서도 가로 보기에 최적화되어 있는지 확인하세요. 지금 전체 코드를 생성하세요.