책임감 있는 반응형 디자인(아름다운 웹사이트 만들기 시리즈 13)

단순히 다양한 화면 크기에 대처하는 데 그치지 않고

모든 디바이스에 보편적이고 지속적으로 적용할 수 있는

웹사이트와 앱을 만들기 위해 '책임감 있는 디자인'이 필요하다!



우리가 제공하는 콘텐츠와 서비스를 가능한 한 모든 기기에서

접근할 수 있도록 하는 것은 가치 있는 일이다.



웹은 접근 가능한 휴대용 디바이스의 폭발적인 인기 덕분에 유래 없는 광범위한 접근성을 갖게 되었다. 하지만 여기에 한 가지 문제가 있다. 웹은 생각보다 연약하다. 웹은 네트워크 연결이 갑자기 끊기거나 로딩 시간이 길어지는 등 불확실한 요소가 많다. 이는 우리가 디자인한 요소들이 사용자에게 제대로 전달되지 못할 가능성으로 이어진다.

지리적 위치나 기술적 배경 등 열악한 환경에 있는 사용자가 물론 목표로 삼는 사용자층이 아닐 수도 있다. 하지만 모든 사람을 수용할 수 있는 웹사이트를 제작하는 것은 곧 고객층을 확대할 수 있는 기회가 된다. 웹 접근성이 향상될수록 웹사이트의 사용자층은 더욱 두꺼워진다. 따라서 웹사이트를 사용하며 만나게 되는 다양한 장애를 감당하는 능력과 HTML, CSS, 이미지와 같은 자원을 선별적으로 전달하는 능력 등이 더욱 중요한 기능으로 대두할 것이다.



끊임없이 변화하는 웹 디바이스마다 디자인하지 말고,

하나의 경험을 다양한 측면으로 제공해야 한다.



접근 범위도 넓고, 사용하기도 편하고, 지속적으로 발전할 수 있도록 웹사이트를 제작하기 위해서는 반응형 디자인에 책임감 있는 개발 원칙을 몇 가지 더 보완해야 할 필요가 있다.



ㆍ 사용성: 화면 크기와 디바이스가 다양한 환경에서 콘텐츠와 기능을 어떻게 표현해야 할지 고민해야 한다. 중단점을 찾고, 모듈 방식으로 디자인하고, 터치와 다양한 인터페이스를 고려해 디자인한다.

ㆍ 접근성: 웹을 시각적으로 접근하는 사용자뿐만 아니라 다른 형태로 접근하는 사용자와도 웹사이트가 상호작용할 수 있도록 디자인해야 한다. 예를 들어, CSS를 사용하면 간결하고 가벼울 뿐만 아니라 네이티브 HTML 폼 요소만으로도 장애를 가진 사용자들이 컨트롤에 접근할 수 있다.

ㆍ 지속성: 브라우저가 가진 기능과 제약 사항을 감지하는 것은 사용자 경험을 제대로 전달하는 데 매우 중요한 요소다. 지속성 있는 크로스 브라우저 코드 작성이 필요하다.

ㆍ 성능: 성능은 사용자 경험의 핵심 요소다. 가장 바람직한 것은 사용자가 어떤 디바이스를 사용하는지에 상관없이 사용자에게 꼭 필요한 콘텐츠와 기능만 최적화해 전달하는 것이다.



이러한 책임감 있는 개발 원칙과 패턴을 적용하면 브라우저의 기능이나 제약에 관계없이 발생 가능한 여러 가지 접근성 및 성능 관련 문제에 최적화된 사용자 경험을 제공할 수 있을 것이다. 이는 오늘날 웹 개발에서 중요한 요소일 뿐만 아니라 앞으로 등장할 브라우저에 대비하는 것이기도 하다.



◆이 책에서 다루는 내용

-중단점 찾기

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

-터치와 다양한 인터페이스를 고려한 디자인

-디바이스 감지

-기능 감지

-책임감 있는 미디어 쿼리

-성능 예산

-요청 과정의 블로킹 최소화하기

-웹으로 전달할 파일 준비하기

-HTML, CSS, 이미지, 폰트, 자바스크립트 전달

한국어판 출간에 앞서

추천의 글

서문

chapter 1 책임감 있는 디자인

chapter 2 지속성 있는 감지 방법

chapter 3 성능 고려하기

chapter 4 책임감 있게 전달하기

결론

감사의 글

참고 자료

참고 URL

찾아보기

스콧 젤 웹디자이너 겸 개발자. 플로리다 시그로브비치에서 살고 있다. 디자인, 프런트엔드 개발 스튜디오 필라멘트 그룹의 우수한 사람들과 함께 일하고 있으며 보스턴 글로브, 레고 그룹, 글로벌 뉴스 캐나다, 이베이 및 그 밖의 다양한 기업과도 함께 일하고 있다. 또한 '언 이벤트 어파트'를 비롯한 다양한 콘퍼런스에서 강연했다. 크로스 디바이스 개발을 위한 접근성, 지속 가능성, 성능 지향에 초점을 맞춘 깃허브 프로젝트를 발표하는 등 오픈소스 커뮤니티에 적극적으로 참여하고 있다.