저는 상세페이지에 gif 이미지를 되도록 적게 쓰려고 합니다. gif 파일 포맷 자체가 무겁기 때문에 욕심에 남발하면 게으른 행동이라고 생각합니다. 이전 포스팅에서도 여러 번 언급했었습니다.

움직이는 장면을 무조건 싫어하진 않습니다. 필요할 때 제대로 사용하려고 합니다. 다른 제품에 비해 특장점이 될 수 있는 부분에 gif를 조금씩만 사용하도록 권장합니다.

그렇다면 gif가 들어가지 않는 부분은요? 어떻게 시선을 끌 수 있을까요? 움직이지 않는 부분에서도 제품의 특징을 드러내고 싶은 분들께 이 포스팅을 추천드립니다.

어디까지 가능해? 움직임 표현하기

상세페이지를 만들 때 최대한 지키려고 애쓰는 원칙이 하나 있습니다. 바로 제품의 기능을 최대한 시각화하는 것입니다. 이 제품은 어떻게 작동할까요? 제품에서 나는 소리는요? 제품을 만지면 촉감은 어떨까요? 내가 보고 듣고 느낀 점들을 그래픽으로 최대한 담을 수 있도록 합니다. 그 여러 요소 중 하나가 움직임입니다.

하나, 잔상 나타내기

저절로 움직이거나 꺾어서 움직일 수 있는 제품이라면 범위를 표현해보세요. ‘나 이만큼 움직여요오오’를 gif보다 더 빠르고 직관적으로 표현할 수 있습니다.

• 관련 포스팅: 선풍기 헤드가 움직이는 범위 표현하기

둘, 화살표로 방향 나타내기

화살표 머리는 방향, 꼬리는 흐름을 나타냅니다. 방향과 운동, 회전, 강약 등을 표현하기 좋습니다. 화살표는 이미지를 더 생동감있게 만듭니다. 머리의 뾰족한 부분으로 시선이 집중되어 강조 효과도 얹을 수 있습니다.

노브 다이얼을 돌리는 모습을 화살표로 만들었습니다. 사진만 덩그러니 있는 것보다 돌릴 수 있다는 메시지를 더 강력하게 전달합니다. 꼬리를 다르게 만들어 질감을 다양하게 표현해보세요.

• 관련 포스팅: 컨트롤 노브 회전을 화살표로 표현하기

공기의 흐름도 표현할 수 있습니다. 뜨거운 공기는 위로 올라가고 찬 공기는 아래로 내려옵니다. 그대로 표현해주세요. 꼬리가 길면 공기의 긴 흐름, ‘바람’이 됩니다. 뜨끈하게 열이 나는 느낌도 줄 수 있습니다. 색상으로만 표현하는 것보다 생동감 있습니다.

• 관련 포스팅: 뜨끈뜨끈 라디에이터 열기 표현하기 (feat. 에어컨 냉풍)

여기예요! 한눈에 들어오게 강조하기

셋, 확대하기

작은 제품을 가장 보여주기 쉬운 방법은 확대입니다. 제품 전체 사진을 작게 넣고, 보여줄 부분을 크게 넣습니다. 말풍선이나 화살표로 두 지점을 연결해주세요. 아래 사진은 안전깔때기 상세페이지의 일부입니다.

확대하면 한 부분에 집중하도록 유도할 수 있습니다. 하지만 확대한 사진만 넣으면 한번에 알아보기 어렵습니다. 작은 제품은 실제보다 커보이기도 합니다. 그럴 때는 손·필기구·휴대폰 등과 함께 촬영한 사진을 추가로 넣어주세요. 실제 크기를 쉽게 가늠할 수 있습니다.

• 관련 포스팅: 불편했던 상세페이지 뜯어보기 ②너무 크거나 혹은 너무 작거나

넷, 컬러 오버레이로 표현

제품 사진의 특정 부분에 색상을 입혀서 강조할 수도 있습니다. 레이어 위에 색칠하고 레이어 블렌드 모드를 적절하게 바꿔주면 됩니다. 안전깔때기 사진의 가스켓 부분에 주황 계열색으로 빛나는 효과를 주었습니다. 뚜껑 사진만 올려두고 멘트로만 ‘가스 차단 가스켓’이라고 하는 것보다 더 빠르게 인식할 수 있습니다.

이 제품은 옷에 붙은 먼지를 터는 기구입니다. 레버를 좌우로 밀어서 본체에 붙은 먼지를 털어내고 양방향으로 사용할 수 있습니다. 레버를 강조하고 빛나는 효과를 주어 눈에 더 띌 수 있게 했습니다.

• 관련 포스팅: 원하는 부분, 오버레이로 강조해볼까?

기능을 시각화하는 그래픽이 좋은 그래픽입니다. 만약 상세페이지를 만드는 제품을 안 써보았다면 반드시 써보세요. 내가 무심코 만든 그래픽을 소비자가 다르게 해석할 수도 있기 때문이에요.

주의해야 할 점

한 가지 주의점이 있습니다. 절대 과장하면 안 됩니다. 제품의 특성을 최대한 보여줘야지, 없는 점을 있다고 하면 안 됩니다. 제품이 이미 유명하다면 신뢰도가 떨어집니다. 유명하지 않다면 소비자가 스펙을 확인하고 브랜드를 우습게 봅니다. 제품을 이미 샀다면 소비자는 매일 쓰면서도 이렇게 생각할 겁니다. ‘다시는 안 산다!!’

마치며

꼭 움직이지 않아도 충분히 강조할 수 있습니다. 특정 파일 포맷을 선호하는 건 작업자의 취향 문제이기도 하지만 마구잡이로 움짤을 뿌려대면 쉽게 피곤해지는 게 사실입니다. 디자인 요소들을 잘 활용해서 그래픽을 만들어보세요.

움직이는 곳에 시선이 가기 때문에 꼭 필요한 곳에 쓴다면 더 강조됩니다. 결국 기획이 중요하다는 생각을 한번 더 하게 되네요.