아티클

누구나 쉽게 이해할 수 있는 커스텀 UI 디자인 - 요소 외형 디자인 및 힌트 제공하기

2019-11-26 09:20:24

안녕하세요. 엔비전스입니다. 우리는 웹을 구성하는 어떠한 요소를 이해할 때, 가장 먼저 무엇을 기준으로 판단할까요?

이는 사람의 성격이나, 생각하는 방식, 컴퓨터를 어떠한 방법으로 사용하는가에 따라 천차만별로 바뀔 것입니다. 스크린 리더를 사용하는 시각장애인의 경우, 스크린 리더가 읽어주는 요소명을 보고, 이 요소를 어떻게 조작해야 하는가, 어떤 일을 하는 요소인가를 알 수 있습니다. 이러한 점에서, 많은 웹사이트에서 요소 유형을 잘 제공해 준다면, 스크린 리더 사용자가 웹을 잘 보이는 사용자보다 더 깊게 이해하기에 유리합니다.

 

다수의 웹 사용자는 시각적인 형태를 기준으로 요소 유형을 판단합니다. 하지만 페이지 디자이너의 개성에 따라, 요소의 디자인이 다양한 모습으로 제공되고 있으며, 이는 마크업은 분명 링크로 했음에도, 시각적인 CSS 스타일에 따라 사용자는 버튼으로 인식될 수 있습니다.

특히 스크린 리더를 사용하지 않는 키보드 사용자와 마우스 사용자의 경우, 키보드 및 마우스 조작 방법에 혼란을 겪게 되며, 요소의 상태를 구분하기 어려운 경우가 발생합니다.

 

이번 아티클에서는 접근성을 고려한 UI의 디자인, 요소의 시각적 형태가 모호한 커스텀 요소를 어떻게 제공하면 사용자가 더 손쉽게 조작법을 이해할 수 있는가에 대해 다루고자 합니다.

 

1: HTML 기본 요소의 시각적 디자인 제공 방법에 대한 고찰

웹 디자이너들은 어떻게 CSS 스타일을 제공해야 아름답고, 개성 있는 웹을 사용자에게 제공할 수 있는지 고민합니다. 디자인은 단순히 아름다움을 추구하는 것이 아니라, 설계라는 의미를 갖고 있으므로, 어떻게 요소의 형태를 설계해야 사용자가 쉽게 요소를 구분할 수 있는지 고민해야 할 것입니다. 하여, CSS를 통해 요소 유형별로 시각적인 모습을 제공해야 하는가를 고찰하고자 합니다.

1): 최대한 기본 스타일과 유사한 형태로 요소 형태 제공하기

p, div, span 등과 같은 블록 컨테이너 또는 인라인 컨테이너 요소를 제외한 요소 유형마다 브라우저의 기본 스타일이 제공되어 있습니다. 인터넷 브라우저는 한 가지가 아니며, 각 브라우저에서 표시하는 버튼 디자인에 차이가 발생합니다. 또한 기본 스타일인 만큼 투박하고, 모든 사이트에 어울리는 모습은 절대 아닙니다. 그렇기 때문에 메뉴에 사용되는 링크를 버튼처럼 꾸며서 더 아름답게 다듬고, 웹사이트마다 개성이 존재할 수 있는 것이리라 생각합니다.

 

웹사이트의 분위기와 맞게 요소 스타일을 디자인하는 것은 분명 당연한 일이고, 일관된 스타일을 제공하는 것이 웹사이트를 열람하는 사용자의 집중력을 높여주는 일이기도 합니다. 하지만, 개성과 요소 디자인은 분명히 타협이 필요한 문제입니다. 사용자들은 웹 브라우저를 열기 이전에 GUI 기반 OS에 제공된 기본 UI 요소 형태를 먼저 접하고 경험하게 됩니다.

 

브라우저에서 제공하는 요소의 기본 형태는 이러한 OS의 기본 요소 형태와 유사하게 제공됩니다. 그렇기 때문에 사용자는 웹사이트를 이용할 때, 기본 스타일로 제공할 경우에 형태가 투박하더라도  경험을 통해 요소의 시멘틱 정보를 시각적으로 단번에 알 수 있는 것입니다.

 

각 웹사이트의 개성은 존중되어야 마땅하나, 누구나 접근하기 쉬운 웹사이트를 제공하기 위해서는 이러한 사용자 경험을 염두에 두고, 요소의 기본 스타일 형태와 많이 벗어나지 않는 선에서 요소의 형태를 변형하는 것이 리소스를 아끼고, 효과적으로 스타일을 제공하는 방법이라고 할 수 있습니다.

