들어가면서
반응형 웹 디자인과 적응형 웹 디자인의 차이를 찾아보면서 각각 의미를 알아보았다.
반응형 웹 디자인에서 중요한 것이 무엇인지를 "책임감 있는 반응형 디자인" 책을 통해서 정리해보고자 한다.
목차
1. 서문
2. 책임감 있는 디자인
3. 지속성 있는 감지 방법
4. 성능 고려하기
5. 책임감 있게 전달하기
1. 서문
이 방향으로 가야 한다. 끊임없이 증가하는 웹 디바이스 종류마다 각각 디자인하지 말고, 하나의 경험을 다양한 측면으로 제공해야 한다.
- 이단 마콧, <반응형 웹디자인>
1.1 웹의 다변화
우리가 사용하는 제품은 기능 지원, 환경 제약, 활용도, 폼팩터를 비롯한 다양한 측면에서 급속도로 발전하고 있다.
1.2 반응형 디자인 : 책임감 있는 개발 원칙의 출발점
반응형 레이아웃은 성능이나 상호작용성, 접근성 측면에서 반응형으로 만드는데 어느정도 기여한다.
1.3 반응형과 책임형
책임감 있는 반응형 디자인을 위해 다음과 같은 사항을 고려해야 한다고 적혀있다.
- 사용성(Usability): 사용자와 상호작용하는 UI
- 접근성(Access): 다양한 디바이스, 브라우저, 보조 기술(장애인 보조 기술)을 통해서도 그대로 접근 가능한지
- 지속성(Sustainability): 향후 등장할 디바이스, 브라우저, 사용자도 계속해서 사용할 수 있는 특성
- 성능(Performance): 웹사이트의 기능 및 콘텐츠의 전달 속도 그리고 UI에서 이를 처리하는 과정의 효율성
1.4 사용성을 고려한 디자인 : 센서, 입력 매커니즘, 상호작용성
터치 디스플레이, ms의 키넥트 등 다양한 입력 방식을 대응하도록 인터페이스를 제작해야 한다.
1.5 접근성을 고려한 디자인 : 보조 기술 및 크로스 디바이스 연속성
애플의 화면에 보이는 입력, 제스쳐 등 여러가지 유형을 낭독해주는 보이스 오더 처럼
특수 환경(장애인, 운정 중 등)에서 편리하게 사용할 수 있도록 고려하여 인터페이스를 제작하여야 한다.(ex. Semantic HTML)
1.6 브라우저 : 새옹지마
예전 브라우저가 발목을 잡을 수도 있고, 기회가 될 수도 있다.
1.7 성능 우선순위 정하기 : 네트워크, 크기, 성능에 미치는 영향
최적화가 되지 않은 무거운 웹사이트는 사용자 입장에서 볼 때 로딩시간이 길다.
asset이 불필요하게 크거나 많아서 로딩하는데 오래 걸릴 수 있기 때문이다.
1.8 예측 불가능성 포용하기
이제는 웹사이트를 제대로 만들려면 아주 사소한 부분까지 응답성을 고려해 예상하지 못한 상황이 발생하더라도 유연하게 대처할 수 있도록 코드를 작성해야 한다.
