[디자인] 모바일웹 디자인을 위한 필수 팁

모바일웹 또는 반응형 디자인을 고민하고 계시는 여러분에게 프리모아가 필수적인 팁을 갈쳐드립니다. 

모바일웹[mobile web]

모바일웹은 사전적 정의로는 모바일(이동 단말기)를 통해 일반 웹에 접속할 수 있는 브라우징 기술이라고 합니다. 쉽게 말하면 PC환경에 맞춰서 만들어진 것은 웹(WEB), 모바일 환경에 맞춰서 만들어진 것은 모바일 웹(mobile web)이라고 볼 수 있습니다.

인터넷이 처음 보급화될 때는 WWW 혁명이라고 까지 표현을 하였는데요. 최근에는 오랫동안 세계를 주름잡던 W를 밀어내기 위한 M의 반란이라고 할 정도로 웹에서 모바일로 기술과 산업이 이전되고 있습니다. 단적인 예로 아웃소싱 플랫폼을 운영하고 있는 프리모아를 통해 들어오는 모바일 웹, 앱 개발 및 디자인 의뢰가 급증하였습니다. 

이는 미래 비지니스의 경쟁을 위해서는 모바일이 필수적임을 의미하고 있습니다. 때문에 오늘은 프리모아가 모바일 웹을 디자인하는 프리랜서들은 어떤 것을 고민해야 하는지를 알아보았습니다. 

1. 빠르게 움직이는 기술을 고려 

모바일 산업은 기술과 기기가 빠르게 변화하는 역동적인 산업입니다. 

대표적인 모바일 디바이스 업체인 애플(Ios) 과 삼성(Android), 두 경쟁사가 매년 새로운 모바일 디바이스를 발표하며 치열한 경쟁을 하는 것 만큼 시장은 오늘과 내일이 다를 정도로 역동적이고 다변적입니다. 

때문에 모바일 웹을 디자인하는 프리랜서는 항상 미래지향적인 디자인을 고려해야합니다. 프리랜서디자이너가 만든 모바일웹 사이트가 몇 년 뒤에도 운영되도록 항상 최신의 트렌드를 유지하는게 중요합니다.

2014년부터 2015년에는 페럴랙스를 활용한 디자인 기법들이 프리랜서 디자인들 사이에서는 최신 트렌드로 이슈가 되었습니다. 많은 모바일웹 사이트가 이러한 트렌드에 맞춰서 화면을 와이드하게 기획을 하였고, 방문하는 고객들은 신기해 했었습니다.하지만 이러한 모바일웹 사이트들이 많아지니까 오히려 반대로 페럴랙스 기법을 쓴 웹사이트를 꺼져하는게 보입니다. 

마케팅 용어로는 패드(거품처럼 금방 사라지는 일시적 붐)에 빠져든 것이지요. 때문에 모바일 웹을 디자인 하고 개발하는 입장에서는 현재의 트렌드를 생각하는게 아니라 미래의 트랜드를 예측해야 합니다.  

2. 변하지 않는 니즈 '사용자 행동을 읽기'

변하지 않는 니즈, 사용자 행동과 생각을 읽어야 합니다. 모바일웹 디자인을 하기 위해서는 유저에 대한 이해가 중요합니다. 예를 들어 모바일웹의 방문객들은 필수적으로 PC를 통해 방문하지 않는 다는 것을 염두해야 합니다. 

모바일 기기를 통해 모바일웹에 접속하는 동안에 사용자는 기차를 타고 출근중일 수 도 있고, 밥을 먹고 있는 중일 수도 있고, 소파에 누워있을 수도 있습니다. 

이러한 모바일 사용환경은 웹과 모바일웹의 디자인에 큰 차이를 만듭니다. 컨텐츠는 복잡하거나 무겁지 않으면서 핵심적이고 간결해야 합니다. 그렇다고 컨텐츠가 너무 단순해야 한다고 착각을 하면 소비자로 하여금 역효과를 줄 수있습니다. 모바일웹에 있어 사용자를 위한 컨텐츠가 없다면 정보라기 보다는 광고의 덩어리라고 인식을 해보리는 것이지요. 

모바일웹 디자인 설계 과정에 있어서는 다음을 고려해야 합니다. 사용자 사용 측면에서 쉽게 접근이 가능해야 하며, 유저들을 위한 컨텐츠가 풍부해야 합니다. 

3. 모바일 사이트 최적화

프리모아

모바일웹 사이트는 첫 번째로 방문페이지 최적화가 중요합니다. 모바일웹 상에서의 탐색경험, 텍스트 문구, 클릭을 유도하는 버튼, 그리고 클릭하였을 때의 양식과 메타정보가 사용자의 마음에 드는 것과 동시에 검색엔진에 최적화 되어야 합니다. 

UX, UI측면의 화면 구성 최적화도 고려해야 합니다. 랜딩페이지에 콜투액션이 포함되어있어야 합니다. 또한 유저 양식을 받는다면 사용자가 불편하지 않도록 입력필드를 단순하고 적게 유지해야 합니다. 모바일 웹에서 버튼을 클릭할 때는 다른 컨텐츠를 터치하지 않고 원하는 페이지에 도착할 수 있도록 해야합니다. 엄지손가락으로 눌를 수 있도록 실제 이미지보다 터치입력범위를 크게 하는 식의 터치간격을 고려해야 합니다. 

. 

4. 그리드와 브레이크 포인트 

모바일웹 디자인의 핵심 중의 다른 하나는 그리드와 브레이크 포인트입니다. 온라인 상의 다양한 툴이 폭과 화면을 정의하는데 많은 도움을 주는데요. 일부 개발자들은 화면과 해상도를 기반으로 브레이크 포인트를 설정합니다. 하지만 시장에는 많은 모바일 기기가 있기 때문에 최선의 해결책이라고 할 수 없습니다. 

디자인과 콘텐츠 구성에 기반을 해야합니다. 브레이크 포인트 및 그리드를 테스트하려면 설계하는 과정에서 브라우저 창 크기를 조정하는 등 확인 과정이 필요합니다. 

정리하면, 모바일웹을 구성할 때는 모바일 화면에서 보여지는 영역을 잘 나누어야 한다는 말인데요. 영역을 기기화면에 맞춰서 나누는게 아니라 컨텐츠와 디자인 오브젝트에 따라 나누는게 더 좋은 방법이라고 말하고 있습니다. 

4. UI, 호환성 및 가이드 라인

다양한 디바이스 템플릿 또는 브라우져 테스트를 할 경우, 온라인 상의 다양한 무료 툴을 이용가능

1. http://troy.labs.daum.net                2. www.browserstack.com

모든 모바일 OS는 똑같지 않았습니다. 때문에 Android 또는 Ios를 개발할때 가이드라인이 필요합니다. 예를 들어 유저의 브라우징 환경은 다양하고, 몇몇 오래된 OS 버전들은 모바일 웹사이트에 맞지 않을 것입니다. 때문에 이전 버전과 호환이 되는지 확인하는 것이 중요합니다. 이에 해당하는 유저들이 어떤 장치를 통해서 사이트에 접속하는지 분석하는 것도 중요합니다. 

해당 컨텐츠는 아래 원문 사이트를 재가공 하였습니다. 

http://www.webdesignerdepot.com/2014/03/essential-design-tips-for-the-mobile-web/