[위시켓] 모바일 웹디자인에 대해 알아 두어야 할 7가지

2014.07.15

|

855
Mobile-Web-Browser-Optimization-Influences-B2B-Market-2

 

Adobe가 한 조사에 따르면 마케터의 거의 절반 정도가 모바일에 최적화된 웹사이트를 갖고 있지 않다고 합니다. 스마트폰과 태블릿이 도처에 널린 데다가 이런 기기들을 통해 사이트에 접속하는 비율이 늘고있는 데도 말이지요. 온라인 시장에서의 경쟁은 치열합니다. 만약 고객들을 편히 해줄만한 모바일용 사이트가 없다면 금방 점유율을 잃고 말거예요. 그럼 어떻게 해결해야 할까요? 디자인 과정이 어떻게 이루어지는지 살펴봅시다. 가장 좋은 시작 방법은 여러분과 비슷한 회사는 어떤 모바일 디자인을 사용하고 있는지 조사해보는 것입니다. 스마트폰을 이용해서 경쟁회사의 웹사이트를 철저하게 조사해보세요. 다 끝났으면 그 사이트들을 여러분의 사이트와 비교해서 어떤 디자인을 선택할지, 그리고 무엇을 개선해야 할지 감을 잡아보세요.    

PC버전과 모바일 버전 디자인이 다른 

어떤 걸 먼저 해야 할까요? 커다란 PC버전 디자인? 아니면 모바일용? 디자이너 조슈아 존슨이 ‘모바일을 먼저 디자인해야 하는 이유’라는 글에서 언급했듯이 작은 스크린을 대상으로 하는 디자인부터 시작해야 세심하고, 집중과 선택이 제대로 이루어진 디자인을 할 수 있다고 합니다. 모든 중요한 콘텐츠를 모바일 버전에 넣고 시작하는 것이지요. 모바일용을 디자인한다는 게 꼭 PC버전을 축소해서 만드는 거라고 보기는 어렵습니다. 그보다는 존슨이 말한대로 모바일용에 단계적 향상을 더해 큰 스크린용을 디자인하는 것이지요. 이와 같은 사이트 개발 방식은 반응형 디자인과 잘 어울립니다. 하지만 모바일용을 먼저 제작하는 방식에는 단점도 있습니다. 우선, 전체 웹사이트를 다시 제작할 생각을 누가하고 싶을까요? 모바일용을 먼저 제작하는 방식은 이점이 있기는 하지만 PC버전을 위해 아예 새롭게 다시 제작해야 하니 시간과 비용이 배로 든다는 단점이 있습니다. 둘째로, 미적인 측면에서 볼 때 모바일용을 먼저 제작하면 제한되는 부분이 많습니다. 여러분이 원하는 브랜드 이미지를 구상하고 실행해서 작은 화면안에 집어넣는 것은 쉽지 않지요. 여러분의 사이트에 알맞은 과정을 택하기 위해 전문 웹디자이너에게 상담해보는 것도 괜찮습니다. 전문가들은 여러분의 사업에 필요한 노하우를 알려줄 수 있으니까요.    

모바일용 웹을 디자인할 때 중요한  7가지 원칙

여러분의 사업 철학이 무엇이든 간에 모바일 웹사이트를 디자인하는 사람이면 누구나 지켜야 하는 기본적인 원칙들이 있습니다.

  1. 가장 인기있고 중요한 콘텐츠를 위주로 디자인할 것 여러분 사이트에 방문하는 사람들 중 대다수가 찾는 콘텐츠가 무엇인가요? 바로 그것이 여러분의 디자인에 가장 중심이 되어야 합니다. 그 콘텐츠가 찾기도 쉽고 이용도 하기 쉬워야 사이트 방문자들이 다른 사이트로 넘어가지 않습니다.
  2. 모든 콘텐츠가 접근 가능할 것 모바일 사용자들은 여러분 사이트에서 제공하는 모든 콘텐츠에 접근할 수 있어야 합니다. 찾고 있는 정보가 여러분 사이트에 있길래 접속했는데 모바일에서는 볼 수 없는 정보라고 하면 좌절하겠지요. 여기서 주의할 점은 콘텐츠가 꼭 네비게이션바(navigation bar)를 통해서만 접속 가능할 필요는 없다는 것입니다.
  3. 네비게이션 항목을 제한할 것 중심이 되는 정보는 선택과 집중을 통해 골라내야 합니다. 메뉴가 너무 많거나 클릭할 게 너무 많으면 안됩니다. 사이트가 모바일 환경에 적합하기 위해서는 단순화 작업을 거쳐야 합니다. Econsultancy의 데이비드 모스는 메뉴 레이아웃은 세 개 이하로, 각 메뉴에 있는 항목은 대여섯 개 이하로 한정할 것을 추천합니다.
  4. 버튼의 중요성을 잊지말 것 엄지 손가락으로 스마트폰을 클릭하는 것은 생각보다 정확도가 떨어집니다. 클릭할 버튼들을 너무 다닥다닥 붙여놓으면 클릭하기 힘들겠지요. 또, 작은 폰트를 쓰거나 버튼을 조그맣게 만들어 놓지 마세요. 손가락으로 누르기 쉽게 만들어 놓으세요.
  5. 시청각적인 요소를 잘 살필 것 미적인 부분이 중요하기는 하지만 거기에 치중하다가 사이트가 제대로 작동하지 않을 수 있습니다. 혹시 너무 큰 이미지 파일은 없는지, 글자를 너무 많이 로드해서 지워지는 폰트는 없는 지 모바일 환경에서는 작동하지 않는 동영상 포맷은 없는 지 확인하세요.
  6. 팝업은 문제를 일으킬 수 있다는 것을 기억할 것 너무 많은 팝업을 띄우면 방문자 입장에서는 짜증이 납니다. 가뜩이나 화면도 작은데 그 많은 팝업들을 지우고 있으려면 그럴만도 하지요. 꼭 필요한 게 아니면 팝업은 자제하세요.
  7. 채울 항목을 줄일 것 엄지 손가락으로 스마트폰 화면에서 글자를 타이핑해서 항목을 메우는 일은 쉽지 않습니다. 기입해야 할 텍스트는 최소로 줄이세요. 에세이를 쓰는 것이 아니니까요.

  그 외에도 모바일 버전을 디자인하는 것에 있어서 중요한 점은 무궁무진하지요. 여러분이 보기에 중요한 건 어떤 건가요? 우리가 빠뜨린 것이 있나요? 더 많은 고객을 끌어 들이려면 모바일 버전을 어떻게 만들어야 할까요? 댓글란에 여러분의 의견을 알려주세요.  

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

it프리랜서wishketwishket.com개발프로젝트디자인프로젝트모바일웹디자인앱개발웹개발위시캣위시켓위시켓블로그프리랜서가이드프리랜서상식
다음 글

위시켓 블로그의 새로운 소식 받기