반응형이 됐든 적응형이 됐든, 웹사이트는 다양한 화면 크기에서 정확하게 정보를 전달해야 한다. 그럼 이 둘을 아는 게 뭐가 대수인가? 설계와 개발 방향이 달라진다. 둘의 목표는 같다.
공통 목표 : 모바일부터 데크스톱까지, 화면의 사이즈가 제각각인 다양한 기기(Device)에서 어떻게 일정한 사용자 경험을 제공할 것인가.
개념 및 차이점
반응형, RWD : Responsive Web Design
-
콘텐츠들이 웹브라우저의 가로 사이즈에 맞춰 실시간+유동적으로 재배치되는 형태.
-
미디어쿼리가 기기 화면의 해상도를 감지하고, 하나의 탬플릿을 변형한다.
-
보통 % 단위를 사용하며, 웹브라우저의 가로 넓이에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져 환경에 반응한다.
-
탬플릿이 하나이므로 주소가 하나다.
-
검색엔진에 친화적이다.
-
감지된 기기와 상관 없이 모든 콘텐츠를 다운로드한 다음 화면에 맞게 골라서 랜딩한다.
-
사이트가 이미 있는 경우 : 전면 리뉴얼하여 개발해야 한다. 모든 기기에서의 인터랙션을 면밀하게 검토해야 한다.
적응형, AWD : Adaptive Web Design
-
브라우저의 가로 크기를 줄여도 한동안 반응이 없다가, 지정된 해상도에 도달하면 레이아웃이 갑자기 재배치되는 형태.
-
n개의 디바이스에 적합한 n개의 탬플릿이 요구된다. 주소 앞에 m. 따위가 붙기도 한다. 이런 경우 독립형 디자인SWD이라고 구분해 부르기도.
-
px단위를 사용하고, CSS 코딩 시 어떤 사이즈에 도달하면 디자이너가 준비해둔 레이아웃을 보여주도록 짠다.
-
스크린에 맞는 성능을 보장하지만 모든 디바이스에 맞춰서 레이아웃을 짜는 건 거의 불가능하다.
-
뷰를 정해놓는다. (데스크탑 뷰, 태블릿 뷰, 랩탑 뷰, 모바일 뷰...)
-
감지된 기기에 맞는 리소스만 다운받아 화면에 랜딩한다.
-
사이트가 이미 있는 경우 : 사이트 변경 없이 개발 가능하다. 다만, 기기별 새로운 탬플릿을 만들어야 한다.
-
정해진 해상도가 아니면 제대로 작동되지 않는다.
-
검색엔진 최적화 작업이 별도로 필요하다.
구분법
브라우저 가로길이가 변할 때,
- 어느 순간 툭 바뀐다? = 적응형.
- 이미지와 그리드가 실시간 변화한다? = 반응형.
적응형 레퍼런스
http://www.sk.co.kr/ko/index.jsp
1. https://m.naver.com/
2. https://naver.com/
https://dev.opera.com/
반응형 레퍼런스
http://www.ted.com/
Wishtree 개발 전략
모바일 퍼스트 반응형 디자인
-
데스크탑 기준으로 디자인한 다음 모바일에 구겨넣는 방식은 실패할 것.
-
그리드 형태의 데이터 표현은 피할수록 좋다.
-
콘텐츠 양이 적을수록 적합하다. (로딩 속도 문제)
-
웹 분리 개발에 따른 비용을 부담할 수 없을 때 선택할 만하다.
-
사이트 하나만 유지보수하면 되므로 지속적인 관리 차원에서 효과적이다.
반응형 웹 디자인이라는 용어를 만든 Ethan Marcotte는 "반응형 웹 디자인은 모바일 웹사이트를 위한 대체 수단으로서 고안된 것이 아니다"라고 했다. 단순한 사이트, 블로그 같은 것이 반응형에 어울린다. 결국 컨텐츠와 반응 속도의 문제다. 쇼핑몰은 반응형으로 접근하면 너무 느려진다.
이상적인 적응형 패럴랙스 스토리텔링 사이트
https://highline.huffingtonpost.com/articles/en/poor-millennials/?mobile=1
번외 : 모바일 친화성 테스트 도구
