🎨 숙련 모드 튜토리얼

신입 직원이 보고 따라하는 단계별 가이드 — 빈 캔버스에서 한 섹션씩 직접 만들어 상세페이지를 완성하는 흐름

📑 목차

숙련 모드란? 자동 모드와의 차이
첫 화면에서 할 일
새 프로젝트 만들기
캔버스 화면 구성 (좌·중·우 3분할)
한 섹션 완성하기 (베이스 → 카피 → 합성)
페이지 여러 장 — 캔버스 확장
테마(컨셉) 적용
PNG 다운로드 (1장씩)
내보내기 (전체 ZIP)
자주 묻는 질문
막혔을 때

1. 숙련 모드란? — 자동 모드와의 차이

MOBYDICK 에는 두 가지 작업 방식이 있습니다.

모드	특징	언제 쓰나
🤖 자동 모드	13개 섹션을 한 번에 AI 가 자동 생성	빠르게 결과를 보고 싶을 때, 비슷한 상품 여러 개 찍어낼 때
🎨 숙련 모드	빈 캔버스에서 섹션·페이지를 한 개씩 직접 디자인	정성 작업, 컨셉이 정확히 정해진 상품, 분류에 안 들어가는 특수 상품

💡 이 튜토리얼은 숙련 모드 전용입니다. 자동 모드 사용법은 대시보드의 통합 튜토리얼에서 보세요.

2. 첫 화면에서 할 일

대시보드에서 📐 숙련 모드 (자유 디자인) 을 클릭하면 숙련 모드 첫 화면(/expert-mode)이 열립니다.

첫 화면 구성

📂 이전 숙련 모드 프로젝트 이어서 편집 — 위쪽 목록. 만들던 프로젝트가 있으면 여기서 🎨 숙련 편집 으로 바로 들어가기.
① 제품 올리기 — 새로 시작할 때. 제품명·이미지를 입력하면 빈 프로젝트가 만들어집니다.
② 제품 정보 입력 — 셀링포인트·스펙 (선택). 채우면 캔버스 안에서 카피 추천 받을 때 더 정확해집니다.
③ 캔버스로 이동 — 모든 준비가 끝나면 캔버스에서 실제 디자인 작업.

📌 모든 입력은 자동 저장되고 expert_info.md 파일에 기록되어 다른 사람도 같은 컨텍스트로 이어 작업할 수 있습니다.

3. 새 프로젝트 만들기

제품명 입력 (필수) — 예: "아크릴 어항 풀세트 60cm". 1자만 넘으면 OK.

모델명·카테고리·테마 (모두 선택). 비워둬도 진행할 수 있습니다. 나중에 캔버스에서 바꿔도 됩니다.

제품 이미지 추가 — 여러 장 한 번에 또는 나눠서. 각 이미지에 설명을 적으면 AI 가 카피 만들 때 참고합니다.

⚠️ 새로고침 시 미리보기에 있던 이미지는 사라집니다. 다 모았으면 바로 📦 프로젝트 만들기 누르세요.

📦 프로젝트 만들기 클릭 — 일괄 업로드 → 프로젝트 ID 발급 → 다음 단계 활성화.

4. 캔버스 화면 구성 — 좌·중·우 3분할

③ 캔버스로 이동 또는 목록에서 🎨 숙련 편집 을 눌렀을 때 열리는 화면입니다.

위치	역할
📋 왼쪽	섹션 목록 · 새 섹션 추가 · 📦 내보내기 (PNG ZIP)
🖼️ 중앙	현재 선택한 섹션의 메인 이미지. 페이지 경계선이 표시되고, 페이지 썸네일로 페이지 전환.
🛠️ 오른쪽	도구 — 이미지 업로드 · 카피 입력 · 스티커 · 캔버스 확장 · AI 편집 · PNG 다운로드

💡 모든 작업은 섹션 단위입니다. 왼쪽에서 섹션을 클릭하면 중앙·오른쪽이 그 섹션 기준으로 갱신됩니다.

