Google AI Studio로 AI 멀티 앵글 이미지 생성 웹앱 만들기
소개
사용자가 이미지 1장만 업로드하면, 카메라 각도, 이미지 사이즈, 디테일 레벨을 설정해 다양한 시점의 이미지를 자동으로 생성해주는 웹앱을 Google AI Studio를 활용해 만들어보았습니다.
진행 방법
1️⃣ 전체 흐름
사용자가 단일 이미지 업로드
생성 옵션 선택
카메라 각도 (정면 / 측면 / 위 / 아래 등)
이미지 사이즈
디테일(레벨)
Google AI Studio로 이미지 분석 및 생성 요청
멀티 앵글 이미지 결과 출력
2️⃣ 사용한 도구
Google AI Studio
이미지 입력 + 텍스트 프롬프트 기반 생성
웹 기반 UI
이미지 업로드
옵션 선택 UI
3️⃣ 프롬프트 구성 예시
Google AI Studio – Build 전용 PRD 입력 템플릿
이 문서에 기재된 내용을 기반으로, Google AI Studio – Build는 실행 시점의 최신 기능·최신 모델·최신 API·최신 매뉴얼을 자동으로 확인하여 최적의 앱을 구성합니다.
구체적인 UI/DB 구조/모델 설정은 자동으로 설계해주세요.
⸻
[0] 기본 정보
**앱 이름**: 옴니뷰 (OmniView) - AI 멀티 앵글 생성기
**앱의 주요 목적 (한 문장)**: 사용자가 업로드한 단일 이미지를 분석하여, 설정된 카메라 각도, 사이즈, 레벨에 맞춘 다양한 시점의 이미지를 AI로 생성하는 앱입니다.
⸻
[1] 앱의 주요 기능
앱에서 제공하고 싶은 핵심 기능을 자유롭게 작성하세요.
Build는 아래 내용을 참고하되, 최신 기능을 우선 적용하여 최적화된 구조로 자동 구성합니다.
**핵심 기능**:
1. **이미지 업로드 및 분석**: 사용자가 기준이 되는 이미지를 업로드하면 AI(Gemini Vision 등 최신 모델)가 피사체와 스타일을 분석.
2. **카메라 옵션 설정**: 아래 3가지 카테고리의 옵션을 UI로 제공하여 사용자 선택 가능.
- **카메라 각도**: 정면(Front), 왼쪽 측면(Left Profile), 오른쪽 측면(Right Profile)
- **카메라 사이즈**: 클로즈업 샷, 미디엄 샷, 풀 샷, 드론 샷
- **카메라 레벨**: 아이레벨(Eye Level), 로우 앵글(Low Angle), 하이 앵글(High Angle)
3. **이미지 변형 생성**: 선택한 옵션 조합에 따라 원본의 일관성을 유지하며 새로운 구도의 이미지 생성 (Image Generation API 활용).
4. **결과물 갤러리 및 저장**: 생성된 이미지를 그리드 형태로 조회하고 개별 다운로드 기능 제공.
⸻
[2] 사용자 흐름
사용자가 앱을 어떻게 사용할지 대표적인 흐름을 간단히 적어주세요.
상세 동작 방식과 화면 구성은 Build가 최신 매뉴얼 기준으로 자동 설계합니다.
**사용자 흐름**:
1. 사용자가 메인 화면에서 원본 이미지를 드래그 앤 드롭으로 업로드합니다.
2. 우측 또는 하단의 설정 패널에서 원하는 앵글, 샷 사이즈, 레벨 옵션을 체크박스나 칩(Chip) 형태로 다중 선택합니다.
3. '생성하기' 버튼을 누르면 로딩 인디케이터와 함께 AI가 이미지를 생성합니다.
4. 완료 후 결과 화면에서 생성된 이미지들을 확인하고, 마음에 드는 이미지를 로컬에 저장합니다.
⸻
[3] 데이터 활용 여부
필요 시 저장 또는 조회 기능이 포함되는지 작성하세요.
구체 스키마·DB 구조는 작성하지 마세요.
Build가 실행 시점의 최신 API와 권장 방식을 확인하여 자동 구성합니다.
**데이터 저장/조회 기능 필요 여부**: 필요 (로컬 스토리지 한정)
**데이터 관련 요구사항**:
- 별도의 서버 데이터베이스나 로그인 인증은 사용하지 않습니다.
- 사용자의 브라우저 **Local Storage**를 활용하여 최근 생성한 이미지 기록을 임시 저장하거나, 세션 내에서만 유지되도록 구성합니다.
⸻
[4] 화면 구성 의도 (선언적 표현)
원하는 화면 유형을 간단히 적어주세요.
UI/레이아웃/컴포넌트 배치는 Build가 최신 방식으로 구성합니다.
**원하는 화면 유형**:
- **메인 대시보드 형태**: 화면을 분할하여 좌측에는 '입력 및 옵션 제어 패널', 우측에는 '결과물 출력 그리드' 배치.
- **옵션 선택 UI**: 직관적인 버튼 그룹 또는 토글 칩 스타일로 구성하여 빠른 선택 유도.
- **결과 카드**: 생성된 이미지는 카드 형태로 표시되며, 클릭 시 확대 모달(Lightbox) 제공.
⸻
[5] 기타 요구사항
필요한 경우 추가 요구사항을 작성하세요.
작성된 요구사항은 Build가 최신 기능과 매뉴얼을 기반으로 자동 최적화하여 구현합니다.
**기타 요구사항**:
- **세련된 한글 인터페이스**: 폰트와 레이아웃이 깔끔하고 모던한 스타일로 한국어 UI를 구성해주세요.
- **반응형 디자인**: 데스크톱과 모바일 환경 모두에서 옵션 선택이 용이하도록 설계해주세요.
- **오류 처리**: 이미지 생성 실패 시 사용자에게 알림을 주고 재시도 버튼을 제공해주세요.
⸻
[6] 보조 옵션
Build가 앱을 구성할 때 참고할 수 있는 옵션입니다.
작성하지 않으면 Build가 판단하여 자동 구성합니다.
- 디자인 테마: 다크 모드/라이트 모드 자동 감지 또는 뉴트럴한 그레이 톤.
⸻
[7] 확장 가능성
향후 확장하고 싶은 아이디어가 있다면 적어주세요.
Build는 “현재 작성된 PRD 범위에서 구현 가능한 수준”으로만 확장안을 반영하고,
구체 구현은 최신 기능 기준으로 자동 설계합니다.
**확장 아이디어**:
- 생성된 이미지를 기반으로 짧은 영상(GIF) 생성 기능.
- 배경만 따로 변경하는 인페인팅 기능 추가.
⸻
Build 적용 지침 (중요)
아래 문장은 사용자가 수정하지 않고 그대로 Build에 들어가야 하는 고정 문장입니다:
“위 PRD 내용은 실행 시점의 Google AI Studio – Build가 제공하는 최신 기능, 최신 모델, 최신 API, 최신 매뉴얼을 기준으로 해석하고 구현합니다.
필요한 경우 Build는 최신 버전 권장 설정을 우선 적용하여 UI·기능·데이터 구조를 자동으로 최적 설계합니다.”👉 핵심은 "카메라 언어"처럼 명확하게 설명하는 것이었다. 각도, 거리, 시점을 구체적으로 써줄수록 결과가 안정적이었다.
4️⃣ 구현 화면
남자와 여자의 사진을 보여주는 웹사이트의 스크린샷
초기 화면에서 카메라 각도, 사이즈, 레벨, 렌즈&특수효과 추가해서 프롬프트
결과와 배운 점
👍 잘 됐던 점
생각보다 쉽게 원하는 기능이 구현됨. 시점 변화가 꽤 자연스럽게 생성됨
컨셉 검증용 이미지 생성 가능
옵션만 바꿔도 결과가 확 달라져 실험하는 재미가 큼
🤔 아쉬웠던 점
좀더 다양한 기능을 추가하고 싶은 욕구 생김
💡 배운 점
Google AI Studio는 빠른 프로토타이핑에 정말 적합
도움 받은 글 (선택)
Google AI Studio: https://aistudio.google.com
20기 AI스튜디오빌드 스터디