🎁AI로 억대 매출! 초보자도 가능한 상세페이지 제작 노하우 대공개 (피그마+GPT 활용)
AI로 뚝딱! 고퀄리티 상세 페이지 만들기 (중학생도 이해 가능!)
안녕하세요! 오늘은 AI를 이용해서 멋진 상세 페이지를 만드는 방법을 알려줄게요. 복잡한 코딩이나 어려운 용어는 싹 빼고, 누구나 쉽게 따라 할 수 있도록 설명해 줄 테니 끝까지 집중해 주세요!
1. AI, 너 누구니?
우리가 오늘 쓸 AI는 크게 세 가지야.
- 재미나이: 이건 마치 전략가 같아. 우리 제품이 어떤 점이 좋고, 고객들이 뭘 원하는지, 경쟁사들은 어떻게 하고 있는지 분석해서 상세 페이지의 뼈대를 잡아줘.
- 클로드 AI: 얘는 설계자 역할이야. 재미나이가 잡아준 뼈대에 살을 붙여서 상세 페이지의 레이아웃을 만들고, 어떤 내용을 어디에 넣을지 구조를 설계해 줘.
- 피그마: 이건 디자이너의 작업실이야. 클로드 AI가 만들어 준 디자인을 가져와서 우리가 직접 수정하고 꾸미는 곳이지.
2. AI, 어떻게 쓸까? (단계별로 따라 해봐!)
Step 1: 제품 정보 분석 (재미나이)
먼저 우리 제품에 대한 정보를 재미나이에게 알려줘야 해. 제품 설명뿐만 아니라, 경쟁사 제품을 써본 사람들의 솔직한 후기까지 같이 보여주면 더 좋아.
- 재미나이에게 할 일:
- 우리 제품 정보 입력하기
- 경쟁사 제품 후기 캡처해서 보여주기
- "이 제품으로 상세 페이지 기획 보고서 만들어줘!" 라고 요청하기
재미나이는 이렇게 분석해서 보여줄 거야.
- 고객들이 가장 불만스러워하는 점 (Top 5): 어떤 점이 제일 문제인지 알려줘. 이게 바로 우리가 해결해 줄 수 있는 기회야!
- 고객들이 진짜 원하는 것 (Top 3): 고객들이 뭘 원하는지 알아야 거기에 맞춰서 우리 제품의 장점을 어필할 수 있겠지?
- 우리 제품만의 특별한 장점 (USP)과 배치 순서: 어떤 순서로 우리 제품의 장점을 보여줘야 고객들이 확 끌릴지 알려줘.
Step 2: 경쟁사 분석 (재미나이)
이번엔 경쟁사 상세 페이지를 재미나이에게 보여주고 분석을 맡길 거야. 사람이 직접 하면 오래 걸리지만, AI는 3분 만에 뚝딱 끝내줘!
- 재미나이에게 할 일:
- 경쟁사 상세 페이지 캡처해서 보여주기
- "이 상세 페이지에서 핵심 메시지, 고객의 고민, 차별점, 증거 활용 방식 등을 분석해 줘!" 라고 요청하기
재미나이는 이렇게 표로 깔끔하게 정리해 줄 거야.
- 경쟁사 분석 결과: 뭐가 강점이고 약점인지 한눈에 볼 수 있게 정리해 줘.
Step 3: 상세 페이지 기획안 만들기 (재미나이)
이제 분석한 내용을 바탕으로 상세 페이지의 기획안을 만들어 달라고 할 거야.
- 재미나이에게 할 일:
- "분석한 내용을 바탕으로 상세 페이지 전체 뼈대와 카피 초안을 만들어줘. 고객 후기를 참고해서 자연스러운 문장으로 써줘!" 라고 요청하기
재미나이가 기획안을 만들어주면, 좀 딱딱하게 느껴질 수 있어. 그럴 땐 이렇게 요청해 봐.
- 카피 자연스럽게 만들기: "좀 더 고객 입장에서 설득력 있게, 우리가 실제로 쓰는 말처럼 바꿔줘!"
Step 4: 상세 페이지 디자인 만들기 (클로드 AI)
이제 재미나이가 만들어준 기획안을 클로드 AI에게 넘겨줄 차례야. 클로드는 이걸로 실제 쇼핑몰에 바로 올릴 수 있는 수준의 상세 페이지 디자인을 만들어 줄 거야.
- 클로드 AI에게 할 일:
- 재미나이가 만들어준 기획안과 제품 정보를 다시 한번 학습시키기
- "이 내용을 바탕으로 쇼핑몰에 바로 올릴 수 있는 상세 페이지 HTML 파일을 만들어줘. 폰트는 '프리텐다드'로, 색상은 화이트, 밝은 그레이 위주로, 포인트 컬러는 레드로 해줘. 글자 크기 대비도 신경 써서 가독성 좋게 만들어줘!" 라고 요청하기
클로드는 이렇게 반응형 디자인으로 모바일에서도 보기 좋게 디자인까지 자동으로 만들어줘.
Step 5: 디자인 다듬기 (피그마)
클로드 AI가 만들어준 디자인을 피그마로 가져와서 마지막으로 다듬는 단계야. 여기가 바로 진짜 실력을 보여줄 때야!
- 피그마에서 할 일:
- HTML2Design 확장 프로그램 설치: 웹페이지를 피그마에서 편집 가능한 상태로 다운로드해주는 유용한 도구야.
- 클로드 AI 결과물 다운로드: 클로드 AI에서 '산출물 게시'를 누르고 링크를 복사해서 HTML2Design으로 다운로드해.
- 피그마로 불러오기: 다운로드한 파일을 피그마 플러그인을 이용해 불러와.
- 디자인 수정:
- 텍스트 크기 조절: 모바일에서도 잘 보이도록 텍스트 크기를 키우고, 줄 간격도 넉넉하게 조절해 줘.
- 레이아웃 변경: 섹션별로 메시지를 하나씩만 배치해서 전달력을 높여줘.
- 이미지 활용: 필요한 이미지는 GPT를 이용해서 빠르게 합성하거나 생성해서 넣어줘. (예: 제품을 들고 있는 모습, 비포 애프터 효과 등)
3. AI, 더 똑똑하게 쓰는 꿀팁!
- GPT 활용: 이미지를 만들거나 합성할 때 GPT를 활용하면 시간과 비용을 절약할 수 있어. "이런 느낌의 이미지를 만들어줘" 라고 구체적으로 요청하면 더 좋은 결과물을 얻을 수 있어.
- 프롬프트 연습: AI에게 원하는 결과물을 얻으려면 프롬프트(요청 문구)가 정말 중요해. 다양한 프롬프트를 연습하고, 고정 댓글에 있는 프롬프트 자료를 참고하면 큰 도움이 될 거야.
- 실무 경험: AI는 도구일 뿐, 결국 실무자의 경험과 센스가 더해져야 최고의 결과물이 나와. 오늘 배운 내용을 바탕으로 직접 만들어보고 계속 연습하는 게 중요해!
4. 마무리
어때? AI를 활용하면 복잡하고 오래 걸리던 상세 페이지 제작 과정을 훨씬 빠르고 쉽게 할 수 있다는 걸 알겠지? 오늘 배운 내용들을 잘 활용해서 여러분의 제품도 멋진 상세 페이지로 만들어보길 바라!
더 궁금한 점이 있다면 언제든지 물어봐! 다음 영상에서 더 유용한 정보로 돌아올게!