상세페이지를 만들다 보면 유독 오래 붙잡게 되는 구간이 있어요.
바로 맨 위 메인 비주얼이에요.
본문은 어느 정도 정보 순서에 맞춰서 차근차근 작업하면 되는데
메인 영역은 한 화면 안에서 제품이 뭔지, 어떤 장점이 있는지, 왜 봐야 하는지를 짧은 시간 안에 보여줘야 하거든요.
저도 상세페이지를 만들면서 메인 비주얼에는 유독 시간을 많이 쓰는 편이에요.
제품이 아무리 좋아도 첫 화면이 별로면 아래에 정말 좋은 내용이 있어도 소비자가 거기까지 내려가지 않을 수 있으니까요.
특히 이미 구매할 마음을 먹고 들어온 사람이 아니라
광고나 검색을 타고 그냥 궁금해서 들어온 소비자는
첫 화면에서 흥미를 못 느끼면 가차 없이 뒤로가기를 눌러버립니다.
그래서 저는 상세페이지 첫 화면을 본문으로 넘어가기 위한 일종의 예선전처럼 생각해요.
상세페이지 메인 비주얼을 만들면서 실제로 가장 많이 확인하는 부분들을 알려드릴게요!
1. 첫 화면에서 제품이 뭔지 바로 보여주세요
메인 비주얼이 아무리 예뻐도 한참 봐야 무슨 제품인지 알 수 있다면 조금 아쉬워요.
특히 처음 보는 브랜드나 신제품은 더 그래요.
소비자는 절대!! 우리가 만든 상세페이지를 처음부터 공부하듯 읽지 않아요.
대충 훑어보고 관심이 생기면 그때부터 자세히 보기 시작해요.
그래서 첫 화면에는 최소한 제품 이미지, 제품명이나 제품 종류, 핵심적인 특징 정도는 바로 이해할 수 있게 보여주는 편이 좋아요.
예를 들어 충전기인데 감성적인 책상 사진만 크게 보여주고 정작 제품은 구석에 조그맣게 있다면
사진 자체는 예뻐도 제품 광고로서는 힘이 약할 수 있어요.
메인 비주얼에서는 제품이 주인공이에요. (잊지 마세요 중요 중요)
배경과 그래픽은 그 제품을 더 잘 보이게 도와주는 역할이라고 생각하고 작업하면 편할 거예요.
2. 첫 화면에 모든 장점을 넣으려고 하지 마세요
제품 담당자에게 자료를 받으면 장점이 정말 많이 들어있을 때가 있어요.
빠르고, 가볍고, 안전하고, 새로운 기능도 있고,호환도 잘 되고, 디자인도 좋고...
그걸 전부 첫 화면에 넣기 시작하면 메인 비주얼이 갑자기 보기 싫은 설명서가 되어버립니다.
그래서 저는 가장 중요한 장점을 먼저 하나 정해요.
이 제품을 처음 보는 사람이 딱 하나만 기억한다면 무엇을 기억했으면 좋겠는지 생각하는 거예요.
그리고 보조적으로 꼭 보여줘야 하는 장점이 있다면 2~4개 정도를 짧게 정리해서 넣는 방법을 많이 써요.
작은 아이콘과 짧은 문구로 핵심 기능을 한 번에 보여주는 방식도 자주 사용했고요.
중요한 내용은 본문에서 자세하게 설명하면 돼요.
첫 화면에서는 모든 걸 알려주려고 하기보다, 무엇을 가장 먼저 기억하게 할지 정하는 게 더 중요해요.
3. 소비자가 바로 반응할 만한 요소는 놓치지 마세요
제품의 핵심 기능 외에도 소비자가 관심을 가질 만한 요소들이 있어요.
가격적인 메리트, 새로운 기능, 사은품, 한정 혜택, 수상 이력 같은 것들이에요.
특히 제품이 공신력 있는 기관이나 어워드에서 상을 받은 적이 있다면
해당 수상 로고를 사용할 수 있는지 확인한 뒤 메인 영역이나 잘 보이는 위치에 활용하는 것도 좋아요.
말로만 이 제품 정말 좋아요~! 라고 설명하는 것보다
수상 이력처럼 한눈에 신뢰를 줄 수 있는 요소가 있으면 제품을 설명하기 훨씬 수월해지거든요.
그리고 프로모션이나 이벤트가 너무 많다고 그걸 상세페이지 안에 전부 우겨 넣을 필요는 없어요.
할인, 쿠폰, 사은품, 기간 한정 이벤트까지 한 화면에 다 들어가면 정작 제품이 안 보이기 시작해요.
저는 이런 경우 상세페이지 자체는 최대한 깔끔하게 두고,
프로모션 내용을 따로 정리한 배너를 만들어 상세페이지 위쪽에 얹는 방법을 많이 사용해요.
그러면 이벤트 내용은 충분히 보여주면서
상세페이지 메인 디자인은 깔끔하게 유지할 수 있어요.
제품 상세페이지와 프로모션 배너의 역할을 나눠주는 거예요.
4. 메인 카피는 짧고 바로 이해되게 써보세요
메인 카피를 만들 때 멋있어 보이는 문장을 만들려고 너무 오래 고민할 필요는 없어요.
오히려 무슨 뜻인지 한 번에 이해되는 문장이 더 강할 때가 많아요.
특히 상세페이지에서는 카피를 읽었을 때
'그래서 이 제품이 뭐가 좋은데?' 라는 질문에 바로 답할 수 있으면 좋아요.
예를 들어 휴대성이 강점인 제품이라면 그 장점이 메인 카피에서 바로 느껴져야 하고,
배터리 시간이 큰 장점이라면 굳이 멋있는 표현 뒤에 숨길 필요가 없어요.
저는 카피를 잡을 때 이 제품을 한 문장으로 설명하면 뭐라고 할까? 하고 생각해보는 편이에요.
그 문장이 정리되면 이미지 방향도 같이 잡히는 경우가 많아요.
5. 제품 이미지 크기는 생각보다 과감하게 잡아도 돼요
상세페이지 메인에서 제품 이미지가 너무 작으면 힘이 빠지는 경우가 있어요.
특히 제품 자체 디자인이 예쁘거나 외형이 중요한 제품이라면 메인에서 제품을 크게 보여주는 편이 좋아요.
저도 전자제품 상세페이지를 만들 때 제품 외형 자체가 강점이면
이미지를 꽤 과감하게 키워서 쓰는 편이었어요.
소비자가 첫 화면에 들어오자마자 제품을 바로 인식하게 만드는 거예요.
그렇다고 화면을 제품으로 꽉 채우기만 하면 답답해질 수 있어요.
제품 주변에는 적당히 여백을 남기고 카피나 보조 정보가 들어갈 자리도 같이 확보해야 해요.
제품은 크게, 주변은 조금 쉬게.
이런 느낌으로 잡으면 메인 화면이 훨씬 정돈돼 보여요.
6. 메인 비주얼은 무엇을 강조할지 확실하게 정하세요
메인 화면 안에 요소가 여러 개 들어가면 무엇부터 봐야 하는지 순서를 만들어줘야 해요.
저는 개인적으로 메인 비주얼 자체에는 할인율이나 사은품 같은 프로모션 정보를 많이 넣는 편은 아니에요.
그런 내용은 상품 썸네일이나 별도의 프로모션 배너에서 먼저 시선을 끌게 하고
상세페이지 메인에서는 제품과 대표적인 장점을 깔끔하게 보여주는 쪽을 좋아해요.
하지만 클라이언트가
'할인율 크게 넣어주세요.'
'사은품 여기 꼭 넣어주세요.' 라고 하면 크게 넣어드립니다. 실무니까요. ㅋㅋㅋㅋㅋ
다만! 그럴 때도 모든 내용을 똑같이 키우지는 않아요.
제품, 메인 카피, 프로모션 정보, 보조 설명처럼 중요도에 따라 시선 순서를 나눠주는 편이에요.
제품명도 크고, 할인율도 크고, 사은품도 크고, 기능 설명도 크고, 모든 글자가
'나 좀 봐!!!!!! 나 쩔지!!!!!' 이러고 있으면 화면이 너무 정신없어져요.
폰트 크기와 굵기, 이미지 크기, 여백을 조절해서
가장 먼저 볼 것과 나중에 볼 것을 확실히 나눠주세요.
7. 폰트만 잘 써도 상세페이지 퀄리티가 달라져요
저는 디자인할 때 폰트를 정말 중요하게 보는 편이에요.
다른 거 다 못해도 되는데 폰트의 기본은 지켜야 해요!!
사수로서 신입 디자이너 교육할 때 꼭 하는 말입니다.
제품 이미지와 레이아웃을 아무리 잘 잡아도
폰트가 어색하면 전체 디자인 퀄리티가 확 떨어져 보이거든요.
가장 먼저 조심해야 하는 건 한 페이지에서 너무 많은 폰트를 사용하는 거예요.
이 제목에는 이 폰트, 저 제목에는 저 폰트, 여기는 손글씨체, 저기는 또 다른 고딕체.
하나씩 추가하다 보면 페이지 전체가 금방 산만해져요.
제목이나 소비자의 주의를 끌어야 하는 구간에는
제품 분위기에 맞는 꾸밈 있는 서체를 포인트로 사용하는 것도 좋아요.
대신 본문처럼 실제로 정보를 읽어야 하는 영역은 가독성 좋은 고딕체를 사용하는 걸 추천해요.
(참고로 저는 Pretendard처럼 깔끔하게 잘 읽히는 고딕 계열을 본문에 많이 사용하는 편이에요.)
그리고 사람들은 긴 설명문을 처음부터 끝까지 꼼꼼하게 읽기보다
필요한 내용을 빠르게 훑어보는 경우가 많아요.
전달받은 문장이 너무 길다면 그대로 한 덩어리로 넣지 않고
필요한 만큼 문장을 줄이거나, 중간중간 엔터를 넣어 여백을 만들거나,
제목과 보조 설명을 나눠서 눈으로 훑어보기 쉽게 정리해요.
그리고 디자이너라면 다른 건 몰라도...
자간(글자 사이 거리)은 꼭 봅시다.
제발..!! 꼭이요.
글자 사이가 너무 벙벙하게 벌어져 있으면 잘 만든 디자인도 순식간에 어설퍼 보일 수 있어요.
특히 한글은 폰트와 굵기에 따라 기본 자간이 다 다르기 때문에
제목과 본문을 넣은 뒤 눈으로 직접 확인하면서 조절하는 편이에요.
폰트를 고르는 데서 끝내지 말고
크기, 굵기, 자간, 행간까지 같이 만져보세요.
이 몇 가지만 잘 정리돼도 같은 내용이 훨씬 깔끔하고 완성도 있게 보여요. 아시겠죵?!
8. 배경은 제품보다 먼저 튀지 않게 조심하세요
메인 비주얼을 만들 때 배경을 너무 화려하게 만들고 싶은 순간이 있어요.
특히 AI 이미지나 예쁜 스톡 이미지를 쓰면 배경 자체가 너무 잘 나와서 이걸 다 보여주고 싶어질 때가 있거든요.
그런데 제품보다 배경이 먼저 눈에 들어온다면 한 번 다시 보는 게 좋아요.
제품이 주인공이어야 하는데 뒤에 있는 인테리어가 더 예쁘거나
사람 모델이 더 강하게 보이면 제품 존재감이 약해질 수 있어요.
저는 배경을 고를 때
- 제품 색상이 묻히지는 않는지
- 제품과 명도 차이가 충분한지
- 텍스트를 넣을 여백이 있는지
- 전체 브랜드 분위기와 잘 맞는지
이런 것들도 꼭 같이 봐요.
예쁜 배경을 고르는 것보다 제품을 가장 잘 살려주는 배경을 고르는 게 더 중요해요.
9. 제품과 배경의 빛을 꼭 맞춰주세요
제품 펜툴(누끼)를 다른 배경에 합성할 때 굉장히 자주 티 나는 부분이에요.
배경은 왼쪽에서 빛이 들어오는데 제품 하이라이트는 오른쪽에 있다거나,
따뜻한 노란 조명의 공간인데 제품만 차갑고 하얀 스튜디오 조명을 받고 있다면 제품이 배경 위에 붕 떠 보일 수 있어요.
그래서 저는 합성할 때 빛이 어느 방향에서 들어오는지부터 확인하는 편이에요.
화이트밸런스부터 시작해서 하이라이트, 그림자, 색온도, 제품 아래 접지 그림자까지 같이 맞춰보세요.
메인 비주얼은 상세페이지에서 가장 크게 보이는 이미지라 작은 합성 오류도 더 잘 보여요.
AI로 만든 배경이나 합성 이미지를 사용할 때도 이 부분은 똑같이 확인해야 해요.
10. 카피가 들어갈 공간까지 생각해서 이미지를 준비하세요
이미지는 정말 멋있게 나왔는데 막상 디자인하려고 보니 글씨 넣을 곳이 없는 경우가 있어요.
제품은 정중앙, 소품은 양쪽 가득, 배경도 복잡함. 카피야 어디로 가야 하니...??
그래서 직접 촬영하거나 AI로 이미지를 만들 때도 처음부터 디자인 레이아웃을 생각해두는 게 좋아요.
제품을 오른쪽에 배치하고 왼쪽에는 넓은 여백을 둔다거나,
제품을 아래쪽에 두고 상단에 카피 공간을 남겨두는 식이에요.
이미지를 다 만든 다음 억지로 배경을 늘리는 것보다
처음부터 텍스트가 들어갈 자리를 만들어놓는 편이 훨씬 자연스러워요.
11. 레퍼런스는 비슷한 제품군에서 먼저 찾아보세요
메인 비주얼 방향이 잘 안 잡힐 때는 레퍼런스를 많이 찾아보는 게 도움이 돼요.
저는 가능하면 완전히 다른 업종보다 비슷한 제품군부터 보는 편이에요.
같은 전자제품이라면
제품 크기를 어느 정도로 보여주는지,
기능을 어디에 배치하는지,
메인 카피 길이는 어느 정도인지,
배경을 제품컷으로 쓰는지 실사용 이미지로 쓰는지 비교해볼 수 있어요.
그다음에 다른 업종의 좋은 디자인을 보면서
레이아웃이나 표현 방식을 참고하는 거예요.
레퍼런스를 볼 때는 그냥 예쁘다 하고 저장하는 것보다
왜 좋아 보이는지를 하나씩 뜯어서 보면 더 도움이 돼요.
제품이 크게 보여서 좋은 건지,
색 대비가 좋은 건지,
카피가 짧아서 강한 건지,
여백을 많이 사용해서 고급스러운 건지.
원리를 이해하면 다른 제품을 디자인할 때도 가져다 쓸 수 있어요.
12. 첫 화면만 따로 축소해서 한번 봐보세요
우리가 작업할 때는 모니터 가까이에서 디테일까지 보면서 디자인하잖아요?
그런데 소비자는 그렇게 보지 않아요.
특히 모바일에서는 훨씬 작은 화면으로 빠르게 봐요.
그래서 저는 메인 비주얼을 만든 뒤 화면을 작게 줄여서 한번 보는 걸 추천해요.
축소했을 때도 제품이 바로 보이는지, 메인 카피가 읽히는지,
강조해야 하는 내용이 눈에 들어오는지 확인해보세요.
디테일은 예쁜데 작게 줄이면 전부 한 덩어리로 뭉쳐 보인다면 정보가 너무 많은 걸 수도 있어요.
그리고 가능하면 실제 휴대폰에서도 꼭 한번 확인해보세요.
PC에서는 적당하다고 생각했던 글씨가 모바일에서 깨알처럼 보이는 경우가 정말 많아요.
13. 첫 시안부터 완벽하게 만들려고 하지 마세요
메인 비주얼은 중요하다 보니 처음부터 완성도 높은 한 가지 안을 만들려고 붙잡고 있을 수 있어요.
그런데 저는 오히려 초반에는 여러 방향을 러프하게 빠르게 잡아보는 편이 좋아요.
제품을 크게 보여주는 안,
실사용 장면을 사용하는 안,
제품 기능을 중심으로 잡는 안,
조금 더 감성적인 비주얼로 가는 안.
이런 식으로 전체 방향을 먼저 비교해보는 거예요.
러프 단계에서는 그림자 한 픽셀, 폰트 자간, 세세한 보정까지 붙잡지 않아도 돼요.
전체 구도와 메시지가 어떤 안에서 가장 잘 보이는지를 먼저 판단하고
방향이 정해진 뒤 디테일을 다듬는 편이 훨씬 효율적이에요.
특히 클라이언트 작업이라면 완성 디자인을 전부 만든 뒤 방향을 바꾸는 것보다
러프한 단계에서 먼저 의견을 맞추는 게 수정 공수를 줄이는 데 도움이 됩니다.
다 만들고 수정하는 것만큼 하기 싫은 게 또 없어요...ㅋ....ㅋㅋㅋ...
14. 메인 비주얼은 예쁜 이미지보다 역할을 잘하는 이미지가 좋아요
상세페이지 메인 비주얼을 오래 만들다 보니
제가 마지막에 확인하는 건 이 화면이 얼마나 화려하고 예쁜가보다는
'메인 화면으로서 제 역할을 하고 있는가?'예요.
제품이 바로 보이는지, 가장 중요한 장점이 눈에 들어오는지,
카피가 쉽게 읽히는지, 아래 내용을 더 보고 싶게 만드는지. 이 정도를 다시 봐요.
상세페이지 메인 비주얼은 예쁜 이미지 한 장을 만드는 작업이라기보다
소비자가 제품에 관심을 가지게 만드는 첫 화면이라고 생각해요.
만들다가 자꾸 방향을 잃는다면 레이어부터 더 추가하지 말고
이 제품에서 소비자에게 제일 먼저 보여줘야 하는 게 뭔지 한번 다시 적어보세요.
그게 명확해지면 메인 비주얼에서 무엇을 남기고 무엇을 빼야 하는지도 훨씬 쉽게 보일 거예요!