모바일웹 디자인을 할 때 반드시 갖춰야할 5가지

최근 온라인 서비스를 기획하면서 데스크탑 버전을 먼저 시작해서, 지금은 모바일 버전을 구성 중이다. 아이폰을 쓰면서 나름대로 모바일에 익숙해졌다고 생각했는데, 천만에, 모바일 버전을 만들다보니 곳곳에 암초와 함정이 깔렸다. 그 와중에 구독하는 블로그에 등장한 반가운 칼럼. 다시 한 번 되짚어 보는 계기로 삼아보자. 언제나 그렇듯 번역 품질을 장담할 수 없으므로, 원본을 읽으시길 권장.
원본: http://tympanus.net/codrops/2012/01/12/5-things-every-mobile-design-should-have/

그렇다, 이러한 모바일 웹 유행이 가까운 시일 내에 사라질 것 같지는 않다. 보다 모바일에 친화적인 웹사이트를 만들어야 한다는 생각이 슬슬 들고 있다. 모바일 웹 디자인이 풀 스크린 웹 디자인과 많이 다르다고 생각하는데, 사실은 그렇지 않다. 스크린이 더 작고, 그걸 터치할 수 있음에도 불구하고, 가장 기본적인 디자인 원칙은 여전히 적용된다. 그러나 모바일 브라우저를 위해 디자인을 할 때 약간의 차이를 보정하기 위해서 생각해볼 것이 몇 가지 있다. 모바일 사이트가 반드시 갖춰야할 5가지를 뽑아봤다.

    1.    의미 있는 내비게이션 Meaningful Navigation
    2.    간추린 콘텐츠 Focused Content
    3.    피드백 Feedback
    4.    명확한 브랜딩 Clear Branding
    5.    넉넉한 여유 공간 Plenty of Space

모든 모바일이 갖춰야 요소가 더 많이 있음을 알지만, 이 5가지 요소가 지나쳐서는 안될 핵심적인 부분이며, 모바일 버전을 디자인할 때 꼭 고려해야할 부분인 듯 하다.

모든 예시는 mobileawesomeness.com에서 가져옴. (역주: 원문에 예시로 들어간 스크린샷은 가져오지 않았습니다)

1- 의미 있는 내비게이션 Meaningful Navigation

모바일 기기에서 이 화면 저 화면으로 이동하는 것은 사실 즐거운 경험이 되어야 한다. 그러니 재미있고 의미있게 만들자. 단지 스크린을 클릭(혹은 탭 하는 횟수)를 줄이는 것만으로는 모바일 앱을 사용하기 쉽거나 보다 의미있게 만들지 못한다. 내비게이션은 사용자가 하고자 하는 행위에 대한 것이어야 하며 그 일을 해내도록 분명한 이동 경로를 제공해야 한다. 어디로, 무엇을 위해 이동하는지만 안다면 모바일 사용자는 (기꺼이) 한 두번 더 탭(화면을 터치) 할 것이다.

우선 내비게이션이 시각적으로 클릭할 수 있는 것처럼 보이게 하는 걸 명심해야 한다. 내비게이션을 버튼이나 목록, 심지어 '손가락으로 꾹 잡을 수 있을 것 처럼' 보이도록 그래픽으로 박스 모양을 씌워두는 것이 훨씬 낫다. hover state(역주: 마우스를 올렸을 때 변하는 시각 효과 같은 것)나 제목 태그 같은 사용자를 돕는 보조도구를 사용할 수 없으므로, 내비게이션은 누를 수 있는 것처럼 보이게 만들어야 한다.

레이블은 아주 중요하며, 사용자에게 의미가 있도록 해야 한다. 모든 사람이 '뒤로'의 뜻을 알고 있으니, 그걸 사용하라. 몇 번의 탭이 필요한 경로를 갖고 있다면, '이전 페이지로' 같은 제목과 함께 뒤로 이동하는 버튼을 쓰는 대신 그냥 '뒤로'라고 이름을 붙여라. 레이블을 단순하고 의미있도록 유지하라. 또한 'about' 이나 'info' 처럼 대체 뭘 하는 것인지도 모르는 뭉뚱그려놓은 항목은 사용하지 말아야 한다. 이것들이 사용자를 함정에 빠뜨릴 수 있다. 적은 내비게이션이 사용하기 쉽다는 뜻이 아님을 명심하라. 그러니 '내 프로필'이나 '비밀번호' 같은 내비게이션 버튼을 별도로 추가해 두는 것이 이들을 '설정' 아래에 묻어두는 것보다 낫다.

