홈페이지 제작가이드

스마트폰의 화면은 점점 커지고 있지만, 우리의 손가락 길이는 그대로입니다.
PC에서는 마우스 커서 하나로 모든 곳을 클릭할 수 있지만, 모바일은 다릅니다.

사용자가 한 손으로 휴대폰을 쥐었을 때, 엄지손가락이 닿는 범위에는 명확한 '한계'가 존재하기 때문입니다.

PC보다 모바일/태블릿의 사용량이 높아지면서 제작 당시 모바일/태블릿의 환경에 맞춰서 제작을 요구하는 고객들이 늘었습니다.

그러다 보니 엄지손가락 하나로 모든 메뉴를 컨트롤 할 수 있는 점을 중요하게 생각하게 되는데요.

사용자의 약 75%는 스마트폰을 사용할 때 엄지만을 이용해 화면을 조작합니다.
이때 엄지가 자연스럽게 움직이는 궤적에 따라 화면은 세 가지 영역으로 나뉩니다.

Natural Zone (녹색 - 편안함)엄지가 가장 자연스럽고 빠르게 닿는 영역입니다. **'문의하기', '구매하기'**와 같은 핵심 CTA(Call to Action) 버튼이 위치해야 합니다.
Stretch Zone (황색 - 보통)손가락을 조금 뻗어야 닿는 영역입니다. 보조적인 정보나 메뉴 버튼이 위치하기 적당합니다.
Ouch Zone (적색 - 불편함)손을 고쳐 쥐거나 두 손을 써야만 닿는 영역입니다. 잘못 눌리면 안 되는 '삭제' 버튼이나, 단순 정보성 로고 등을 배치합니다.

버튼의 크기: 픽셀(px)이 아닌 '지문'을 고려하세요.모바일에서 버튼이 너무 작으면 사용자는 스트레스를 받습니다. 성인 검지 지문의 평균 크기는 약 10mm입니다.
이를 디지털 수치로 환산하면 최소 44px~48px 이상의 터치 영역을 확보해야 합니다.
버튼 자체는 작더라도, 클릭 가능한 '투명 영역'을 넓게 설정하는 것이 디자이너의 센스입니다.
하단 퀵 메뉴(Sticky Menu) 도입최근 트렌드는 주요 메뉴를 화면 상단이 아닌 **'하단'**에 배치하는 것입니다.
화면 상단(Ouch Zone)에 있는 햄버거 메뉴를 누르기 위해 손을 고쳐 쥐는 번거로움을 없애주세요.
화면 하단에 고정된 퀵바는 사용자에게 최고의 편의성을 제공하며, 상담 전화나 카톡 문의로 이어지는 '지름길'이 됩니다.
스크롤과 스와이프의 조화모바일 사용자는 끝없는 세로 스크롤에 피로를 느낍니다. 텍스트가 많은 구간이나 상품 리스트에서는 옆으로 슥슥 넘기는 '스와이프(Swipe)' 기능을 활용해 엄지손가락의 동선을 효율적으로 짜야 합니다.

지금 바로 여러분의 회사 홈페이지를 스마트폰으로 열고, 한 손으로 조작해 보세요.
만약 '문의하기' 버튼을 누르기 위해 손을 고쳐 쥐어야 한다면, 지금이 바로 디자인 개선이 필요한 시점입니다

쓰리웨이 홈페이지에서 무료 상담 및 견적 받아보세요!