챗GPT+피그마로 상세페이지 10분 자동 완성! 초현실적 워크플로우 대공개
상세 페이지 템플릿, AI로 어디까지 만들 수 있을까? (2026년 7월 기준)
아직도 상세 페이지 템플릿 찾고 있니? 피그마에서 AI 에이전트를 쓰거나, 미리 만들어둔 템플릿을 꺼내 쓰기도 하잖아. 그런데 이번 설문 보니까 많은 사람들이 제일 많이 쓰는 AI 툴이 바로 챗GPT래! 그래서 오늘은 챗GPT로 상세 페이지 템플릿을 어디까지 만들 수 있는지, 그리고 실제로 바로 쓸 수 있을 정도인지 직접 확인해 볼 거야.
단순히 페이지 구조만 만드는 게 아니라, 제품에 맞는 마케팅 이미지 방향이나 광고에 쓸 비주얼 컨셉까지 챗GPT 안에서 어떻게 잡을 수 있는지 보여줄게. 딱 10분이면 돼!
1. 챗GPT로 상세 페이지 템플릿 만들기, 어디까지 가능할까?
챗GPT로 상세 페이지 이미지를 만드는 영상 많이 봤을 거야. 나도 여러 번 소개해줬는데, 막상 만들어보면 문구 하나 바꾸는 것도 어렵고, 제품만 바꿔도 전체 디자인이 달라지거나, 내 상품에 맞게 수정하다가 결국 포기하는 경우가 많잖아.
그럼 챗GPT로는 내 제품에 맞는 템플릿을 계속 만들 수 있을까? 오늘은 그게 어디까지 가능한지 내가 직접 보여줄게.
챗GPT 들어가서 워크플로우로 들어가자.
너희들에게 직접 보여주기 위해 이렇게 물어봤어.
"피그마 디자인 플러그인으로 GPT에서 어떤 작업이 가능한지 궁금해."
이렇게 활용하면 좋은 점이 나오지. 상세 페이지 쪽으로 진행해 볼 건데, 아래 보니까 프레임 만들기, 광고 소재 제작 등등 이야기를 해주고 있어. 그런데 여기 보면 현실적으로 완성된 상세 페이지 디자인을 한 번에 뽑는 도구로 활용하기보다, 빠르게 구조화하고 반복 작업을 줄이는 도구로 쓰는 게 가장 좋다고 나와.
자, 그럼 어떻게 나오는지 한번 보자.
위에서 "프레임 만들기" 내용 그대로 복사해서 붙여넣고, 피그마랑 연결해 줄게.
주의! 피그마에서 유료 플랜(프로페셔널 이상)을 사용해야 가능해.
연결하면 "완성됐다"고 나오고, 이 내용은 기존에 내가 넣었던 기획을 가지고 알아서 진행한 거야.
어때? 텍스트, 이미지, 텍스트, 이미지... 챗GPT도 이건 시각화된 와이어프레임이 아니라고 해. 그래서 다시 요청했어.
이번엔 뭔가 섹션에 맞게 구조가 좀 달라졌지? 진짜 상세 페이지 섹션 디자인이 좀 나온 것 같기도 해.
먼저 왼쪽 레이어는 너무 정리가 잘 됐어. 01 섹션, 01 섹션 이렇게 프레임별로 잘 나눠졌는데, 안을 보니까 그냥 거의 얹혀져 있는 수준인 거 보여? 조금만 움직여도 다 틀어져서, 처음 디자인하는 사람들이 겪는 정렬도 안 되는 정말 이상한 디자인 나오기 딱 좋은 레이어 구조야.
이걸 어떻게 사용할 수 있을까? 못 써. 이걸 수정하는 게 너희들한테 더 오래 걸릴 거야.
그래도 이미지라도 좀 들어가면 좋지 않을까 해서 챗GPT한테 다시 물어봤는데, 이미지 업로드는 안 된대.
다른 제품으로도 한번 해봤어. 이번엔 상세 페이지 기획과 디자인 방향까지 다 넣어서 만들어 봤지. 확실히 조금 다르긴 한데, 이미지를 못 넣으니까 이미지 들어가야 되는 자리에 도형으로 알아서 만들었어. 너무 웃기지?
이것도 너무 힘들 거야. 기획 내용이 아무리 반영되었다 해도 디자인적으로 이렇게 변경하기가 더 어렵게 만들어 놨어. 사실 이것도 수정하는 게 더 오래 걸려. 사용할 수 없어.
2. 그럼 어떻게 활용해야 할까?
그럼 이제 이런 생각 들 거야. "이미지 생성해서 만드는 게 최선인가? 섹션별로 이미지 생성하는 게 너무 힘들던데."
작업에 따라 달라지겠지만, 챗GPT를 활용하는 방법은 나는 이 두 가지가 가장 좋다고 생각해.
- 상세 페이지 기획과 디자인 방향을 챗GPT에서 이미지화시키는 것: 너희들이 가장 많이 하는 방법이지. 워낙 잘 만들어 주기도 하고, 1688이나 도매 제품들은 빠르고 쉽게 만들 수 있어서 요즘 가장 많이 활용하는 방법 중 하나일 거야.
- 상세 페이지에 필요한 이미지만 생성하는 것: 이건 피그마나 너희들이 편한 툴을 사용해서 섹션별로 화면을 구성해 놓고, 거기에 맞는 이미지만 만들어서 넣는 방법이야. 그중에서도 피그마가 한 화면에 펼쳐 놓고 작업이 가능해서 가장 빠르고 수정도 추가도 훨씬 쉽다고 생각해.
그런데 여기서 또 한 가지가 있지. 지난번에 내가 말했던 피그마 에이전트 활용이야. 템플릿을 활용해서 에이전트에서 전체 이미지나 색상, 텍스트를 모두 변경해 달라고 요청하고, 수정이 필요한 부분들만 보완하는 거지. 이미지 수정하고 텍스트 간격이나 사이즈 조금씩 조정하면, 특히나 너희 제품들은 빠르게 완성하고 재사용까지 가능해.
그럼 뭐가 좋다는 거지?
이건 사실 작업 방향에 따라, 그리고 퀄리티가 어느 정도를 필요로 하느냐에 따라 각자 작업하는 방법에 따라 달라. 나는 개인적으로 챗GPT에서 만들어서 피그마로 가져와서 수정하는 방향을 가장 권장하고 싶어. 가져온 화면을 원본 파일로 만들 수도 있고, 그게 또 템플릿이 되고 그걸 에이전트에서 또 수정시키는 거지.
3. 상세 페이지 디자인에 도움이 되는 꿀팁 플러그인: 크리에이티브 프로덕션
이번에는 상세 페이지 디자인에 도움이 되는 꿀팁 플러그인을 소개해 줄게. 바로 "크리에이티브 프로덕션"이야.
캠페인 성과 보고, 컨셉 보드, 광고, 제품 이미지 변형분 등등... 너희들이 마케팅에 필요한 광고 이미지나 제품 이미지의 변형들을 챗GPT 워크플로우를 활용해서 플러그인으로 이미지를 만들 수 있어.
먼저 왼쪽 플러그인에 들어가서 검색창에 "크리에이티브 프로덕션"을 검색해. 설치해 주고, 채팅창 열기로 바로 가자.
이 상태에서 그냥 바로 클릭 한번 해볼게.
이 순서대로 나온다고 하는데 한번 해보자. 제품 정보 문서와 이미지를 업로드해 볼게. "광고용 방향 뽑겠다고" 나오는데, 선택하면 그 방향으로 실제 비주얼 보드까지 만들 수 있다고 해.
시간이 조금 걸리니까 천천히 보면 돼. 문서를 보고 기준을 이렇게 잡은 거야. (족적 음막겸 치료 쪽으로 가면 안 된다고 나오고) 비주얼 보드 만들고 있어.
근데 정말 이상한 이미지가 나왔어. 이건 사용할 수 없지만, 이 결합형으로 추천한다고 하니까 한번 이대로 만들어 보도록 할게. 웃기지? 알아서 어색한 걸 알고 인정을 하고 바꿔줘.
여기 보면 AB 결합형 캠페인 비주얼 일곱 장이 완성됐다고 나와.
오른쪽 보면 이렇게 나와. "아침 현강 깔창을 넣는 거", "서울 아침에 편안한 출근길" 이렇게 해서 쭉 만들었대. 가이드라인 따라 인솔 트리밍 (자르는 거 있지?), 편안한 오후에 스탠딩 데스크 (스탠딩 데스크에서 이렇게 서서 일할 때도 발바닥이 편하다는 얘기겠지?). 도심을 걷는 여자.
클릭하면 오른쪽에 관련된 이미지도 이렇게 나와. 그런데 도심 여자분이 두 분이 이렇게 생겼어. 처음에 이렇게 깔창을 만들어 놓고 이상했는지 바로 밑에 깔창이 없는 걸 만들어 줬어. 좀 재밌네.
그리고 여기는 깔창을 넣는 건데 이건 좀 잘못 나왔지 이미지가. 그리고 이것도 이제 딥 힐컵과 옐로우 힐 쿠션 이 부분을 표현한 건데 조금 어색하긴 해. 그리고 그 위에는 이제 에메랄드 아치 서포트 인솔 클러저 그리고 첫 번째 에메랄드 아치 인솔과 편안한 발 요렇게 나왔는데, 이렇게 알아서 컨셉으로 좀 나와 주니까 실제 이 이미지를 어떻게 사용할지는 이제 우리가 정해야 되겠지만 잘 나온 편이야.
이런 것들 사실 실제로 이건 너무 사용하기 좋고 생활에서 나와 있는 이미지도 충분히 사용할 만해. 그리고 전체 파일을 다운로드 받을 수 있게 ZIP 파일로도 만들어 줘. 어, 너무 편한데?
그럼 나는 이 상태에서 한번 한 가지 더 해볼게. 내가 브랜드 가이드가 없다고 했더니 이렇게 넣으라고 하네. 그럼 한번 해보자.
지금 보면 보드를 만드는데 이 어도비 공간에서 만들어. 그래서 이 파이어플라이 보드로 만드는 건데, 너희들이 어도비 계정이 없더라도 플러그인 설치를 눌러서 계정 로그인을 할 때 구글로도 가능해. 보드를 만드는 과정이라서 시간이 좀 오래 걸리고, 보드가 보이지 않았는데 다 만들었다고 해서 내가 보이지 않는다고 했더니 그동안 내가 앞에서 했던 것까지 다 해서 이렇게 보드 형태로 보여줬어. 실제로 제대로 만들지 않았던 경우가 있어서 이때도 내가 한번 다시 요청을 했고, 그래서 새롭게 만들어진 거고 이 앞에 있는 게 지금 이 화면에서 만든 거 같아. 그래서 한번 들어가 보도록 할게.
지금 그냥 봐도 정말 이상하고 말도 안 되는 이미지가 생성이 됐어. 엄청나게 크고 좀 말이 안 되게 나왔지? 그럼 내 보드에 아까 세 개가 있었기 때문에 다른 보드에는 어떻게 생성이 됐는지 한번 볼게. 여기도 마찬가지야. 지금 이미지가 지금 이렇게 말이 안 되게끔 생성이 됐어.
이런 거는 좀 쓸 만할까? 이것도 좀 이상하지? 그래도 뭔가 아쉬워서 내가 아예 이미지 생성하는 걸로, 즉 보드를 만들어서 어도비로 넘어가지 않고 그냥 이미지로 만드는 걸로 한번 요청을 해봤어.
지금 이 이미지도 보면 앞에서 만들었던 것보다는 조금 더 더 괜찮은 이미지들이 나온 것 같지? 지금 보시면 내가 업로드한 이미지에 비율에 맞춰서 생성된 걸 확인할 수 있어. 여기서 내가 이미지를 생성을 할 때 사이즈를 넣었다면 조금 다르게 나올 수도 있었겠지?
보시면 이 이미지 같은 경우는 업로드한 게 세로가 좀 더 긴 이미지로 업로드를 했기 때문에 지금 이 방향으로 나왔고, 이 이미지 같은 경우는 가로가 긴 이미지로 올라갔어. 그래서 전체적으로 생성된 게 그 비율에 맞춰서 생성이 됐지. 너희들은 업로드를 할 때 이미지 사이즈를 1*1 또는 생성을 할 때 1*1 사이즈 비율로 생성을 해달라고 요청하면 될 거야.
마무리
오늘은 챗GPT로 상세 페이지 작업을 어디까지 할 수 있는지 살펴보고, 상세 페이지 작업할 때 활용하기 좋은 플러그인도 함께 소개해 드렸어. 이제는 광고 이미지부터 상세 페이지 필요한 컨셉별 이미지까지 챗GPT 안에서 다양하게 만들어 볼 수 있어.
다만 AI가 만들어 준 결과물을 그대로 가져다 쓰는 것만으로는 사실 부족해. 우리 제품의 고객이 누구인지, 어떤 장면에서 사고 싶어 하는지는 결국 사람이 판단해야 하거든.
그리고 한 가지 꼭 너희들이 점검해 봤으면 하는 게 있어. 요즘 새로운 AI가 계속 나오다 보니까 이것도 써봐야 하나 하면서 툴을 익히는데 시간을 쓰는 사람들이 많은 것 같은데, 그런데 혹시라도 빠르게 처리해 준다는 이유로 불필요한 일들에 AI를 사용하고 있지는 않은지 한 번쯤 점검을 꼭 해봤으면 좋겠어.
그럼 오늘 영상이 도움되셨다면 구독과 좋아요 부탁드리고, 다음 영상에서 다시 찾아오도록 할게. 감사합니다!