아이콘은 쉽게 뜻을 전달하는 아주 좋은 방법이다. 휴대폰으로 글을 읽는게 어렵거나 너무 많은 시간이 걸리기 때문이 아니라, 그래픽이 보다 시각적 균형을 잘 표현하기 때문이다. 모바일은 쓰기에 재미있고, 잘 만들어진 아이콘은 사용자 경험을 전반적으로 향상시켜 준다. 여기에 더해 명확한 레이블이 붙은 아이콘은 사용자에게 더 의미 있고, 분명한 내비게이션 경로를 제공한다.

2- 간추린 콘텐츠 Focused Content

단지 탭을 없애는 것이 일을 쉽거나 빠르게 해주지 못하고, 단순히 콘텐츠를 없애는 것이 모바일 웹사이트를 쓰기 쉽도록 해주는 것도 아니다. 웹사이트에 있는 콘텐츠를 모바일 사이트에서 지워버리는 것이, 사용자가 필요하거나 원하는 콘텐츠를 지우는 것일 수도 있다. 콘텐츠에 초점을 맞춰야 하며, 이것이 웹사이트와 모바일 사이트를 보다 낫게 만들어줄 것이다. 중요하지 않은 콘텐츠를 지우는 대신, 재편성하거나 다른 의미를 부여하라. 모바일 디스플레이의 큰 영역을 차지하는 커다른 텍스트 뭉치를 치워버릴 수도 있겠지만, 모두가 읽기 쉽도록 만들기 위해 불렛(bullets)이 붙은 작은 문단으로 용도를 바꿔라. 또한 인용구, 선 혹은 다른 디자인 요소로 가득찬 큰 텍스트 영역을 잘게 쪼개면, 큰 텍스트 덩어리를 보다 즐겁게 읽을 수 있도록 해준다. 큰 덩어리의 콘텐츠를 지우는 대신, 보다 작은 조각으로 쪼개라.

텍스트 요소를 보완하는 비주얼 요소를 사용할 때 고려할 점:
    • 제목 텍스트 옆에 타이틀 아이콘 사용하기
    • 단순히 날짜를 나열하는 대신 그래픽 요소 사용하기
    • 설명하고자 하는 것을 강화하는 작은 인포그래픽 사용하기
    • 글꼴 크기로 구분하는 대신 서로 다른 본문/제목 색상 사용하기
    • 각각 다른 콘텐츠 요소를 정의할 때 밝은 배경색 사용하기
    • 중요한 영역을 강조할 때 하일라이트 사용하기
    • 본문을 강조하거나 구별할 때 간격이나 네거티브 영역(역주: 문단 뒤에 어두운 배경색을 둬서 글꼴 색상을 밝게 표시하는 것) 사용하기
    • 큰 콘텐츠 덩어리를 잘게 쪼갤 때, 다른 '형식(views)' 사용하기

사용자는 여전히 당신의 콘텐츠를 원하니 그것을 제공하되, 보다 접근하기 쉽도록 (데스크탑 웹사이트와는)다른 시각적 매커니즘을 사용하라.

3- 피드백 Feedback

그렇다, 이것 모바일 웹사이트 뿐만 아니라 모든 웹사이트에서 중요하다. 사용자 피드백은 아주 큰 부분이고, 특히 모바일에서는 도움을 받을 수 있는 브라우저 보조도구가 없기 때문에 더욱 중요하다.

hover states(역주: 마우스 오버 이벤트 같은 효과)나 애니메이션 같은 브라우저 피드백 보조도구가 모바일 터치 기기에는 존재하지 않는다. 모바일 기기는 터치하기 전까지는 아무런 변화가 없다. 그러니 뭔가를 터치하면 '이것을 터치했다'는 효과나 움직임을 명확한 피드백으로 제공하는 것이 매우 중요하다. 사용자는 터치할 수 있는 목록이나 아이템이 있어서 그것을 터치하면, 실제 생활에서 뭔가를 만졌을 때 얻는 것과 동일한 반응을 기대할 것이다.

