김선봉 영상전문기자
[사이버타임즈(cybertimes)=김선봉 영상전문기자]

쇼핑몰 운영자나 마케팅 담당자라면 누구나 상세페이지 제작의 어려움을 경험해 봤을 겁니다.
전문 디자이너를 고용해야 하는 부담, 시간이 오래 걸리는 기획 단계, 수정과 재작업에 따른 추가 비용까지 고려하면 상세페이지 하나를 완성하는 데 드는 비용과 시간은 상당합니다.
그런데 최근 AI 기술의 발전으로 이러한 문제가 획기적으로 해결될 수 있는 도구가 등장했습니다. 바로 구글의 스티치(Stitch)라는 프로그램인데, 이 도구를 제대로 활용하면 불과 10분 만에 전문적인 상세페이지를 자동으로 생성할 수 있습니다.
특히 AI와 프롬프트 기술을 결합하면 제품의 특성에 맞춘 맞춤형 레이아웃을 얻을 수 있어서 더욱 효율적입니다. 이번 칼럼에서는 스티치를 활용한 상세페이지 제작의 전체 프로세스를 상세히 설명하고, 실제 적용 사례를 통해 어떻게 10분 안에 완성할 수 있는지 보여드리겠습니다.
스티치는 기본적으로 애플리케이션과 웹사이트의 레이아웃을 디자인할 때 많이 사용되는 AI 기반 설계 도구입니다. 랜딩페이지나 홈페이지 제작에 주로 활용되어 왔지만, 프롬프트를 적절히 조정하면 쇼핑몰의 상세페이지 제작에도 매우 효과적으로 활용할 수 있습니다. 이 도구의 가장 큰 장점은 피그마(Figma)와의 연동 기능으로, 생성된 디자인을 피그마에서 손쉽게 편집하고 조정할 수 있다는 점입니다.
많은 디자인 전문가들이 이미 피그마를 주력 도구로 사용하고 있기 때문에 스티치와 피그마의 결합은 워크플로우를 크게 단순화해 줍니다. 특히 국내 쇼핑몰 시장에서 요구하는 상세페이지의 특수한 형식과 요소들을 AI가 이해하도록 프롬프트를 작성하면, 생성 결과의 퀄리티가 상당히 높아진다는 점이 주목할 만합니다.
스티치를 사용하기 위해서는 먼저 특정한 프롬프트가 필요합니다. 이 프롬프트는 단순한 지시사항이 아니라 AI에게 당신의 의도를 정확히 전달하는 일종의 설계도 역할을 합니다. 프롬프트에는 원하는 색상 조합, 레이아웃 구성, 폰트 스타일, 버튼 형태, 아이콘 방식 등 모든 디자인 요소가 포함되어야 합니다.
예를 들어 병원 인테리어 전문가 서비스용 상세페이지를 만든다고 하면, 프롬프트에 "병의원 인테리어 전문가 서비스 상세페이지, 고급스러운 그레이와 블루 톤 사용, 포트폴리오 섹션 강조"와 같은 식으로 작성하면 됩니다. 프롬프트는 처음부터 완벽할 필요는 없습니다. AI가 초기 버전을 생성한 후에 피드백을 주면 그에 맞춰 내용을 수정하고 추가하는 반복 과정을 거치게 되므로, 여러 번의 조정을 통해 원하는 결과에 점진적으로 가까워질 수 있습니다.

