반응형 사이트 VS 적응형 사이트
누가 더 좋을까?
본 글은 닐슨 노먼 그룹의 <Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site?>를 바탕으로 구성했습니다.
요약
모바일 웹사이트를 구현하는 다양한 방식에는 각각의 장단점이 있다.
하지만 모든 방법에서 가장 중요한 것은 모바일 사용자 경험 원칙을 지키는 것이다.
목표
모바일 전용 웹사이트, 반응형, 적응형의 장단점에 대해 알아보고, 상황에 알맞은 방법으로 모바일 웹사이트를 구현해 보자.
모바일 전용 사이트
모바일용으로 특별히 설계된 사이트
모바일에 적합하다고 판단되는 기능이나 콘텐츠가 포함되어 있다.
일반적으로 모바일과 데스크톱에서 동일한 콘텐츠와 기능을 포함하지만, 데스크톱에서 사용하는 콘텐츠 중 일부를 단순화하거나 사용성 문제로 배제하는 경우가 있다.
웹 앱
실제 앱이 아니다, 모바일 웹과 네이티브 앱을 결합한 형태이다. 겉모습과 구동 방식을 앱처럼 꾸며 놓은 것이다. 웹페이지의 특징인 브라우저가 보이지 않도록 개발할 수 있다.
O 장점
앱 설치 없이도 서비스를 사용할 수 있다.
X 단점
기본 모바일 장치 기능을 거의 사용할 수 없다.
모바일 웹이란?
데스크톱 브라우저에서 실행되는 웹 페이지를 모바일 스크린 크기로 줄여 놓은 것.
반응형 페이지와 다른 방식이다. 크기 변화에 따라 자동으로 콘텐츠 레이아웃이 변화하지 않는다. 동일한 콘텐츠를 담고 있는 웹사이트이지만, 두 가지 URL를 가진다.
네이티브 앱이란?
앱스토어를 통해 설치하고, 디바이스 홈 화면 속 아이콘을 통해 서비스에 접속할 수 있는 앱 모바일 플랫폼만을 위해 모바일 기기에 최적화된 언어로 개발한다.
카메라, GPS, 가속도계, 나침반, 연락처 등의 기본 모바일 장치 기능을 최대한 활용할 수 있다.
모바일 장치의 알림 기능을 활용할 수 있다.
오프라인에서 작동할 수 있다.
속도가 빠르다.
앱스토어를 통해 재배포 및 업데이트를 해야 해 유지보수가 번거롭다.
반응형 디자인 사이트
적용한 화면의 크기와 해상도에 따라 사이트의 레이아웃이 자동으로 조정되는 사이트
모바일 크기로 조정되었을 때 적합하지 않은 기능은 제거하기도 한다.
사이트의 다양한 크기에서 콘텐츠 및 기능을 동등하게 전달하기 위해 노력해야 한다.
데스크톱, 태블릿, 스마트폰에 따라 콘텐츠가 표시되는 모습이 다를 수 있다.
예시) LG전자의 반응형 페이지 _ 장치에 따라 다른 콘텐츠 열 배치
O 장점
한 번의 구현으로 다양한 기기와 화면 크기를 지원할 수 있다. 콘텐츠 유지, 보수가 간편하다.
X 단점
복잡한 작업과 콘텐츠에 적합하지 않다. 개발비용이 많이 드는 편이다. 응답 시간이 느리다.
적응형 디자인 사이트
서버가 클라이언트 장치의 기능을 감지하고 해당 장치에 적절하게 표시될 수 있는 콘텐츠와 기능만 보여주는 반응형 디자인 버전이다.
인터넷 연결 상태가 좋은 장치에는 복잡한 콘텐츠를 수신한다. 반대로, 열약한 연결 상태에서는 핵심 기능만 포함한 가벼운 버전으로 수신한다.
O 장점
빠르다. 반응형 디자인의 문제점인 느린 응답 시간을 해결할 수 있다.
결론
모바일 전용 사이트, 웹 앱, 반응형, 적응형은 각각 장단점이 있고, 서로 영향을 미치고는 한다.
작성자: 이지솔
모바일 전용 사이트, 웹 앱, 반응형, 적응형의 방식에 따라 모바일 페이지에 포함되는 내용과 배치가 달라질 수 있다. 실제 모바일 디자인에서는 먼저 구현 방식의 장단점에 따라 상황에 적합한 방법을 선택하고, 구현 방식의 특징에 맞는 모바일 화면을 디자인해야 함을 깨닫게 되었다.
<관련 글>
