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

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

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

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

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

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

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

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

'딸깍'을 어떻게 할까?

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

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

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

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

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

Pencil은 뭐가 다를까?

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

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

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

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