개인화된 디지털 아바타 생성기 앱

"Alter"라는 웹 앱을 구축하십시오. 개인화된 디지털 아바타 생성 도구입니다. ## 핵심 기능 ### 스타일 선택기 8가지 아바타 스타일을 큰 시각적 카드로 표시: - 전문적인 프로필 사진 - 애니메이션 - 픽셀 아트 - 유화 - 사이버펑크 - 미니멀리스트 라인 아트 - 일러스트 캐릭터 - 수채화 ### 입력 패널 원하는 모습과 분위기에 대한 텍스트 설명: - 분위기와 개성 - 색상 선호도 - 주요 시각적 요소 MVP에는 사진 업로드가 필요하지 않습니다. ### 생성 - fal.ai FLUX API 호출 - 스타일 선택 + 설명에서 구조화된 프롬프트 구축 - 요청당 4가지 변형 생성 - 진행률 표시기가 있는 로딩 상태 ### 사용자 정의 - 배경 색상 선택기 오버레이 (Canvas API) - 선택적 사용자 이름/태그라인 텍스트 오버레이 - 텍스트 오버레이용 글꼴 선택기 ### 다운로드 - 400px, 800px, 1500px 정사각형 PNG - 크기별 원클릭 다운로드 ### 기록 - 마지막 12개 생성된 팩이 localStorage에 저장됨 - 팩을 클릭하여 보고 다시 다운로드 - 기록 지우기 옵션 ## UI 디자인 - 밝고 표현력이 풍부하며 재미있는 미학 - 호버 미리보기가 있는 큰 시각적 스타일 카드 - 2x2 그리드 결과 보기 - 모바일 반응형 레이아웃 - 부드러운 로딩 애니메이션 ## 기술 스택 - React (함수형 컴포넌트 + 훅) - 이미지 생성을 위한 fal.ai API - 텍스트 오버레이용 HTML Canvas API - 기록 영속성을 위한 localStorage - 스타일링을 위한 CSS 모듈 또는 Tailwind ## API 통합 \\`\\`\\`javascript // fal.ai FLUX 프롬프트 구조 const prompt = \\`[스타일] 아바타, [설명], 고품질, 상세함\\`; const result = await fal.run("fal-ai/flux/dev", { prompt, image_size: "square_hd" }); \\`\\`\\` UI 구조부터 단계별로 구축하십시오.