고객은 상세페이지를 어떤 순서로 볼까?

위의 이미지가 뭔지 감이 오시나요?

웹사이트를 이용하는 실제 고객들의 시선이 어디에 머무는지를 보여주는 '아이트래킹(Eye-tracking) 히트맵'입니다. 붉게 표시된 부분일수록 고객의 눈길이 오래 머문 곳입니다.

어떤 모양이 보이시나요? 마치 알파벳 'F'자 형태를 띠고 있지 않나요? 이것이 바로 전 세계 수많은 사용자에게 공통으로 나타나는 시야의 흐름, 즉 'F-패턴'입니다.

안타깝게도 고객은 여러분이 상세페이지에 정성스레 적은 모든 텍스트를 읽지 않습니다. 그들은 단 '3초' 만에 이 페이지를 더 볼지, 나갈지를 결정하며, 위 아이트래킹 히트맵처럼 본능적인 순서로 정보를 훑어 내려갑니다.

" 지금 여러분의 상세페이지는 고객의 이 본능적인 시선 흐름을 이해하고 있나요? "

아니면 갈 곳 잃은 시선이 허공을 떠돌다 '뒤로 가기' 버튼으로 향하게 방치하고 있나요?

이 시선을 설계하는 핵심 원리인 시각적 계층 구조(Visual Hierarchy)에 대해서 알아봅시다.

1. 시각적 계층 구조(Visual Hierarchy)란 무엇인가?

시각적 계층 구조는 단순히 디자인을 예쁘게 만드는 기술이 아닙니다. 고객이 시각적 요소를 어떤 순서로 인식할지를 설계하는 전략입니다. 이것은 디자인의 중요한 부분 중 하나로, 사용자가 화면을 스캔하고 정보를 이해하는 데 도움이 되는 시각적 구조를 만드는 것을 의미합니다.

잘 설계된 시각적 계층 구조는 고객이 원하는 정보나 기능을 빠르고 쉽게 찾을 수 있도록 도와줍니다. 올바른 구조를 구성하면 고객 경험(CX)이 향상되며, 이는 곧 상세페이지의 효율성(전환율) 증가로 이어집니다.

2. 중국 구매대행 셀러에게 이 원칙이 왜 중요한가?

중국 구매대행을 하는 셀러들은 보통 타오바오의 상세페이지를 그대로 가져와 텍스트만 번역하는 경우가 많습니다. 하지만 중국의 원본 상세페이지는 한국의 소비 트렌드에 비해 지나치게 정보가 밀집되어 있고 화려하여 시선이 분산되기 쉽습니다.

한국 고객의 시선을 잡으려면 원본 이미지의 홍수 속에서 '무엇을 먼저 보게 할 것인가'를 결정하는 시각적 우선순위 재배치가 필수적입니다.

3. 시각적 계층 구조 핵심 요소 3가지

크기(Size)

가장 중요한 셀링 포인트(USP)를 더 크게 표시하여 주목성을 높여야 합니다. 타오바오 이미지 속의 수많은 텍스트 중, 고객이 반드시 알아야 할 내용 하나만 압도적인 크기로 키우세요. 작은 요소는 부차적인 정보나 세부 사항으로 사용하면 됩니다.

색상(Color)

강조하려는 요소(예: 구매 혜택, 이벤트, 핵심 기능)에 더 두드러진 색상을 사용하여 시선을 유도하십시오. 중요하지 않은 요소에는 덜 두드러진 색상을 사용하여 고객이 피로감을 느끼지 않게 조절해야 합니다.

위치(Position)

앞서 본 히트맵처럼, 중요한 혜택이나 기능은 화면 상단이나 중앙에 배치하여 사용자의 주의를 집중시켜야 합니다. 특히 상세페이지 최상단 30% 영역 안에 고객이 얻을 이득을 배치하는 것이 중요합니다. 부차적인 콘텐츠는 하단이나 터치하기 어려운 위치에 배치합니다.

단순 번역을 넘어 '설계'를 시작하세요.

디자인 전공자가 아니어도 괜찮습니다. 타오바오의 이미지를 그대로 복사해 붙이는 셀러들 사이에서, 시각적 계층 구조를 이해하고 고객의 시선을 의도적으로 이끄는 셀러는 다를 수 밖에 없습니다.

지금 바로 여러분의 상세페이지를 '고객의 눈'으로 점검해 보세요. 이제 타오바오 상세페이지를 가져올 때 단순히 '글자 바꾸기'를 넘어

"고객의 시선이 어디에 먼저 머물게 할 것인가?"

를 고민하고 크기, 색상, 위치를 조정하는 순간, 여러분의 상세페이지는 팔리는 페이지로 거듭날 것입니다.

• reference : https://webflow.com/blog/visual-hierarchy