서울NPO지원센터의 컨텐츠 공유 협약 기관인 다음세대재단 ChangeOn 제공 컨텐츠입니다.

[비영리를 위한 UX 전문가의 인사이트] 시리즈 전체 내용 보기

요즘 서비스를 생각할 때 가장 먼저 고민하는 건 모바일이 아닐까 합니다. 

Mobile First! 이건 뭐 이유를 딱히 설명할 필요가 없죠. 

스마트폰의 보급이 우리 생활을 송두리째 바꿔 놓았다는 말은 이제 진부하고 너무나도 당연지사적인 말이 되어버렸죠. 한국인터넷 진흥원 조사에 따르면 2014년 한국의 모바일인터넷 일평균 이용 빈도는 12.8회, 이용 시간은 1시간 44분으로 나타나고 있으며, 스마트폰 활용도는 모든 서비스 분야에서 상승하고 있답니다.  

보급율로 따져본다면 최근 3년간 스마트폰 보급율은 65.0%에서 84.1%로 상승하는 반면, PC는 82.3%에서 78.2%로 하락하고 있는 추세인데요. PC사용이 여전히 높은 편이라 무시할 수 없지만, 전반적인 흐름으로 본다면 모바일의 급격한 상승에 주목해야 하죠. 이제 웬만한 것들은 스마트폰에서 가능해졌고, PC를 켜기보다는 스마트폰이나 테블릿을 이용하려는 경향이 점점 높아지고 있어요. 
 

보여지는 방식이나 형태가 달라져야 작은 화면에 최적화된 콘텐츠를 보여줄 수 있어요. PC에서 사용하는 마우스가 아니라 직접 터치를 통해서 사용한다는 점도 큰 차이에요. 마우스와 같은 세밀한 조작을 할 수 없다는 점을 유념해둬야 해요. 그리고 모바일은 어디서든 접속할 수 있다는 장점이 있기 때문에 이 점을 극대화할 수 있는 방법을 고민해야 하죠.  

이외에도 제공되는 운영체제의 차이도 있고, 모바일웹이냐 모바일앱이냐 등의 특성 등도 생각해볼 요소들이에요. 특히 모바일 웹과 모바일 앱은 제공할 수 있는 인터랙션(Interaction,  사용자와의 상호작용)방식에 차이를 가질 수 있기 때문에 적극적으로 고민해야 하는 부분이에요.  

모바일에서 Less is More

모바일에서 생각해야할 가장 핵심은 "작은 화면을 어떻게 하면 효율적으로 활용할 수 있는가."입니다. 모바일에서의 "Less is More" 도 결국은 스마트폰의 환경적 요인을 적절히 극복하며, 보다 나은 사용과 몰입을 꾀할 수 있는 것들에 대한 이야기에요. 

제일 먼저 고민해야 할 부분은, 제공하려는 콘텐츠를 모바일에서 최대한 간결하게 보여질 수 있게 구성 하는 것입니다. 구성과 디자인은 단순한게 좋아요. 애플리케이션 디자인 및 개발사인 Caxy Interactive의 CEO인 마이클 라비스타는 "모바일에서는 단 몇 초 만에 회사 이미지를 전달해야 한다는 점을 유념해야 한다. 작은 기기에서 보여지는 웹사이트를 디자인 할 때 특히 중요하다"고 강조했답니다.  

위의 이미지는 PC를 중심으로 생각해서 모바일에 최적화하는 반응형 웹 디자인(Responsive Web Design)의 구조 방식과 모바일을 기준으로 생각해서 PC에 적용하는 모바일 퍼스트 웹 디자인(Mobile First Web Design)의 디자인 방식을 비교한 것인데요. 약간은 조삼모사 같지만...아무래도 PC를 기준으로 생각하다 보면, 모바일에 최적화하기가 쉽지 않기 때문에 요즘에는 모바일을 먼저 생각하고 PC에서 이를 풀어내는 방향으로 많이 생각하고 있어요. 

모바일에서는 PC에서처럼 모든 메뉴와 콘텐츠를 한 화면에 노출할 수가 없기 때문에 정보를 묶어서 순서대로 배열해야 하는데요. 정보의 중요도에 따라 순차적으로 배치하는 것을 생각해야 합니다. 앞선 콘텐츠에서 정보의 우선순위를 잡았던 부분을 고스란히 모바일에도 적용이 가능하죠. 다만 화면의 사이즈가 작기 때문에 이미지를 줄여야 하고, 배치는 세로로 길어지게 되고, 노출되는 콘텐츠는 축약 되어야 해요. 

