아티클

내 키보드는 어디를 보고 있을까? – 포커스 링 디자인의 중요성

2019-09-26 13:54:32

안녕하세요. 엔비전스입니다.

컴퓨터 사용자와 컴퓨터가 상호작용하는 방법 중 가장 보편적인 방법은 GUI의 꽃인 포인터를 마우스를 움직여 클릭하는 방식과 키보드 조작을 통해 명령을 전달하는 방식이 있을 것입니다. 그중 키보드는 글자를 작성하는 역할을 주로 수행하지만, 마우스 사용에 불편함이 있는 사용자를 위해 마우스를 대체하는 조작법을 제공합니다.  이번 아티클에서는 눈으로 화면을 보고 키보드만을 사용하는 사용자가 어떻게 컴퓨터를 사용할 수 있는지에 대해 초점과 포커스링의 개념, 중요성, 그리고 가시성이 좋은 접근성이 좋은 포커스링을 만드는 기법을 중심으로 다뤄보고자 합니다.

 

초점과 포커스링의 개념과 중요성

초점의 개념

일상 속에서 우리는 무언가를 집중해서 보거나, 집중하여 어떤 일을 수행할 때, 초점이라는 단어를 사용합니다. 컴퓨터에서는 키보드가 요소를 가리키는 것을 초점이라고 합니다.

스크린리더 사용자의 경우, 키보드가 보고, 가리키는 대상의 텍스트와 요소명을 음성 안내를 통하여 알 수 있습니다. 그렇다면 시각적으로는 키보드가 어떤 요소를 보고, 가리키고 있는지 어떻게 알 수 있을까요?

 

포커스링의 개념과 중요성

디스플레이를 눈으로 보는 사용자는 포커스링(focus ring)이라는 시각적 디자인 요소를 통해 키보드가 어떤 요소를 보고 가리키고 있는지 알 수 있습니다. 키보드가 보고 가리키는 요소를 사용자의 눈에 잘 보이게끔 해주는 요소가 바로 이 포커스링의 기능입니다.

 

네이버 시작 페이지의 네이버 로고 링크에 키보드 초점이 제공된 사진

 

위 사진은 네이버 메인 페이지의 한 부분입니다. 유심히 보면 로고 이미지에 점선이 표시되어 있는 것을 찾으실 수 있습니다. 그것은 Internet Explorer의 기본 포커스링 디자인입니다.

눈으로 웹페이지를 탐색하는 키보드 사용자의 경우, 이 포커스링을 통해 현재 키보드가 어떤 요소를 보고 가리키는지 알 수 있고, 원하는 곳에 포커스링이 나타났을 때 Enter를 눌러 요소를 클릭할 수 있고, 어떤 동작이 발생함을 알 수 있습니다.

그렇기 때문에 실제로 초점은 이동이 가능하지만 포커스링이 제공되지 않는다면 눈으로 화면을 보는 키보드 사용자는 페이지를 탐색할 수 없는 장애를 갖게 될 것입니다. 포커스링은 따라서 모든 웹페이지에 반드시 필요한 디자인 요소라고 할 수 있습니다.

포커스링은 기본적으로 마우스를 사용하지 못하는 키보드 사용자에게 가장 필요하고, 절실한 기능이며, 저시력 시각장애인 사용자에게도 매우 큰 도움이 됩니다.

 

접근성 좋은 포커스링은 어떻게 제공하는가?

최근에는 포커스링의 가시성이 많이 향상되었으나, 여전히 Internet Explorer와 같은 점선형의 기본 포커스링이 사용되는 경우가 많이 있습니다. 포커스링은 마우스를 사용하기 힘든 지체장애인에게 가장 큰 도움을 주지만, 저시력 사용자가 키보드 사용 시 요소를 탐색하는 데 도움을 줍니다.

하지만 Internet Explorer와 같은 구형 브라우저에서 제공하는 점선형 포커스링은 눈이 잘 보이는 사용자에게 조차도 가시성이 떨어지는 디자인으로 악명이 높습니다. 많은 디자이너 분들께서 포커스링 디자인에 불만을 느껴 포커스링을 제거하는 사례를 볼 수 있었으며 이는 저시력 사용자와 지체장애인 사용자에게 문제가 되어 왔습니다.

포커스링은 CSS 가상 선택자(pseudo Selector)중 하나인 :focus 로 모든 그래픽 기반의 브라우저에게 보편적으로 제공할 수 있으며, 파이어폭스의 경우, :-moz-focusring 선택자를 통해 제공이 가능합니다. 포커스링은 최소 2px 정도의 두껍고 대비가 높은 색의 실선(solid)을 사용한 테두리를 사용하거나 초점을 받은 요소의 색상을 눈에 잘 띄도록 바꾸는 방법을 사용하여 가시성을 향상시켜 접근성을 높일 수 있습니다.

 

CSS 예제로 보는 포커스링 디자인 방법 및 고려 사항

기법 1: outline 속성

브라우저에서 기본적으로 제공하는 방식으로 css의 outline 속성으로 선을 제공하는 방식입니다. 장점은 보편적인 방법이기 때문에 모든 브라우저에서 무리 없이 동일한 디자인을 제공하기 수월하다는 점이 있으며, border가 제공된 요소의 디자인을 변경하지 않고 동시에 사용할 수 있다는 장점이 있으나, border-radius나 clip-path 등으로 요소의 모양을 변형한 요소에 대응할 수 없다는 치명적인 단점이 있습니다.

