목차

1. 서문
2. 책임감 있는 디자인
3. 지속성 있는 감지 방법
4. 성능 고려하기
5. 책임감 있게 전달하기

2. 책임감 있는 디자인

반응형에 대한 내 애정의 근원은 내가 만든 웹사이트가 모바일 디바이스부터 막강한 성능의 데스크톱에 이르기까지 어디에서나 잘 보일 수 있게 하는 데 있다.
- 트렌트 월턴, <크기 맞추기(Fit to Scale)>-

책임감 있는 디자인 원칙 중 사용성과 접근성에 집중하여 다루어 보고자 한다.

2.1 사용성을 고려해 디자인하기

화면 크기와 디바이스 종류가 다양한 환경에서 콘텐츠와 기능을 어떻게 표현해야 할지에 대해 고민한다.

2.1.1 최대한 빨리 브라우저로 표현하기

'브라우저에서 디자인한다'는 표현 대신 '브라우저에서 결정한다'라고 표현을 바꾸자
-댄 몰, <더 패스트리 박스 프로젝트>-

이 단계의 핵심 목적은 최대한 빨리 브라우저에서 표현함으로써 디자인과 상호작용 방식에 관련된 사항을 실제로 웹사이트를 조작할 수 있는 환경에서 결정하는 데 있다.

2.1.2 중단점 찾기(breakpoint)

중단점(breakpoint) : 미디어 쿼리를 통해 가변 레이아웃의 형태가 다르게 바뀌는 뷰포트 크기를 말한다.

디자인 초기 단계에서는 절대로 중단점을 지정해서는 안 된다. 대신 중단점이 될 만한 콘텐츠를 찾기만 해야 한다.

먼저 작은 화면에서 출발해 서서히 키워가다 보면 쓰레기처럼 보이는 시점이 나타난다. 그때 중단점을 지정한다
-스티븐 헤이-

좀 더 객관적인 가이드라인을 원한다면 웹을 위한 타이포그래픽 스타일 요소에 나온 기준을 따르자.

• 텍스트에서 한 줄에 담긴 글자가 45자 ~ 75자 일 때 가독성이 가장 높다고 한다.
  레이아웃을 키우다가 한 컬럼의 텍스트가 이 기준을 벗어나는지 보자.

주요 중단점(major) : 칼럼들이 추가되거나 하나 이상의 요소에 대한 변화가 일어나는 부분
하위 중단점(minor) : 디자인 일부에서만 변화가 일어나는 부분(font-size가 변해서 글자가 벗어나는 정도)

필자에 의하면 주요 중단점은 개발 초기 단계에 들어나고, 하위 중단점은 최종 마무리 단계에서 결정되는 편이라고 한다.

2.1.3 모듈 방식으로 디자인하기

컴포넌트를 제작할 때 뼛속까지 완전히 파악해서 만들고 문서화해 다른 모듈과 원활하게 연동되는 독립적인 개체로 만들어야 한다는 것이다.

2.1.4 콘텐츠는 유지하고, 노이즈는 줄이고

콘텐츠를 최대한 그대로 유지하면서 작은 화면에 맞추려면 어떻게 해야 할까?
콘텐츠를 단순히 숨기기보다는 작은 뷰포트에서 사용성을 최대한 유지하도록 디자인을 재구성하는 것이 가장 좋다.

작은 화면이라는 제약 사항을 직관적이며 책임감 있는 방식으로 대처할 수 있는 디자인 패턴이 다양하게 존재한다.

2.1.5 점진적 공개

이러한 디자인 패턴 중 하나로 콘텐츠를 온디맨드 방식으로 보여주는 디자인 패턴이다.
(온디맨드 방식 : 콘텐츠를 필요한 시점에 보여주는 방식)

숨기는 것이 무조건 나쁜 것이 아니라 숨겨진 내용을 사용자가 볼 수 있는 방법이 없다는 것이 나쁠 뿐이다.

• 콘텐츠의 일부를 숨길 때 인터페이스 큐(cue)도 함께 제공
• 오프 캔버스 레이아웃 패턴 :
  우선순위가 낮은 인터페이스 컴포넌트를 화면 밖에 위치시키고 사용자가 큐를 통해 해당 콘텐츠를 불러오면 뷰포트 안으로 메인 콘텐츠를 밀어내거나 그 위에 덮어 씌우는 방식으로 표현

2.1.6 반응형 테이블

작은 화면에 표시하기 가장 까다로운 콘텐츠 유형 중 하나.
모바일 프레임워크에도 잘 동작하는 몇 가지 패턴을 통해 제작

• 리플로(Reflow) 패턴 : 각각의 셀을 하나의 행으로 만들고 컬럼 명을 왼쪽에 두는 방식
  작은 화면에 표현하다 보니 여러 행을 비교하기에는 불편하다.
• 칼럼 토글(Column Toggle) : 수평 공간이 허용하는 범위 내에서 테이블의 열을 최대한 표시한다. 메뉴는 기존 CSS를 재정의하고 숨겨진 열을 표시할 수 있는 기회를 사용자에게 제공
• 수평 내비게이션(Horizontal navigation) : https://dbushell.com/demos/tables/rt_05-01-12.html
• CSS-플렉스박스로 구성된 그리드(CSS-Flexbox-driven grid)

  http://bradfrost.github.io/this-is-responsive/patterns.html#basic-forms

2.2 터치와 다양한 인터페이스를 고려해 디자인하기