이런 샘플은 반응형 웹 디자인 케이스를 찾아보면 잘 나와 있어요. 그리드를 적용해서 스크린 크기에 따라 그리드를 변경할 수 있도록 해주는 기술을 통해서 대형 모니터와 아이패드, 스마트폰 모두에서 웹사이트 요소들을 매끄럽게 볼 수 있게 되어 있어요. 그렇지 않을 경우에는 모바일용 화면과 PC용 화면을 따로 제작해야 하는 번거로움이 있어요. 하지만 그리드를 통한 기기 별 최적화도 유지 보수에 대한 부분이나 제작 과정에 대한 이슈가 있어 항상 정답은 아니기에 가장 적합한 방식을 택하는 것은 여건과 필요에 따라 다를 수 있습니다.   

보여지는 콘텐츠는 짧으면서 새로운 콘텐츠일 수록 좋아요. 콘텐츠가 중요하더라도 좁은 화면에서 많은 줄의 콘텐츠를 다량으로 보여주는 것은 효과적이지 않죠. 화면이 지저분해지고, 불필요하게 길어지는 경우가 많은데요. 콘텐츠를 선택해야 하는 화면에서는 가능한 적은 수의 단어로 콘텐츠를 알려주고 가늠할 수 있게 해주는 것이 좋아요. 

이런 이유로 정보를 간결하게 보여주기 위해서 '카드 뷰(Card View)' 방식의 디자인을 적용하기도 하죠. 카드 뷰는 모바일 화면에 맞는 크기의 영역에 하나의 콘텐츠를 깔끔하게 담고 있고, 하나의 카드에 하나의 콘텐츠가 담기기 때문에 집중하기에도 용이합니다. 하지만 콘텐츠를 한 번에 보여주기에는 제약이 있어서 이 역시 필요에 따라서 적용하면 좋은 방법이에요.  

동선을 최대한 짧게 해줄 수 있는 <네비게이션 방식>과 <인터랙션>도 고려해야 해요. 

작은 화면에 모든 콘텐츠를 노출할 수 없는 점은 메뉴 전부를 제공할 수 없는 것과도 연결 됩니다.  또 화면에서 콘텐츠를 보여줄 경우, 스크롤이 길어지기 때문에 일반적으로 최상단에 자리 잡은 네비게이션으로 접근하기가 쉽지 않아요. 때문에 메뉴에 효과적으로 접근할 수 있게 하는 <Side Bar>나, 스크롤에 따라 숨기고 보여줄 수 있는 <Show&Hide Tap Bar>를 활용하기도 해요. 혹은 콘텐츠 하단에 최상단으로 이동할 수 있는 버튼(Anchor)을 제공해서 쉽게 이동할 수 있게 해주죠. 

화면 안에서 모든 것을 소화할 수 없기 때문에 각 페이지 간의 이동이 빈번할 수 밖에 없어요. 동선은 최대한 짧게 해줘서 제공되는 다양한 콘텐츠를 최소의 단계로 접근할 수 있게 해주는 것이 좋아요. 모바일 사용자는 사용 중에 단계가 길어지거나, 불필요한 것으로 집중할 수 없게 될 경우 다른 기기 사용자보다 더 빨리 이탈하는 경향이 있어요. 그러므로 사용동선을 줄여서 최대한 집중할 수 있게 해주는 게 좋겠죠. 

모바일은 PC와 다르게 다양한 조작 방식을 가지고 있어요. 터치(Touch)도 있고, 좌우로 쓸어내기(Flick), 오므리기와 벌리기(Pinch In-Out), 길게 누르기(Long Press) 등 PC에서는 할 수 없었던 다양한 조작 방식이 제공됩니다. 이러한 조작 방식을 적절히 이용하면 좁은 화면에서 콘텐츠를 탐색하는데 유용하게 사용할 수 있어요. 
 

가령 확대해서 봐야하는 것들이 존재할 경우, 확대-축소 버튼보다는 오므리기와 벌리기( Pinch In-Out)을 사용하면 자연스럽게 사용할 수 있고, 앞서 말한 카드 뷰의 경우 좌우로 쓸어내기(Flick)을 적용하면 보다 편리하게 사용할 수 있어요. 조작 방식의 적용은 화면을 효율적으로 활용하는 방법이기도 하며, 콘텐츠를 탐색하는데 있어 사용의 재미를 주는 요소이기도 해요. 너무 많은 조작 방식의 제공은 사용자들이 모두 기억할 수 없기 때문에 불필요하며, 사용자가 기대하고 익숙하게 사용하는 부분에서의 적용이 유용한 편이에요. 잊지말아야 할 부분은 이런 조작 방식을 제공한다 하더라도 이런 것들은 부수적인 요소이고, 반드시 한 손으로 사용할 수 있는 것을 전제로 하고 구성해야 해요. 

