반응형 웹페이지, 적응형 웹페이지

 유치원생도 휴대폰을 가지고 노는 요즘 시대에 웹페이지라고 하더라도 휴대폰으로 접속하는 사람의 비중이 더 높기 때문에 가능하면 무엇을 만들건 어지간하면 모바일에도 최적화하여 제작하는 것이 좋다. 그런데 이때 반응형, 적응형 웹페이지라는 말을 쓴다. 이게 뭐지?

반응형 웹페이지란?

반응형 웹페이지라는 말을 한다. 영어(responsive)를 직역하다보니 처음 들었을 때 조금 요상하게 느껴지지는 않는 단어인데, 한 마디로 요약을 하면 보는 사람의 화면에 알맞게 웹사이트의 모양이 자동으로 변환되는 것을 의미한다.

반응형 웹페이지 예시

‘나이키’ 홈페이지를 예로 들어보자.

(나이키 홈페이지를 PC 화면 비율로 볼 때)

(나이키 홈페이지를 휴대폰 화면 비율로 볼 때)

이처럼 휴대폰으로 볼 때와 PC로 볼 때 모양이 다르게 나온다. 단순히 비율만 다른 것이 아니라 배치도 조금씩 다르다. 홈페이지에 접속하자마자 나오는 영상의 비율도 다르고, 상단에 매장 찾기 및 회원가입 등의 메뉴가 모바일 상에서는 우측의 세줄 버튼으로 숨겨졌다. 휴대폰으로 검색했을 때와 PC로 검색했을 때 구성 요소는 같지만 배치도 다르다.

이처럼 하나의 웹페이지가 여러 기기의 화면 비율에 적합하게 자동으로 화면이 전환되는 것을 반응형이라고 부른다. 그리고 이런 반응형에 사용되는 태그는 아래와 같은 것이 있다.(나도 정확히는 모름)

position: relative;

"mobile": true

적응형 웹페이지란?

적응형 웹은 모바일에서 보여진다는 점에서 반응형 웹과 개념이 비슷한데, 반응형 웹은 하나의 웹사이트가 화면 크기에 맞춰서 화면이 반응한다면 적응형 웹은 사용자의 기기(서버)를 인식하여 각각 따로 디자인된 사이트를 보여줄 수 있다. 보통의 예를 들면

m.finemonday.com ← 모바일 기기로 접속할 때 보이는 화면

www.finemonday.com ← PC 기기로 접속했을 때 보이는 화면

으로 구성되는 것이다.

적응형 웹페이지 예시

(네이버 홈페이지를 PC 기기로 볼 때, 자동으로 naver.com으로 접속된다.)

(네이버 홈페이지를 모바일 기기로 볼 때, 자동으로 m.naver.com으로 접속된다.)

반응형 웹과 달리 적응형 웹은 완전히 다른 페이지로 보일 정도로 PC-모바일 간 구성 요소와 디자인에서 큰 차이를 보인다는 것을 알 수 있다.

네이버나 다음과 같은 국내 포털들이 적응형 웹을 사용하고 있다. 반응형과 적응형 모두 웹 페이지를 모바일 기기에 최적화하여 보여줄 수 있는 방식이다.

반응형과 적응형의 장단점

반응형 → 페이지 1개이므로 유지보수 간편, 모바일상의 디자인 변화 한계가 있음.

적응형 → 페이지 여러개이므로 유지보수 시 에너지가 많이 필요, 모바일상의 디자인 변화에 한계가 없음.