AI로 상세페이지 리디자인하기

안녕하세요.

제로백데브에서 Product Designer로 일하고 있는 최원준입니다.

이번 글에서는 제가 메인 디자이너로 참여한 AI 블라인드 커머스 앱 블라인드 몬스터 프로젝트에서, AI를 활용해 상세페이지를 제작했던 경험을 이야기해보려고 합니다.

모든 커머스 서비스의 핵심, 상세페이지

상세페이지는 온라인 환경에서 고객의 구매를 결정짓는 가장 중요한 콘텐츠 중 하나입니다. 오프라인에서 직접 확인할 수 있는 제품의 크기와 소재, 색상, 기능, 사용 방법 등을 텍스트와 이미지로 효과적으로 전달하고 구매까지 이어지도록 설계하는 페이지입니다.

구현 방식은 크게 두 가지로 나뉩니다. 하나의 긴 이미지 형태로 제작하는 방식과, HTML·CSS 기반으로 퍼블리싱하여 인터랙션과 반응형 요소를 포함하는 방식입니다.

이번 블라인드 몬스터 프로젝트에서는 단순히 보기 좋은 이미지를 만드는 것이 아니라, 사용자 경험과 운영 효율까지 고려한 ​퍼블리싱 기반 상세페이지를 제작했습니다.

특히 블라인드 몬스터만의 브랜드 아이덴티티와 AI 블라인드 커머스라는 서비스 특성을 자연스럽게 녹여낼 수 있도록 정보의 흐름을 설계하고, 제품의 특징을 직관적으로 이해할 수 있는 콘텐츠 구조를 구성했습니다.

상세페이지에서 이게 가장 중요해요!

처음 블라인드 몬스터 프로젝트의 범위는 앱 개발과 프로덕트 디자인(UI/UX)​까지였습니다. 상세페이지 제작은 과업 범위에 포함되어 있지 않았습니다.

사실 이는 SI 프로젝트에서는 흔한 일입니다. 대부분의 프로젝트에서 프로덕트 디자이너의 역할은 서비스 화면(UI/UX)을 설계하는 것까지이며, 제품을 판매하기 위한 상세페이지 디자인은 별도의 영역으로 구분되는 경우가 많습니다.

그 이유는 상세페이지 제작에는 생각보다 많은 공수가 필요하기 때문입니다. 단순히 화면을 디자인하는 것이 아니라 제품 촬영, 이미지 보정, 콘텐츠 기획, 카피라이팅, 퍼블리싱까지 다양한 작업이 함께 이루어져야 합니다. 무엇보다도 결과물의 완성도는 제품 사진의 품질에 크게 좌우됩니다.

그래서 많은 SI 프로젝트에서는 상세페이지를 과업 범위에서 제외하거나, 고객사가 별도로 제작하는 방식으로 진행됩니다.

하지만 블라인드 몬스터 프로젝트에서는 전달받은 제품 사진을 확인한 순간, 앱만 잘 만들어서는 서비스의 완성도를 높일 수 없겠다는 생각이 들었습니다. 결국 사용자가 제품을 구매하는 마지막 순간에는 상세페이지가 가장 중요한 역할을 하기 때문입니다.

다행히 고객사와 논의 끝에 상세페이지 제작까지 함께 진행하게 되었고, 제품 이미지를 보정하는 것부터 퍼블리싱 기반의 상세페이지 설계까지 직접 담당하게 되었습니다.

포토샵, 일러스트는 어떤 디자이너에게도 필수 사항이죠!

첫 작업은 이미지 분류부터 시작했다.

상세페이지 작업 전 우선 상품 등록 시 필요한 이미지를 분류했습니다.

• 컨셉 이미지: 제품과 어울리는 배경 컨셉 컷

• 메인 이미지: 제품의 전체적인 컷

• 디테일 컷: 제품의 디테일을 보여주는 컷

색상과 밝기는 기본으로 맞춰야 되는 부분이라 따로 설명하진 않겠습니다.
이번 상세페이지 이미지 보정할 때 이용한 주요 AI 기능은 Adobe Firefly입니다.

여기서 다들 'AI 이미지이면 신뢰도가 너무 낮아지는 거 아니야?'라고 생각할 수 있지만, 일반적으로 이미지를 전체 생성하는 방식이 아닌 기존 제품은 그대로 두고 주위 배경만 AI를 통해 제품을 돋보이게 하는 방식으로 사용하였습니다.
포토샵을 이용한 AI 이미지 합성은 기존의 이미지 전체를 생성하는 것과는 다른 방식으로 사용할 수 있습니다.

아래 예시를 보시면 제가 원하는 부분을 지정하여 부분적으로 이미지를 돋보이게 사용할 수 있습니다.

이런 방식으로 유저가 제품 이미지에 좀 더 관심이 갈 수 있게 보정을 진행하였습니다.

제품 상세페이지 완성하기

퍼블리싱 형태로 상세페이지 디자인을 진행했기에 상세페이지 전체를 바꿀 필요 없이 제품 정보와 이미지만 비율에 맞게 넣으면 누구나 이용할 수 있게 만들었습니다.

이번 프로젝트를 진행하며 다시 한번 느낀 것은 좋은 디자인은 좋은 소스에서 시작된다는 점입니다. 아무리 뛰어난 UI를 설계하더라도 제품 이미지와 콘텐츠의 품질이 부족하다면 사용자가 느끼는 완성도에는 분명한 한계가 있습니다. 결국 디자인의 완성도는 화면을 얼마나 예쁘게 만드는지가 아니라, 좋은 소재를 어떻게 효과적으로 보여주는가에서 결정된다고 생각합니다.

또한 AI는 디자인 작업의 속도와 가능성을 크게 넓혀주었습니다. 이전 같았다면 촬영 장소를 섭외하고, 인테리어 소품을 준비하고, 여러 번의 촬영을 진행해야 했을 장면들을 AI를 활용해 빠르게 구현할 수 있었고, 고객사가 만족할 수 있는 수준의 결과물을 훨씬 짧은 시간 안에 완성할 수 있었습니다.

앞으로도 새로운 디자인 AI 도구가 계속 등장하겠지만, 결국 디자이너가 해야 할 일은 변하지 않을 것 같아요. 사람들이 불편해하는 부분을 발견하고, 가장 좋은 방법으로 해결하는 것. 저는 앞으로도 그런 디자인를 계속 만들어가고 싶습니다.