상세페이지 디자인을 처음 시작했을 때는 예쁘게 만드는 게 제일 중요한 줄 알았어요.
사진 잘 고르고, 폰트 예쁘게 쓰고, 색감 잘 맞추고.
전체적으로 보기 좋게 정리하면 잘 만든 상세페이지라고 생각했거든요.
그런데 십여 년 동안 실무에서 여러 제품의 상세페이지를 만들다 보니 생각이 많이 바뀌었어요.
예쁜 것도 물론 중요하지만, 상세페이지는 결국 제품을 처음 보는 사람이 정보를 이해하고 구매를 결정할 수 있도록 도와주는 본질을 잊으면 안돼요.
그래서 지금은 디자인을 시작하기 전에 예전보다 훨씬 많은 걸 먼저 봐요.
제가 상세페이지를 만들면서 실제로 중요하다고 느꼈던 것들을 정리해보려고 해요.
디자인 시작 전에 제품부터 제대로 알아야 해요
제가 신입 때 가장 많이 했던 실수 중 하나가 제품을 충분히 이해하기 전에 디자인부터 시작하는 거였어요.
자료를 받으면 일단 이미지를 열고, 어떤 배경을 쓸지 생각하고, 레이아웃부터 잡으려고 했어요.
그런데 제품을 잘 모르는 상태에서 디자인을 시작하면 결국 중간에 다시 돌아가게 되더라고요.
이 제품이 누구를 위한 건지,
가장 중요한 기능이 뭔지,
비슷한 제품과 비교했을 때 어떤 차이가 있는지,
고객이 가장 궁금해할 내용이 뭔지.
저는 제품을 볼 때 자연스럽게 SWOT 분석하듯 접근하는 편이에요.
SWOT 분석은 마케팅 용어인데, Strengths(강점), Weaknesses(약점), Opportunities(기회), Threats(위협)을 뜻해요.
이 제품의 강점과 약점이 뭔지, 시장에서 어떤 기회가 있고 어떤 부분이 불리한지를 살펴봐요.
여기에 주요 타깃과 고객이 궁금해할 내용을 함께 정리하면 상세페이지의 방향을 잡기가 훨씬 쉬워요.
그래서 저는 작업 전에 제품 자료를 꽤 꼼꼼하게 보는 편이에요.
제가 잘 모르는 제품이면 비슷한 제품도 찾아보고, 경쟁사는 어떤 기능을 앞에 내세우는지도 필수적으로 분석해요.
전자제품을 많이 작업했던 저는 특히 스펙 하나를 잘못 이해하면 디자인 전체 방향이 틀어질 수도 있어서 제품 공부를 더 중요하게 생각하게 됐어요.
상세페이지 디자인을 잘하려면 포토샵보다 제품 공부가 먼저인 경우도 많았어요.
판매자에게 최대한 많이 물어보세요
제공받은 제품 자료만 보고도 기본적인 내용은 알 수 있어요.
그런데 제가 실무에서 훨씬 도움이 됐던 건 실제로 제품을 판매하는 사람에게 물어보는 거였어요.
판매자는 제품을 직접 팔아야 하는 입장이잖아요.
그래서 생각보다 정말 사소한 장점까지 알고 있어요.
특히 고객들이 어떤 부분을 자주 물어보는지,
경쟁 제품과 비교했을 때 어떤 점을 좋아하는지,
설명서에는 한 줄밖에 안 적혀 있지만 실제로 써보면 편한 기능이 뭔지.
이런 내용은 공식 제품 자료만 봐서는 놓치기 쉬워요.
그래서 저는 가능하면 제품 담당자나 세일즈 담당자에게 많이 물어보는 편이에요.
“이 제품의 가장 큰 장점이 뭐예요?” 이렇게만 묻지 말고,
고객들이 실제로 제일 많이 물어보는 건 뭐예요?
이 제품을 사용하는 주요 연령대가 어떻게 되나요?
다른 제품이랑 고민하다가 이걸 선택하는 이유는 뭐예요?
이런 식으로 계속 물어봐요.
그리고 그 답을 종합해서 주요 타깃을 정해요.
똑같은 제품도 누구에게 판매하느냐에 따라 앞에 보여줘야 할 내용이 달라질 수 있거든요.
판매자가 알고 있는 정보와 디자이너가 가진 시각적인 표현 능력이 잘 합쳐지면 방향을 잡기가 훨씬 쉽고 효율적이에요.
첫 화면에서 이 제품이 뭔지 명확히 보여야 해요
상세페이지를 만들다 보면 이것도 보여주고 싶고 저것도 보여주고 싶어져요.
제품에 좋은 기능이 많으면 더 그렇고요.
그런데 처음부터 정보를 너무 많이 넣으면 오히려 제품이 무엇인지 잘 안 보일 때가 있어요.
저는 첫 화면에서 메인 비주얼 이미지를 잡고,
최소한 이게 어떤 제품인지, 누구에게 필요한 제품인지, 가장 장점들이 무엇인지
이 정도 써머리는 아이콘화 시켜서라도 노출하는 편이에요.
처음부터 모든 걸 설명하려고 하지 않아도 돼요.
중요한 건 다음 내용을 보고 싶게 만드는 거예요.
쇼츠나 릴스를 볼 때 후킹 요소가 전혀 없으면 휘리릭 넘겨버리듯이
상세페이지 첫 화면에서 이목을 끄는 요소는 반드시 필요해요.
첫 페이지 이목 예선을 통과해야 본문 내용 본선에 진출할 수 있답니다.
모든 내용을 강조하면 아무것도 강조되지 않아요
실무에서 상세페이지를 만들다 보면 정말 자주 듣는 요청이 있어요.
이 문구 조금 더 크게 해주세요.
이 기능도 강조해주세요.
이 부분도 중요한데 잘 보이게 해주세요.
요청을 하나씩 다 반영하다 보면 어느 순간 거의 모든 글씨가 커져 있어요..^^...
색도 강하고, 글씨도 크고, 포인트도 많아지고.
그런데 모든 내용이 중요해 보이면 결국 어디부터 봐야 할지 모르게 되더라고요.
그래서 저는 내용을 크게 세 단계 정도로 생각하는 편이에요.
제일 중요한(혹은 주력으로 미는) 내용,
제품을 이해하는 데 필요한 전반적인 내용,
관심 있는 사람이 자세히 확인할 수 있는 내용.
모든 정보를 같은 크기로 보여줄 필요는 없어요.
상세페이지 디자인에서 중요한 건, 정보를 많이 넣는 것보다 어떤 정보를 먼저 보여줄지를 정하는 일이에요.
폰트만 제대로 써도 디자인의 절반은 먹고 들어가요
상세페이지를 보면 생각보다 폰트 때문에 전체 디자인이 어색해지는 경우가 정말 많아요.
제품 분위기와 전혀 맞지 않는 서체를 쓰거나,
한 페이지에 너무 많은 글씨체를 섞어 쓰거나,
본문까지 여러 가지 색을 섞고, 강조한다고 글자에 이펙트를 잔뜩 넣기도 해요.
이게 좋을 것 같지만 결과적으로는 퀄리티를 망가트리는 주범이 된답니다.
저는 특히 본문은 최대한 읽기 편하게 두는 편이에요.
Pretendard처럼 무난하고 깔끔한 고딕 계열 서체 하나만 제대로 사용해도 충분히 세련되게 만들 수 있어요.
폰트 자체로 디자인 효과를 주고 싶다면
새로운 서체를 계속 추가하기보다 굵기를 먼저 활용해보는 걸 추천해요.
Regular, Medium, SemiBold, Bold.
같은 서체 안에서도 굵기만 적당히 섞어주면 제목, 보조 문구, 본문의 위계가 꽤 자연스럽게 나뉘어요.
글자를 강조해야 한다고 무조건 색을 추가하고 그림자를 넣고 테두리를 치는 것보다 훨씬 깔끔해요.
저는 폰트가 튀는 상세페이지보다 제품이 먼저 보이는 상세페이지를 더 좋아해요.
서체는 제품을 보여주기 위한 도구여야지 서체 자체가 주인공이 되어버리면 곤란하거든요.
긴 상세페이지일수록 흐름이 중요해요
상세페이지는 생각보다 길어요.
특히 기능이 많은 제품은 아래로 계속 내려가야 하죠.
그래서 각 영역을 하나씩 예쁘게 만드는 것만 생각하면 전체 페이지가 따로 노는 경우가 생겨요.
첫 번째 영역에서는 디자인 A,
두 번째에서는 전혀 다른 디자인 B,
세 번째에서는 갑자기 또 다른 분위기.
각 부분만 보면 예쁠 수 있는데 전체로 보면 한 제품 이야기처럼 연결되지 않는 거예요.
그래서 저는 상세페이지를 만들 때 처음부터 끝까지 하나의 흐름으로 생각하려고 해요.
제품 소개,
핵심 기능,
사용 상황,
세부 기능,
스펙이나 추가 정보.
물론 제품마다 순서는 달라질 수 있어요.
중요한 건 다음 내용을 왜 보여주는지가 자연스러워야 한다는 거예요.
상세페이지를 위에서 아래까지 직접 여러 번 내려보면서
갑자기 이야기가 끊기는 느낌은 없는지,
비슷한 내용이 반복되지는 않는지,
너무 오랫동안 설명만 이어지지는 않는지를 신경써서 확인하는 편이에요.
정보가 많을수록 여백에 신경쓰세요
처음 디자인할 때는 빈 공간이 조금만 생겨도 뭔가 채워야 할 것 같았어요.
여기 이미지 하나 더 넣을까?
여기 작은 문구라도 하나 넣을까?
괜히 공간을 남겨두면 디자인을 덜 한 것 같은 느낌이 들기도 했고요.
그런데 경력이 쌓일수록 오히려 빈 공간을 일부러 남겨두게 됐어요.
상세페이지는 고객이 정보를 계속 읽어야 하는 페이지라서 화면이 너무 꽉 차 있으면 생각보다 금방 피곤해져요.
특히 글과 기능 설명이 많은 제품일수록 여백이 있어야 중요한 내용도 더 잘 보였어요.
모든 공간을 디자인으로 채우는 것보다 사람들이 편하게 읽을 수 있도록 쉬는 공간을 만들어주는 것도 디자인이라는 걸 실무에서 많이 느꼈어요.
예쁜 레퍼런스를 그대로 따라가면 안 되는 이유가 있어요
상세페이지를 만들 때 레퍼런스를 많이 찾아봐요. 저도 여전히 많이 봅니다.
디자이너라면 꼭 해야 하는 일이고, 좋은 디자인을 많이 보는 건 정말 중요하다고 생각해요.
가끔 레퍼런스를 보다 보면 예쁜 페이지를 발견했을 때 그대로 따라가고 싶은 마음이 생겨요.
문제는 제품마다 보여줘야 하는 내용이 완전히 다르다는 거예요.
감성적인 식품 상세페이지에서 잘 어울리는 구성이 복잡한 전자제품에도 잘 맞는다는 보장은 없어요.
반대로 스펙 중심의 IT 제품처럼 구성하면 감성적인 생활용품에서는 너무 딱딱해 보일 수도 있고요.
그래서 저는 레퍼런스를 볼 때 디자인 자체보다
레이아웃은 크게 어떻게 설정했는지,
메인 컬러와 서브 컬러를 어떻게 활용했는지,
후킹 요소와 정보 비율은 어떻게 넣었는지 이런 걸 보는 편이에요.
겉모습을 따라가는 것보다 구조를 이해해서 내 제품에 맞게 바꾸는 게 훨씬 중요했어요.
AI는 안 쓰는 것보다 잘 쓰는 게 중요해졌어요
요즘 디자인하면서 생성형 AI를 아예 외면하기는 어렵다고 생각해요.
혼자 안 쓰고 있으면 작업 속도나 표현 방법에서 뒤처질 수도 있고요.
저도 새로운 도구가 생기면 최대한 활용하는 쪽이에요.
다만 AI가 만들어준 결과물을 그대로 가져다 붙이는 건 별개의 문제예요.
잘못 만든 생성형 이미지를 사용하면 상세페이지 전체 무드를 깨버리고 이질감이 생겨요.
아무리 잘 만들었어도 거기서 전체 퀄리티가 확 떨어져 보여요.
그래서 생성형 이미지를 사용할 때도 먼저 기존 상세페이지의 디자인 방향을 충분히 기준으로 잡아주는 게 좋아요.
현재 사용하고 있는 색감, 제품 촬영 분위기, 배경, 조명, 구도.
전체적인 디자인 톤을 레퍼런스로 제공하고 그 안에서 필요한 이미지를 만들어야 해요.
AI로 이미지를 만들었다는 것보다 중요한 건 그 이미지가 기존 상세페이지 안에 자연스럽게 들어갈 수 있느냐예요.
갑자기 혼자 다른 세계에서 튀어나온 이미지처럼 보이면 안 돼요.
프롬프트를 구체적으로 설명하고, 기존 상세페이지의 레퍼런스와 필요한 조건을 충분히 제공해서 원하는 결과에 가깝게 끌고 가야 해요.
AI 시대라고 해서 디자인 감각이 덜 중요해진 게 아니라, 오히려 결과물을 최적화시켜서 만들어내고 하나의 톤으로 정리하는 디자이너의 역할이 더 중요해졌다고 느껴요.
모바일에서 필수로 확인하세요
상세페이지를 작업할 때는 보통 큰 모니터를 보면서 일하죠.
저는 주로 듀얼 모니터로 작업하는 편이기도 하고, 아무래도 디자이너 입장에서는 화면이 크면 클수록 편하니까요.
그런데 실제 고객은 휴대폰으로 보는 경우가 많잖아요.
모니터에서는 충분히 크게 보였던 글씨가 휴대폰에서는 작아서 잘 안 보일 수도 있고,
가로로 길게 배치한 내용이 모바일에서는 한눈에 안 들어올 수도 있어요.
그래서 작업 중간중간 모바일로 확인하면서 작업을 해요.
특히 작은 설명 문구나 표처럼 정보가 많은 영역은 모바일에서 꼭 다시 봐야 했어요.
우리 작업 화면과 고객이 실제로 보는 화면은 다를 수 있으니까요.
상세페이지 디자인의 본질은 결국 '판매'라는 점
고객이 제품의 정보를 알아보려 들어왔을 때
어디에서 제품의 장점을 느끼고, 구매까지 이어지게 할 수 있을지 고민을 많이 해봐야 해요.
오늘 제 글을 요약하자면 판매할 제품을 제대로 이해하고, 실제 판매자에게 고객 이야기를 듣고, 누구에게 판매할지를 정하고, 그 사람이 궁금해할 내용을 순서대로 보여주는 것.
여기에 폰트와 여백, 이미지 톤 같은 기본적인 디자인 완성도를 놓치지 않는 것.
저는 주어진 내용만 예쁘게 만드는 디자이너보다,
이런 본질을 인지하고 작업하는 디자이너가 오랫동안 살아남을 수 있다고 생각해요.
상세페이지는 실제 구매할 사람들을 설득하는 일이니까요!