• (hover와 같은) 마우스 전용 기능 위주로 작성된 콘텐츠도 마우스 포인터가 없는 브라우저에서 접근할 수 있게 만든다.
• 터치를 당연히 사용할 것이라고 가정하지 말고 옵션으로 사용할 수 있다고 생각한다.

2.2.1 호버는 단축키로 아껴두기

mouseover는 상호작용을 위한 주된 수단이 아닌 있으면 좋은 보조 기능으로 제공해야 된다.

터치와 mouseover를 모두 지원하도록 스플릿 버튼으로 구성하기도 한다.

2.2.2 터치는 기본

항상 터치스크린을 사용한다는 가정하에 디자인해야 한다.
그래서 버튼이나 링크 영역을 탭하기 좋게 만들어야 한다.

• 애플은 사용 가능한 버튼의 최소 크기를 44 X 44 픽셀로 제시하고 있다.
• 연구결과에 따르면 이상적인 링크 크기는 45-57픽셀, 버튼은 72픽셀 정도로 제시한다.

2.2.3 흔히 사용하는 제스쳐

사용자들은 웹 환경에서도 네이티브 환경에서 사용하는 터치 이벤트를 기대한다.

브라우저에서는 터치 이벤트를 지원하기 시작했다.
그렇다면 네이티브 터지 동작과 똑같이 만들려면 어떻게 해야 할까?

2.2.4 웹 안전 제스쳐 : 이런 것이 있을까?

터치 제스쳐는 흔히 사용하는 기존의 입력 방식에 부가적으로 제공하는 '있으면 좋은' 옵션처럼 생각하는 것이 좋다.
문제는 이러한 제스쳐가 있다고 알리는 것이다.
실제로는 터치 제스쳐의 존재를 암시하는 시각적인 인터페이스가 없는 경우가 많기 때문이다.

2.2.5 터치 제스처를 위한 스크립트 작성하기

터치 상호작용을 최대한 빨리 작동하게 하기 위한 책임감 있는 개발 방식은 마우스와 터치 이벤트에 대한 이벤트 리스너를 모두 구현하는 것이다.
이벤트 처리 로직 구현 시 먼저 발생한 이벤트만 처리하고 다른 이벤트는 무시하도록 작성하면 동일한 코드를 두 번씩 작성하지 않아도 된다.

2.3 접근성을 고려해 디자인하기

제스처나 표현을 지원하지 않는 브라우저 사용자나 스크린 리더와 같은 보조 기술을 통해 웹을 이용하는 사람들도 접근할 수 있게 만들어야 한다.
HTML에 새로운 상호작용 방식이 추가되는 만큼 항상 잃는 부분도 생긴다. 따라서 웹사이트를 제작할 때 이를 최대한 보존하도록 신경 써야 한다.

2.3.1 점진적 향상을 통해 접근성 보장하기

점진적 향상은 HTML의 기능과 내용을 기반으로 사용자 경험을 해치지 않는 레이어 기반의 표현(CSS)과 동작(JS)을 통해 보다 동적인 사용자 경험의 제공을 강조한다.

• 엑스레이 투시 : 사이트를 가장 기본적인 모듈로 나눴다가 각 페이지에 담긴 기능이 최신 브라우저뿐만 아니라 기초적인 HTML만 지원하는 브라우저나 디바이스에서도 문제없이 작동하도록 재구성하는 기법

2.3.2 복잡한 컨트롤을 책임감 있는 방식으로 향상시키기

HTML5 규격에서는 number, color, search와 같은 새로운 형태의 입력 폼이 추가되었다.
이 기능을 지원하지 않는 브라우저에서는 기존의 표준 text 입력 폼으로 표현한다.

range 입력 폼도 추가되었는데, 사용성과 접근성이 좋다고는 판단하기 어렵다.
음량을 조절하는 경우가 아닌 이상 슬라이더를 이같이 표현하면 곤란하다.

<label for="value">Choose a value:</label>
<input type="range" id="value" min="0" max="10">

지금부터 누구나 접근할 수 있는 형태로 슬라이더를 만드는 방법에 대해 알아보자

1. 항상 HTML 작성부터 시작
2. <input type="number"> : 슬라이더는 숫자를 시각적으로 표현한 수단이기 때문
3. min, max와 같은 컨트롤의 제약 사항에 대해 표준 및 부가 속성을 사용
4. input을 드래그할 때 입력된 값을 처리하는 자바스크립트 작성

<label for="results">Results Shown:</label>
<input type="number" id="results" name="results" value="61" min="0" max="100" />
<div class="slider">
  <a href="#" class="handle" style="left: 60%;"></a>
</div>

• 스크린 리더에서 <a> 요소 처리 시 'number link'로 읽게 되는데 이 혼동을 피하기 위해 숨긴다.
  (<a> 속성에 aria-hidden 넣어준다.)

2.3.3 데이터 시각화에 대한 접근성 보장하기

차트나 그래프와 같은 데이터 시각화 표현은 제대로 이해할 수 없는 형태로 전달되는 경우가 많다.

마찬가지로 HTML작성으로 출발하고, 차트나 그래프는 테이블 요소 등 데이터 기반의 요소들을 제공하여 접근성을 보장하도록 한다.
그리고 HTML 마크업을 js로 파싱해 canvas나 SVG 등으로 차트를 동적으로 생성하면 된다.

2.3.4 향상된 지원 전략