[웹] HTML/CSS #11 :: 반응형 vs 적응형

직접 페이지를 만들어보기 전에 우선 반응형 웹 디자인에 대해 알고 갈 필요가 있다. 모바일, 태블릿, 데스크탑 등 다양한 디바이스가 넘쳐나는 요즘 반응형은 필수다. 웹에 조금이라도 관심이 있다면, 그리고 없어도 우연히 한 번 쯤은 반응형이란 말을 들어봤을 것이다. 그럼 반응형은 대체 뭐에 반응하는 걸까? 눈치가 있다면 '아, 웹사이트에 접속하는 디바이스에 반응하는구나'라고 생각할 수 있다.

안타깝게도 반은 맞고 반은 틀렸다. 보다 정확히는, '접속하는 디바이스의 화면 크기'에 반응한다. 그게 그 말 아닌가 싶기도 하지만 굳이 깊게 들어간 이유가 있다. 바로 적응형이라는 개념 때문이다. 둘 다 다양한 디바이스에서 제대로 웹페이지를 보여주기 위한 기술이다. 그럼 반응형과 적응형, 영어로는 Responsive와 Adaptive한 웹 디자인의 차이는 무엇일까.

반응형 웹과 적응형 웹의 차이를 보여주는 그림

지금 당장 스마트폰을 열고 사파리든 크롬이든 웹 브라우저를 열고 네이버에 들어가보자. 아마 바로 정확한 주소가 보이진 않을 것이고, 주소창을 한 번 탭하면 키보드가 활성화 되면서 정확한 주소가 보일 것이다. 일반적으로 알고있는 네이버 주소 앞에 m이 들어가 있다. 이건 네이버의 '모바일용 페이지'의 주소다. 즉 모바일로 접속하면 서버에서는 이 페이지를 디바이스에 건네준다. 그럼 이번엔 데스크탑에서 브라우저를 열고 평소의 네이버 주소가 아닌, 앞에 m이 붙은 주소를 입력하고 접속해보자. 모바일에서 보는 것과 똑같은 페이지가 보임을 확인할 수 있다. 데스크탑으로 들어가나, 모바일로 들어가나 같은 페이지를 보는 것이다. 모바일 브라우저에 내장되어 있는 '데스크탑 버전으로 보기'를 클릭해도 아무 변화가 없는 것은 이 때문이다. 이 페이지는 그냥 이렇게 생긴 것이다.

그럼 이번엔 모바일에서 구글에 접속해보자. 모바일에 딱 맞춘 페이지가 보일 것이다. 주소창을 클릭해보면? 데스크탑에서 접속할 때의 주소와 아무 차이가 없다. 그리고 데스크탑 버전으로 보기를 눌러보자. 데스크탑으로 볼 때와 같은 구글의 메인 화면을 볼 수 있다. 데스크탑에서 모바일에서 보는 것처럼 볼 수 있을까? 모바일에서 보이는 페이지 주소를 데스크탑에서 입력해봐도 똑같이 보인다.

여기서 무엇이 반응형이고 무엇이 적응형일까? 전자, 네이버가 적응형이고 후자, 구글이 반응형이다. 둘은 무슨 차이가 있을까? 적응형은 데스크탑에서 보이는 페이지와 모바일에서 보이는 페이지를 따로 만든다. 그리고 서버에서 접속하는 디바이스의 종류를 확인하고 알맞는 페이지를 보여준다. 즉 서버는 '어, 디바이스 A가 1페이지를 보여달라고 하네, A는 아이폰이구나 그럼 모바일용 페이지를 보내줘야지. 아 이번엔 디바이스 B가 3페이지를 보여달라고 하는구나 얘는 데스크탑이니까 데스크탑용 페이지를 보내줘야지' 라는 식으로 대응하는 것이다.

적응형은 장단점이 있다. 장점은 각각의 화면 크기에 맞춘 최적의 디자인을 할 수 있다는 것이다. 보여지는 화면의 크기를 정확히 알면 보다 섬세한 디자인을 할 수 있을 것이다. 단점은 각각의 페이지를 모두 만들어야 한다는 것이다. 디바이스가 단순히 모바일, 태블릿, 데스크탑으로만 나뉘는 게 아니다. 아이폰과 아이폰 플러스의 화면 크기는 또 다르다. 수많은 갤럭시 S 시리즈, 노트 시리즈, LG 폰, 화웨이나 샤오미 그 외 무수히 많은 스마트폰들이 있다. 태블릿도 아이패드, 서피스 등등, 데스크탑의 모니터 크기의 다양성은 말할 것 없다. 아무리 '너네가 뭘 좋아할 지 몰라서 다 준비해봤어'라도 너무 많은 노가다와 인력, 시간 등의 비용이 든다.

반면 반응형은 하나의 페이지가 그 모양을 달리 한다. 차라리 유동형이라고 이름 붙였으면 더 와닿았을 것 같다. 적응형이 각각의 화면에 맞춘 정적인 페이지의 집합이라면, 반응형은 스스로 담기는 통에 따라 모양이 변하는 액체와 같다. 이걸 가능하게 해주는 기술이 미디어 쿼리다.

미디어 쿼리는 다음 번에 자세히 설명하겠다. 간단히 얘기하면 조건문이라고 생각하면 된다. CSS에서 각각의 요소에 대해 서식을 지정해 디자인을 한다. 그리고 추가로 미디어 쿼리를 다는 것이다. '단, 화면 크기가 768픽셀 이하라면 이렇게 해라'라고 별도의 서식을 지정하는 것이다.

반응형의 장단점은 적응형과 반대이다. 하나의 페이지만 만들어두면 모든 디바이스에서 알아서 잘 보인다. 반면 적응형에 비해서는 디자인의 섬세함은 떨어질 수 있다. 하지만 그걸 극복하기 위한 방법들이 계속 고안되고 있다. 플랫 디자인도 그 중 하나이다. 카드형 컨텐츠들이 많아진 이유도 이 반응형의 단점을 극복하기 위해서다.

아무래도 적응형보다는 반응형이 대세이다. 일단 적응형은 프론트엔드에서도 무수히 많은 페이지를 만들어야 하고, 백엔드에서도 추가 작업이 필요하다. 개발과 디자인이 모두 고생한다. 아직 서버 공부는 안 해서 얼마만큼 복잡한 지는 잘 모르지만. 하지만 반응형은 디자인의 영역에서만 조금 더 노력하면 된다. 물론 담기는 컨텐츠도 레이아웃에 영향을 미치니 기획도 중요하지만. 결론적으로 좀 더 유용해서 반응형이 대세다. 요즘은 필수이기 때문에 본격적으로 HTML과 CSS를 이용해 페이지를 만들어보기 전에 정리해봤다.