클로드 코드로 상세페이지 공장 만들기

외주비 150만 원 아끼는 '상세페이지 자동화 공장' 구축법

저는 마케터가 아닙니다. 상세페이지 전문가는 더더욱 아니죠. 어떤 카피가 클릭을 부르는지, 사진은 어디에 배치해야 잘 팔리는지, 폰트 크기는 몇이 적당한지... 솔직히 잘 모릅니다.

하지만 마케터 없는 조직에서 일한다는 건 그런 걸 따질 여유가 없다는 뜻이기도 합니다. 자사몰 운영부터 SNS 콘텐츠, 상세페이지 작업까지 일단 쳐내야 하는 제너럴리스트가 되어야 하니까요.

이번에도 새 제품이 나왔습니다. 제품을 팔려면 상세페이지가 있어야겠죠. 제품군을 늘릴 때마다, 시즌이 바뀔 때마다, 채널을 추가할 때마다 새로 만들어야 합니다. 그때마다 외주를 맡기면 비용은 150만 원, 기간은 2주가 소요됩니다. 배보다 배꼽이 더 크죠.

그렇다고 제가 직접 포토샵을 잡고 앉아 있으면? 그건 더 '배보다 배꼽'입니다. Canva를 쓰면 되지 않냐고요? 물론 되죠. 하지만 그것도 '딸깍' 한 번에 끝나는 일 아니에요. 매번 사람이 앉아서 요소를 끌어다 놓고, 맞추고, 고쳐야 하는 반복 노동이니까요.

저는 상세페이지 전문가는 아닙니다. 하지만 '딸깍'의 메커니즘은 잘 알아요. 터미널이라는 검은 창에 명령어 한 줄 치면 알아서 결과가 나오는 시스템, 제품 정보만 바꿔 끼우면 같은 품질이 반복되는 구조. 바로 '공장'입니다.

이 글에서 알려드리는 건 '잘 팔리는 상세페이지 제작법'이 아닙니다. 대신 할 일 많은 제너럴리스트를 위해, 상세페이지가 '딸깍'으로 나오는 공장을 지어 업무를 자동화하는 법을 공유하려고 합니다.

'딸깍'을 어떻게 할까?

가장 먼저 떠오르는 건 역시 AI죠. ChatGPT에게 "상세페이지 만들어줘"라고 하면 뭔가 나오긴 나옵니다. '나노바나나' 같은 툴도 비슷해요. 프롬프트만 넣으면 상세페이지가 뚝딱 만들어지니까요.

하지만 이 방식에는 치명적인 단점이 하나 있습니다. 결과물이 '이미지'로 나온다는 거예요. 이미지가 뭐가 문제냐고요? 수정을 하려고 마음먹는 순간, 지옥이 시작되거든요.

보시는 것처럼 한글은 다 깨져 있습니다. 이걸 수정하려고 하면 마음대로 되지가 않아요. "세 번째 줄 문장만 바꿔줘"라고 해도 AI는 전체 이미지를 새로 그려버립니다. 색깔 하나, 사진 위치 하나 바꾸고 싶어도 매번 처음부터 다시 시작해야 하죠.

이러면 공장이 될 수 없습니다. 진짜 공장은 라인 위에서 부품 하나만 갈아 끼우면 완성본이 나오는 '부분 교체'가 가능해야 하니까요. 결국 이미지가 아니라 '코드'여야 했습니다. 수정하고 싶은 부분만 콕 집어 고칠 수 있는 데이터 형태 말이죠. 

그래서 집요하게 다른 방법을 찾았고, 드디어 해답을 발견했습니다. 바로 Pencil.dev입니다.

Pencil은 뭐가 다를까?

애플의 아이폰 소개 페이지를 떠올려보세요. 멋진 제품 사진이 있고, 기능 설명이 이어지다 마지막에 구매 버튼이 나오죠. 코드로 만든 웹페이지인데, 우리가 아는 상세페이지와 구조가 똑같습니다. 우리가 이번에 만드는 것도 바로 이런 '웹페이지 형태의 상세페이지'입니다.

