무심코 사용하는 UX, 어떻게 바꿀까

오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. 

North는  “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 

1.  슬라이드 배너(Carousel)

슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화살표와 하단의 동전 같은 페이지 표시를 가지고 있는 이 디자인은 왜 좋지 않을까요? Brad Frost는 “캐러젤은 회의에서 서로 비난하기 위해 존재한다”며, 이를 비판하고 있습니다. 

North는 캐러젤 대신에 “콘텐츠 우선순위”를 정하라고 제안합니다. 4~5개의 콘텐츠를 같은 자리에 배치하는 것은 콘텐츠의 우선순위 파악에 실패한 것이고, 우선순위를 정하지 못한다는 것은 콘텐츠 전략의 실패이기 때문이지요. 공간에 아무 콘텐츠나 배치하지 말고 우선순위를 정해 가장 중요한 하나만 보여주는 것이 좋겠습니다.

2. 커다란 배경 사진 

최근 유행하고 있는 디자인이네요. 멋진 사진을 웹사이트 배경에 넣은 디자이너는 무얼 잘 못 했을까요? 문제는 스크린 사이즈입니다. 모두가 다 커다란 모니터에서 좋은 사진을 감상하면 좋겠지만 1024px보다 작은 모니터를 쓰는 사람도 많습니다. 보이지도 않고, 실제로 중요하지도 않은 커다란 이미지는 페이지를 느려지게 할 뿐입니다.

해결책은 상황에 맞는 이미지 사이즈 조정입니다. 여기서 상황이란 사용자의 환경이겠죠. 다양한 스크린 사이즈에 대응하기 위해 최적화된 이미지만을 보여줄 수 있는 페이지를 만들어야 합니다. Interchange가 좋은 예시인데요. 스크린 사이즈에 따라, 사용자의 접속 환경에 따라 조정된 이미지를 보여줍니다. 

3. 복잡한 메가 메뉴

메뉴에 마우스를 대거나 클릭했을 때, 하위의 모든 메뉴가 펼쳐지는 메가 메뉴를 많이 보셨을 겁니다. 사이트 전체를 한 눈에 볼 수 있어 편리한 메가 메뉴는 어떤 단점이 있을까요? North는 메뉴의 단계별로 내려가고, 작은 사이트들의 모임처럼 보입니다. 이는 사용자가 정확히 원하는 위치를 찾는데 매우 복잡합니다. 

Jared Spool은 메가 메뉴에 대해 이렇게 말했습니다. “사용자는 찾고자 하는 정보에 대해 어떤 단어나 문장을 생각하고 있는데, 이것을 트리거 워드라고 한다. 메가 메뉴는 메뉴 전체가 닫힐 때, 모든 단어, 문장이 사라지므로 사용자는 앞으로의 일을 예측하기 어렵다.(중략)“

이런 복잡성을 해결하기 위해서는 다음과 같은 배려가 필요합니다. 먼저, 메뉴 구조를 단순화하고 특히 겹겹히 싸여있는 메뉴나 4개 이상 단계가 내려가지 않도록 합니다. 그리고 사용자의 사용 흐름을 자연스럽게 구성해야 합니다. 헷갈리거나 복잡한 메뉴는 사용자에게 사용을 포기하게 만듭니다. 그들이 원하는 방향으로 똑바로 나아가도록 유도해야 합니다.

4. 이미지 속의 글자

웹사이트 구축에 있어 너무도 당연한 내용이지만 마음처럼 지키기 어려운 내용입니다. 이미지 안의 글자들은 ‘alt’ 속성 없이는 스크린 리더에 읽히지 않습니다. 또한 반응형웹이 적용된 작은 스크린에서는 글씨가 아주 작아져 사람도 읽을 수 없는 경우가 있습니다.

웹폰트가 해결책이 될 것 같은데요. Typekit, fonts.com , Typography.com, Font squirrel Web font generator 등에서 웹폰트에 대한 정보를 얻을 수 있습니다. 위 서비스에는 많은 웹폰트가 있지만 모두 영어 알파벳이죠. 그렇다면 한글은 어떻게 할까요? Google webfont의 ‘나눔글꼴’과 유료로 서비스 되고 있는 Typolink라는 서비스가 있습니다.

5. 레이어 팝업 

레이어팝업, 모달창 등으로 불리우는 이 UI는 어떤 문제가 있을까요. 다른 창을 직접 띄우는 팝업에 비해 사용자 경험에 좋은 것처럼 보이지만, 내부적으로는 여러가지 문제가 있습니다. 카보드 사용성 문제, 커서의 위치 문제, 브라우저의 크기가 달라졌을 때, 창을 종료하고 싶을 때 등 여러가지 숨겨진 문제들이 있습니다.

레이어 팝업 대신 이런 방법을 쓰면 어떨까요. 팝업의 내용을 화면에 직접 위젯과 같은 형태로 넣는 방법을 쓸 수 있습니다. 또한 새로운 페이지로 이동시키는 방법도 있습니다. 다양한 브라우저 크기를 고려해서 여기처럼 재밌는 방법을 쓸 수 있습니다.

6. 무한 스크롤 

역시나 많이 사용되고 있는 무한 스크롤은 어떤 단점이 있을까요. North는 무한 스크롤되는 페이지를 사용자가 선택하고 쓸 수 있도록 고려해야 한다고 말합니다. 즉, 사용자에게 다음 페이지를 불러올지 결정할 수 있도록 해야 합니다. 페이지 하단으로 내려가면 자동으로 내용을 불러오기 보다는 http://www.inc.com/처럼 사용자가 원할 때, 보여줄 수 있어야 합니다.

North가 지적하는 문제들과 그에 맞는 해결책을 알아보았습니다. North는 오픈소스 커뮤니티일뿐 그들의 말이 정답은 아니겠지요. 하지만 우리가 무심코 보고, 쓰고, 때로는 만드는 웹 UI에 대해 조금 더 생각해 볼 수 있는 기회였습니다. 

참고 : 

North

Outdated UX Patterns and Alternatives

6 Epic Forces Battling Your Mega Menus

Fullscreen Overlay Styles & Effects

by 북극곰 발자국