인클루시브 디자인 패턴 (1)
인클루시브 디자이너란
디자이너가 버튼을 만든다면?
그래픽 디자이너
웹페이지에 올려놓거나 작동하는 방법을 알지 못함
코딩하는 디자이너
웹페이지에 버튼을 보이게 하고, 자바스크립트 이벤트 리스너를 첨부할 수 있는 충분한 수준의 html, css, 자바스크립트 지식이 있다
<div class="button"></div>
.button { width: 200px; height: 70px; background: url('../img/button.png'); }
button.addEventListener('click', function() { // 클릭되면 수행할 로직 });
그러나 위는 그래픽을 코드화 한 것이지, 코드로 디자인을 한 건 아니다.
인클루시브 디자이너
이들이 버튼을 바라보는 관점은?
1. 확대한다면? 확대/축소할 때 계단효과나 흐림효과가 발생한다.
2. 네트워크 사용량을 아끼기 위해 모바일 브라우저에서 이미지 로딩 옵션을 끈다면? 이 경우 완전히 이미지로만 구성된 버튼은 안보인다.
3. 포어그라운드와 백그라운드 이미지 구별이 어려운 사용자가 ms 윈도우의 고대비 모드를 켠다면? 이는 어떤 상황에서는 백그라운드 이미지가 사라질 수도 있다.
포그라운드와 백그라운드?
https://keykat7.blogspot.com/2021/01/android-notification-foreground-service.html
4. <div> 요소는 <button> 요소와는 달리 현재 상태로는 키보드로 포커스를 주거나 조작할 수 없다. 어떤 사람들은 웹 페이지를 내비게이션하거나 조작하기 위해 마우스 대신 키보드를 사용하기에.
5. 시각장애인 같은 스크린 리더 사용자의 경우에도<div> 요소는 아무 역할하지 않는다. 현재 요소의 실체가 버튼이라는 어떤 정보도 제공하지 않기 때문이다. 버튼에’ Start’라는 레이블이 있다 해도이는 css 프레젠테이션 레이어의 일부로서 백그라운드 이미지에 포함되어 있으므로 이 역시 보조 기술로는 유효하지 않다. 이는 버튼이 다른 언어로 번역되지 못하는 이유이며 따라서 해외 사용자들을 배제시킨다. 결국 많은 사람을 놓치게 된다...
인클루시브 디자이너는 이런 문제들을 예측한다. 적은 노력으로 표준규약을 잘 활용하자. 그들은 어떤 경우에 디자인하고 어떤 경우에 이미 디자인된 것을 채택할지 알고있다.
여기서는 html 명세에서 표준으로 제시하는 html 버튼을 사용하면 된다. 크기 조절이 되고, 번역 가능하며, 포커스를 줄 수 있고, 호환이 가능하다. 또 스타일을 적용/변경할 수 있고, 유지보수 가능하고 가변적이며, 간단하다. <button>Start</button>
문서(DOC)
HTML 페이지는 형태와 크기가 극적으로 다양해졌으며 어떤 패턴의 조합이라도 수용할 수 있게 됐다. 그러나 우리가 따라야 할 웹 문서 수준의 모범 사례는 여전히 몇 가지가 존재한다.
하지만 기억하자, 목적은 최종적인 상세 표준코드 추구가 아니라 인클루시브 UI를 위한 상위 수준의 웹페이지를 구성하는 것.
문서 형식
구식의 정적 페이지든 SPA든 웹페이지는 하나의 웹문서다. 항상 코드 첫 줄에 있는 <!DOC-TYPE html>의 'DOC'이라는 부분이 바로 그 증거다. 우리가 만드는 인터페이스는 브라우저에 부속되며 사용자의 저마다 다른 설정과 구성을 잘 견뎌야 한다.
... (계속)