이 일을 가능하게 해주는 도구가 바로 Pencil.dev예요. 원래 웹페이지 제작이나 앱 UI 디자인을 할 때 쓰는 도구라 상세페이지 전용 툴은 아니지만, 그만큼 웹의 정밀함을 가지고 있죠.

디자인 도구인 피그마(Figma)를 아신다면 '더 쉬운 피그마'라고 생각하시면 됩니다. 피그마를 모르신다면, '웹 기반 디자인 툴'이라고 이해하셔도 충분해요. Pencil은 여기에 한 단계 더 나아가, 코드를 기반으로 그림을 그리게 해주는 도구입니다.

ChatGPT나 나노바나나와 뭐가 다른가?

핵심은 결국 코드입니다. 코드로 만들면 모든 레이어가 살아 있어요. 글자 하나 바꾸는 데는 1초면 충분하고, 전체 색감을 바꾸고 싶을 땐 태그 한 줄만 손대면 되죠. 마켓플레이스 업로드를 위해 이미지 파일이 필요하다면? 클로드 코드가 알아서 PNG로 캡처까지 해줍니다.

클로드에게 3가지를 이해시켜야 '공장'이 돌아간다

처음에는 저도 그냥 시켜봤어요. "사과 상세페이지 만들어줘." 결과는 그럴듯했지만, 실무에 쓰기엔 어딘가 허술했죠. 나중에야 이유를 알았습니다. 클로드가 ① 제품을 몰랐고, ② 도구(Pencil) 사용법도 몰랐으며, ③ 상세페이지의 문법조차 몰랐기 때문입니다.

여기서 사람이 할 일은 ①번뿐입니다. ②와 ③은 클로드에게 시키면 되거든요.

1단계: 제품 정보 주기

폴더 하나를 만들고 제품 자료를 넣습니다. 이때 지켜야 할 규칙은 딱 하나예요. 

아는 것은 적고, 모르는 것은 비워둔다.

상품명, 구성, 크기, 사용법 등 확인된 사실만 적으세요. 추측되는 내용은 절대 쓰지 마세요. 모르는 부분은 비워두면 클로드가 알아서 TO DO 목록으로 남겨줍니다.

사실만 적고, 모르는 건 비워두세요. 그래야 AI가 지어내지 않습니다. 이건 단순한 품질 원칙이 아닙니다. 확인되지 않은 수치나 효과를 AI가 임의로 생성했을 때, 그 책임은 결국 판매자에게 돌아옵니다. 모르면 비워두는 것이 가장 확실한 안전장치입니다.

2단계: 도구와 법칙 학습시키기

이제 클로드 코드에게 리서치를 시킬 차례입니다. 딱 10분이면 끝납니다.

• 도구 학습: "Pencil.dev 공식 문서를 읽고 사용법을 정리해서 리포트로 저장해줘."
• 법칙 학습: "이 카테고리에서 잘 팔리는 상세페이지를 리서치해줘. 레이아웃, 섹션 구조, 카피 패턴을 분석해서 리포트로 저장해."

이 리포트들이 폴더에 쌓이면, 클로드는 도구 사용법과 상세페이지 제작 노하우를 학습한 상태가 됩니다. 이제 공장을 돌릴 준비가 끝난 셈이죠.

38분 만에 첫 번째 상세페이지 뽑아내기

1. 도구 설치하기

상세페이지 공장을 돌리기 위해 필요한 도구는 딱 두 가지입니다.

• 클로드 코드(Claude Code): 터미널에서 일하는 'AI 일꾼'입니다. 파일을 직접 만들고, Pencil을 조작하며, 마지막 PNG 캡처까지 담당하죠.
• Pencil: AI가 그림을 그리는 '디자인 에디터'입니다. 클로드 코드가 MCP(Model Context Protocol)를 통해 접속하여 레이아웃을 잡고 색상을 입히는 작업실 역할을 합니다.

2. 도구 연결하기: 클로드와 Pencil 동기화하기

연결 순서가 틀리면 클로드가 Pencil에 접속하지 못합니다. 아래 순서를 꼭 지켜주세요.

1. Pencil을 먼저 실행하고, 'New Pen File' 버튼을 눌러 빈 화면을 만듭니다.

