PIPELINE DEMO · 실제 실행 기록

브리프 한 줄에서 앱까지, 디자이너 없이

피그마도 포토샵도 열지 않았습니다. 텍스트 브리프 → 나노바나나 이미지 → 제미나이 역해석 → 재생성·변형 → 금손 HTML 변환 → Figma·PSD → 바이브 코딩. 아래는 2026-09-07 에 실제로 한 번 돌린 기록이며, 변환 단계는 지금 상태를 그대로 보여줍니다.

01브리프
02이미지 생성
03역해석
04재생성·변형
05HTML 변환
06Figma · PSD
07바이브 코딩

이미지 생성 53.4s · 역해석 13.1s · 변형 3종 병렬 56.6s · HTML 변환 39분 · .fig 48.7s · .psd 97.2s

01 – 02 브리프 → 이미지 생성

디자인은 문장으로 시작합니다

브리프를 프롬프트로 바꿔 google/nano-banana-pro (DropShot API) 에 보냈습니다. 상단 내비부터 푸터까지, 가격표와 후기 이름까지 문장으로 지정한 대로 한 장에 나왔습니다.

모델 google/nano-banana-pro (DropShot API)비율·해상도 9:16 · 2K결과 1536×2752생성 시간 53.4초
PROMPT · 브리프1670 chars
A complete, high-fidelity Korean e-commerce landing page design mockup for a cold brew coffee subscription brand named "모닝브루", rendered as one tall vertical desktop webpage screenshot. Clean modern Korean web design, white background, warm cream (#F5EFE6) and deep espresso brown (#3B2418) accents, Pretendard-like sans-serif typography, generous whitespace, crisp UI.

Layout from top to bottom:
1) Top navigation bar: wordmark "MORNING BREW" on the left, menu items "구독안내  원두  후기  FAQ", and a small dark rounded button "구독 시작" on the right.
2) Hero section: large bold headline "매일 아침, 문 앞에 갓 내린 콜드브루", sub-headline "새벽 로스팅 · 당일 추출 · 무료 배송", a big dark rounded CTA button "첫 달 30% 할인 받기". On the right, a product photo of a glass bottle of cold brew coffee with ice on a light wooden table, soft morning light.
3) Three benefit cards in a row with simple line icons and titles "새벽 로스팅", "당일 추출", "언제든 해지", each with one short Korean sentence.
4) Pricing section titled "구독 플랜" with three price cards side by side: "라이트" "주 3병" "₩19,900 / 월"; "스탠다드" "주 5병" "₩29,900 / 월" highlighted in cream with a small badge "인기"; "패밀리" "주 10병" "₩49,900 / 월". Each card has a button "선택하기".
5) Reviews section titled "구독자 후기" with three short quote cards, five gold stars, and names "김민지", "박준혁", "이서연".
6) FAQ section titled "자주 묻는 질문" with three rows: "배송은 언제 오나요?", "해지는 어떻게 하나요?", "원두를 바꿀 수 있나요?".
7) Footer: dark espresso brown band with "MORNING BREW" and small text "© 2026 모닝브루".

All Korean text must be spelled exactly as written above, crisp and perfectly legible. No extra random text, no lorem ipsum, no watermark, no device frame — just the flat webpage design itself.

따옴표 안의 한국어 문구가 그대로 렌더링됐습니다. 이미지 모델이 “텍스트를 그리는” 능력이 이 파이프라인의 출발점입니다.

나노바나나가 생성한 모닝브루 랜딩페이지 디자인
생성 결과 · 원본원본 열기 ↗
03 역해석 (이미지 → 스펙 → 프롬프트)

이미지를 다시 ‘디자인의 소스코드’로

생성된 이미지를 gemini-3.8-flash (리뷰티 Gemini 게이트웨이) 에 넣어 팔레트·타이포·섹션 구조·문구 전량·재생성 프롬프트·변형 지시문을 JSON 으로 뽑았습니다. 사람이 “이 디자인이 왜 이렇게 생겼는지” 설명하는 문서를 기계가 13.1초에 씁니다.

