상세페이지 디자인할 때 여러분은 어떤 화면을 제일 많이 보고 작업하시나요?
보통은 컴퓨터 모니터를 보면서 하시겠죠?
저역시 듀얼모니터 중 한쪽엔 포토샵 화면 크게 띄워놓고 한쪽은 소스 보면서 일했는데요.
큰 화면에서 작업할 때는 거의 모든 요소가 잘 보여요.
글씨도 선명하고, 제품도 큼직하고, 여백도 넉넉하고.
근데 문제는 제가 잘 보이는 게 중요한 게 아니더라고요.
상세페이지가 실제 쇼핑몰에 올라가고 휴대폰으로 확인해보면 분위기가 완전히 달라질 때가 있었어요.
분명 포토샵에서는 적당했던 글씨가 갑자기 깨알만 해지고.
제품 옆에 열심히 써놓은 설명은 읽기 귀찮을 정도로 작아지고.
이미지 안에 이것저것 예쁘게 배치했는데 모바일에서는 다닥다닥 붙어 보이고요.
아니 아까는 괜찮았는데..;;;
이런 걸 몇 번 겪으면서 저는 상세페이지를 만들 때 작업 화면만 보지 않고 모바일에서 어떻게 보이는지를 계속 확인하게 됐어요.
특히 폰트 크기와 굵기!
요소 사이의 여백!
그리고 작은 화면에서도 무슨 이미지인지 바로 알아볼 수 있는지!
이 세 가지가 생각보다 결과를 많이 바꿔주더라고요.
1. 폰트는 최소 23pt 이상
신입 때는 작은 글씨를 꽤 좋아했어요.
여백도 넓게 잡고, 얇은 폰트로 카피 조그맣게 넣고.
제품 이미지 하나 크게 배치하면 뭔가 깔끔하고 세련돼 보였거든요.
지금 봐도 그런 디자인 자체는 좋아합니다.
문제는 그걸 상세페이지에 그대로 적용했을 때였어요.
포스터처럼 감상하는 이미지가 아니라 제품 정보를 읽어야 하는 화면인데 글씨가 너무 작으면 소비자가 굳이 확대해서 읽어주지 않더라고요!
저도 실제 사이트에 올라간 페이지를 모바일로 확인하다가
나도 읽기 귀찮은데? 싶었던 적이 있었어요.
특히 제품 기능을 설명하는 바디카피가 문제였어요.
제목은 어느 정도 크게 쓰니까 괜찮은데 그 아래 설명문을 디자인 욕심내서 작고 얇게 넣으면 모바일에서 존재감이 거의 사라질 때가 있었거든요.
밝은 회색 글씨까지 썼다?
예쁜데 잘 안 보여요..ㅠㅠ
그래서 저는 나중에는 상세페이지 폰트를 볼 때 '이 정도면 예쁜가?'보다 '휴대폰으로 그냥 봐도 읽히나?'를 먼저 확인했어요.
작업하다가 이미지를 실제 게시 폭에 가깝게 줄여보고, 휴대폰에서도 한번 확인하는 식으로요.
그 상태에서 읽기 불편하면 글자를 키우거나 굵기를 조절했어요.
줄간격도 은근히 중요했어요.
글씨 자체는 충분히 큰데 여러 줄이 너무 붙어 있으면 작은 화면에서는 한 덩어리처럼 보여서 읽기가 답답하더라고요.
반대로 줄간격을 너무 넓히면 문장이 서로 다른 내용처럼 떨어져 보일 수도 있고요.
결국 실제 크기로 봐야 감이 왔어요.
그리고 저는 강조한다고 무조건 글씨를 많이 키우지도 않았어요.
메인 헤드카피, 소제목, 본문 설명.
이 정도만 크기 차이를 확실히 두고 나머지는 최대한 단순하게 가져갔어요.
모든 문구가 강조되어 있으면 결국 아무것도 강조되지 않거든요.
안녕하세요? 여길 봐주세요!
아참 이것도 봐주세요!
여기도 중요하답니다?!
이러면서 페이지 전체가 저한테 말을 겁니다.
그래서 폰트는 예쁜 걸 고르는 것보다 어떤 문장을 먼저 읽게 만들지 정하는 게 훨씬 중요했어요.
제목은 제목답게, 설명은 편하게 읽히게. (곧 죽어도 가독성 챙기기)
작은 안내문은 정말 필요한 만큼만.
이렇게 정리하니까 모바일로 볼 때도 훨씬 편해졌어요.
2. 모바일은 여백을 더 신경쓰기
제가 초반에 상세페이지 만들면서 많이 했던 실수 중 하나가 빈 공간이 보이면 자꾸 뭔가를 넣는 거였어요.
여기 좀 비었는데 아이콘 하나 넣을까?
아니면 제품 장점 하나 더 넣을까?
아니아니, 이정도면 이미지가 하나 더 들어갈 수 있겠는데?
그렇게 조금씩 채우다 보면 작업 화면에서는 꽤 풍성해 보이는데 모바일로 줄이는 순간 모든 게 가까워져요.
제품 이미지 바로 밑에 카피, 카피 바로 밑에 아이콘, 그 옆에는 설명, 조금만 내려가면 다음 섹션.
스크롤하는 입장에서는 숨 쉴 틈이 없는 페이지처럼 느껴질 수도 있겠더라고요.
저는 상세페이지가 길어질수록 여백을 아깝다고 생각하면 안 된다는 걸 꽤 늦게 배웠어요.
처음에는 여백이 불안했어요. 여기 이렇게 많이 비워도 되나? 하는 생각에 완전 잠식됐었거든요.
근데 모바일로 보면 그 빈 공간이 오히려 섹션을 구분해주는 역할을 한다는걸 차차 체득하게 됐어요.
적절한 여백은 제품의 핵심 기능 설명이 끝났다는 것도 알려주고,
다음 내용으로 넘어간다는 것도 보여주고,
카피와 이미지 중 어디를 먼저 봐야 할지도 정리해주더라고요.
특히 상세페이지는 아래로 계속 스크롤해서 보는 구조라서 섹션 사이의 간격이 너무 좁으면 서로 다른 내용이 한 덩어리처럼 붙어 보여요.
저도 예전에 기능 A 설명 바로 밑에 기능 B를 촘촘하게 붙여놓곤 했는데
모바일로 보니까 그냥 정신없더라고요....
현재의 제가 과거의 작업물을 열어보면 그땐 도대체 왜 이렇게 작업했지? 싶은게 백만개입니다. ㅋㅋㅋㅋㅋ
그래서 나중에는 중요한 기능 하나를 보여줬다면,
그 주변에는 조금 과하다 싶을 정도로 공간을 남겨보기도 했어요.
제품 이미지가 중요하면 주변 요소를 멀리 보내고.
핵심 카피를 읽히게 하고 싶으면 앞뒤 간격을 충분히 주고요.
그리고 여백이라고 꼭 새하얀 빈 공간만 뜻하는 것도 아니었어요.
배경색이 이어져 있어도 요소 사이 간격이 충분하면 시선이 훨씬 편해져요.
반대로 배경 컬러를 섹션마다 바꿔놔도 내부 요소가 다닥다닥 붙어 있으면 여전히 복잡합니다.
제가 상세페이지를 오래 만들면서 느낀 건 모바일에서는 '얼마나 많이 넣었는가'보다 '한 번에 얼마나 쉽게 읽히는가'가 더 중요하다는 거였어요.
기획서 받은 내용을 최대한 다 보여주겠다고 한 화면에 욱여 넣으면 여백이 하나도 없거든요.
그럴 때는 차라리 내용을 하나 더 아래로 내려서 섹션을 나누는 편이 나았어요.
세로 길이가 조금 길어지더라도 읽히는 게 먼저니까요.
여백은 남는 자리가 아니라 일부러 만들어주는 자리더라고요.
3. 이미지는 작아져도 내용이 잘 보이도록
상세페이지에서 이미지가 예쁜 것도 중요하지만 모바일에서는 그 이미지 안에 있는 내용이 실제로 보이는지가 더 중요했어요.
제가 전자제품 상세페이지를 많이 만들다 보니 제품 사용 장면이나 기능 설명 이미지를 자주 넣었는데요.
사람과 배경이 화면 대부분을 차지하고 정작 판매해야 하는 제품은 손톱만 하게 보이는 경우가 있었어요.
그래서 저는 라이프스타일 이미지를 고를 때도 단순히 사진이 예쁜지보다 작은 화면에서 제품이 얼마나 잘 보이는지를 보게 됐어요.
제품이 화면에서 너무 작다면 과감하게 크롭해서 사용하기도 했고.
주변 배경이 별로 중요하지 않다면 제품 쪽으로 훨씬 가까이 잡기도 했어요.
기능 설명 이미지도 마찬가지였어요.
예를 들어 제품의 특정 포트나 버튼을 보여줘야 하는데 전체 제품 이미지 하나 넣고 조그맣게 화살표만 달아놓으면 작업 화면에서는 알아볼 수 있어요.
근데 모바일에서는 화살표 끝이 어디를 가리키는지도 애매해질 수 있습니다.
그럴 때는 아예 해당 부분을 확대해서 별도의 이미지로 보여주는 편이 나았어요.
중요하다고 설명하고 싶다면 실제로 그 부분이 크게 보여야 하니까요.
그리고 합성 이미지도 모바일에서 다시 봤어요.
배경에 제품을 합성하고 그림자도 넣고 분위기까지 멋지게 만들었는데 배경 명암이 복잡하면 작은 화면에서 제품이 묻힐 때가 있었어요.
그럴 때는 제품 주변만 조금 정리하거나 대비를 조절해서 제품이 먼저 보이게 했어요.
결국 상세페이지 이미지는 작품사진이 아니라 판매할 제품을 보여주는 이미지잖아요.
예쁜 배경 때문에 제품이 안 보이면 주객전도입니다.
저도 예전에는 이미지가 근사하면 일단 넣고 싶었던 시기가 있었어요.
쉽게 말하자면 쓰고 싶은 이미지를 쓰고(뒤를 생각하지 않고) 나머지를 그 이미지에 맞춰 제작해 끼워넣는 식으로 일을 해버렸던 거죠.
몇십 번의 시행착오 끝에 나중에는 휴대폰으로 한번 줄여보고
'그래서 이 이미지에서 제품이 뭐 하는 건지 바로 보이나?'를 확인했어요.
안 보이면 크롭, 그래도 안 보이면 다른 이미지로 좀 아깝더라도 바꿨습니다.
제가 예쁜 사진을 자랑하려고 만드는 페이지가 아니라 제품을 잘 보여주려고 만드는 상세페이지니까요.
요즘은 상세페이지 작업하다가 괜찮다 싶으면 일단 한번 줄여봅니다.
작게 봐도 괜찮으면 그때 조금 안심해요.
고객들은 포토샵 100% 확대 화면으로 쇼핑하지 않으니까요.