모바일에서는 물리적 부분을 고려해보는 것도 중요해요. 손을 통한 사용으로 사용하는 손맛(?)을 줄 수 있는 방법이며, 사용 흐름을 이해할 수 있게 해주는 기표가 되기도 해요. 물론 집중할 수 있게 해주는 요소가 되기도 하죠. 때문에 마이크로 인터랙션(micro interaction)이나 모션(motion)이 적용되면 좀 더 관심을 가질 수 있어요.

차원을 이용해서 레이어(Layer)를 적절히 사용하는 것도 좋아요. 2차원의 화면에서 3차원의 형태는 콘텐츠의 순서나 레벨을 보여줄 수 있으며 마이크로 인터랙션이나 모션의 적용에도 용이 하죠. 그리고 일관된 레이어 규칙이 만들어질 경우는 조작과 흐름을 자연스럽게 체득할 수 있게 해줘요. Google에서는 아래와 같이 Material Design이란 디자인 원칙을 통해서 이런 레이어 디자인을 적용하고 있어요. 

모바일에서의 사용성은 당연히 잘 고려해야 해요. 

손으로 하는 터치이기 때문에 세밀한 조작이 어려운 것은 당연합니다. PC의 마우스 조작은 세밀한 부분도 자유롭게 선택할 수 있었지만 모바일의 작은 사이즈는 터치가 어려운 것이죠. 특히나 텍스트에만 연결된 링크를 제공하면 선택이 쉽지 않죠. 사용성을 고려한다면 버튼 사이즈는 최소 0.9cm이상이 되어야 오류를 최소화할 수 있어요. 그리고 텍스트 링크가 아니라 스페이스 링크를 통해서 텍스트 주변을 누르더라도 연결될 수 있도록 제공하는게 좋아요. 

한 손을 사용할 때는 <Thumb Zone>이란 영역을 고려해야 해요. 가장 많이 사용하는 손가락인 엄지 손가락이 가장 편하게 눌러지는 영역을 지칭하는데요. 아래 표를 보면 익히 알 수 있어요. 초록색은 오른손 엄지 손가락이 가장 편하게 접근할 수 있는 공간이고, 주황색은 편하게 접근하기 쉽지 않은 영역, 빨간색은 한 손으론 누르기 어려운 영역으로 구분되어 있어요.  

최상단에 메뉴는 누르기 한 손으로 누르기 어렵기 때문에 하단에서 쉽게 접근하는 동선의 제공이나 빈번하게 사용될 버튼의 위치는 좌측 하단이 유용할 수 있다는 것을 가늠해볼 수 있어요. 화면 구성과 정보 배치에 있어서는 Thumb Zone을 고려할 경우, 쉽게 사용할 수 있는 정보 배치가 가능하죠.  

이에 반해 인터랙션이나 조작, 모션 등은 모바일 사용을 극대화할 수 있는 부수적 요소라 볼 수 있어요. 몰입과 집중을 할 수 있게 하기 때문에 무시할 수 없는 요소이지만 가장 큰 뼈대인 모바일 최적화에 있어서는 PC를 작은 글씨로 단순 축소가 아니라 최대한 심플하게 보여줄 수 있는 방법에 대한 고민을 해야 한다는 것이죠. 그리고 모바일 사용 행태를 반영해서 쉽고 편리하게 쓸 수 있는 방법으로 고민해야 해요.  

모바일과 관련해서는 다양한 레퍼런스 사이트들이 있는데 참고 할만한 사이트를 몇 가지 추천 드려요.

앞으로 서비스를 구성 하시면서 도움이 되셨으면 합니다.  

- Mobile Pattern: http://www.mobile-patterns.com/
- UX Achive: http://uxarchive.com/
- pttrns: http://pttrns.com/
- UI Parade: http://www.uiparade.com/
- Little Big Details: http://littlebigdetails.com/
 

지금까지 UX 전문가가 전하는 인사이트들을 4부로 나누어 정리 해드렸습니다. 유익한 내용 이기를 바라며 먼저 발행된 <비영리를 위한 메일 전문가의 인사이트> 시리즈와 <비영리를 위한 콘텐츠 전문가의 인사이트>도 많은 참고 바랍니다!