브라우저는 사용자가 원하는 것을 어떻게 제공하나

퍼듀대학교의 심리과학과 교수 킵 윌리엄스^{Kip Williams}는 ‘사이버볼^cyberball’이라는 굉장한 실험을 진행했다. 피실험자는 다른 두 참여자와 함께 공 던지기 컴퓨터 게임을 했다. 일정 시간이 지난 후 피실험자는 따돌려지고 남은 시간 동안 구경만 했다.

실험 후 자기 보고서에 따르면 피실험자는 분노와 슬픔의 감정이 증가했으며 네 가지 요구(로이 바우마이스터^{Roy F. Baumeister}가 주장한 의지력을 구성하는 네 가지 요소. 즉 생각 조절, 감정 조절, 충동 조절, 수행 조절-옮긴이)가 모두 감소했다. 디지털 버전의 실험 역시 현장 실험과 똑같은 결과를 보였다. 이것은 이 감정들이 상황에 관계없이 나타난다 것을 의미한다.

게임이 끝난 뒤 피실험자에게 다른 참여자가 사람이 아니라 로봇이었다고 말해주었다. 흥미롭게도 자동화된 경쟁자라는 사실이 부정적 감정을 줄여주지는 못했다. 진실을 알게 된 피실험자는 오히려 분노가 증가했으며 의지력과 자제력은 감소했다.

다시 말해서 디지털 시스템에 의해 거부당했다고 생각하는 사람들은 직접적인 책임자가 없다고 믿더라도 상처를 받고 자주성이 줄어든다는 것이다.

그래서 이게 브라우저랑 무슨 상관일까?

브라우저의 외형과 동작에 대한 모든 기능을 조정하는 것은 마치 주사위 게임처럼 누군가를 기쁘게 해주기보다 다른 사람을 소외시킬 수 있는 위험성 있는 도박이다.

웹 서핑을 위해 브라우저를 사용하다 보면 같은 것들이 너무 많다. 우리는 많은 시간을 페이지에서 페이지로, 사이트에서 사이트로 넘어가고, 링크를 클릭하고, 버튼을 누르고, 동영상을 보고, 입력 칸을 채우고, 메시지를 작성하는 데 쓴다. 하지만 가끔씩 뭔가 새롭고 흥미로운 것을 발견하면 이를 관찰하기 위해 잠시 멈추게 된다.

모든 웹사이트와 웹 앱은 사물이 어떻게 보이고 작동해야 하는지에 대해 자신만의 아이디어를 갖춘 하나의 독립적인 경험이다. 어떤 것은 서로 비슷하지만 각 인터페이스는 모두 어느 정도 조작 방법을 배워야 한다.

어떤 브라우저는 기능과 모양 일부가 변경될 수 있다. 이것은 웹사이트에서 예상하지 못한 오차가 생길 수 있다는 뜻이다. 지금부터 일부 기능에 숨은 뉘앙스에 대해 확인해보자. 더 중요한 것은 왜 기능을 대부분 그대로 두는지 이유를 알아내는 것이다.

맨 위로 스크롤 ^{Scroll-to-top}

모든 주요 데스크톱 브라우저에서는 키보드의 홈 키를 누르면 페이지 맨 위로 이동할 수 있다. 일부 스크롤 바는 영역 상단을 클릭하면 같은 동작을 수행할 수 있다. 일부 브라우저에서는 Command+Up(맥OS)/Ctrl+Up(윈도우)으로도 실행할 수 있다. 스크린리더와 같은 보조기술을 사용하는 사람들은 (사이트의 HTML에서 올바르게 선언되었다면) 배너 랜드마크^{banner landmarks} 같은 것을 활용해 같은 방식으로 탐색할 수 있다.

그러나 모든 장치에서 이 기능을 호출하는 방법을 찾는 것은 어렵다. 많은 노트북에는 홈 키가 없다. iOS에서는 시계를 눌러 맨 위로 가기^{tap-the-clock-to-jump-to-the-top} 기능을 찾아내기 어렵다. 실수로 실행되면 오히려 놀랄 수도 있다. 스크린리더 랜드마크의 탐색 기술을 재구현하려면 특수한 브라우저 확장이 필요하다.