왼쪽 필드셋의 점수 주기 요소와 오른쪽 필드셋의 점수 주기 요소는 모두 같은 라디오 버튼(input type=”radio”)입니다. 단지 스타일만 다를 뿐, 스크린 리더 사용자에게 있어서는 별다를 게 없이 라디오 버튼으로 인식될 것이며, 스크린 리더가 라디오 버튼으로 안내하였기 때문에 요소의 시각적인 형태를 보지 않고도, 상하 또는 좌우 화살표 키로 한가지 요소를 선택할 수 있음을 알 수 있습니다.

 

반면, 시력에 의존하여 요소 유형을 구분하는 키보드 사용자의 경우, 왼쪽 필드셋의 라디오 버튼 스타일은 다소 낯설고, 어떠한 요소인지 한눈에 알기 어렵습니다. 시각적으로는 선택정보를 제공하는 버튼으로 보이기도 합니다. 

사용자의 경험에 따라서 Tab 키의 초점이 한 곳에만 이동된다는 것을 통해 라디오 버튼이라는 정보를 간접적으로 유추해낼 수 있지만, 대부분 사용자에게는 해당하지 않습니다.

 

위에서 언급하였듯이 사용자는 이미 OS에서 제공한 UI를 통해 라디오 버튼이 어떠한 형태로 제공되는가를 경험하였기 때문입니다. 따라서, 반드시 요소의 스타일을 제공할 때에는 요소의 보편적으로 알려진 상징적인 형태를 고려해야 합니다.

체크 상자의 경우, 작은 정사각형의 빈 상자를 클릭할 시, 체크 표시가 나타나는 것이 많은 사용자가 경험해왔고, 연상하는 형태일 것입니다. 위에 있는 예제 1 필드셋의 경우, 우리가 흔히 생각하는 체크 상자의 형태와 최대한 유사하게 스타일을 제공한 체크 상자 요소를 담고 있습니다. 이러한 경우는 사용자의 경험에 익숙한 형태이기에 아무런 문제가 발생하지 않습니다.

 

반면, 기본 형태와 조금이라도 다르게 제공할 경우, 경험이 많지 않은 사용자는 혼란을 겪게 됩니다. 아래 예제2의 부적합한 예제들의 경우, 사용자가 체크 상자임을 이해하기 어렵거나, 상태 정보를 명확하게 알기 어려울 수 있는 스타일입니다.

첫 번째 부적합 예제의 경우, 사용자가 클릭하기 전까지 일반적인 버튼이나 링크처럼 보이며, 체크 상자임이 구분하기 어렵습니다. 두 번째와 세 번째의 경우, 체크 표시하지 않은 요소에도 체크 마킹이 표시되어 있어 적합해 보이지만, 색맹 및 색약 사용자는 체크 안 된 요소에 흐리게 체크 표시가 되어있기 때문에, checked 상태로 인지할 가능성이 높습니다.

 

따라서, 체크 표시되지 않은 체크 상자 요소에는 흐린 체크 표시를 넣는 등의 디자인은 오해의 소지가 많습니다.

위 사례들과 같이 표준 컨트롤러의 형태가 매우 다를 경우, 사용자가 이 요소를 어떻게 인식할지에 대해 반드시 짚고 넘어가야 하며, 특수한 목적으로 인해 특별한 형태로 요소를 제공해야 할 경우, 뒤에 설명할 힌트 제공 방법을 통해 힌트를 제공해야 할 필요성이 있을 것입니다.

 

2): 요소 유형에 맞는 마우스 커서 사용하기.

국내의 많은 웹사이트에서 링크와 버튼을 혼용하여 사용하는 경우를 많이 볼 수 있습니다. 둘 다 클릭을 통해 어떠한 이벤트가 발생하는 요소이기 때문이라고 생각합니다. 하지만, 링크는 연결, 관계 등의 뜻을 가지고 있으며, 버튼은 기계를 조작하기 위한 단추를 이야기합니다. 따라서, 이 둘은 시각적으로 명확히 구분할 필요가 있습니다.

 

먼저, 링크와 버튼을 사용자에게 구분할 수 있도록 제공하는 가장 핵심적인 키워드는 “마우스 포인터”입니다. 기본적으로 CSS를 통해 별도로 변경하지 않은 링크 요소에 마우스 커서를 올릴 경우, 커서 형태가 손가락으로 가리키는 형태로 변경됩니다.

링크에 마우스 커서가 올라간 네이버 로고 링크 스크린 샷

반면, 별도로 커서 형태를 지정하지 않은 일반적인 버튼 요소의 경우, 아래와 같이 마우스 포인터를 버튼에 올려도 링크처럼 마우스 커서 형태가 변경되지 않습니다.

 

기본 버튼에 마우스 커서가 올라간 스크린 샷

