모바일사이트를 디자인할 때 알아야 할 것들 1부

안녕하세요 키다리디자이너입니다.

 

요즘은 웹디자인을 하며 피씨 홈페이지보다 모바일 사이트나 앱을 만들어야 하는 일이 아주 많아졌습니다.
키다리디자이너도 어쩌다 보니 피씨전용 홈페이지를 만든게 상당히 오래된 것 같습니다.
최근 2년 사이에 피씨 전용 홈페이지를 만든 것은 ERP나 CMS같은 사내 데이터관리 사이트 정도였으니까요.

 

그도 그럴 것이 이제 대부분의 회사들이 피씨사이트보다 모바일에서 수익원을 창출하려고 하기 떄문이 아닐까 합니다.
그만큼 이제 피씨쪽은 별볼일 없고 모바일이 대세라는 인식이 지배적인 것 같습니다.

키다리디자이너는 이 모바일만이 정답이라고 생각하지는 않지만 어느정도 동의는 합니다.

아마 지금은 피씨와 모바일간의 타협점을 찾아가는 과정이 아닐까 합니다.

 

자 이제 본론으로 들어가서 모바일디자인은 어떻게 해야 하는 것인가에 대해 얘기해 보겠습니다.

 

1. 모바일 웹 디자인에 대한 개념잡기

 

피씨웹을 만들던 웹디자이너에게 모바일웹 디자인을 시키면 대부분 피씨홈페이지를 꾸미던 습관(?)이나 방법을 그대로 사용합니다.
그런 현상은 기획자도 마찬가지인 경우가 많은데 그것을 만드는 많은 분들이 모바일웹은 단지 화면만 작아졌을 뿐인 작은 홈페이지라고 생각하기 때문이죠.

하지만 이것은 굉장히 용감한 생각입니다.

 

뭐라고 쓰인 건지 돋보기 대고 봐야될 듯..

 

피씨용 홈페이지의 개념은 예쁘게 짜여진 문서의 집합, 혹은 커다란 모니터화면을 이용한 광고판의 개념이 강합니다.
그러나 모바일 웹은 다릅니다.

작은 화면으로 언제 어디서든 원하는 정보를 빠르게 접근해야 하기 때문에 키다리디자이너는 개인적으로 스마트폰의 개념을 이렇게 생각합니다.

‘사람에게 부착된 네비게이션’

우리는 스마트폰을 사용할 때 책상 앞에 가만히 앉아 사용하지 않습니다.
걸어가거나 지하철에 있거나 잠자리에서나 항상 스마트폰을 쥐고 사용하고 있습니다.
말 그대로 우리 삶에 네비게이션 같은 역할을 하고 있는 것이죠.

 

 

네비게이션에 의지해서 운전을 해본 경험이 있는 분들은 이 네비게이션에 표시되는 지도의 신속정확성과 정보에 대한 가독성이 얼마나 중요한지 잘 아실 것입니다.
운전자는 특히 복잡한 교차로나 골목길에서 네비에 표시되는 내용이 정확하지 않아 엉뚱한 길로 들어서게 된다면 당장 다른 회사의 네비게이션을 알아보게 될 것입니다.

 

그러면 모바일웹에서 가장 중요한 사항이 결정되었습니다.
정확성, 신속성, 가독성, 편의성 정도가 되겠네요.

 

2. 플랫디자인은 당연한 결과

 

공백이 많고 평면적이며 커다란 요소들을 갖춘 플랫디자인은 가독성이 뛰어나고 컨텐츠가 강조하고자 하는 내용을 쉽게 전달할 수 있습니다.
모바일을 위한 디자인에 플랫스타일은 어쩌면 필요에 의한 당연한 결과입니다.

 

 

     

요즘은 피씨용 웹사이트에도 단지 유행이기 때문에 아이콘 요소나 그래픽 요소에 플랫스타일 디자인을 남발하는데 제발 그러지 말라고 말하고 싶습니다.
피씨는 피씨웹사이트답게 디자인하길 바랍니다.

 

3. 손가락크기에 맞춰 디자인하자.

 

모바일은 마우스포인터가 아닌 사람의 손가락으로 클릭합니다.
그렇기 때문에 링크가 너무 따박따박 붙어 있다거나 그 영역이 너무 작으면 사용자는 불편을 느끼게 될 것입니다.
또한 손가락이 가늘고 예쁜 분도 있지만 통뼈에 커다란 손을 가진 분들도 있으니 너무 작거나 오밀조밀하게 디자인하는 것은 피해야 합니다.

 

4. 사용자는 로딩시간에 예민하다.

 

요즘은 LTE처럼 빠른 회선을 사용하는 분이 많지만 3G나 열악한 와이파이 환경에서 모바일웹을 사용하는 분들도 많습니다.
그렇기 때문에 모바일웹은 로딩시간과의 전쟁이라고 해도 과언이 아닙니다.

안그래도 레티나디스플이같이 픽셀밀도가 작은 폰들 때문에 이미지의 크기를 두배이상 키워야 하는데 불필요한 요소들 때문에 로딩시간이 길어지는 일은 반드시 피해야 합니다.

 

 

그래픽적인 요소들도 가능하면 CSS만으로 처리할 수 있도록 하고 커다란 배경이미지는 피하는 것이 좋습니다.
또한 배경이미지는 모바일 특성상 조명이나 디스플레이 종류에 따라 가독성을 해칠 수 있기 때문에 좋지 않습니다.

 

코딩에 있어서도 복잡하고 지저분한 코딩이나 자바스크립트의 남발은 웹사이트를 느리게 하는데 큰 역할을 하게 됩니다. 가능한 중복되는 부분을 줄이고 간결하게 CSS를 정리하길 바랍니다.

 

5. 체류시간이 짧다.

 

많은 기획자들이 놓치기 쉬운 사실이 모바일 웹사이트는 사용자의 충성도가 피씨사이트 보다는 낮다는 것에 있습니다.
모바일웹사이트를 자주 찾는 웹사이트(즐겨찾기)로 추가하는 일도 피씨사이트에 비해 많이 저조합니다.
그들은 어떤 필요에 의해 접속했지만 현재 보고 있는 웹사이트의 다른 정보들에는 관심이 없는 경우가 대부분이니까요. 다시 말해 모바일웹사이트의 접속 경로는 거의 포탈사이트의 검색 결과에 의존하고 있고 사용자는 필요한 정보에 빨리 접근하도록 도와줘야 합니다.

 

그렇다면 페이지가 떴을 때 어떤 다른 컨텐츠나 장식 등으로 내용을 보기 힘들게 해서는 안되겠죠.
웹사이트의 구성은 가능한한 사용자가 원하는 정보를 보여주는데에 최대한 할애하시기 바랍니다.

 

 

여기까지 모바일웹사이트를 디자인하는 방법 1부를 마치고 다음에 계속 이어나가도록 하겠습니다.

 

마지막으로 모바일웹을 디자인하실 때에는 피씨웹을 만들 때보다 좀 더 사용자 입장에서 고민을 하시기 바랍니다.
화면이 작아질수록 디자이너의 역할은 더욱 커지게 되니까요.

 

2부에 계속...