Web Guide반응형 웹모바일 퍼스트모바일 최적화

반응형 디자인의 실제 : 모바일 화면을 먼저 그려야 하는 이유

반응형 홈페이지는 PC 화면을 작게 줄여 놓은 것이 아닙니다. 화면 크기에 따라 정보의 우선순위를 다시 정하는 일입니다.

방문자의 절반 이상이 모바일로 오는 지금, PC 디자인을 먼저 그리고 모바일을 나중에 맞추는 순서는 거꾸로입니다.

01 모바일에서는
순서가 곧 디자인

PC에서 좌우로 나란히 놓인 정보는 모바일에서 위아래로 쌓입니다. 무엇이 먼저 보일지가 곧 디자인 결정입니다.

부수 효과

첫 화면에 무엇을 남기고 무엇을 아래로 내릴지 정해야 합니다.

이 결정을 미루면 모바일에서 모든 것이 같은 무게로 쌓입니다.

02 손가락 크기와
한 손 조작

버튼과 링크는 최소 44픽셀 이상의 터치 영역이 필요하고, 자주 쓰는 동작은 엄지가 닿는 화면 하단에 가까울수록 좋습니다.

전화번호는 눌러서 바로 통화되어야 하고, 주소는 지도 앱으로 연결되어야 합니다. 이런 동작은 PC에서는 보이지 않으므로 모바일 검수에서만 발견됩니다.

03 표와 이미지
모바일의 난제

가로로 긴 표는 모바일에서 잘리거나 글자가 깨알처럼 작아집니다.

큰 이미지는 모바일용으로 별도 크기를 준비해 용량과 로딩 시간을 줄입니다.

04 실제 기기에서
확인한다

브라우저 개발자 도구의 모바일 미리보기는 참고일 뿐입니다. 실제 아이폰과 안드로이드 기기에서 메뉴, 폼 입력, 스크롤, 확대 동작을 확인해야 합니다.

웹비스타 진행 방식

시안 단계부터 모바일 화면을 함께 제안합니다.

오픈 전에는 실제 기기 검수를 진행합니다.

CHECK POINT

□  모바일에서 정보가 쌓이는 순서를 검토했는가
□  전화 · 주소 등 모바일 고유 동작이 작동하는가
□  표와 큰 이미지의 모바일 처리 방식을 정했는가

반응형은 화면을 줄이는 기술이 아니라, 우선순위를 정하는 기획입니다.

모바일 화면부터 그리면 그 기획이 먼저 끝납니다.