웹을 꾸밀 때, 많은 사람이 공통으로 느끼는 점이 있다면, 기본 링크의 스타일은 아름답지 않다는 점일 것입니다. 특히 메뉴를 디자인할 때, 많은 분들께서 링크를 버튼처럼 디자인합니다. 하지만, 마우스 사용자의 경우, 커서의 변형으로 인해 아무리 버튼처럼 꾸민 링크를 보더라도 링크 요소로 제공되어 있음을 알 수 있습니다.

 

링크에 기본적으로 적용된 커서는 cursor:pointer; 속성값입니다. 만약, button 태그에 cursor:pointer; 속성을 적용하게 된다면, 마우스 사용자의 경우, 링크와 버튼을 명확히 구분하기 어려워집니다. 따라서 커스텀 요소가 아닌 일반적인 HTML 태그에는 CSS의 cursor 스타일을 변경하는 것은 바람직하지 않으며, cursor 값은 auto로 제공되는 것이 바람직합니다.

 

3: HTML 비표준 커스텀 컨트롤 요소에 대한 시각적 디자인 제공 방법 고찰

HTML5부터는 시멘틱의 중요성이 강조되었습니다. 이에 따라, 기존에 개발자들이 제공하던 커스텀 요소도 시멘틱 하게 제공해야 할 필요성이 대두되어 WAI-ARIA가 등장하였습니다.

시멘틱 태그와 WAI-ARIA는 사실상 스크린 리더 접근성에 치우쳐진 기술이라고 봐도 무방합니다. 시멘틱 태그의 경우, HTML5의 기본 명세이기 때문에 스크린 리더 사용자와 시각적으로 웹을 탐색하는 사용자 사이에 차이가 발생하지 않습니다.

 

WAI-ARIA는 HTML에 기본적으로 없는 요소 역할, 상태 정보 등 확장된 시멘틱 정보를 스크린 리더 사용자에게 제공할 수 있습니다. 스크린 리더 사용자는 초점을 보냈을 때, 요소 유형과 상태 정보를 읽기 때문에 WAI-ARIA로 구현된 커스텀 시멘틱 요소의 키보드 조작 방법을 비교적 쉽게 익힐 수 있습니다.

반면에 WAI-ARIA는 커스텀 요소에 정보를 제공할 목적만으로 만들어졌기 때문에 사이트마다 같은 요소를 제공하여도 스타일이 다르며, 웹에 없던 요소이기 때문에 경험이 많은 키보드 사용자라고 해도 탐색 방법을 한눈에 알기 어려운 문제점이 있습니다. 이러한 문제점을 어떻게 시각적으로 디자인하면 해결할 수 있는지 다음 내용을 통해 고찰해보고자 합니다.

 

1): OS 컨트롤러 참고하기

비표준 커스텀 컨트롤러의 기원이 되는 OS의 컨트롤러를 철저히 참고하여 유사하게 만드는 것이 가장 우선시 되어야 할 것입니다. 기본 HTML 요소가 아닌 role 요소의 경우, 대부분 OS의 TAB이나 CONTEXT MENU, MENU BAR와 같은 컨트롤러들입니다. 이러한 컨트롤러들이 OS에서 어떤 형태로 제공하고 있는지 이를 참고하여, 친숙한 디자인을 제공하여 조작 방법을 유추할 수 있게끔 제공할 수 있을 것입니다.

 

2): 시각적 조작 힌트 제공하기

웹은 컴퓨터 지식수준과는 관계없이 다양한 사람이 사용합니다. 경험도 다르고, 알고 있는 정보도 다를 것입니다. 개발자와 퍼블리셔가 아무리 공들여서 표준 키보드 조작 방법과 비슷한 형태로 커스텀 컨트롤러를 구현하였다 하더라도 사용자 모두가 표준 키보드 조작 방법을 알고 있지 않기 때문에 일반적인 링크나 버튼보다 못한 접근성을 가지게 될 가능성이 높습니다.

 

단편적인 예시로는 탭 컨트롤을 표준에 맞추어 개발하였으나, 표준 키보드 조작 방법을 모르는 사용자 입장에서는 모든 탭 버튼을 Tab 키를 통해 이동할 수 없는 것은 불편한 것이며, 접근성이 지켜지지 않은 커스텀 요소로 여겨질 수 있습니다. 컴퓨터 UI의 이해 수준이 다른 모든 사용자가 접근할 수 있는 컨트롤러를 만들기 위해서는 튜토리얼 단계가 필요합니다.

 

우리가 가장 가까이서 볼 수 있는 사례는 게임입니다. 게임은 OS의 표준 컨트롤이 아닌 별도의 UI와 조작 방법을 제공하는 대표적인 사례라고 볼 수 있습니다. 많은 게임에서는 처음 시작할 때, 튜토리얼을 볼 수 있는 화면을 제공하거나, 조작을 익힐 수 있는 튜토리얼 스테이지를 제공합니다.

