처음부터 끝까지 한 줄로 요약하면 이렇습니다. 클로드코드로 "설계도(JSON 파일)"를 만들고, 피그마 플러그인으로 "24개 섹션 레이아웃"을 자동 생성한 뒤, 이미지만 교체하면 끝나는 워크플로우입니다. 제가 직접 만들었고, 오늘 전부 공개합니다.

❶ 왜 이 시스템이 '게임체인저'인지 알려드립니다

상세페이지 하나 만드는 데 보통 얼마나 걸리세요? 기획하고, 카피 쓰고, 디자이너한테 넘기고, 수정하고. 2주에서 3주는 기본이잖아요.

제가 겪었던 문제는 세 가지였습니다.

첫째, 반복 작업이 너무 많습니다. 상세페이지마다 섹션 구성이 비슷한데 매번 처음부터 다시 만들어야 해요. 둘째, 디자이너 리소스 병목입니다. 아무리 급해도 디자이너 일정이 안 맞으면 기다려야 합니다. 1인 셀러나 스몰 브랜드한테는 아주 치명적인 문제예요. 셋째, 품질 편차입니다. 담당자가 바뀌면 디자인 품질도 들쭉날쭉해집니다.

그래서 제가 원했던 건 딱 하나였습니다. 제품 정보만 넣으면 완성된 상세페이지가 자동으로 나오는 시스템. 기획, 레이아웃, 디자인까지 자동으로. 결과물은 피그마에서 바로 수정 가능하게요. 이 시스템을 쓰면 2~3시간이면 끝납니다. 10배 이상 빨라지는 겁니다.

❷ 시스템 구조 이해하기

핵심 원리는 3단계입니다.

첫째, 클로드코드가 설계도를 만듭니다. JSON 파일이라고 하는 건데, 레이아웃 정보가 담긴 파일이에요. 둘째, 피그마 플러그인이 이 설계도를 읽습니다. 셋째, 피그마에 완성된 레이아웃이 짠 하고 나타납니다.

건축에 비유하면 아주 이해가 쉬운데요. 클로드코드는 건축 설계사입니다. 피그마 플러그인은 시공팀이에요. 도면대로 건물을 짓죠. JSON 파일은 건축 도면이라고 이해하시면 됩니다.

여기서 중요한 포인트가 있습니다. 왜 하필 피그마를 사용했을까요? 기존 방식은 상세페이지를 기획하고, 키노트로 기획안을 만들고, 디자이너에게 넘기고, 디자이너가 다시 작업합니다. 새로운 방식은 완전히 다릅니다. 피그마로 기획이 끝나면 디자이너가 바로 작업을 시작할 수 있어요. 중간 단계가 사라지는 겁니다. 속도가 빨라지고 커뮤니케이션 비용도 줄어듭니다.

이 시스템의 또 다른 핵심은 24개의 섹션 표준 구조입니다. 잘 팔리는 상세페이지를 분석해서 만들었어요. 훅으로 시선을 잡고, 문제를 공감하고, 기능을 설명하고, 신뢰를 쌓고, 구매를 유도하는 흐름입니다. 제품 정보만 넣으면 이 구조에 맞춰서 자동으로 생성됩니다.

❸ 설치부터 실행까지 6단계

필요한 프로그램은 총 세 가지입니다. 안티그래비티, 클로드코드, 그리고 피그마 데스크톱 프로그램이에요. 웹 버전 말고 데스크톱 앱이 필요합니다.

설치 과정을 간단히 설명드릴게요.

첫 번째 단계는 프로젝트를 다운로드합니다. 제 깃허브에 접속해서 Download zip을 선택하세요. 두 번째 단계는 안티그래비티에서 프로젝트를 열어줘야 합니다. 파일에서 오픈 폴더를 클릭하고 다운받은 폴더를 선택하세요. 세 번째 단계는 피그마 플러그인을 설치해야 합니다. 피그마 데스크톱을 실행하고, 메뉴에서 Plugins → Development → Import plugin from manifest를 클릭합니다. 다운받은 프로젝트 폴더에서 figma-plugin 폴더를 열고, manifest.json 파일을 선택하면 됩니다. 한 번만 해두면 계속 사용이 가능합니다.

