모바일 화면을 PC 버전으로 디자인하기
모바일을 통한 인터넷 사용량이 PC를 통한 접속보다 많아지며 PC 웹 없이 모바일 앱/웹만 있는 서비스가 많다. 그렇지만 모바일의 유저가 많아지고 서비스의 확장이 필요할 때 PC 웹을 개발하는 상황이 필요할 수 있다.
이때 PC웹에 최적화된 형태로 디자인/개발하는 방법과 모바일 화면을 그대로 PC웹에 임베딩하는 방법이 있다.
전자는, PC 웹 특성에 맞고, 사용성을 고려해 디자인하기에 사용하는데 어색함이 없을 수 있다. 후자는 PC 웹 최적화 버전이 아니기에 모바일 화면을 활용하는 것이나, 기존 개발되었던 화면을 활용하는 형태임으로 구축/운영 리소스가 훨씬 줄어든다.
강남언니 PC 버전이전에 진행했던 프로젝트에서는 모바일 화면을 PC화면에 iframe 방식으로 붙이는 방식을 고려했다가, 개발 이슈로 인해 진행이 중단되었고, PC 버전으로 최적화하여 디자인/개발을 하게 되었다.
그래서 다음 내용으로는 모바일 화면을 PC 웹에 최적화하여 재디자인할 때 고려해야 할 점에 대해서 PC 웹의 구조를 중심으로 전달하고자 한다.
1. 헤더
모든 PC 디자인에 헤더가 표시되는 것은 아니지만 대다수는 헤더영역을 가진다.
PC는 모바일에 대비해 화면이 길기 때문에 헤더 영역을 고정으로 둘 경우 주요 메뉴로 빠르게 이동할 수 있다. 또한 정보량이 많지 않은 PC 웹에서 사용자의 시선은 Z패턴을 가지기 때문에 사용자와의 첫 지점인 헤더 왼쪽 영역에서 브랜드의 얼굴 역할을 할 수 있다.
헤더에서는 모바일에서 한눈에 보기 어려웠던 서비스가 담고 있는 구조/ 위계를 헤더를 통해 보여줄 수 있다. 또한 브랜드 로고, 프로필, 알림, 설정과 같은 주요 기능들이 표시되기도 한다.
현대카드 모바일 버전, PC 버전 디자인2. 푸터
모바일에는 푸터의 개념이 없다. 그러나 pc 웹에서는 푸터가 표시되는데 사이트 로고, 기본 정보, 바로가기 링크, 언어 설정, 그룹사 홈페이지 이동 등의 내용이 포함된다.
더현대 서울 홈페이지 푸터3. 콘텐츠 / 여백 영역
PC에서는 해상도 및 가이드에 따라 콘텐츠 영역과 여백 영역이 나누어진다. 모바일에 구현된 레이아웃을 pc 웹에 올렸을 때 시각적인 이슈가 없는지 확인해야 한다.
모바일 앱의 경우 손가락 드래그를 통해 화면을 움직이지만 PC의 경우는 스크롤을 통해 이동할 수 있기에 상대적으로 화면 길이의 제약을 덜 받는다. 그래서 모바일에서 영역 이슈로 요약했던 내용을 이미지와 텍스트를 함께 사용하여 전달력을 높일 수 있다. 아래 당근마켓 서비스 설명을 예시로 들자면, 모바일 영역에서는 중요 설명과 이미지를 전달했다면, PC버전에서는 내용은 동일하지만 동네 정보와 이야기 섹션 내 소 카테고리를 부가적으로 설명하고 있다.
당근마켓 서비스 설명 페이지또한 하위 메뉴들 중 중요도가 높은 항목을 메인 화면에서 숏컷으로 제공해 사용자가 빠르게 접근할 수 있도록 할 수 있으며, 서비스 광고나 문의사항을 넣는 것도 방법이 된다. 이때 주의해야 할 점은, 사용자에게 필요한 정보를 노출해야 한다는 점이다. 여백 채우기 목적으로 중복으로 기능을 노출시키거나 무의미한 내용을 표시하는 것은 오히려 방해가 될 수 있다.
올리브영 홈페이지Reference :
https://brunch.co.kr/@blackindigo-red/38
https://www.designkits.co.kr/blog/web-design/Mobile-PC
https://www.beusable.net/blog/?p=4391