프롬프트 작성이 끝났다면 이제 실제로 스티치에 접근해야 합니다. 구글에 "스티치"라고 검색하면 공식 플랫폼에 도달할 수 있으며, 구글 계정으로 로그인하면 바로 사용을 시작할 수 있습니다. 스티치에는 웹 버전과 앱 버전이 있는데, 상세페이지 제작을 위해서는 앱 버전을 선택하는 것이 좋습니다. 앱 버전이 제공하는 레이아웃 옵션이 더 다양하고 상세페이지에 적합한 형식들이 많기 때문입니다.
로그인 후에는 준비한 프롬프트를 복사해서 스티치의 입력 필드에 붙여넣으면 됩니다. 이때 추가적인 요청사항이 있다면 함께 입력해도 괜찮습니다. 예를 들어 기본 프롬프트 외에 "세무사 전문 컨설팅 서비스로 수정해 달라"거나 "추가 가이드 섹션을 삽입해 달라"와 같은 지시를 동시에 할 수 있습니다. AI는 이러한 추가 지시사항을 반영해서 더욱 맞춤형의 결과물을 생성해 줍니다.
스티치의 동시다발적 처리 기능은 여러 상품의 상세페이지를 동시에 제작할 때 매우 유용합니다. 무형 서비스 상품(컨설팅, 교육, 법률 자문 등)의 경우 정해진 이미지가 없기 때문에 프롬프트를 통해 필요한 시각적 요소를 명확히 지정해야 합니다.
반면 유형 상품(음식, 의류, 공산품 등)의 경우는 실제 제품 이미지가 포함되지만, 그 외의 디자인 요소들은 여전히 프롬프트에 따라 결정됩니다. 예를 들어 논산 딸기 판매 상세페이지를 만든다고 하면, "히어로 섹션에는 딸기 이미지 포함, 산지 설명 섹션, 생산자 스토리, CTA 버튼 배치" 같은 방식으로 구체적인 섹션 구성을 지시할 수 있습니다. 이러한 구체성이 높을수록 생성되는 결과물의 퀄리티도 높아진다는 점을 기억해야 합니다.

스티치가 프롬프트에 따라 초안을 생성하면, 이제 그 결과물을 꼼꼼히 검토하는 단계가 시작됩니다. 초안을 살펴보면 색상 구성, 섹션별 배치, 콘텐츠의 흐름 등이 어느 정도 완성된 형태로 나타나는데, 이 단계에서 중요한 것은 완벽함을 기대하지 않는 것입니다. 스티치는 해외 기반의 서비스이기 때문에 국내 시장의 특수한 요구사항(예: 쿠팡이나 네이버 스타일의 상세페이지 형식)을 완벽히 반영하지 못할 수 있습니다. 따라서 일정 수준의 아쉬움을 감수하고 진행해야 합니다. 다만 기본적인 구성, 섹션의 논리성, 시각적 균형 등은 AI가 상당히 잘 처리하기 때문에 이러한 부분들은 충분히 활용할 만한 가치가 있습니다.
초안 검토 과정에서 좋은 구성이라고 판단되는 부분들을 메모해 두면 이후 편집 과정에서 도움이 됩니다. 예를 들어 포트폴리오 섹션의 레이아웃이 마음에 들었다면 그 부분은 최종 디자인에 그대로 반영하고, 마음에 들지 않는 부분은 스티치에 다시 요청하거나 피그마에서 직접 수정하는 방식을 취할 수 있습니다.
또한 초안이 너무 좁은 가로 사이즈로 생성되었다면 가로 폭을 확장하도록 지시할 수 있습니다. 상세페이지는 보통 길쭉한 세로 형식이 많기 때문에 이러한 조정이 필요한 경우가 많습니다. 여러 번의 반복 요청을 통해 원하는 방향으로 점진적으로 개선해 나가는 것이 스티치 활용의 핵심입니다.

