소개
현재 프로젝트를 시작하며 개인 맞춤(Quick 커스터마이징) 경험을 첫 화면에서 바로 보여주고 싶었죠. 그래서 선택한 길은 AI 도구 + 노코드 + 얇은 코드(바닐라 HTML/JS)의 혼합 접근이었습니다.
생각은 간단했지만, 결과물은 제 맘 처럼 나오진 않네요.
진행 방법
사용한 도구들
ChatGPT
→ 섹션 구조, 카피, 접근성/SEO, B2C Quick 전용 랜딩의 HTML/CSS/JS 자동 생성Hugging Face
→ 이미지 스타일 탐색, 샘플 프롬프트 검증Lovable
→ 유입→탐색→맞춤→상담/구매로 이어지는 퍼널 & 감정 곡선 설계
브랜드 가이드 적용: Gold
#D4A64E, Black#0E0E0E, White#FFFFFF, Cream#F8F3EB
타이포: 헤드라인 굵은 산세리프, 본문 클린 산세리프
🧪 시행착오의 연속, 프롬프트 카빙(prompt carving)
“랜딩페이지 만들어줘”로는 원하는 결과가 안 나왔습니다.
❌ 톤&무드가 들쭉날쭉
❌ 섹션 우선순위가 흐릿
❌ 이미지 톤과 카피가 따로 놈
그래서 요구를 더 구체화하기 시작했습니다.
“첫 스크롤 내 Quick 커스터마이징을 체험시켜라”
JEWELISE의 무드보드(블랙 벨벳·골드 보케·얕은 심도)
카테고리→스타일→CTA→결과의 조작감을 랜딩에서 바로
말 그대로 돌을 깎듯 프롬프트를 다듬다 보니, 구조·톤·컴포넌트가 맞아떨어지기 시작했어요.
🔁 반복과 실험, 그리고 완성
핵심은 Quick 전용 흐름을 랜딩 안에 심는 것이었습니다.
Find 단계
Jewelry → Earrings → Style/Theme(dainty/minimalist 등)선택CTA(Generate) 클릭
Show 단계
선택값을 바탕으로 관련 제품 + 3개의 생성 이미지 표출
(초기엔 캔버스 렌더·데이터URL로 즉시 썸네일 생성, 추후 Huggingface API로 교체)
Edit 단계(핵심)
텍스트로 변경점 입력 → 실시간 캔버스 반영
동시에 3개 변형안 재생성(미니 배치 생성)
Flow Map & 최소 API 계약
POST /api/ai/generate→ 3개 컨셉POST /api/ai/refine→ 텍스트 수정 반영 3개 변형POST /api/edit/brief→ 상담·견적 티켓 생성
초기에는 Lovable로 “바로 움직이는” 데모를 만들고,
나중에 동일한 함수 시그니처로 Huggingface API를 붙이는 방식으로 전환했습니다.
결과와 배운 점
결과
B2C Quick 전용 랜딩: 한 파일로 바로 열리는 수준까지 완성
실시간 캔버스 미리보기 + 3개 변형 자동 생성 흐름 검증
배운 점
AI에게 맥락·의도·제약을 명확히 설명할수록, 원하는 결과에 빨리 도달한다.
“프롬프트 카빙”은 결국 제품 요구사항 정의의 다른 이름이다.
“ChatGPT는 마법사가 아니라, 조각가의 도구였다.”
도움 받은 글 (옵션)
Lovable – 퍼널/감정 설계 메모
Hugging Face – 프롬프트/스타일 실험
ChatGPT – 구조·카피·코드 자동화
Leonardo AI(이미지 생성) – 추후 API 연동 전제