이처럼 커스텀 컨트롤러도 게임처럼 조작 방법에 대한 튜토리얼과 힌트를 제공한다면 모두가 접근하기 쉬운 웹을 만들 수 있습니다. 하여, 어떠한 방법으로 사용자에게 힌트 또는 튜토리얼을 제공할 수 있는지 알아보도록 하겠습니다.

 

(1): 커스텀 컨트롤러 시작 지점에 튜토리얼 도움말 버튼 제공하기

힌트 버튼을 제공하는 것은 누구나 쉽게 직관적으로 정보를 전달받을 수 있으며, 가장 간결한 방법으로, 시각적 힌트의 노출 시간이 따로 존재하지 않고, 사용자가 원할 때 펼쳐서 볼 수 있으며, 닫을 수 있다는 장점이 있어 누구든 힌트를 받아들이기 쉽습니다. 또한 힌트 버튼은 많은 기술을 요구하지 않아 리소스 또한 많이 필요하지 않으며, 간편합니다. 따라서, 어떤 디바이스나 웹사이트의 레이아웃과 관계없이 이 방법은 사용하기 적합합니다.

 

(2): 특정 위치에 힌트 말풍선 제공하기

커스텀 컨트롤러 요소가 초점을 가질 경우, 일정 시간 또는 초점을 잃기 전까지 화면의 특정 구역에 머무는 동안 힌트 말풍선을 제공하여, 사용자에게 요소 조작 방법을 제공하는 방법입니다.

 

이는 모바일(안드로이드)의 토스트에서 가져온 아이디어로, 고정된 위치 또는 요소와 인접한 곳에 힌트를 제공하는 방법입니다. 이 방법의 장점은 사용자에게 별도의 조작을 요구하지 않는다는 점입니다.

반면 단점으로는 많은 리소스가 필요하다는 단점이 있으며, 돋보기 기능을 사용하는 저시력 사용자에게 취약하다는 점이 있습니다. 페이지의 특정 영역에 고정으로 나타나므로, 페이지의 일부분을 크게 확대해서 보는 저시력 시각장애인의 경우, 힌트를 인지하지 못할 가능성이 높으며, 일정 시간 후, 숨김 처리되는 경우, 빠르게 글자를 읽을 수 없는 사용자에게는 불편할 수 있습니다.

 

보완 방법 1: 각 요소의 인접한 위치에 말풍선 제공하기

다음 예제 사이트는 저시력 사용자가 고정된 말풍선을 보지 못하는 이슈를 보완하고자, 자바스크립트로 요소 offsetTop, offsetLeft 속성을 불러와 각 요소 근처에 말풍선을 제공하는 예제입니다.

이 방법은 완전히 고정된 위치에 말풍선을 제공하는 것보다는 사용자가 말풍선을 볼 가능성이 높아진다는 장점이 있습니다.

반면, 이 방법에는 다음과 같은 문제점이 있습니다. 돋보기 사용자의 경우, 역순으로 탐색 시, 돋보기 초점이 해당 요소를 완전히 비추지 않아 마우스 커서를 움직여 돋보기의 초점을 맞춰야 한다는 불편함이 있습니다.

 

보완 방법 2: 마우스 커서를 따라 움직이는 말풍선 제공하기

보완 방법 2는 보완 방법 1의 연장선상에 있는 방법으로, 마우스 커서의 움직임에 따라서 말풍선이 같이 움직여 돋보기 사용자가 말풍선이 표시됨을 인지할 수 있게 하는 방법입니다. 이 방법은 자바스크립트의 mousemove 이벤트를 통해 이벤트 객체의 마우스 포인터의 위치를 얻어올 수 있는 pageY, pageX 속성과 말풍선 요소의 offsetTop, offsetLeft 속성을 참조하여 제공할 수 있습니다.

 

보완 방법 1과 같이 제한 시간 없이 제공하기에는 시각적으로 콘텐츠의 일부분을 가리기 때문에 마우스 사용자에게 불편을 줄 수 있다는 단점이 있으며, 보완 방법 1보다 돋보기 사용자의 불편함을 줄여주지만, 돋보기 초점을 완전히 보완하지는 못합니다. 또한, 마우스를 움직일 시, 잔상이 남는 효과가 자주 발생함을 염두에 두어야 합니다.

 

지금까지 요소 외형에 대한 고찰과 해결방안에 대해 다뤄보았습니다. 다소 긴 내용 읽어 주셔서 감사드리며, 다음 아티클에서 더 좋은 내용으로 찾아뵙도록 하겠습니다. 감사합니다.

댓글 0
댓글을 작성하려면 해주세요.