📌 모든 변경은 자동 저장됩니다. "저장" 버튼을 따로 누를 필요는 없지만, 강제로 저장하고 싶으면 오른쪽 💾 강제 저장 버튼이 있습니다.

5. 한 섹션 완성하기 — 베이스 → 카피 → 합성

가장 기본 흐름입니다. 한 섹션이 한 페이지짜리일 때.

섹션 추가 — 왼쪽에서 섹션 이름을 적고 + 섹션 추가. 새 섹션이 목록에 생기고 자동 선택됩니다.

🛍️ 제품 사진 또는 🖼️ 쿠팡 페이지 이미지 로 베이스 이미지 업로드 — 오른쪽 패널 위쪽.

🛍️ 제품 사진 = 배경 없이 깨끗한 단품 사진 (스튜디오 컷)
🖼️ 쿠팡 페이지 이미지 = 이미 글자·배경이 들어간 완성된 컷

카피(글자) 추가 — 오른쪽 📝 카피 영역에 메인 카피 + 서브 카피 입력. 박스 위치는 드래그로 자유 배치.

💡 💡 AI 추천 버튼 → 제품 정보·셀링포인트 기반으로 카피 5개 후보 제안.

🎨 합성 (카피 + 베이스 이미지) — 합성·편집 버튼 한 번 클릭으로 카피가 베이스 이미지 위에 PIL 합성됩니다. 결과가 즉시 중앙에 표시.

결과가 마음에 안 들면 — 카피 글자/위치를 바꾸고 다시 합성·편집. 또는 ♻️ 원본으로 복원 으로 _pristine.png 로 되돌리기.

6. 페이지 여러 장 — 캔버스 확장

긴 상세페이지에서 한 섹션이 페이지 2장 이상이 될 때 쓰는 기능입니다.

페이지란?

한 섹션의 NN.png 안에서 세로로 나뉜 영역을 "페이지" 라고 부릅니다. 각 페이지에는 자기만의 카피·스티커가 붙을 수 있습니다.

새 페이지 추가하는 두 가지 방법

📄 같은 섹션에 페이지 이어붙이기 — 이미지 파일을 추가로 업로드하면 아래에 페이지 1장이 더 붙습니다.
📐 캔버스 확장 — 현재 페이지의 위 또는 아래에 빈 영역을 cm 단위로 추가. 위·아래 끝 픽셀 색을 자동 감지해서 매끄럽게 이어집니다.

페이지 전환

중앙 이미지 위에 페이지 경계선이 표시됩니다 — 초록 실선 = 활성 페이지, 노란 점선 = 비활성. 오른쪽 패널의 페이지 썸네일을 클릭하면 활성 페이지가 바뀝니다.

📌 활성 페이지가 바뀌면 우측 패널의 카피·스티커 입력이 그 페이지 전용으로 바뀝니다. 페이지마다 독립된 카피를 가질 수 있다는 뜻.

페이지 삭제

오른쪽 패널의 페이지 썸네일 옆 🗑️ 버튼. 활성 페이지 1개만 삭제됩니다 (확인 후).

7. 테마(컨셉) 적용

15개 컨셉 중 하나를 선택하면 AI 합성·편집 시 그 스타일을 따릅니다.

심플·정돈 (9개): 🐋 모비딕 시그니처, 화이트 미니멀, 스튜디오 뉴트럴, 노르딕, 삼성 라이트, 소프트 세이지, 네이처 아쿠아, 에이리 그라데이션, 벤토 모던
중간 (4개): 자연 라이프스타일, 카툰 일러스트, 테크 인포그래픽, 하이브리드 커스텀
화려 (2개): 프리미엄 포토, 언더워터 시네마틱

💡 프로젝트 전체 테마 — 캔버스 상단에서 변경. 섹션·페이지별 테마 도 별도 지정 가능 (덮어쓰기).

8. PNG 다운로드 (1장씩 즉시)

오른쪽 패널 💾 PNG 다운로드 버튼은 현재 활성 페이지 1장만 즉시 PNG 로 저장합니다.

페이지가 1장뿐 → 섹션 전체 이미지 그대로 저장
페이지가 여러 장 → 활성 페이지 영역만 잘라서 저장
파일명: <섹션명>_<NN>_p<페이지번호>_<페이지이름>.png

