랜딩페이지 위에서 클릭 몇 번으로 이미지 생성 → 자동 저장 → 자동 배포까지 끝내는 에디터를 개발했습니다!
저희 팀에서 제가 랜딩페이지를 제작할 때 가장 많은 시간이 소요되는 작업 중 하나는 기획에 맞는 이미지를 찾고, 가공하고, 서버에 올리는 과정이었습니다.
매번 반복되는 과정:
프롬프트 작성
AI 이미지 생성
로컬에 다운로드
URL 복사해서 코드에 붙여넣기 또는 Git에 업로드
웹페이지에 반영
그래서 목표를 이렇게 정의했습니다:
"클릭 한 번으로 기획 의도에 맞는 고화질 에셋을 생성하고 즉시 배포한다"
지난주에는 Lindy AI로 간단하게 자동화 워크플로우를 만들어봤었습니다.
https://www.gpters.org/nocode/post/automatically-create-landing-page-GOCwSEdFNrNHuAr
이 과정을 통해 "이 자동화가 실제로 효용이 있구나"를 체감했습니다.
그러던 중 저희 팀 누리님께서 "텍스트만 입력하면 랜딩페이지가 자동 생성되는" 시스템을 바이브코딩으로 개발 하셨어요. 하여 저 또한 Lindy를 벗어나 바이브코딩으로 문제를 해결하는 것이 좋다고 생각했습니다.
사용한 도구
Claude Code (Claude Opus 4.5)
개발 스택: Next.js 15, React 19, TypeScript, Tailwind CSS
이미지 생성: Google Gemini Imagen API
스토리지: Cloudflare R2 (S3-compatible) (이미지 호스팅)
시작: Claude에게 전체 계획 물어보기
바로 Claude Code에게 물어봤습니다:
바이브코딩으로 만들어진 html 랜딩페이지에 삽입될 이미지 에셋 자동화 파이프라인을 구축하고싶어. 어떻게 구현하면 될지 계획을 세워줘. 전체 랜딩페이지 코드를 짤 때 강의/제품 랜딩페이지에 필요한 블록들을 12개 블록 타입으로 정의해놨을거라서 블록 기반으로 나눠서 볼 수 있어. 미리보기 창에서 전체 랜딩페이지가 쫙 보이고, 내가 특정 구간을 스크린샷 찍듯이 영역을 지정하면, 그 부분에 맞는 이미지 에셋을 api호출해서 nanobanana로 제작하고, 해당 이미지를 cloudflare r2에 업로드한 후 public_url을 받아내서 기존 랜딩페이지에 반영되게끔. 그리고 그걸 내가 바로 다시 미리보기로 볼 수 있고 배포도 바로 가능한 그런 시스템을 만들어내고 싶어.1단계: 기본 UI - 영역 선택과 우측 패널
기본 구조가 완성되었어요!
(위 사진에는 보이지 않지만) 원래는 영역을 선택하면 팝업 모달이 뜨고, 거기에서 이미지 생성 버튼을 누르는 방식이었습니다. 그런데 그게 오류가 많더라구요. 이미지 생성은 우측 패널에서 전부 관리하기로 했습니 다.
영역선택모드에서 드래그가 아니라 마우스 커서를 갖다대면
hover로 선택할 수 있게. 개발자 모드 켜서 영역 선택하는 것처럼!
그리고 이미지 삽입 영역은 하단의 "Enable Vibe Editor"를 눌러서 선택 가능하게 했어요. (개발자 모드 켜서 영역 선택하는 것과 유사)
2단계: 브랜드 스타일 프리셋 - 일관성 문제 해결
한국어 컬러 앱 스크린샷
그 다음은 일관성 문제를 해결하고 싶었습니다. 이미지마다 톤앤매너가 다르게 나오더라구요.
스타일 프리셋을 사전에 설정할 수 있는 기능을 만들었습니다. 에너제틱 & 따뜻함, 미니멀 & 모던, 3D 아이소메트릭 등 6가지 무드를 선택하고, 브랜드 색상을 지정하면 이후 생성되는 모든 이미지가 일관된 스타일로 나오는 거죠.
3단계: 프롬프트 자동 고도화 - "부모와 형제 요소" 함께 파싱
영역을 클릭했을 때 AI가 뭘 그려야 할지 이해하려면 맥락 정보가 필요하겠죠? 초기에는, 클릭한 요소 안의 텍스트만 가져오는 방식이었어요. 이 방식의 문제는 제가 선택한 이미지 영역 내에 텍스트가 없는 경우가 많다는 거죠.
영역을 클릭했을 때, 맥락을 제공해주기 위해 자동으로 근처 텍스트가 파싱되는데요, 이때 그 요소 하나만 보지 말고 "부모와 형제 요소"를 같이 긁어야 제대로 위쪽의 제목(H2)과 설명(P) 등을 같이 가져올 수 있게 수정해줘.그래서 이렇게 요청했고, 이렇게 하니 맥락에 맞는 이미지가 생성되었어요.
4단계: 새 프로젝트 자동 호환 시스템
이 시점에서, 새로운 랜딩페이지로도 테스트를 해보고 싶었어요. 누리님께서 만드셨던 랜딩페이지 파일을 다운로드 받아서,
폴더 경로 추가하면 열립니다. 여기까지는 너무 잘 됐어요.
그런데 ... 블록 선택이 아예 안 되는 문제가 생겼습니다. 순수 HTML 파일이라 data-block-id 속성이 없었거든요. 그래서 아래와 같이 요청했습니다.
앞으로 새로운 프로젝트를 추가하더라도 지금과 같은 오류가 없게 해야 돼. 매번 data-block-id를 추가하는 건 비효율적이야.Claude가 자동으로 HTML 파싱해서 블록 ID를 부여하는 시스템을 만들어줬어요.
이제 어떤 랜딩페이지든 추가하면 바로 사용할 수 있게 됐습니다.
5단계: 기타 개선 사항들
히스토리 관리 기능 추가했습니다. 이전 버전으로 복원하거나 마음에 안 드는 결과물은 삭제가 가능해요.
한국어가 포함된 웹사이트의 스크린샷
소소하게 Tablet/Mobile 뷰 기능도 추가했습니다.
그리고 마지막으로 ! 성능 최적화도 챙겼습니다:
R2에 저장할 때 원본 PNG 그대로 쓰면 페이지가 무거워지잖아. Cloudflare Workers로 WebP 자동 변환하는 로직 추가해줘.Claude가 이미지 업로드 시점에 WebP 포맷으로 자동 변환하고 압축하는 로직을 추가했습니다.
랜딩페이지 로딩 속도가 훨씬 빨라졌어요. 이건 손쉽게 성공했습니다!
녹색 배경의 웹사이트 스크린샷
핵심 기능:
랜딩페이지 영역 선택 → AI 이미지 자동 생성
브랜드 스타일 프리셋 시스템 (6가지 무드 + 커스텀 색상)
이미지 타입별 최적화 (히어로/배너, 스팟/아이콘, 카드)
Cloudflare R2 자동 업로드 & WebP 변환
Git 기반 자동 배포
이미지 생성 히스토리 관리 & 복원
여러 랜딩페이지 프로젝트 동시 관리
앞으로의 계획
이미지 삽입 더 자유롭게
Ghost Drop Zones를 더 정교하게 개선
블록 내부의 특정 위치에도 이미지 삽입 가능하도록
팀 전체 배포
팀원 누구나 접속해서 사용할 수 있게 배포 예정
프로젝트별 Visual Guide를 공유하면, 팀 전체가 일관된 브랜드 이미지 생성 가능
Special thx to Claude ...
클로드의 연말 선물 덕분에 ^^ 🎁 보다 인텐시브하게 작업할 수 있었던 것 같네요.
읽어주셔서 감사합니다.