일례로 ATM 기계를 터치하면 기계로부터 두 세가지 형식의 피드백을 받게 된다. 디스플레이가 어떤 모습으로든 시각적으로 반응할 것이고, (기계가 만들어낸 소리든 아니면 실제로 뭔가 부딪혀서 나는 소리든 간에) 버튼은 약간의 소리를 내고, 내 손 끝으로 차가운 금속 버튼을 느낄 수 있게 된다. 이것이 내가 뭔가를 했다는 걸 기계가 나에게 일깨워주는 방식이다. 대부분의 모바일 기기에서는 하나의 선택안밖에 없다. 바로 시각적인 반응이다. 사용자의 행위에 대응하는 시각적 피드백 매커니즘을 고려해야 한다.

    • 이미 선택했거나 활성화된 영역을 색상을 써서 표시하기.
    • 한 요소에서 다른 요소로 이동할 전환할 때 나타나고 없어지는 애니메이션 사용하기
    • 터치할 때 희미한 색깔과 글라디언트 효과 사용하기
    • 다른 형식의 버튼이나 텍스트 색상으로 상태값이 변하는 걸 표시하기
    • 드롭 다운 메뉴를 선택하면 회전하는 화살표 모양(역주: 드롭다운 메뉴 옆의 ►▼를 뜻하는 듯)으로 표시하기
    • 변화하는 모습을 표현하는 데 슬라이드나 사라지고/나타나는 애니메이션 사용하기

4- 명확한 브랜딩 Clear Branding

디자인 지식과 기술을 내세워서, 믿을 수 없을 정도로 환상적인 웹 디자인을 디자인하는 것 만큼이나 그 어떤 디자인에서도 가장 중요한 요소 중 하나는 브랜딩이다. 브랜딩을 잊으면 안된다. 모바일 기기의 실제 크기에서 오는 한계에도 불구하고 끊임 없이 브랜드를 내세우는 것을 잊으면 안된다. 언제나 회사 로고를 넣을 공간은 있기 마련이다.

어느 회사든, 어떤 어플(App)이든 브랜딩 요소를 표현하는 많은 방식이 있다. 그러나 브랜드를 명확히 하는 로고/마크와 회사를 상징하는 색상 배열, 이 두 가지가 핵심이다. 모바일 웹 디자인에서는 이런 요소를 분명히 드러내는 것이 매우 중요하다. 로고가 자리잡는 방식은 풀 스크린 버전과는 다를수도 있고 웹 어플리케이션의 홈에만 보일 수도 있다. 바로 이 점이 어플리케이션 전반을 관통하는 브랜드를 표현하기 위해 색상을 잘 배열하는 것이 중요한 이유다.

또 다른 작은, 하지만 고려해볼 할 중요한 것은 모바일 브라우저는 사이트 제목이나 파비콘을 표시하는 주소창이나 제목창이 없다는 것이다. 풀 스크린 브라우저에서는 이런 작지만 중요한 세부 요소가 사용자가 어디에 있으며, 어디를 지나쳐 왔는지를 알 수 있도록 해준다. 모바일 기기는 제목창이나 주소창이 없어서 사용자가 단지 위를 올려다보는 것만으로 어느 사이트에 있는지 알 수 없기 때문에, 브랜드를 디자인하는 것이 더욱 중요하다.

5- 넉넉한 여유 공간 Plenty of Space

작은 화면 크기만 생각하는 바보 같은 짓은 하지 마라. 여전히 여백은 필요하다. 여백은 어떤 좋은 디자인에서든 디자인의 핵심 요소이다. 오히려 풀 사이즈 디자인보다 모바일 디자인에서 여백이 더 중요한데, 사용자가 어찌해볼만한 공간이 얼마 없기 때문이다. 모바일 디자인이 효과적이고 사용하기 쉽고 읽기 쉽기 위해서는 모든 디자인 요소(버튼, 내비게이션, 아이콘, 텍스트 등)이 분명하게 구별되어야 하고 적절히 구획되어야 한다.

보다 좋은 사용자 경험이 여백을 위해 콘텐츠를 제한하는 것을 뜻하지는 않으며, 읽기 쉽도록 하기 위해 커다란 글꼴을 사용하는 것을 뜻하지도 않고, 제한된 화면 크기를 위해서 간격을 주지 않아야 한다는 뜻도 아니다. 모바일 웹사이트는 커다란 화면을 디자인 할 때보다 더 많은 UI 계획이 필요하다. 여백은 효과적인 사용자 경험에 아주 중요한 역할을 한다.

보다 나은 사용자 경험을 만들기 위해 이런 방법을 생각해보라:
    • 따닥 따닥 붙은 커다란 글꼴 말고, 보다 많은 여백으로 둘러싼 더 작은 글꼴을 사용하라.
    • 텍스트 블록이나 아이콘을 둘러싼 박스에 충분한 간격을 사용하라.
    • 각각의 요소를 분명히 분리하는 충분한 여백이 적용된 명확한 그리드를 사용하라.
    • 충분한 간격을 두고 모든 요소를 둘러싸고, 각 요소를 서로 맞닿지 않고, (실수로) 터치할 수 없을만큼 떨어뜨려라.