AI로 생성한 랜딩 페이지는 몇 분 만에 90% 정도 완성되는 경우가 많습니다. 구조와 타이포그래피가 이미 정리되어 있고 핵심 메시지도 승인된 상태입니다. 문제는 마지막 10%에서 생깁니다. 제목이 너무 일반적이거나 가치 제안 문단을 더 구체화해야 하거나 CTA가 실제 행동으로 이어지지 않을 수 있습니다.
이때프롬프트로 전체를 재생성하는 함정에 빠지기 쉽습니다. “제목을 더 설득력 있게 바꾸고 CTA도 수정해 줘”처럼 범위가 넓은 요청은 모델이 전체 HTML을 다시 만들도록 할 수 있습니다. 승인된 스타일, 반응형 클래스, 브랜드 색상, 레이아웃 세부 요소가 의도치 않게 변하면서 5분짜리 수정이 한 시간짜리 회귀 점검으로 바뀝니다.
AI 타깃 리파인먼트는 먼저 시각적 변경 권한 범위를 정합니다. 바꿔도 되는 요소를 선택하고 원하는 결과를 설명한 뒤 선택하지 않은 DOM은 편집 컨텍스트에서 제외합니다. 이 글에서는 RelayGrid 고객 온보딩 랜딩 페이지를 예로 방법을 설명합니다.
마지막 단계에서 전체 재생성이 실패하는 이유
생성형 AI나 vibe coding 도구가 부분 수정을 위해 페이지 전체를 다시 쓰면 다음 문제가 자주 발생합니다.
- 스타일과 클래스의 변형: Tailwind 유틸리티, 인라인 CSS, 컨테이너 너비가 바뀌어 반응형과 그리드가 깨집니다.
- 콘텐츠 이동: 푸터 링크, 고객 사례, 보조 문구처럼 대상이 아닌 카피가 바뀌거나 사라집니다.
- 검토 부채: 제목 하나를 확인하는 대신 프롬프트마다 페이지 전체를 검증해야 합니다.
해결책은범위가 있는 권한 부여입니다. 지정한 DOM 노드만 조작하고 문서의 나머지는 보호하세요.
선택할 것과 보호할 것을 정하는 의사결정 매트릭스
타깃 리파인먼트는 모든 요청을 작게 만드는 것이 아닙니다. 선택 범위를 목표와 일치시키는 것입니다.
| 목표 | 선택할 요소 | 보호할 요소 |
|---|---|---|
| 가치 제안을 명확하게 | 히어로의 메인 헤드라인과 서브헤드 | 내비게이션, 제품 목업, 배지, 배경 |
| 전환 행동을 변경 | 메인 CTA 버튼 | 보조 버튼, 링크, 신뢰 요소 |
| 섹션을 번역하거나 재설계 | 섹션 전체 컨테이너 | 인접 섹션, 전역 헤더, 푸터 |
이렇게 하면 각 반복 작업의 변경 범위를 분명하게 확인할 수 있습니다.
5단계 타깃 리파인먼트 워크플로
RelayGrid 예시의 목표는 레이아웃, 제품 일러스트, 고객 증거는 건드리지 않고 B2B 독자에게 더 강하게 전달되도록 히어로를 개선하는 것입니다.
1단계: 안정적인 HTML 기준선 만들기
새 프롬프트가 아니라 기존 HTML에서 시작하세요. HtmlDrag AI Refinement에서는 파일 업로드, 코드 붙여넣기, URL 가져오기를 지원합니다. 독립 실행형 HTML은 스타일시트, 클래스, DOM 계층을 재현 가능한 기준으로 유지합니다.
그림 1: 기존 HTML을 가져오면 범위가 제한된 수정의 안정적인 기준선이 만들어집니다.
렌더링한 뒤 구조를 점검하세요. 더 이상 메시지를 뒷받침하지 않는 텍스트와 이미 사용할 수 있는 시각 요소를 구분합니다.
그림 2: 구조와 제품 카드가 이미 작동하므로 제목과 CTA만 더 구체화합니다.
2단계: 수정 대상을 정확히 분리하기
“히어로를 업데이트해 줘”라고 쓰는 대신 요소를 하나씩 선택합니다. 여기서는 번호가 있는 마커 세 개를 만듭니다.
- 마커 1: 메인 헤드라인
<h1>(“Customer onboarding, made simpler.”). - 마커 2: 설명 문단.
- 마커 3: 메인 버튼(“See the platform”).
제품 대시보드, 상단 배지, 보조 버튼, 고객 로고는 의도적으로 선택하지 않습니다.
그림 3: 시각 마커가 각 DOM 노드와 정확한 지시를 연결합니다.
3단계: 지정과 보호를 함께 담은 프롬프트 작성
실무 프롬프트는 명확한 변경 지시와 보호 조항을 함께 담습니다. 각 번호에 원하는 결과를 연결하고 선택하지 않은 코드는 바꾸지 않는다고 명시합니다.
1. Replace the headline with: Turn every customer handoff into faster first value.
2. Replace the supporting paragraph with: Give your B2B onboarding team one shared plan for owners, milestones, and blockers—so customers reach first value with less chasing.
3. Change the primary CTA label to: Book an onboarding walkthrough. Change its background color to #153852. Keep its white text, current padding, rounded shape, and placement.
Guard Clause: Do not change any unmarked content, layout, product preview, navigation, customer proof, or other buttons.
그림 4: 마커별 문구·색상 변경과 선택하지 않은 영역의 보호를 한 번에 지정합니다.
결과가 나오면 한 가지만 확인하세요. 대상 노드는 올바르게 바뀌었고 보호한 부분은 그대로인가요?
그림 5: 기존 구조를 유지한 채 새 메시지와 CTA 색상이 적용되었습니다.
4단계: 점점 더 작은 마이크로 패스로 반복하기
한 번의 거대한 프롬프트로 완벽하게 만들려고 하지 마세요. 감소형 반복에서는 다음 요청일수록 대상 요소를 줄입니다.
두 번째 패스에서는 업데이트된 문단 하나만 선택하고 크기, 색상, 너비, 위치는 유지한 채 짧게 만듭니다.
그림 6: 두 번째 마이크로 패스는 문단을 간결하게 만드는 데만 집중합니다.
결과는 “One shared onboarding plan for every owner, milestone, and blocker.”입니다. 한 요소로 범위를 줄이면 레이아웃에 미치는 부수 효과가 작아집니다.
그림 7: 마이크로 패스로 텍스트는 간결해졌지만 제목, CTA, 시각적 계층은 그대로입니다.
5단계: 전체 블록 변환과 비동기 대기열 다루기
여러 하위 노드를 함께 바꿔야 한다면 전체 컨테이너를 하나의 의미 단위로 표시하세요. 그래야 AI가 제목, 설명, 버튼 사이의 의미적 일관성을 유지할 수 있습니다.
요소 단위 선택은 마이크로카피에 적합합니다. 번역이나 캠페인 변경처럼 제목, 설명, 버튼을 함께 바꿔야 할 때는 섹션 컨테이너 전체를 의도적으로 선택하세요.
그림 8: 섹션 안의 모든 요소를 하나의 단위로 바꿔야 할 때 전체 선택을 사용합니다.
여러 노드를 바꾸는 작업은 관리되는 대기열에 들어갈 수 있습니다. “Waiting for an available AI slot”은 실행을 기다리는 중이라는 뜻이며 완료 결과가 아닙니다. 최종 렌더링이 보일 때까지 결과로 간주하지 마세요.
그림 9: 대기 상태는 작업이 진행 중이라는 뜻이지 번역 결과가 표시됐다는 뜻이 아닙니다.
하이브리드 연결: AI 프롬프트에서 비주얼 에디터로
픽셀 단위 정렬이나 작은 세부 조정은 자연어만으로 예측하기 어렵습니다. “이 버튼을 4픽셀 아래로 이동해 줘” 같은 요청은 에디터에서 직접 확인하는 편이 안전합니다.
AI는 의미 변환과 콘텐츠 재구성에 강하지만 픽셀 단위 조정은 자연어만으로 예측하기 어렵습니다.
타깃 리파인먼트로 콘텐츠를 정리한 뒤 비주얼 에디터에서 마무리하는 하이브리드 워크플로를 사용하세요. HtmlDrag의 Open in Editor에서는 다음을 할 수 있습니다.
- 요소와 컴포넌트 삽입: 컨테이너, 배지, 아이콘, 카드를 추가합니다.
- 표 삽입 및 편집: 모든 마크업을 직접 쓰지 않고 비교표나 가격표를 만듭니다.
- 요소 잠금: 승인된 섹션과 브랜드 자산을 보호합니다.
- 삭제 및 정리: 플레이스홀더와 오래된 블록을 제거합니다.
- 링크와 대상 관리: UTM URL, 앵커, 외부 이동 경로를 추가합니다.
- 버전 관리와 내보내기: 스냅샷을 저장하고 깔끔한 HTML을 내보냅니다.
그림 10: 비주얼 에디터에서 직접 수정, 삽입, 버전 관리가 적용된 HTML 내보내기를 할 수 있습니다.
타깃 HTML 리파인먼트를 위한 프롬프트 패턴
통제된 수정을 실행하려면 아래의 검증된 패턴으로 프롬프트를 구성해 각 반복 작업의 정확도를 높이세요.
| 목표 | 패턴 |
|---|---|
| 가치 제안 | Update only marked element [1]. Rewrite the heading to focus on [business value]. Keep typography and responsive sizing intact. Do not touch unmarked elements. |
| CTA 변경 | Update only marked button [2]. Change the label to [new action]. Update the background to [hex color] while preserving radius, padding, and position. Guard adjacent links. |
| 문장 줄이기 | Update only marked paragraph [1]. Shorten it to under 15 words about [key benefit]. Maintain line-height, color, and alignment. Do not alter surrounding containers. |
제출 전 체크리스트
- 기준선 고정: 전체 HTML과 안정적인 의존성을 불러옵니다.
- 최소 범위 사용: 바꿔야 할 DOM 노드만 표시합니다.
- 번호 연결: 각 요소에 하나의 지시를 대응시킵니다.
- 보호 조항 추가: 선택하지 않은 콘텐츠와 레이아웃을 바꾸지 않도록 합니다.
- 점점 작게 반복: 다음 요청일수록 범위를 줄입니다.
- 비주얼 에디터로 전환: 표, 링크, 결정적인 세부 조정은 에디터에서 처리합니다.
- 내보내기 전 비교: 선택하지 않은 영역을 기준선과 대조합니다.
자주 묻는 질문
HTML 페이지 전체를 다시 생성하면 왜 스타일이 깨지나요?
대규모 언어 모델은 토큰 단위로 텍스트를 확률적으로 생성합니다. 한 줄의 문구를 바꾸려고 수백 줄의 HTML을 다시 출력하면 클래스가 바뀌거나 반응형 브레이크포인트가 빠지고 DOM 순서가 달라져 시각적 회귀가 발생할 수 있습니다.
타깃 리파인먼트로 Tailwind CSS와 인라인 스타일도 수정할 수 있나요?
가능합니다. 선택한 DOM 범위 안에서만 동작하므로 해당 노드의 클래스나 인라인 스타일을 읽고 전역 CSS는 건드리지 않은 채 로컬 변경을 적용합니다.
요소를 텍스트로 설명하는 것보다 시각 마커가 좋은 이유는 무엇인가요?
“제목 아래 두 번째 버튼” 같은 설명은 모호할 수 있습니다. 시각 마커는 정확한 DOM 요소에 직접 연결되어 모델의 추측을 없앱니다.
언제 AI 리파인먼트에서 비주얼 에디터로 전환해야 하나요?
콘텐츠 작성, 메시지 전환, 톤 조정, 구조화된 문장 재작성에는 AI를 사용하세요. 요소 정렬, 표 서식, 민감한 컴포넌트 잠금, 링크 삽입, 깔끔한 HTML 내보내기에는 비주얼 에디터를 사용합니다.
마무리: 다시 쓰지 말고 정밀하게 다듬으세요
이미 작동하는 AI 생성 랜딩 페이지를 메시지가 바뀔 때마다 다시 만들 필요는 없습니다. HTML을 불러오고, 올바른 노드를 표시하고, 범위를 정의한 뒤 결과를 확인하고 다음 패스를 결정하세요. 전체 블록을 바꿔야 할 때만 선택 범위를 의도적으로 넓히면 됩니다.
이렇게 하면 리파인먼트 결과를 검증할 수 있고 마지막 사람의 판단은 비주얼 에디터에서 유지됩니다. HtmlDrag를 사용하면 나머지 코드를 다시 쓰지 않고 마지막 수정을 완료할 수 있습니다.