안녕하세요 yuna 님 :-)

디바이스 픽셀 밀도 강의에 대해 속 시원함을 느꼈다고 말씀주셔서 기쁩니다! 강의에 대해 피드백 주셔서 감사합니다.

아! 그리고 질문 답변에 앞서 이전 질문 "[강의 4-11] querySelector()에 성능문제에 대해 질문 드립니다."에 답변 드렸는데 확인 한 번 부탁드립니다. :)

자! 그럼 질문에 답변 드려보겠습니다.

반응형 웹 vs 적응형 웹

질문 별로 답변 하면 다음과 같습니다.

Q

반응형웹은 mediaquery로 구분하는 거라는 건 알겠는데, 적응형웹은 PC 따로, 모바일 따로 만드는 거를 말하는 걸까요? 그럼 일반적으로 웹, 모바일웹 별도로 제작하는 방법은 모두 적응형웹이 되는 건가요? 하나의 html로 만드는 건지, 아니면 pc용 html, 모바일용 html 따로 만드는 건지가 궁금합니다.

A

반응형 웹은 하나의 템플릿을 사용해 모든 기기에 대응하는데 반해, 적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구됩니다. 즉, 별도 페이지 제작이 필요합니다.

적응형 웹이 반영된 예로 NAVER, DAUM 같은 포털 사이트를 들 수 있는데 기존부터 서비스 되고 있는 사이트 변경 없이, 모바일 환경에 대응하기 위해 별도의 URL을 통해 서비스 합니다. 모바일 환경에서 기존 사이트 주소로 접속할 경우, 이를 감지하여 모바일 전용 페이지로 리디렉션(redirection) 합니다.

AWD vs RWD

궁금한 부분을 해소할 수 있는 인포 그래픽을 살펴봅시다. 다변화 된 환경(모바일, 데스크탑 등)에 대응하기 위한 방법론 중 적응형(AWD), 반응형(RWD)이 가진 장단점을 살펴볼 수 있습니다.

Q

그리고 반응형웹을 작업하면 "mobile first"를 사용할 수 없다는 말을 들었는데, 이 말이 맞는지도 궁금합니다. 제가 생각하기에는 ie8 이하에서 mediaquery가 안 먹기 때문에, ie8을 대응하기 위해 PC화면을 먼저 스타일링하고 다음에 태블릿, 모바일 순으로 나가는 거 같습니다. 반응형웹 작업시 하위 브라우저까지 대응하면서 "mobile first"를 적용할 수 있는 방법이 무엇이 있을까요?

A

반응형 웹 디자인이 모바일 퍼스트를 할 수 있고 없고의 문제는 기술의 문제라기 보다는, 기획과 경험의 문제입니다. 즉, 설계 전략에 따라 가능, 불가능 유무가 결정됩니다.

모바일 퍼스트는 모바일을 우선하여 기획하고 디자인 하는 것을 말하는 것인데, "할 수 없다"고 말하는 경우는 기획과 디자인을 데스크탑 먼저 하기 때문인 것입니다.

아래 이미지를 살펴보면 데스크탑 퍼스트로 설계된 페이지의 콘텐츠를 모바일에 우겨 넣으려 하니 잘될리가 만무합니다. 그러니 부정적인 경험이 쌓이게 되고, 반응형 웹은 모바일 퍼스트가 안된다고 하는 것이죠.

모바일 환경과 반응형 웹 기술에 해박한 전문가가 설계 했다면 이러한 문제가 발생하지 않습니다. 모바일 퍼스트의 의미는 뒷전으로 한 채, 큰 화면에 콘텐츠를 가득 채우는 기존 경험에서 벗어나지 못하고 기획을 한 후, 반응형 웹으로 제작해달라고 했을 때 문제가 발생하게 되는 것이죠.

정작 문제가 되는 것은 버리지 못하는 습성입니다. 가득 채워 넣은 콘텐츠를 작은 공간에서는 비울 줄 알아야 하는데, 비우 려고 하지 않으니 문제가 안 생길리가 만무하죠... 데스크탑 퍼스트를 수행한 기획 이면서 모바일 퍼스트를 기대하는 것은 앞뒤가 맞지 않습니다.

서비스 기획을 수립하는 과정에서 기술에 해박한 전문가가 참여했다면 사전에 문제 발생 요인에 대해 설명하고, 잘못된 길로 접어들지 않게 노력했을 겁니다. 물론... 전문가의 의견을 귀담아 듣고 수용한다는 전제하에 말이죠. 국내에서 그런 클라이언트 만나기 쉽지 않은 것도 하나의 요인입니다.