모델 gemini-3.8-flash (리뷰티 Gemini 게이트웨이)소요 13.1초토큰 5,158섹션 7추출 문구 43개
PALETTE
#FFFFFF
background
#F5EFEB
surface
#2B1A12
primary
#1F1F1F
text
#E5A93C
accent
SECTIONS
  1. 01
    nav navigation MORNING BREW · 구독안내 · 원두 · 후기 · FAQ · 구독 시작
  2. 02
    hero hero_banner 매일 아침, 문 앞에 갓 내린 콜드브루 · 새벽 로스팅 · 당일 추출 · 무료 배송 · 첫 달 30% 할인 받기
  3. 03
    benefits features 새벽 로스팅 · 매일 새벽 신선하게 로스팅된 원두를 사용합니다. · 당일 추출 · 주문 당일 추출하여 가장 신선한 상태로 발송합니다. · 언제든 해지 · 약정 없이 원할 때 언제든지 자유롭게 해지하세요.
  4. 04
    pricing pricing_table 구독 플랜 · 라이트 · 주 3병 · ₩19,900 / 월 · 선택하기 · 스탠다드 …
  5. 05
    reviews testimonials 구독자 후기 · 매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다! · 김민지 · 가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요. · 박준혁 · 정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고! …
  6. 06
    faq accordion 자주 묻는 질문 · 배송은 언제 오나요? · 해지는 어떻게 하나요? · 원두를 바꿀 수 있나요?
  7. 07
    footer footer MORNING BREW · © 2026 모닝브루

타이포 판정: Pretendard / Noto Sans KR (Bold/ExtraBold) · 깔끔하고 가독성 높은 산세리프 폰트 계열, 명확한 자간과 행간