예제 코드:
포커스링 : outline 디자인

button:focus,button {outline:solid 3px #0088ff; }

 

기법 2: border 속성

outline 속성과 거의 유사한 방법입니다. Border 속성을 사용하여 포커스링 테두리 스타일을 주는 방법으로, 테두리 속성이라 기존에 있던 테두리를 대체하는 것이 단점이지만 border-radius 등의 형태를 변환하는 속성과 호환되어 형태에 맞는 포커스링을 제공할 수 있습니다. 디자인상 테두리가 없는 링크(a) 요소와 같은 곳에 사용 시 적합한 기법입니다.

예제 코드:
border오 디자인된 포커스 링

button:focus {

          outline:none;

          border-style:solid;

          border-width:1px 3px 3px 3px;

          border-color: #88dfff #228fbf #33bfff #228fbf;

}

 

기법 3: box-shadow

CSS3의 Box-shadow 속성을 사용하여 border와 시각적 비슷한 효과를 제공하는 방법이며, 한 번에 여러 겹의 색상을 사용할 수 있는 디자인상의 장점이 있으며, Border, outline과 동시에 사용이 가능한 장점도 있습니다.

반면에 border와 같이 한 면의 색상을 따로 주는 등의 디자인이 어렵다는 단점이 있으며, 실선(solid)을 제외한 border나 outline에서 제공하는 점선(dotted), 마루형 선(ridge), 대시 선(dashed) 등의 다양한 선 디자인을 구현하기 어려운 점이 있습니다.

Border와 마찬가지로 border-radius에도 대응이 가능한 기법이며, CSS3 속성이기 때문에 구형 internet Explorer에서 작동하지 않는 점을 유의해야 합니다.

예제 코드:
box-shadow로 디자인된 포커스 링

button:focus {

          outline:none;

          box-shadow:0 0 0 1px #008,

          0 0 0 2px #70a;

}

 

포커스링 디자인 시 고려 사항

포커스링 디자인을 제공하는 방법은 위에서 소개해 드린 방법만이 전부는 아니며, 최고의 방법도 아닐 것입니다. 콘텐츠 간 간격은 얼마나 되는가, 어떤 CSS 속성을 사용했는가를 고려해야 하기 때문입니다. 콘텐츠를 감싸고 있는 컨테이너의 크기나, 콘텐츠 간의 간격 등은 특히 매우 중요합니다. 다음은 포커스링 제공 시 주의해야 할 고려 사항에 대한 내용입니다.

 

border 사용 시 고려 사항
border의 픽셀값 때문에 컨테이너가 딱 맞지 않는 모습을 담은 사진

Border와 같은 속성을 사용 시에 초점을 받은 요소의 크기가 늘어나 레이아웃 컨테이너의 크기를 벗어나 넓이가 맞지 않아 레이아웃이 의도와 다르게 표시되는 현상이 발생하여 아름답지 않은 페이지가 되어 버리기 때문이며, 단순히 미관상 문제점만 있는 것이 아니라 시각적으로 웹 페이지를 이용하는 사용자에게 혼란을 주게 됩니다.

따라서 포커스링을 제공할 시에는 컨테이너와 컨테이너 내의 포커스를 갖게 될 콘텐츠의 크기 등을 반드시 고려하고, 계산하여 디자인을 제공해야 합니다.

특히 고정 값으로 콘텐츠를 제공할 경우, 컨테이너의 길이를 넘어가는 콘텐츠는 컨테이너의 크기를 강제로 늘려버리거나, 원하는 위치에 배치되는 등의 문제가 발생하므로 반드시 고려해야 합니다.

 

outline 사용 시 고려 사항
포커스 링 가려짐 현상에 대한 사진

outline 속성으로 포커스링을 제공할 경우, 요소의 크기를 키우지 않고, 요소보다 낮은 높이(z) 계층에 테두리가 부여되는 속성이기 때문에 콘텐츠의; 간격을 반드시 고려해야 합니다. 3차원적인 계층상 요소보다 아래 계층에 표시됩니다. 따라서 간격이 너무 좁은 연속된 콘텐츠에 outline으로 포커스링을 제공할 경우, 포커스링의 일부분이 콘텐츠 요소에 가려지게 됩니다.

 

모바일에서 포커스링 수정 시 고려 사항

모바일의 경우, HTML 초점과 스크린리더 초점으로 구분됩니다. 스크린리더 초점이 자체적으로 제공되며, 제거할 수 없습니다. 모바일의 브라우저 초점은 border로 제공되므로, 포커스링을 변경하고자 하는 border 속성을 수정하거나, none 처리 한 다음, 다른 방법으로 포커스링을 제공할 수 있습니다. iOS의 경우, 포인터 기반의 탐색이기 때문에 포커스링을 디자인하는 것에 어려움이 있습니다.

지금까지 시각적으로 초점을 받은 요소를 하이라이트 표시해주는 포커스링을 어떻게 디자인해야 하는가에 대해 살펴보았습니다. 다음에는 더 유익한 내용으로 찾아뵙도록 하겠습니다. 읽어 주셔서 감사합니다.

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