진정 기획과 디자인 단계에서 모바일 퍼스트의 의미를 바로 이해하고 설계한다면 문제가 발생하지 않습니다. 모바일 퍼스트는 "채움의 미학"을 따라야 합니다. 작은 화면에 우선 채울 것을 고민하고 결정한 후, 화면 크기가 커짐에 따라 채워야 할 것을 전략적으로 설계해야 합니다.

그리고 기획 뿐만 아니라 디자인, 개발 과정에서 또한 마찬가지로 책임이 있는 것이 설계를 할 때 모바일 View 부터가 아닌, 데스크탑 먼저라는 것입니다. 모바일 퍼스트 디자인은 모바일 먼저 라는 점을 망각한 결과물 이니 자연스레 모바일 퍼스트는 멀어져만 갑니다.

반응형 웹 디자인 방법론으로 하위 브라우저 호환까지 하면서 모바일 퍼스트를 하려면 어떻게 해야 하냐고 질문 주셨는데...

가능하기 위한 선결 조건은 말 그대로 모바일 퍼스트가 되어야 합니다. 비움이 아닌 채움을 고려하여 기획하고 디자인해야 합니다. 이 단계에서 모바일 퍼스트가 반영되지 않고는 문제가 발생할 수 밖에 없습니다.

클라이언트가 모바일이 아닌, 데스크탑을 우선하는 요구를 하면서 모바일 퍼스트를 논한다면... 예시를 들어 설명하면 어떨까 합니다.

"50평대 집에 맞게 전자제품과 주방제품, 침구 류를 우선 구매한 다음, 단 하나도 버리지 않고 20평대 집으로 옮겨야 한다면 어떻게 해야 할까요?"

더 쉽게 풀면

"그 말씀은 코끼리를 냉장고에 넣어야 하는 것과 같습니다."

이를 유머 스럽게 풍자한 방법:코끼리를 냉장고에 넣는 방법을 읽어보세요. 다양한 편법으로 문제 해결에 대해 논하지만, 이를 시도하면 변태라는 소리를 듣게 된다고 이야기 합니다.

그리고 만약 IE 8까지 고려해야 하는 반응형 프로젝트에서 IE 8을 고려해 데스크탑 퍼스트로 디자인 하면서 모바일 퍼스트를 기대하는 것은 모순이니 성립될 수 없겠죠.

하자만 모바일 퍼스트 전략을 우선하여 프로젝트를 진행하기 위해 기획과 디자인의 시작을 모바일을 맞춰 설계한 후, 추후 IE 8에 대한 대응 방안을 적용한다면 가능합니다.

방법 1

모바일 퍼스트 전략에 따라 모바일 > 데스크탑 순으로 디자인 합니다. 데스크탑 디자인은 미디어 쿼리에 따라 적용되는 스타일을 별도로 가지고 있습니다. 아래 코드처럼 말이죠.

/* 모바일 퍼스트 디자인 */
...

/* 데스크탑 디자인 */
@media (min-width: 80em) {
   ...
}

위의 데스크탑 코드는 미디어쿼리로 되어 있기에 IE 8에서는 적용되지 않습니다. IE 8에서는 데스크탑 디자인만 보여지면 되므로 아래 코드와 같이 IE 조건부 주석을 사용하여 데스크탑 디자인 CSS 파일을 별도로 적용합니다. 이렇게 하면 IE 8에서는 데스크탑 디자인만 보여지게 됩니다.

<!--[if IE 8]>
<link rel="stylesheet" href="css/ie8-desktop.css">
<![endif]-->

방법 2

IE 8에서 미디어쿼리를 사용할 수 있도록 처리하는 라이브러리 respond.js 등을 사용합니다. 사용 방법은 HTML 문서 </head> 앞에 다음의 스크립트 구문을 사용해 라이브러리를 로드 합니다.

<!--[if IE 8]>
<script src="lib/respond.js"></script>
<![endif]-->

이 방법은 먼저 소개한 방법과 달리 별도의 IE 8 용 CSS 를 만들지 않아도 되기에 제작자 입장에서는 편리할 수 있습니다. 다만 별도 IE 8 CSS 파일을 만드는 방법에 비해 브라우저 에서의 반응 속도가 느려지는 문제가 있습니다. 창 크기를 변경할 때 마다 JavaScript 가 처리하기 때문이죠.

사실 IE 8에서 창 크기를 변경해서 봐야할 이유는 없습니다. 반응형 웹은 창 크기를 변경해서 변신시키는 디자인이 아니라, 각 기기에 맞는 최적화된 UI를 제공하는데 목적이 있기 때문입니다. IE 8은 데스크탑 View로 보여지는 것이 최적화된 UI View 입니다.

참고

• Adaptive vs Responsive Web Design
• Fixed vs Fluid vs Adaptive vs Responsive Layout
• Adaptive vs responsive web design
• adaptive vs responsive design: what is the difference?
• Mobile Website Design vs Responsive Web Design?
• UX mobile and responsive