REGEN PROMPT · 역해석으로 얻은 재생성 프롬프트247 words
A complete desktop landing page UI mockup for a premium cold brew coffee delivery service called 'MORNING BREW'. Minimalist, modern aesthetic with a warm ivory background (#F5EFEB), dark brown brand color (#2B1A12), and pure white cards. At the top, a clean white header with logo 'MORNING BREW', nav links '구독안내', '원두', '후기', 'FAQ', and a rounded dark CTA button '구독 시작'. The hero section has warm natural sunlight, showing a large glass bottle filled with dark iced cold brew on a light wooden table. Hero headline in bold dark typography reads '매일 아침, 문 앞에 갓 내린 콜드브루', subhead '새벽 로스팅 · 당일 추출 · 무료 배송', and rounded CTA button '첫 달 30% 할인 받기'. Below, a 3-column benefit section with minimal line icons for '새벽 로스팅' ('매일 새벽 신선하게 로스팅된 원두를 사용합니다.'), '당일 추출' ('주문 당일 추출하여 가장 신선한 상태로 발송합니다.'), and '언제든 해지' ('약정 없이 원할 때 언제든지 자유롭게 해지하세요.'). Then a '구독 플랜' section with three pricing cards: '라이트' with '주 3병' and '₩19,900 / 월', highlighted center card '스탠다드' with badge '인기', '주 5병', '₩29,900 / 월', and '패밀리' with '주 10병', '₩49,900 / 월', each with a dark '선택하기' button. Next, '구독자 후기' section with three user review cards containing 5 yellow stars each: reviews by '김민지' ('매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다!'), '박준혁' ('가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요.'), and '이서연' ('정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고!'). Followed by an accordion FAQ section '자주 묻는 질문' with questions '배송은 언제 오나요?', '해지는 어떻게 하나요?', '원두를 바꿀 수 있나요?'. Clean dark brown footer with 'MORNING BREW' and copyright '© 2026 모닝브루'. All Korean text must be spelled exactly as written, crisp and legible. No extra text, no watermark.
스펙 JSON 전체 보기 (pipeline/spec.json)
SPEC · JSON새 창 ↗
{
    "summary": "신선한 콜드브루 커피 정기 구독 서비스를 소개하고 신청을 유도하는 랜딩페이지 디자인.",
    "brand": {
        "name": "MORNING BREW",
        "industry": "식음료 / 커피 구독 서비스",
        "tone": [
            "모던함",
            "신뢰감",
            "따뜻함",
            "미니멀"
        ]
    },
    "palette": [
        {
            "role": "background",
            "hex": "#FFFFFF",
            "usage": "전체 기본 배경색"
        },
        {
            "role": "surface",
            "hex": "#F5EFEB",
            "usage": "히어로 섹션 배경 및 추천 플랜 카드 배경"
        },
        {
            "role": "primary",
            "hex": "#2B1A12",
            "usage": "주요 버튼, 푸터 배경, 짙은 헤드라인"
        },
        {
            "role": "text",
            "hex": "#1F1F1F",
            "usage": "본문 텍스트 및 기본 제목"
        },
        {
            "role": "accent",
            "hex": "#E5A93C",
            "usage": "구독자 후기 별점 아이콘"
        }
    ],
    "typography": {
        "headline": "Pretendard / Noto Sans KR (Bold/ExtraBold)",
        "body": "Pretendard / Noto Sans KR (Regular/Medium)",
        "weights": "400, 500, 700, 800",
        "notes": "깔끔하고 가독성 높은 산세리프 폰트 계열, 명확한 자간과 행간"
    },
    "layout": {
        "canvas": "desktop single column",
        "grid": "최대 1200px 중앙 정렬 그리드",
        "spacing": "섹션별 넉넉한 상하 패딩, 통일된 컴포넌트 간격",
        "sections": [
            {
                "id": "nav",
                "order": 1,
                "type": "navigation",
                "position": "top",
                "background": "#FFFFFF",
                "texts": [
                    "MORNING BREW",
                    "구독안내",
                    "원두",
                    "후기",
                    "FAQ",
                    "구독 시작"
                ],
                "components": [
                    "logo",
                    "nav_links",
                    "button"
                ],
                "notes": "좌측 로고, 중앙 메뉴, 우측 강조 CTA 버튼"
            },
            {
                "id": "hero",
                "order": 2,
                "type": "hero_banner",
                "position": "upper",
                "background": "#F5EFEB",
                "texts": [
                    "매일 아침, 문 앞에 갓 내린 콜드브루",
                    "새벽 로스팅 · 당일 추출 · 무료 배송",
                    "첫 달 30% 할인 받기"
                ],
                "components": [
                    "headline",
                    "subheadline",
                    "cta_button",
                    "product_photo"
                ],
                "notes": "좌측 텍스트 및 CTA 버튼, 우측 콜드브루 유리병 이미지 2열 구성"
            },
            {
                "id": "benefits",
                "order": 3,
                "type": "features",
                "position": "upper",
                "background": "#FFFFFF",
                "texts": [
                    "새벽 로스팅",
                    "매일 새벽 신선하게 로스팅된 원두를 사용합니다.",
                    "당일 추출",
                    "주문 당일 추출하여 가장 신선한 상태로 발송합니다.",
                    "언제든 해지",
                    "약정 없이 원할 때 언제든지 자유롭게 해지하세요."
                ],
                "components": [
                    "icon",
                    "feature_title",
                    "feature_desc"
                ],
                "notes": "3열 카드형 레이아웃, 라인 아이콘 적용"
            },
            {
                "id": "pricing",
                "order": 4,
                "type": "pricing_table",
                "position": "middle",
                "background": "#FFFFFF",
                "texts": [
                    "구독 플랜",
                    "라이트",
                    "주 3병",
                    "₩19,900 / 월",
                    "선택하기",
                    "스탠다드",
                    "인기",
                    "주 5병",
                    "₩29,900 / 월",
                    "선택하기",
                    "패밀리",
                    "주 10병",
                    "₩49,900 / 월",
                    "선택하기"
                ],
                "components": [
                    "title",
                    "pricing_card",
                    "badge",
                    "button"
                ],
                "notes": "3열 카드 구성, 중앙 스탠다드 카드에 배경색 및 '인기' 뱃지 강조"
            },
            {
                "id": "reviews",
                "order": 5,
                "type": "testimonials",
                "position": "middle",
                "background": "#FFFFFF",
                "texts": [
                    "구독자 후기",
                    "매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다!",
                    "김민지",
                    "가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요.",
                    "박준혁",
                    "정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고!",
                    "이서연"
                ],
                "components": [
                    "title",
                    "review_card",
                    "rating_stars"
                ],
                "notes": "3열 박스 카드 레이아웃, 노란색 별점 5개 배치"
            },
            {
                "id": "faq",
                "order": 6,
                "type": "accordion",
                "position": "lower",
                "background": "#FFFFFF",
                "texts": [
                    "자주 묻는 질문",
                    "배송은 언제 오나요?",
                    "해지는 어떻게 하나요?",
                    "원두를 바꿀 수 있나요?"
                ],
                "components": [
                    "title",
                    "accordion_item",
                    "icon_chevron"
                ],
                "notes": "중앙 정렬 아코디언 리스트 형태"
            },
            {
                "id": "footer",
                "order": 7,
                "type": "footer",
                "position": "bottom",
                "background": "#2B1A12",
                "texts": [
                    "MORNING BREW",
                    "© 2026 모닝브루"
                ],
                "components": [
                    "logo",
                    "copyright"
                ],
                "notes": "짙은 브라운 단색 배경, 중앙 화이트 텍스트 정렬"
            }
        ]
    },
    "imagery": [
        {
            "where": "hero",
            "description": "우드 테이블 위 햇살을 받으며 얼음이 가득 담긴 투명한 유리병의 콜드브루 커피.",
            "style": "photo"
        },
        {
            "where": "benefits",
            "description": "커피콩/시계, 드립퍼, 달력/해지 아이콘.",
            "style": "icon"
        }
    ],
    "style_keywords": [
        "모던",
        "미니멀",
        "웜톤",
        "커피",
        "깔끔한",
        "정돈된 그리드"
    ],
    "text_inventory": [
        "MORNING BREW",
        "구독안내",
        "원두",
        "후기",
        "FAQ",
        "구독 시작",
        "매일 아침, 문 앞에 갓 내린 콜드브루",
        "새벽 로스팅 · 당일 추출 · 무료 배송",
        "첫 달 30% 할인 받기",
        "새벽 로스팅",
        "매일 새벽 신선하게 로스팅된 원두를 사용합니다.",
        "당일 추출",
        "주문 당일 추출하여 가장 신선한 상태로 발송합니다.",
        "언제든 해지",
        "약정 없이 원할 때 언제든지 자유롭게 해지하세요.",
        "구독 플랜",
        "라이트",
        "주 3병",
        "₩19,900 / 월",
        "선택하기",
        "스탠다드",
        "인기",
        "주 5병",
        "₩29,900 / 월",
        "선택하기",
        "패밀리",
        "주 10병",
        "₩49,900 / 월",
        "선택하기",
        "구독자 후기",
        "매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다!",
        "김민지",
        "가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요.",
        "박준혁",
        "정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고!",
        "이서연",
        "자주 묻는 질문",
        "배송은 언제 오나요?",
        "해지는 어떻게 하나요?",
        "원두를 바꿀 수 있나요?",
        "MORNING BREW",
        "© 2026 모닝브루"
    ],
    "variant_prompts": {
        "rebrand": "Keep the exact layout and section structure but rebrand to '그린모닝', a premium matcha latte subscription. Change the primary palette to matcha green (#4F7A3A) and light cream. Replace the cold brew bottle photo with a glass bottle of layered iced matcha latte. Update all text precisely: logo to '그린모닝', headline to '매일 아침, 문 앞에 신선한 말차 라떼', subheadline to '제주 유기농 말차 · 당일 블렌딩 · 무료 배송', CTA to '첫 달 30% 할인 받기'. Benefits to '유기농 말차', '당일 제조', '언제든 해지'. Plan names remain '라이트', '스탠다드', '패밀리' keeping prices '₩19,900 / 월', '₩29,900 / 월', '₩49,900 / 월'. Footer copyright '© 2026 그린모닝'. All Korean text crisp and legible.",
        "localize_en": "Keep the exact layout, colors, and cold brew imagery unchanged, but translate all Korean texts to natural English: Nav: 'MORNING BREW', 'About', 'Beans', 'Reviews', 'FAQ', CTA 'Subscribe'. Hero: headline 'Fresh Cold Brew Delivered to Your Door Every Morning', subhead 'Dawn Roasted · Brewed Daily · Free Shipping', CTA 'Get 30% Off First Month'. Benefits: 'Dawn Roasting', 'Brewed Daily', 'Cancel Anytime'. Pricing: title 'Subscription Plans', cards 'Light' (3 bottles/wk, $19.90/mo), 'Standard' with 'Popular' badge (5 bottles/wk, $29.90/mo), 'Family' (10 bottles/wk, $49.90/mo), buttons 'Select Plan'. Reviews: title 'Subscriber Reviews'. FAQ: title 'Frequently Asked Questions', questions 'When will it be delivered?', 'How do I cancel?', 'Can I change beans?'. Footer: 'MORNING BREW', '© 2026 Morning Brew'."
    },
    "dev_components": [
        "Sticky Navigation Bar with flex layout and CTA button",
        "Hero Banner with 2-column responsive layout",
        "Feature Benefits Section with 3-column icon card grid",
        "Pricing Cards Component with highlighted featured card and badge",
        "Testimonial Cards Grid with star rating component",
        "FAQ Accordion with collapsible items and chevron toggle",
        "Footer Section with centered branding text"
    ],
    "app_ideas": [
        "구독 플랜 선택 시 배송 요일 및 원두 종류(디카페인, 산미 등)를 커스텀하는 대화형 모달",
        "마이페이지 내 다음 배송일 건너뛰기 및 실시간 배송 조회 토글 기능",
        "구독 결제 시 첫 달 30% 할인 코드가 자동 적용되는 간편 결제 체크아웃 플로우"
    ]
}
04 재생성 · 변형

스펙 하나로 갈라지는 세 갈래

역해석 결과로 세 가지를 동시에 돌렸습니다. 원본 없이 프롬프트만으로 다시 그리기, 원본을 참조해 브랜드 바꾸기, 원본을 참조해 언어 바꾸기. 세 건이 한꺼번에 약 1분.

원본
원본T2I · 53.4s
브리프에서 바로 생성한 기준 이미지.
재생성 (프롬프트만)
재생성 (프롬프트만)T2I · 56.6s
원본 이미지 없이 역해석 프롬프트만으로 다시 생성. 섹션·문구·가격·색이 전부 재현됐고 히어로 구도만 달라졌다.
리브랜드 (말차 '그린모닝')
리브랜드 (말차 '그린모닝')I2I · 54.5s
원본을 참조해 레이아웃은 픽셀 단위로 유지, 팔레트·제품·문구만 교체. 작은 본문 글자에 오타가 섞인다(‘매일 새벽’→‘배일 세먹’ 등).
영어판 (I2I 번역)
영어판 (I2I 번역)I2I · 55.1s
큰 글자는 번역됐지만 본문·후기는 깨졌다(‘Gold Brew’, ‘Ponular’, ‘$19,90’). 텍스트는 이미지 층이 아니라 HTML 층에서 다뤄야 한다는 증거.
05 HTML 변환 (금손)

픽셀을 텍스트·에셋·레이아웃으로 되돌립니다

생성 이미지를 그대로 금손 변환 대기열에 넣었습니다. 여기서부터 글자는 진짜 텍스트가 되고, 사진은 분리된 파일이 되고, 레이아웃은 CSS 가 됩니다. 변환은 대기열 작업이라 수십 분이 걸리며, 이 칸은 현재 상태를 그대로 보여줍니다.

원본(모닝브루) → HTML

완료 C2609070C2F3BCA · 1536×2752 · 50 크레딧 · 섹션 6 · 품질 99% · 39분
AI 생성 이미지 (원본)1536×2752
원본 이미지
변환된 HTMLHTML

리브랜드(그린모닝) → HTML

완료 C260907C7F98A36 · 1536×2752 · 50 크레딧 · 섹션 7 · 품질 97% · 29분
AI 생성 이미지 (원본)1536×2752
원본 이미지
변환된 HTMLHTML
07 바이브 코딩 (HTML → 동작하는 앱)

HTML 이 나오면 프로그래밍은 ‘덧입히기’입니다

변환된 HTML 을 코딩 에이전트에게 주고 “동작하게 만들어 달라”고 했습니다. 디자인 이미지 한 장이 플랜 선택·가격 계산·FAQ 아코디언·구독 신청이 도는 페이지가 됩니다.

추가된 기능 플랜 선택·첫 달 30% 계산 · 배송 요일/원두 옵션 · 신청 폼(검증·저장·완료) · FAQ 답변소요 약 12분(에이전트 작성·검증 포함)
실행하면서 확인한 것

어디까지가 진짜이고, 어디서 사람이 필요한가

  • 이미지 생성(53초)·역해석(13초)·변형 3종(병렬 57초)까지 사람 손 없이 2분 남짓. HTML 변환은 39분(원본)·29분(리브랜드)으로 유일한 병목이다.
  • 역해석 JSON 이 문구 43개를 한 글자도 틀리지 않고 뽑았다. 프롬프트만으로 재생성해도 구조·문구·가격이 그대로 돌아온다 — ‘디자인의 소스코드’는 이미지가 아니라 이 스펙이다.
  • I2I 변형은 레이아웃을 완벽히 지키지만 작은 글자를 망가뜨린다. 문구·언어를 바꾸는 일은 HTML 로 내려온 뒤(진짜 텍스트)에 해야 한다 — 금손의 자리가 여기다.
  • 변환된 HTML 은 섹션 6개·품질 99%·검수 게이트 통과. CSS 변수·BEM 클래스·SVG 아이콘·반응형·FAQ 아코디언까지 갖춰 나와서, 바이브 코딩은 ‘덧입히기’ 12분으로 끝났다(플랜 선택·할인 계산·옵션·신청 폼·저장).
  • Figma 파일 49초, PSD 97초. 디자인 툴 파일은 파이프라인의 출발점이 아니라 내보내기 산출물이 됐다 — 디자이너가 손볼 일이 생기면 그때 연다.
  • 디자이너·퍼블리셔가 사라진 게 아니라 ‘검수자’로 옮겨 갔다. 남는 판단은 오타·규제 문구·브랜드 적합성이고, 그 검수 화면이 바로 아래의 원본·결과 1:1 비교다.
Reclaim the web

이미지 속에 갇힌 웹을 지금 되찾으세요

가입 즉시 무료 크레딧을 드립니다. 신용카드가 필요 없습니다.

뉴스레터 구독하기

새 기능, 통합, 변환 팁을 가장 먼저 받아보세요.

변환 문의