긴 페이지에 일반적으로 적용하는 UI 솔루션은 바로 맨 위로 스크롤 버튼이다. 보통은 화면 오른쪽 하단 모서리에 위치한다. 이 기능을 이용하면 사용자가 얼마나 스크롤했든 페이지 최상단으로 이동할 수 있다.

사이트 내 페이지마다 많은 양의 콘텐츠가 담겨 있다면 UI 패턴을 조사해볼 필요가 있다. 이 기능이 어디에서 얼마나 실행되는지 확인하기 위해 분석이나 사용자 테스트를 수행하자. 자주 실행되는 기능이라면 정보 구조와 콘텐츠 전략을 오랫동안 열심히 살펴봐야 한다.

맨 위로 스크롤하는 패턴을 내가 좋아하는 세 가지 이유:

• 기능이 매우 분명하다(특히 올바르게 표시된 경우).
• 잘만 설계하면 엄지손가락이 편한 위치에 적절한 크기의 터치 대상을 놓을 수 수 있다. 운동 제어에 문제가 있는 사용자를 고려한다면 너무 좁아 터치하기 힘든 스크롤 바보다 터치 버튼이 낫다.
• 스크롤 동작을 바꾸거나 제거하지 않는다. 위로 올라가는 여러 방법 중 하나에만 익숙한 사람이라도 소외되거나 방해받지 않는다.

이런 종류의 기능을 구현할 때 모두에게 같은 경험을 제공하려면 다음의 네 가지가 필요하다(스무드 스크롤^{Smooth Scroll} 라이브러리가 꽤 도움이 된다는 것을 알아냈다).

• 동작을 줄이려는 사용자의 욕구를 존중하라. 페이지 하단에서 손가락을 위로 날려 일으키는 극단적인 스크롤은 전정기관에 영향을 미칠 수 있다. 신체의 물리적 위치 방향 감각을 제어하는 기관이 멈춰 두통과 구역감, 현기증, 편두통, 난청 같은 증상이 나타날 수 있다.
• 키보드 포커스도 문서의 상단으로 이동시켜 시각적 효과와 똑같이 만든다. 이 기능을 적용하면 모든 사용자 경험이 향상된다. 그렇지 않으면 맨 위로 스크롤한 후 Tab 키를 누르면 스크롤 버튼을 누르기 전에 포커스가 있던 곳에서 가까운 첫 상호작용 요소로 이동한다.
• 버튼이 다른 콘텐츠를 가리지 못하도록 만든다. 브라우저의 기본 상태뿐 아니라 확대된 상태에서도 확인하자.
• 다른 고정 위치 요소를 염두에 두자. 챗봇 또는 플로팅 액션 버튼^{floating action button}이 스크롤 버튼과 동일한 위치를 차지하려고 경쟁하는 웹사이트를 상당히 많이 보았다.

 

스크롤 바

이것을 기억할 나이일지는 모르겠지만 한때 웹사이트의 스크롤 바에 스타일을 적용하는 것이 유행이었다. 인터넷 익스플로러는 다양한 벤더 특정 속성을 통해 이런 스타일 적용을 가능하게 했다. 잘 만들어진 스크롤 바는 정말 멋졌다! 능숙한 디자이너와 개발자가 세부적인 사항에 집중해 만든 스크롤 바는 웹사이트의 확장된 구성요소처럼 보였다.

하지만 퀄리티 디자인에 대한 대가는 혹독했다. 스크롤 바는 웹사이트가 아닌 응용 프로그램 인터페이스의 일부다. 포괄적 디자인^{inclusive design} 관점에서 볼 때 이것은 외부 일관성이라 불린다. 외부 일관성이란 객체의 기능이 다른 곳에서 유사한 구현을 통해 정보를 보여주고 강화시킨다는 개념이다. 보통 집에서 벽면 스위치를 누르면 변기의 물이 내려가지 않고 조명이 켜지는 것이 외부 일관성의 한 예시다.