2.  Cmd+S(윈도우 Ctrl+S)를 눌러 프로젝트 폴더에 Pen 파일을 저장합니다. 저장된 파일이어야 클로드가 인식할 수 있습니다.

3. 터미널로 돌아가 클로드 코드를 실행합니다.

4. Pencil 상단의 Agents 영역 또는 연결 설정 화면에서 연결 상태를 확인합니다.

3. 상세페이지 만들기

도구가 연결되었다면 이제 공장을 가동할 차례입니다. 사람이 할 일은 적절한 타이밍에 프롬프트를 입력하는 것뿐입니다.

1단계: 기획 리포트 뽑기

먼저 제품의 정보를 파악하고 뼈대를 잡아야 합니다. 클로드에게 다음 '한 줄 프롬프트'를 넣어보세요. 

약 10분 뒤, 폴더에는 AI가 공정별로 정교하게 분류한 11개의 전문적인 리포트 파일이 생성됩니다.

빠르게 첫 결과물을 확인하고 싶다면 위 한 줄 프롬프트부터 써보세요. 반대로 처음부터 리서치, 검수, 촬영 목록, 디자인 기준까지 한 번에 정리하고 싶다면 아래 마스터 프롬프트를 쓰는 편이 좋습니다.

2단계: Pencil로 조립하기

설계도가 나왔으니 이제 실제 디자인을 할 차례입니다. 여기서 두 가지가 핵심입니다.

1. "Pencil MCP를 사용해서"라는 문구를 반드시 포함하세요. 그래야 클로드가 코드를 짜는 대신 Pencil을 직접 조작합니다.

2. 섹션별로 나누어 요청하세요. 전체 페이지를 한꺼번에 만들라고 하면 클로드가 과부하로 내용을 뭉개뜨릴 수 있습니다.

히어로 섹션이 완성되면 다음 섹션을 이어서 요청합니다.

클로드에게 그냥 "카드 만들어줘"라고 하면 아주 투박한 기본 박스를 그려줍니다. 하지만 여기에 '은은한 그림자(Soft shadow)'와 '둥근 모서리(Round corner)'라는 주문을 더하는 것만으로도, 디자이너가 만진 것 같은 상세페이지가 완성됩니다.

4. 스타일 한 번에 바꾸기

Pencil의 진가는 여기서 드러납니다. 디자인 스타일 태그 200여 개가 내장되어 있어, 사람이 폰트나 간격을 일일이 맞출 필요가 없습니다.

정말 한 줄이면 충분합니다. 클로드가 Pencil의 내장 태그를 리서치해, 그 느낌에 맞는 컬러, 폰트, 간격을 찾아 즉시 적용합니다. 이게 어떻게 가능할까요? 핵심은 조합입니다. 클로드에게 내리는 추상적인 명령을 Pencil의 구체적인 디자인 태그로 번역해주는 것이죠.

앞선 버전이 밝고 친근한 느낌이었다면, 이번에는 블랙과 골드 톤을 사용해 프리미엄 제품의 감성을 입혀보겠습니다. 여러분은 그저 아래 표처럼 원하는 느낌을 말하기만 하면 됩니다.

이 방식은 단순히 상세페이지에만 국한되지 않습니다. 작업 규격을 마켓플레이스용(780px)에서 웹페이지용(1440px)으로 키우면, 우리가 흔히 보는 SaaS 랜딩 페이지나 앱 소개 페이지도 똑같은 방식으로 생성됩니다.

5. 마켓플레이스에 올려야 한다면: 이미지로 뽑아내기

쿠팡이나 스마트스토어 같은 마켓플레이스는 웹페이지 코드가 아닌 이미지 파일(JPG, PNG)을 요구합니다. 반면 Pencil은 웹 표준 규격의 코드로 결과물을 만들죠. 이 마지막 간극은 클로드 코드가 메워줍니다.

한 줄이면 됩니다. 클로드 코드가 직접 브라우저를 실행해 캔버스 화면을 촬영하고, 즉시 업로드 가능한 고화질 PNG 파일로 저장해 줍니다.

기획부터 디자인, 그리고 최종 파일 추출까지. 드디어 여러분의 첫 번째 AI 상세페이지 공정이 완벽하게 마무리되었습니다.