📌 "지금 이 페이지 한 장만 빨리 받고 싶다" 할 때 유용. 전체 프로젝트는 아래의 📦 내보내기 쓰세요.

9. 내보내기 — 전체 ZIP (쿠팡 기준 폭 860px)

왼쪽 사이드바 📦 내보내기 메뉴 — 세 가지 모드.

모드	설명	ZIP 내부
📄 페이지별 PNG ZIP	모든 섹션의 모든 페이지를 1장씩	`per_page/01_hero_p1_*.png`
🖼️ 전체 이미지 PNG ZIP	섹션별 NN.png 통째로 (페이지 합쳐진 모양)	`whole/01_hero.png`
📦 둘 다 한 ZIP	위 두 폴더를 한 ZIP 안에	`whole/` + `per_page/`

💡 클릭하면 🐋 BRAVO 클로저 추가할지 묻습니다 — 모비딕 마지막 마무리 이미지(BRAVO YOUR WATER LIFE + 공정거래위원회 디스클레이머)를 ZIP 끝에 추가하려면 확인.

📌 자동으로 폭 860px 로 축소됩니다 (쿠팡 권장 폭). 그보다 작은 이미지는 그대로.

10. 자주 묻는 질문

Q. 합성한 결과가 이상해요. 원본으로 돌릴 수 있나요?

네. 첫 합성 직전에 _pristine.png 백업이 자동 생성됩니다. ♻️ 원본으로 복원 버튼으로 언제든 되돌릴 수 있습니다.

Q. 카피 글자를 바꿨는데 이미지에 반영이 안 돼요.

섹션마다 프롬프트 잠금 플래그가 있습니다. 잠금 상태면 카피 변경이 무시됩니다. 카피 패널 위 빨간 배너에 잠금 표시가 보이면 🔓 카피로 강제 재생성 누르세요.

Q. AI 가 제품 모양을 다르게 그려요.

원본 제품 사진이 reference 로 전달되므로 일반적으로 형태는 보존됩니다. 그래도 어긋나면 합성 모드를 PIL 만 으로 바꿔보세요 — Gemini 가 이미지에 손대지 않고 글자만 올립니다.

Q. 페이지 경계가 어긋나 보여요.

중앙 이미지 각 페이지 박스 우하단에 y N · h N 좌표가 표시됩니다. 실제 페이지 위치와 다르면 캔버스 확장 또는 페이지 삭제 후 다시 추가해 보세요.

Q. 글자가 잘 안 보여요. 색을 바꾸고 싶어요.

오른쪽 카피 패널에서 색 선택 또는 🩹 스포이드 로 이미지에서 색을 직접 찍을 수 있습니다.

11. 막혔을 때

오른쪽 패널 도구가 안 보여요

왼쪽에서 섹션을 먼저 선택해야 합니다. 빈 프로젝트면 + 섹션 추가 부터.

이미지 로드 실패 (📭 아이콘 나옴)

NN.png 파일이 디스크에 없는 상태입니다. 오른쪽 🛍️ 제품 사진 또는 🖼️ 쿠팡 페이지 이미지 로 다시 업로드하세요. 페이지 정보(pages_json)는 남아있어서 복구됩니다.

AI 생성이 너무 오래 걸려요

Gemini API 가 일시적으로 느릴 수 있습니다. gemini-3-flash-preview 같은 preview 모델은 130~210초 지연이 흔하므로 운영에서는 사용 안 합니다. 1분 넘으면 페이지 새로고침 후 다시 시도.

모든 게 안 될 때

대시보드의 통합 튜토리얼 또는 최근 로그 를 확인하세요.

🚨 새로고침 주의 — 캔버스 작업 중에는 자동 저장이 800ms 디바운스로 동작합니다. 입력 직후 바로 새로고침하면 마지막 변경이 사라질 수 있으니 5초 정도 기다리거나 강제 저장 버튼을 한 번 누르세요.

← 숙련 모드 시작 화면으로 돌아가기