운영체제마다 (또 버전에 따라) 스크롤 바의 형태에 약간씩 차이가 있지만 그 기능은 외적으로 일관성을 갖는다. 스크롤이 필요한 OS의 모든 창과 프로그램이 같은 스크롤 바를 사용한다는 점에서는 내적으로도 일관적이다.

웹사이트의 스크롤 바 색상을 변경한다는 것은 기술적 이해가 부족한 사람들에게는 경고나 되돌아가는 안내도 없이 또 다른 인터페이스가 바뀌는 것이다. 사용자가 화면의 작동 방식에 대해 혼란스러워하고 있다면 안정적이며 믿을 수 있는 친숙한 것이 하나 더 사라지는 것이다.

이 글을 읽으며 눈을 굴리고 있을지도 모르겠지만 제니퍼 모로^{Jennifer Morrow}의 멋진 글을 소개하겠다. 이 글에서 그녀는 한 쇼핑몰에서 게릴라 사용자 테스트를 하다가 컴퓨터를 전혀 사용해보지 못한 사람을 우연히 만나 뜻밖의 시간을 보낸 이야기를 하고 있다.

제니퍼의 발견은 충격적일 정도로 중요하다. 발견의 요점은 어떤 사람은 (전에 컴퓨터를 이용해본 사람이라도) 컴퓨터를 사용하기 위해 마주치게 되는 하드웨어와 OS, 거기에 설치된 브라우저, 브라우저가 보여주는 웹사이트, 웹사이트의 모달^modals 과 공개 글이 포함된 ‘계층’이란 뉘앙스를 이해하지 못한다는 것이다. 그들에게는 기운 빠지는 경험일 뿐이라는 것이다.

이런 사용자들이 인지적 장벽을 피해갈 것이라고 기대해서는 안 된다. 이 같은 추상화는 현실 객체와 비슷하게 만들어져 프로그래머가 아니라도 디지털 시스템에서 원하는 것을 얻을 수 있도록 되어야 한다. 불필요한 복잡성이 추가되면 은유가 약해지고 사용자가 신뢰할 기준점이 줄어드는 셈이다.

사이버볼 실험을 다시 떠올려보자. 잘못 디자인된 스크롤 바는 이미 혼란에 빠져 있는 사용자에게 계속 불편함을 줘서 원하는 것을 얻으려던 시도를 포기하고 모든 시스템을 거부하게 만든다.

모로는 이 글을 2011년에 발표했지만 아직도 시사하는 바가 크다. 전 세계에서 더 많은 사람이 인터넷을 사용하고, 점점 더 다양한 서비스가 일상 생활을 디지털화하고 있다. 모든 사람이 장치와 환경, 능력에 상관없이 환영받는다고 느끼도록 만드는 것은 책임감 있는 디자이너와 개발자인 우리의 몫이다.

불필요한 외부 일관성을 포기하는 것 외에도 사용자가 지정한 스크롤 바 스타일에 충분한 색상 대비 역시 잠재적 문제가 된다. 시력이 약한 사람은 너무 밝은 색상 때문에 웹사이트의 스크롤 메커니즘을 인식하지 못할 수 있다.

이번 글에서는 OS의 기본 스크롤 바를 변경하는 데 CSS 대신 자바스크립트를 사용해서 생기는 스크롤 바 변형에 관한 문제를 다루지는 않을 것이다. 확신하는데 모든 장치와 OS, 브라우저, 브라우저 모드에서 성공적이면서도 안정적으로 모든 기능과 작동이 한 번에 구현되는 스크롤 바를 본 적이 없다.

내 의견은? OS의 스크롤 바 기본 형태를 변경하지 말라는 것이다. 차라리 그 시간에 색상 대비 문제를 확인하고 점검하라.

스크롤