참고 이미지를 활용한 재구성 요청도 매우 효과적인 방법입니다. 스티치에는 이미지 업로드 기능이 있는데, 이미 완성된 다른 상세페이지나 레퍼런스 이미지를 첨부하고 "이 이미지를 참고해서 재구성해 달라"고 요청하면 AI가 그 스타일을 반영해서 새로운 버전을 생성합니다. 이 방식은 특히 쿠팡이나 네이버 스타일의 상세페이지를 모방하고 싶을 때 유용합니다. 예를 들어 쿠팡에서 딸기 상세페이지의 스크린샷을 찍어서 스티치에 첨부하면, AI가 그 스타일을 학습해서 자신의 제품에 맞게 재해석한 버전을 만들어 줍니다.
초안이 어느 정도 만족스러운 수준에 도달했다면 이제 피그마로 이동해서 본격적인 편집을 시작합니다. 스티치 자체에서는 세부적인 편집 기능이 제한적이기 때문에 더욱 정교한 조정을 위해서는 피그마의 도움이 필수적입니다. 스티치에서 "내보내기" 옵션을 클릭하고 "피그마로 변환"을 선택하면 복사 버튼이 나타나며, 이를 복사한 후 피그마에서 Ctrl+V(맥의 경우 Command+V)를 누르면 된다는 점이 정말 편리합니다. 이렇게 하면 스티치에서 생성한 모든 디자인 요소와 레이아웃이 피그마에 그대로 옮겨집니다.
피그마에 임포트된 후 가장 먼저 해야 할 작업은 폰트 수정입니다. 스티치는 주로 영문 폰트를 기준으로 디자인하기 때문에 한글 폰트가 깨지거나 부적절한 경우가 많습니다. 피그마에서는 텍스트를 더블 클릭해서 선택하면 오른쪽 패널에서 다양한 한글 폰트 옵션이 나타나므로, 원하는 폰트를 하나하나 선택해서 적용하면 됩니다. 이 과정은 시간이 좀 걸리지만, 한 번 익숙해지면 매우 간단합니다. 그 다음으로는 이미지 교체 작업을 진행합니다. 스티치가 생성한 임시 이미지들을 더블 클릭해서 들어가면 크롭, 교체, 리사이징 등 다양한 수정 옵션이 제공됩니다.
피그마의 가장 큰 장점은 직관적인 인터페이스와 강력한 편집 기능입니다. 요소의 위치를 조정하고 싶으면 드래그로 이동하면 되고, 색상을 변경하려면 해당 요소를 선택한 후 패널에서 새로운 색상을 지정하면 됩니다. 또한 여러 개의 디자인 파일을 한 번에 관리할 수 있어서, 다양한 상품의 상세페이지를 동시에 작업할 때 매우 효율적입니다. 예를 들어 병원 인테리어 상세페이지와 딸기 상세페이지를 동시에 진행 중이라면, 한 파일에서 좋아 보이는 요소를 복사해서 다른 파일에 붙여넣는 식으로 디자인 요소를 공유할 수도 있습니다.

이론만으로는 스티치의 활용이 얼마나 효과적인지 이해하기 어려울 수 있으니 실제 적용 사례들을 살펴보겠습니다. 먼저 무형 서비스인 병의원 인테리어 전문가 서비스의 경우, 스티치가 포트폴리오 섹션, 솔루션 제시 섹션, 가격 플랜 섹션 등을 논리적으로 배치했습니다. 각 섹션은 명확한 목적을 가지고 구성되었으며, 이미지 없이도 텍스트와 아이콘만으로 충분히 설득력 있는 페이지가 완성되었습니다.
두 번째 사례인 세무 컨설팅 서비스의 경우도 마찬가지로 타겟 고객층에 맞춘 디자인이 자동으로 생성되었으며, 자주 묻는 질문 섹션과 같은 실용적인 요소들이 포함되었습니다. 이러한 무형 서비스들은 아이콘 디자인과 숫자 표기가 중요한데, AI가 이러한 요소들을 적절히 배치해 주어서 매우 전문적인 느낌의 상세페이지가 완성됩니다.
유형 상품인 논산 딸기의 사례는 조금 더 복잡합니다. 이 경우 실제 상품 이미지는 필수이지만, 그 외에 당도 표기, 포장 방식, 유형별 특징 등을 시각적으로 전달해야 합니다. 스티치는 이러한 요구사항을 반영해서 다양한 섹션을 자동으로 배치했으며, 특히 표 형식으로 정보를 정리하는 부분이 매우 유용했습니다.
초반에는 해외 스타일로 나온 부분들이 있어서 쿠팡 같은 국내 플랫폼의 스타일과 차이가 있었지만, 참고 이미지를 제공한 후 재구성 요청을 하니 훨씬 국내화된 스타일로 개선되었습니다. 이는 스티치가 얼마나 유연하게 피드백에 반응하는지를 보여주는 좋은 예시입니다.
공통적으로 관찰할 수 있는 점은, 초안의 퀄리티가 생각보다 높다는 것입니다. 많은 사람들이 AI 도구를 사용할 때 완벽한 결과물을 기대하거나 전혀 쓸 수 없는 수준의 결과물이 나올 거라고 예상하는 경향이 있습니다. 하지만 실제로는 그 중간에 매우 실용적인 수준의 디자인이 자동으로 생성된다는 점이 스티치의 가장 큰 가치입니다.
물론 완벽함을 위해서는 추가 수정이 필요하지만, 0부터 시작하는 것이 아니라 80~85% 정도 완성된 상태에서 시작한다고 생각하면 시간 절약의 규모가 얼마나 큰지 이해할 수 있습니다.

