[PM온보딩] 참고자료 1 : 반응형과 적응형
반응형과 적응형의 차이점
반응형과 적응형은 각각 뚜렷한 특징을 갖고 있기 때문에 구분하는 것이 어렵지 않습니다.
반응형 방식은
우리가 흔히 접하는 데스크톱 (라지 pc), 랩탑 (스몰 pc), 태블릿, 모바일 기기와 같은 다양한 디바이스들의 화면 크기에 맞게 웹 페이지가 반응하여 변환되는 것이라고 이해하면 좋습니다.
하나의 웹페이지가 다양한 기기에서 반응한다 가 중요 포인트.
아래는, 제가 진행했던 프로젝트의 반응형 웹 디자인 시안을 예시로 가져와 보았어요.
똑같은 내용으로 구성된 페이지를
라지 피시 -> 스몰 피시 -> 태블릿 -> 모바일로 구분 지어진 것을 알 수 있습니다.
아래 참고 영상을 함께 보시면,
변화하는 화면 크기에 맞게 웹페이지의 반응을 볼 수 있습니다.
이렇듯, 반응형 방식은 다양한 기기를 대응하다 보니, 일관성 있는 사용자 경험을 제공할 수 있습니다.
또한, 아래 설명드릴 적응형 방식과는 달리, 하나의 웹사이트 안에서 여러 기기를 대응하는 것이다 보니,
유지보수 와 운영 비용도 절감할 수 있습니다.
추가로 하나의 URL을 유지하므로 검색엔진최적화를 향상합니다.
그렇다면, 단점은 무엇일까요?
다양한 기기에 대응해야 하다 보니, 디자인- 개발- 테스트 단계에서 시간과 비용이 좀 더 들 수 있습니다.
하나의 웹 페이지에서 모든 디바이스를 대응하기 위한 코드를 다운로드하여야 하다 보니, 초기 로딩 시간이 길어질 수 있습니다.
적응형 방식은 반응형과는 조금 다른 방식입니다.
사용자가 어떤 디바이스로 접속했는지 확인하여 해당 디바이스에 대응하는 웹 페이지를 보여주게 됩니다.
아래 영상은 적응형 웹 예시로 네이버 사이트를 가져왔습니다.
영상을 보시면, 화면의 크기에 따라 웹 페이지가 반응하는 것이 아니라, 초기에 진입한 해상도에 대응하는 웹페이지를 보여주고 있는 것을 알 수 있습니다.
m.naver.com 을 입력하니, 모바일 해상도에 맞는 웹페이지를 보여주고 있습니다.
반응형과의 차이점이 무엇인지 눈치채셨나요?
하나의 웹 안에서 여러 기기를 대응하는 것이 아닌, 데스크톱 또는 랩탑으로 진입 시에는 naver.com 웹 페이지를 보여주고, 태블릿 또는 모바일로 진입 시에는 m.naver.com 웹 페이지를 보여주게 돼요. 서로 다른 URL임을 알 수 있습니다.
반응형과 적응형의 가장 큰 차이점은
반응형은 웹페이지 하나로 모든 기기를 대응한다면, 적응형은 큰 화면에서 보여주는 웹페이지 1개, 모바일과 같은 작은 화면에서 보여주는 웹페이지 1개 각 기기마다 대응하는 페이지가 따로 존재한다는 것입니다.
두 방식의 공통점이라면, 디바이스에 따라 화면을 대응한다 로 생각하면 좋겠죠?
적응형의 장점은
반응형처럼 모든 디바이스를 대응하기 위한 코드를 다 받을 필요가 없기 때문에 초기 로딩 속도가 빠를 수 있어요.
또한 데이터가 많은 웹페이지를 구축할 때는 반응형 보다는 적응형이 적합할 수 있습니다. (많은 데이터를 한 페이지에서 모든 기기를 대응하게 되면, 디자인과 개발의 공수가 더 많이 들겠죠?)
단점으로는,
각 대응하는 기기마다 웹페이지가 다르다 보니, 페이지 별로 템플릿을 따로 작성해야 하는 번거로움이 있으며, 기기마다 일관되지 않은 데이터로 인하여 검색엔진최적화가 반응형에 비해 다소 떨어지게 될 수 있습니다.
또한 수정사항이 요구될 경우, 각 기기마다의 페이지를 따로따로 수정해줘야 하는 작업이 요구될 수 있습니다.
모든 방식에 정답은 없어요.
프로젝트에 맞는 적당한 방식을 적용하는 것이 가장 좋은 해결책이라고 생각합니다!
반응형과 적응형에 대해 기존에 썼던 글을 옮겼습니다.