스크롤 동작을 변경하는 데 있어 주요 고려사항 중 하나는 사용자 동의 여부다. 외부 일관적이며 시스템적인 동작을 허락 없이 갑자기 변경하는 경우가 있다. 이런 관행을 설명하기 위해 스크롤재킹^{scrolljacking} 이라는 용어가 만들어졌다. OS의 스크롤 설정을 존중해 스크롤 동작을 더 신중하게 처리하는 스크롤리텔링^{Scrollytelling}과 혼동해서는 안 된다.

웹사이트나 웹 앱에서 스크롤 동작을 변경하는 것이 누군가의 특별한 요구사항에는 맞을 수도 있다. 하지만 어떤 사람에게는 그저 귀찮은 일일 뿐이다. 운동 제어에 문제가 있는 사람에게는 사이트 탐색이 불편해지는 장애물이 될 수 있다. 극단적인 경우에는 스크롤 양과 이동 거리 사이에 발표되지 않은 불일치로 전정기관 이상을 일으킬 수도 있다. 또한 수정된 스크롤 동작이 마우스나 터치패드, 트랙 패드를 사용하지 않는 사람들을 뜻밖에도 소외시키는 경우 역시 고려해야 한다.

대체로 로빈 렌들^{Robin Rendle}의 말이 옳다.

비아냥으로 들리겠지만 진심을 담아 이야기하겠다. 스크롤재킹은 웹디자이너가 지킬 첫 번째 목표를 지키지 못한 예이다. 표준화된 패턴을 무시하고 욕심을 부려 사용자의 입력을 제어하려고 시도한 것이다.

강조 색상

브라우저에서 스타일을 지정할 수 있는 또 다른 OS기능은 강조 색상이다. 스크롤 바와 비슷하게 강조 색상 역시 브라우저뿐 아니라 OS 내의 모든 앱이 공유하는 인터페이스 요소이다.

OS에서 강조 색상에 관한 외부 일관성을 망가뜨리는 것은 스크롤 바를 변형시키는 것과 마찬가지 문제를 일으킨다. 즉 다른 모든 곳에서 잘 작동하는 기능을 바꾸는 것이다. 이것은 혼란스럽고 거부감을 주며 다른 사람이 해놓은 설정을 무시하게 될 가능성이 있다.

어떤 사람들은 글을 읽으며 강조 표시를 한다. 여러분이 강조 색상을 수정했을 때 강조된 텍스트와 배경의 색상 사이 대비가 낮다면 웹사이트나 앱을 보는 사람은 자신이 강조 표시한 텍스트를 읽지 못할 수 있다. 즉 그 효과는 사용자들이 글을 읽으려 할 때 텍스트가 사라지는 것처럼 보이게 할 것이다.

다른 사람들은 당신의 미적 감각에 신경 쓰지 않을 수 있다. 맥OS와 윈도우 모두 사용자가 강조 색상을 바꿀 수 있게 허용한다. 만약 사용자가 시스템의 기본 색상이 아닌 다른 색을 지정했다면 당신이 설정해둔 색상이 사용자의 색상보다 먼저 나올 수 있다.

강조 색상을 분위기에 맞추려는 욕심은 잠재적 위험성보다 중요하지 않다. 그냥 그대로 두자.

 

텍스트 크기 조정

많은 사람이 자기 필요에 따라 텍스트 크기를 조정한다. 그건 아주 좋은 일이다. 우리는 사람들이 어떤 상황에서도 콘텐츠를 읽고 이용하길 바란다.

너무 작은 텍스트의 문제를 해결하기 위해 일부 디자이너들은 사용자가 직접 CSS font-size 값을 조정할 수 있도록 텍스트 크기 조절 사용자 정의 UI 패턴인 위젯을 제공한다. 보통 텍스트가 많은 콘텐츠에서 찾을 수 있는 이 텍스트 크기 조절 위젯은 복잡한 다중 열을 가진 디자인과 짝을 이룬다. 뉴스 사이트가 흔한 예다.

텍스트 크기 조절 위젯을 분석하기 전에 질문을 하나 던져보고 싶다. 사이트에 텍스트 크기를 조정하기 위한 특수 위젯이 필요하다면 더 간단하게 그냥 기본 텍스트 크기를 늘리는 것이 어떨까?