이제 실제로 상세페이지를 만드는 6단계입니다.

첫 번째, 제품 정보 준비입니다. 필요한 정보는 6가지예요. 제품명, 브랜드명, 핵심 기능 6가지, 타겟 고객, 핵심 차별점, 그리고 가격은 선택입니다.

두 번째, 클로드코드에게 JSON 파일 생성을 요청합니다. 안티그래비티에서 클로드코드 대화창을 열고, 제품 정보와 함께 요청하시면 됩니다. 팁을 하나 드리면, 경쟁사 상세페이지 레퍼런스 이미지를 함께 첨부하면 더 완성도 높은 결과물을 받아볼 수 있어요.

세 번째, 생성된 JSON 파일에서 코드를 복사합니다. output 폴더에서 JSON 파일 열고 전체 선택 후 복사해주세요.

네 번째, 피그마 플러그인에 붙여넣습니다. Figma 열고, Plugins → Development → Detail Page Layout Generator 클릭! 플러그인 창에 JSON 붙여넣고, 생성 버튼을 클릭하면 24개 섹션이 자동으로 생성됩니다.

다섯 번째, 이미지 교체입니다. "이미지 공간"이라고 적혀있는 회색 영역에 실제 제품 이미지를 넣으면 됩니다. 텍스트도 더블 클릭하면 편집할 수 있어요.

여섯 번째, PNG로 내보내기입니다. 전체 프레임을 선택하고 Export에서 내보내면 끝입니다.

❹ 수정 방법과 추가 팁

혹시 구조나 디자인을 바꾸고 싶으면 클로드코드에 요청하면 됩니다.

"FAQ 섹션 삭제해줘", "리뷰 섹션을 앞으로 옮겨줘", "브랜드 컬러를 파란색으로 바꿔줘", "메인 카피 폰트를 64픽셀로 키워줘"

이렇게 말하면 JSON 파일이 자동으로 수정됩니다. 코드를 직접 만질 필요가 전혀 없습니다. 그리고 디자인 시스템도 미리 세팅이 되어 있어요. 색상, 타이포, 레이어, 사이즈까지 전부 JSON에 포함되어 있어서 플러그인이 자동으로 적용합니다.

여기서 한 가지 현실 조언을 드리면, 이 시스템의 진짜 가치는 "시간 절약"입니다. 기존 방식으로 상세페이지를 만들면 2주에서 3주, 4명 정도가 필요했다면, 이 시스템을 사용하면 2~3시간 만에 한 명이서 작업할 수 있습니다. 품질도 표준화되고 수정도 실시간으로 가능해요. 이제 기획과 전략에 집중할 수 있는 겁니다.

다음 영상에서는 MCP 방식을 다룰 예정입니다. MCP는 Model Context Protocol의 약자인데요, 클로드코드가 피그마를 직접 조작하는 더 강력한 방식입니다. 설정은 복잡하지만 기능이 훨씬 더 많아요.

핵심 요약

1. Step 1에서 제품 정보 6가지를 준비하고, 클로드코드에 JSON 파일 생성을 요청합니다. 경쟁사 레퍼런스 이미지를 함께 첨부하면 퀄리티가 올라갑니다.

   
   

2. Step 2에서 피그마 플러그인으로 24개 섹션을 자동 생성하고, 이미지 교체와 텍스트 편집으로 마감합니다.

   
   

3. 마지막은 PNG로 내보내고, 구조나 디자인 수정이 필요하면 클로드코드에 자연어로 요청합니다. 코드를 직접 만질 필요가 전혀 없습니다.