진짜 공장을 세운다: 반복 업무를 자동화로 끝내기

상세페이지 하나를 만드는 데 단 38분이 걸렸습니다. 성공적으로 첫 결과물을 뽑아냈지만, 한 가지 의문이 생깁니다.

그럼 신제품이 나올 때마다 이 긴 프롬프트들을 메모장에서 복사해 또 순서대로 붙여넣어야 하나?

아닙니다. 우리는 지금 포토샵 이미지가 아니라 터미널에서 돌아가는 코드를 다루고 있습니다. 즉, 작업 순서 자체를 하나의 자동화 라인으로 구워버릴 수 있다는 뜻입니다.

1단계: 작업 공정 마스터 파일 만들기

클로드 코드는 자신이 어떤 순서로 기획하고 디자인했는지 모두 기억하고 있습니다. 이제 이 일련의 과정을 언제든 꺼내 쓸 수 있는 지침서로 만들 차례입니다.

이제 클로드는 스스로 맥락을 분석해 make_detail_page.md 같은 상세페이지 마스터 지침서를 만들어냅니다. 공장의 설계도가 완성된 셈이죠.

2단계: 새로운 제품 던져넣기

이제 새로운 제품인 '샤인머스캣'을 팔아야 한다면? 여러분이 할 일은 딱 두 가지뿐입니다.

1. 빈 폴더에 샤인머스캣 사진과 제품 정보 자료를 넣습니다. 

2. 터미널에 이 한 줄을 입력합니다.

"이 폴더 정보를 읽고, 아까 만든 상세페이지 공장 돌려."

3단계: 결과물 수확하기 (카테고리 확장)

끝입니다. 이제 커피 한 잔 마시며 화면을 지켜보세요. 터미널 안의 AI가 지침서를 읽고 알아서 움직이기 시작합니다. Pencil을 켜서 레이아웃을 잡고, 카피를 쓰고, 법적 위험 지점을 검수한 뒤 최종 PNG 파일까지 툭 뱉어냅니다.

이제 상세페이지 공장을 돌리세요

상세페이지를 만드는 건 AI가 합니다. 사람은 재료를 주고, 최종 결과를 고를 뿐입니다. 전체 공정을 요약하면 다음과 같습니다.

중요한 것은 이 시스템이 상세페이지에만 머물지 않는다는 점입니다. 랜딩 페이지, SaaS 소개 페이지, 앱 UI 디자인 등 시각적 결과물이 필요한 곳이라면 어디든 같은 시스템이 적용됩니다.

처음 공장을 세우는 과정은 조금 생소할 수 있습니다. 하지만 한 번 라인을 뚫어놓으면, 그다음부터는 정말 '딸깍' 한 번에 결과물이 쏟아집니다. 이제 여러분의 공장을 가동해 보세요.

부록: 공장 가동 후 최종 점검 매뉴얼

결과물이 나왔다면, 마지막으로 이 리스트를 체크하며 완성도를 높이세요. AI가 놓칠 수 있는 디테일을 잡아내는 것이 공장장으로서 여러분이 해야 할 마지막 업무입니다.

1. 텍스트 검수 체크리스트

2. 법적 컴플라이언스 체크리스트

✅  AI 기본법 (2026.1.22 시행)

• 상세페이지 내 텍스트에 'AI 생성' 표기가 되어 있는가?
• 생성된 제품 이미지에 'AI 생성' 워터마크나 표기가 있는가?
• 위 표기들이 소비자가 쉽게 볼 수 있는 위치에 배치되었는가?

✅ 표시광고법 준수

• 최상급 표현을 삭제했는가? (예: 최고, 100%, 독보적)
• 수치 근거를 확인했는가? (예: 당도, 무게, 성능 수치)
• 허위·과장 표현 없이 사실에 기반하여 작성되었는가?

✅ 필수 정보 고지

• 원산지 정보가 정확하게 기재되었는가?
• 가격·배송비가 최신 상태인가?
• 교환/환불 정책 및 AS 연락처가 명시되었는가?
• 미확인 항목은 TO DO로 남아있는가?