많은 접근성 문제가 그렇듯 더 큰 폰트 사이즈에 대한 요구가 반드시 사용자에게 장애가 있다는 것을 의미하는 것은 아니다. 사무실에 있는 안 좋은 프로젝터로 웹사이트를 띄우는 경우처럼 흔한 일이다.

브라우저는 사용자가 원하는 기본 글꼴 크기를 변경해 웹사이트의 텍스트 크기를 적절하게 조절하는 것을 허용한다. 단위를 지정하지 않은 line-height 값과 상대적인 단위를 이용한 font-size로 CSS를 작성해두면 브라우저는 정확히 처리한다.

어떤 디자이너는 사용자들에게 이런 자유를 주면 자신들이 의도한 브랜드 가치가 떨어진다고 생각한다. 훌륭한 디자이너는 보이는 것 이상으로 브랜드를 만들 수 있다고 이해하며 사용자에게 최선의 경험을 제공하기 위해 브라우저의 기능을 활용한다. 좋은 브랜드는 텍스트 크기 같은 속성이 바뀌더라도 사용자의 흐름, 타이포그래피와 색상의 품질, 카피라이팅의 강렬함 등으로 빛을 발한다.

안타깝지만 브라우저 텍스트 크기 조절 위젯에는 보편적인 접근법이 존재하지 않는다. 브라우저의 텍스트 설정을 이용하면 그대로 작동한다. 일관적이지 못한 상황에도 모든 웹사이트의 모든 페이지에 같은 입력과 동작, 키보드 단축키를 사용해서 조정할 수 있다.

행동의 일관성이 굉장히 중요하다. 브라우저의 텍스트 크기 조정은 설정이 바뀔 때마다 모든 텍스트에 상대적으로 적용된다. 이런 설정은 다음 방문에도 유지된다. 모든 텍스트 크기 조절 위젯이 이런 기능을 제공하는 것은 아니며 모든 크기 조정이 웹 콘텐츠 접근성 가이드라인을 지키지도 않는다.

대비도 높은 테마

대비도 높은 테마란 다크 모드 같은 것을 이야기하는 것이 아니다. 시각적으로 더욱 쉽게 볼 수 있도록 웹사이트나 웹 앱의 색상을 조정해야 한다는 사용자 요청에 응답하는 방법에 대해 이야기하려는 것이다.

텍스트 크기 조절 위젯과 마찬가지로 대비도가 높은 색상을 주도록 만들어진 테마는 당황스럽다. 테마를 만드느라 시간을 쓰는 대신 차라리 CSS에서 부족한 대비도를 수정하는 것은 어떨까? 이상적인 상황에서도 CSS로 테마를 효과적으로 관리하는 것은 복잡하고 자원이 많이 들어가는 일이다.

대부분 사이트가 제공하는 대비도 높은 테마는 모두 디자이너나 개발자가 결정한 대로 색상 설정이 유지되고 있어 문제가 될 수 있다. 또 대비도가 너무 높으면 편두통 같은 증상을 일으킬 수 있고, 주의력결핍과잉행동장애^ADHD가 있는 사용자가 주의를 잃게 만들 수도 있다.

접근성 측면에서 대비도의 문제는 우리를 고민하게 만든다. 누군가에게 효과적인 것이 다른 사람에게는 불편이 될 수도 있다. 이 때문에 모든 정보를 공개하고 공통으로 사용할 수 있도록 해야 한다. 전체적인 제어는 사용자에게 넘겨서 콘텐츠를 이용하기 가장 좋은 대비도를 선택할 수 있도록 하자.

이런 기능을 제공하려면 몇 가지 염두에 둬야 할 것이 있다. 윈도우에서 고대비 모드를 설정한 후 모델링하라. 고대비 모드란 브라우저가 표시하는 것부터 시작해 OS의 모든 UI에 높은 색상을 적용하는 기능이다. 고대비 모드는 기본적으로 네 개의 테마를 제공하지만 사용자가 자신의 색상을 지정해 취향에 맞출 수 있다.

