소개
최근 유행중인 애니 실사화 영상 제작을 위한 베이스 이미지 작업용 툴의 개발 및 보조 툴 개발.
진행 방법
나노바나나 초기버전부터 AI 스튜디오를 활용하여 여러가지 앱들을 개발한 이력이 있습니다.
예를 들면 레퍼런스 이미지를 다양한 시점으로 에디팅한다거나, 구도와 포징을 변경하는 툴을 활용했었습니다.
바이브코딩은 제대로 접한 적이 없어 모든 작업은 "입코딩"으로 진행했습니다.
메인 기능을 정하고 거기에 살을 붙여나가는 방식인데, 장점이라면 아무런 사전 지식이 없이 진행 가능하다는 점이고, 단점이라면 수정을 거듭하면서 초창기에 설정한 기본 지침이나 로직이 추가되는 기능으로 인해 변경되는 경우가 종종 있어 이에 대한 품질 관리를 계속 해줘야 한다는 점입니다.
아래는 완성된 앱을 AI 스튜디오에서 이전 콘텍스트와 히스토리 분석을 통해 PRD 형태로 정리한 것입니다.
📂 프로젝트 제네시스 (Project Genesis) 개발 보고서
1. 프로젝트 개요
목표: 2D 애니메이션 캐릭터 이미지를 분석하여, 고해상도의 극실사(Photorealistic) 인물 사진으로 변환하는 웹 애플리케이션 구축.
핵심 가치: 단순한 이미지 변환이 아니라, 사용자가 원하는 '미형(K-Pop 아이돌/배우급 비주얼)'과 '리얼한 피부 질감'을 동시에 달성하는 것.
2. 사용된 핵심 기술 스택 (Tech Stack)
A. 프론트엔드 (Frontend)
Core: React 19 (TypeScript) - 최신 리액트 훅을 활용한 상태 관리.
Styling: Tailwind CSS - 다크 모드 기반의 사이버펑크/전문가용 UI 디자인.
Persistence: IndexedDB (idb 라이브러리) - 브라우저 내에 대용량 이미지 데이터와 작업 히스토리를 영구 저장.
B. AI 엔진 (Google Gemini API)
이 앱은 이중 엔진(Dual-Engine) 구조를 채택하여 성능과 품질을 최적화했습니다.
두뇌 (Analysis Engine): gemini-3-flash-preview
역할: 이미지 분석 및 프롬프트 설계.
이유: 속도가 빠르고 JSON 구조를 정확하게 뽑아냄. "어떻게 찍어야 예쁘게 나올지" 계획을 세우는 감독 역할.
화가 (Rendering Engine): gemini-3-pro-image-preview (Nano Banana Pro)
역할: 실제 고화질 이미지 생성.
이유: 현존하는 모델 중 텍스트-이미지 정합성과 디테일 묘사력이 가장 뛰어남.
3. 핵심 알고리즘 및 구현 로직 (The Secret Sauce)
우리가 대화하며 발전시킨 이 앱만의 독자적인 로직입니다.
① 2단계 파이프라인 (2-Stage Pipeline)
Stage 1 (분석): 사용자가 이미지를 올리면, AI가 이를 바로 그리는 게 아니라 **"분석 프롬프트(JSON)"**를 먼저 작성합니다. 이때 조명, 카메라 렌즈, 피부 질감 등을 텍스트로 정의합니다.
Stage 2 (실행): 정의된 JSON 설계도와 원본 이미지를 합쳐서 최종 이미지를 생성합니다. 이 과정을 통해 AI가 멋대로 그리는 환각(Hallucination)을 통제합니다.
② 비주얼 센터 캐스팅 프로토콜 (Visual Center Casting Protocol)
배경: "캐릭터가 좀 더 미형으로 나왔으면 좋겠다"는 요청에 의해 추가됨.
구현: 시스템 프롬프트에 강제로 "Golden Ratio (황금비율)", "K-Pop Idol Visual", "Beauty Campaign Photography" 키워드를 주입.
디테일: 단순히 예쁘게만 하면 '플라스틱 인형'처럼 되므로, **"모공(Pores), 솜털(Vellus hair)이 보여야 한다"**는 제약을 걸어 '실제 사람 같은 아름다움'을 구현.
③ 하이브리드 리얼리즘 (Hybrid Realism)
문제: 다리 길이나 신체 비율 수정이 AI 특성상(구조적 고정) 어렵다는 한계 발견.
해결:
일반 모드: 원본의 비율을 유지하되 질감을 실사로 바꿈.
캐릭터 시트 모드: 아예 9:16 비율로 캔버스를 강제하고, "전신 샷(Full Body)"을 새로 그리도록 유도하여 비율 문제를 우회적으로 해결.
4. 개발 히스토리 (Development Context)
사용자님의 요청 흐름에 따라 앱이 어떻게 진화했는지 요약입니다.
초기 구축:
React와 Gemini API 연동. 기본적인 이미지 업로드 및 생성 기능 구현.
기능 확장 (싱글/페어 모드):
단일 캐릭터뿐만 아니라, 두 캐릭터(Pair)를 합성하는 모드 추가.
배경(Background)과 소품(Asset)을 별도로 입력받아 합치는 슬롯 시스템 도입.
UI/UX 고도화:
"전문가 도구" 느낌이 나도록 다크 테마와 사이버펑크 스타일 적용.
우측에 실시간 JSON 로그 패널을 배치하여 AI의 생각 과정을 시각화.
품질 혁신 (미형 보정):
결과물이 불쾌한 골짜기(Uncanny Valley)에 빠지지 않도록 '비주얼 센터 프로토콜' 도입.
인간의 미적 기준(이목구비 뚜렷함, 피부 결)을 코드 레벨에서 강제함.
편의성 강화 (히스토리 저장):
"앱 껐다 켜도 작업 내용 기억하게 해달라"는 요청.
localStorage의 용량 한계를 넘어설 수 있는 IndexedDB를 도입하여, 생성된 고화질 이미지들이 브라우저에 영구 저장되도록 구현.
수정 및 확장 (Refine & Sheet):
이미 생성된 이미지를 부분 수정(Refine)하거나, 3면도(앞/옆/뒤)를 뽑아내는 캐릭터 시트 기능 추가.핵심 구조는 이중 참조 구조인데요.
레퍼런스 이미지를 바로 실사화하는게 아닌, 레퍼런스 이미지의 분석 및 JSON 화를 통해 한번 정리하고, 정리된 JSON 프롬프트와 레퍼런스 이미지를 동시 참조해서 실사화 이미지를 형성하는 방식으로 진행했습니다.
이런 복잡한 구조를 택하게 된 이유는 로직을 간단하게 가져갈수록 결과물이 과도하게 3D 렌더링 스타일로 나오거나, 혹은 미형이 아닌 날 것 그대로의 인물로 나오는 경향이 있어서 입니다.
레퍼런스 이미지를 3장 넣고.
분석시키면 JSON을 추출합니다, 바로 생성.
조금 비율이 아쉽습니다. 이 툴 내부에서 프롬프트로 황금비율 맞추는 걸 구현은 해놨는데, 다른 툴로 옮겨서 작업해봅니다.
전체 이미지에서 하체 비율을 늘리고 머리 크기를 실제 인물의 황금 비율과 유사하게 맞추도록 만들어놓은 앱입니다.
물론 이런 식으로 프롬프팅 조정을 통해서도 원래 툴에서 작업은 가능합니다만, 제미나이와의 심도 있는 토론에서 내린 결론은 배경 프레임을 손봐야 하는거라 비율을 실사화 앱 자체에서 소화할 경우 원래 레퍼런스 이미지와 충돌이 생길 가능성이 높다... 라는 내용이었습니다.
에셋 이미지를 추가하고, 프롬프트를 추가해서....
생성된 이미지는 직접 에디팅이 가능하도록 설정했습니다. 나노바나나프로의 열화 현상이 보고되고 있는 만큼 가능한 마스터 이미지, 혹은 마스터 캐릭터 시트로 최대한 일관되게 작업하려 노력했습니다. 요 며칠 제미나이가 좀 아픈지 결과물이 다소 들쑥날쑥한 편입니다.
업로드 용량 한계가 있어 캡컷으로 클리핑한 영상입니다.
결과와 배운 점
이미지 생성은 익숙하다고 생각했는데, 툴이 발달하면서 점점 쉽게 쉽게, 딸깍으로 대충 이미지를 만들고 있었구나... 대충 끄적여놓고 좋은 결과를 기대했구나 하는 반성을 하게 되었습니다.
일관된 결과를 위해 로직을 정리하다 보니 부족한 부분을 정리할 수 있는 좋은 기회였습니다.
추가로 디벨롭할 부분은 전체적인 기능의 통폐합과 실사 느낌을 살리기 위한 점이나 주근깨 같은 실사 디테일의 적용 비율을 어느정도로 할 것이냐, 맡길 것이냐 수동으로 조정 가능하게 할 것이냐. 이정도 같습니다.
부족한 점이 많지만 입코딩으로도 이정도 까지 구현이 된다... 정도로 봐주시면 감사하겠습니다.