스티치를 활용하기로 결정했다면 피그마도 함께 학습해야 한다는 점을 강조하고 싶습니다. 비록 피그마가 처음에는 복잡해 보일 수 있지만, 기본적인 몇 가지 기능만 습득하면 충분히 활용 가능합니다. 텍스트 더블 클릭으로 폰트 수정하기, 이미지 클릭으로 사진 교체하기, 요소 드래그로 위치 조정하기 등이 피그마 작업의 95%를 차지합니다. 이러한 기본 기능들은 직관적이어서 며칠만 연습하면 충분히 숙달할 수 있습니다.
더 중요한 이유는 피그마가 현재 디지털 디자인 생태계에서 거의 필수 도구가 되고 있다는 점입니다. 상세페이지 제작 외에도 카드 뉴스, 소셜 미디어 콘텐츠, 배너 등 다양한 마케팅 자료를 만들 때 피그마가 활용됩니다. 또한 최근 인기를 얻고 있는 클로드(Claude), 미드저니 같은 최신 AI 도구들도 피그마와의 연동성을 강화하고 있어서, 향후 디지털 마케팅이나 디자인 작업을 하려면 피그마 기초는 필수적입니다. 따라서 지금부터라도 조금씩 피그마를 학습해 두면 장기적으로 매우 큰 자산이 될 것입니다.
스티치와 피그마 조합의 진정한 가치는 이 두 도구가 완벽하게 연동된다는 점입니다. 스티치에서 대략적인 뼈대를 만들고, 피그마에서 디테일을 조정하는 이러한 워크플로우는 기존의 처음부터 끝까지 모두 수동으로 디자인하는 방식과는 비교가 안 될 정도로 빠르고 효율적입니다. 특히 여러 상품의 상세페이지를 동시에 관리해야 하는 쇼핑몰 운영자라면 이러한 도구의 가치가 더욱 부각될 수밖에 없습니다. 초안 생성부터 최종 편집까지 10분에 완성할 수 있다는 것이 현실적으로 가능한 이유도 이 두 도구의 강력한 조합 때문입니다.
결국 디자인 작업의 핵심은 완벽한 기술을 갖추는 것이 아니라 효율적인 도구를 선택하고 활용하는 것입니다. 스티치의 AI 기반 자동 생성 기능과 피그마의 직관적인 수정 기능을 결합하면, 전문 디자이너 수준의 결과물을 매우 짧은 시간 안에 만들어낼 수 있습니다. 혼자 하던 작업도, 팀으로 하던 작업도 이 워크플로우를 도입하면 생산성이 극적으로 향상될 것입니다. 앞으로 디지털 마케팅의 핵심은 기술이 아니라 얼마나 빨리 적응하고 활용하느냐에 달려있다는 점을 잊지 말기 바랍니다.
#스티치프롬프트
#상세페이지제작
#피그마연동
#쇼핑몰마케팅
#디자인자동화
#프롬프트활용
#전자상거래
#콘텐츠마케팅
#디지털마케팅
#김선봉엔퍼그로스대표
#김선봉사이버타임즈기자
#김선봉사이버타임즈영상전문기자
#김선봉선진주민e음위원회영상전문기자