여러분이 직접 만들 고대비 모드 기능 역시 같은 일을 해야 한다. 서로 다른 색상을 가진 다양한 테마를 제공하고 사용자가 자기에게 맞는 색상을 선택하도록 해야 한다. 그렇게 해야 여러분이 제공한 색상이 모두 맞지 않더라도 사람들이 스스로 원하는 색을 선택할 수 있다.

키보드 포커스

키보드 포커스는 키보드 및 스위치, 음성 입력, 안구 추적, 기타 보조기술의 입력에 의존하는 사람들이 디지털 인터페이스를 탐색하고 작동하는 방법이다. autofocus 속성을 이용해 키보드 포커스를 로드하고 페이지의 첫 번째 입력 칸으로 이동하도록 만들 수 있지만 권장하지 않는다.

시력이 낮거나 시야가 확보되지 않는 사람들에게는 갑자기 다른 곳으로 순간이동하는 것과 다름없는 일이다. 혼란스럽고 불쾌한 경험이다. SF영화에서 처음 순간이동을 겪은 사람이 구토하는 것과 같은 이치다.

운동 제어에 문제가 있는 사람들은 사전 동의 없이 포커스가 이동하면 원하지 않는 곳으로 이동할 수 있다. 그 위치에서 빠져나오는 것은 짜증스러운 일이고 최악의 경우 사용자를 무기력하게 만들 것이다. 탐색을 돕는 제목 요소나 랜드마크 요소가 없는 웹사이트는 상황을 더 나쁘게 만든다.

모든 것은 동의의 문제다. 새로 열린 모달로 포커스를 옮기는 것처럼 사용자가 의도적으로 필요한 동작을 실행한다면 포커스를 옮기는 것도 괜찮다. 나는 여러분의 집에 찾아가 물건을 클릭하도록 만들 수는 없다. 그러니 특별한 요청이 없다면 키보드 포커스를 이동시키지 마라.

키보드 포커스는 브라우저가 처리하도록 두자. 시맨틱 마크업만 잘 사용하면 브라우저가 알아서 수행한다. 여기에 도움이 되는 팁들을 소개하겠다.

• tabindex 속성을 신중하게 주의해서 사용할 것.
• 상호작용 요소(a, button, input, select, summary, textarea)에 tabindex를 사용하지 말 것.
• 사용자가 클릭할 것으로 예상되는 요소에 수동적으로 tabindex 순서를 바꾸지 말 것. 대신 HTML을 시각적 순서에 맞게 작성해 결과 DOM이 원하는 대로 나오게 하라. 반응형 모바일 우선 접근 방식이 많은 도움이 될 것이다.

클립보드와 브라우저 방문 기록

클립보드는 신성한 공간이다. 사람들이 복사하는 것을 막지 말고, 복사된 콘텐츠에 다른 내용을 더하지 마라. ‘뒤로’ ‘앞으로’ 버튼을 비롯한 브라우저 방문 기록도 마찬가지다. 시간 여행을 망치려 하지 말고 브라우저가 자기 일을 하게 둬라.

정리

사이버볼은 다른 사람들과 공을 던지고 받는 데서 재미를 찾는 게임이다. 웹에서는 웹을 탐색함으로써 재미를 얻는다. 두 상황 모두 자기가 배제되는 순간 재미는 사라지고 옆으로 밀려나 수동적으로 지켜보게 된다.

다행히 웹은 기나긴 사이버볼 실험이 될 필요는 없다. 브라우저에는 강력하고 도움이 되는 기술 친화적인 기능들이 있어 어떤 사용자에게는 좋은 경험을 제공할 수 있다. 하지만 변하는 정도를 모르고 함부로 변경하면 다른 사용자가 소외될 가능성이 높아진다.

이 모든 것이 중요한 일을 수행한다는 것을 기억하라. 사람들이 자기 능력이나 상황에 관계없이 웹사이트나 웹 앱을 성공적으로 사용하고 잊을 수 없는 경험을 하도록 만들어주자. 가끔은 가만히 두는 게 최선일 때도 있다.