[번역]반응형 vs 적응형 디자인
해외 UXUI 관련 콘텐츠 번역글
이 글은 해외 UXUI 관련글을 번역 한 콘텐츠입니다. 원문 제목은 [Responsive vs. Adaptive Design]이며 반응형 디자인과 적응형 디자인의 정의와 장단점을 소개합니다.
휴대폰과 태블릿에서 인터넷을 사용하기 전에는 상황이 훨씬 심플했습니다. 온라인 매체는 과거에는 노트북, 컴퓨터 화면에만 디스플레이되는 웹사이트를 설계를 의미했었습니다. 하지만 이제는 큰 데스크톱 및 노트북 화면부터 작은 휴대폰 및 태블릿 화면까지 다양한 화면 크기를 고려해야합니다. 특히 웹페이지의 경우에는 화면에 제대로 표시되지 않으면 사용자가 빠르게 이탈할 수 있습니다.
웹사이트를 모바일, 태블릿, 노트북과 PC 화면에 최적화되도록 하는, 반응형 디자인과 적응형 디자인, 두 가지 접근 방식이 있습니다. 둘 다 동일한 문제를 해결하기 위한 것이지만, 서로 다른 전략을 사용합니다. 이 두 가지 접근 방식의 차이점을 알면 사용자 경험 향상을위한 가장 적합한 방법을 결정할 수 있습니다.
이 글은 반응형 디자인과 적응형 디자인을 정의한 후 각각의 장단점을 살펴볼 것입니다.
반응형 디자인이란 무엇인가?
적응형 디자인이란 무엇인가?
반응형 디자인의 장단점
적응형 디자인의 장단점
주요 시사점
1. 반응형 디자인이란?
반응형 디자인으로 만들어진 웹사이트는 모든 기기에 동일한 사이트를 제공하지만, 이 제공 된 사이트는 유동적으로 사용자 디바이스의 크기와 방향에 따라 레이아웃과 모양을 변경합니다.
개발자는 CSS를 사용하여 사이트의 각 페이지가 사용자의 뷰포트 크기에 따라 다시 포맷될 수 있도록 보장하며, 사이트에 대한 코드베이스는 하나만 만들면 됩니다. 개발자는 브레이크포인트를 사용하여 사이트를 다양한 화면 크기에 맞게 조정할 기준을 세웁니다.
동일한 사이트가 큰 데스크톱 컴퓨터 화면에서는 4열 레이아웃, 작은 노트북 화면에서는 3열 레이아웃, 태블릿 화면에는 2열 레이아웃, 휴대폰에서는 단일 열 레이아웃으로 나타납니다. 반응형 웹사이트를 어떤 기기에서 보더라도 기본적인 콘텐츠와 디자인은 동일합니다.
닐슨 노먼 그룹의 에이미 셰이드에 따르면, 반응형 디자인을 만드는 데 참여하는 UX 디자이너는 화면 크기에 관계없이 레이아웃이 적용되도록 개발자와 긴밀히 협력해야 합니다. 사용자 경험은 페이지 요소와 함께 변화하므로 UX 디자이너는 사이트 포맷이 달라지더라도 사용성을 유지하는 것이 중요합니다. 이를 위한 한 가지 방법은 가장 중요한 콘텐츠를 다양한 장치, 특히 가장 작은 화면 크기에서 우선시하는 것입니다.
2. 적응형 디자인이란?
적응형 디자인에서는 각 디바이스의 화면에 대해 다른 웹사이트 레이아웃이 만들어집니다. 웹사이트 데이터를 불러오면서, 화면 크기를 인식하고 해당 뷰포트에 맞게 만든 레이아웃을 제공합니다. 실제로 320px, 480px, 760px, 960px, 1200px 및 1600px의 6가지 일반적인 화면 크기에 따라 각각 다른 사용자 환경을 만들 수 있습니다.
그러나 6가지 화면 크기로 웹사이트를 설계하는 데는 엄청난 시간이 걸리기 때문에, 사용자 분석을통해 사용자가 가장 많이 사용하는 화면 크기로 작업을 줄일 수 있습니다. 예를 들어, 사용자 데이터 분석 결과, 대부분의 사용자가 Apple iPad와 삼성 갤럭시 휴대폰에서 사이트를 사용하는 것으로 나타난다면 가능한 6가지 화면 크기가 아닌 해당 두 화면 크기에 맞게 사용자 경험을 구체적으로 설계할 수 있습니다.
3. 반응형 디자인의 장단점
UX 디자이너의 관점에서 볼 때, 반응형 디자인의 가장 큰 장점은 처음에 만든 후 유지보수하는 데 있어 적응형 디자인보다 훨씬 적은 작업이 필요하다는 점입니다. 또한 반응형 사이트는 무한한 수의 화면 크기를 수용할 수 있는데, 새롭고 이상한 화면 크기의 디바이스가 정기적으로 출시되는 것을 고려하면 좋은 소식입니다. 반응형 사이트는 모바일 친화적인 것으로 간주되기 때문에 검색 엔진 순위에서도 더 나은 성과를 거두는 것으로 나타났습니다.
반면에 반응형 웹사이트는 개발자가 더 많은 코딩을 해야 하며, UX 디자이너와 개발자가 아주 긴밀히 협력하여 레이아웃을 가능한 한 많은 디바이스에서 사용할 수 있도록 하더라도, 모든 디바이스에서 레이아웃을 제어하는 것은 불가능합니다. 따라서 웹페이지가 최상의 사용자 환경을 만들기 위해 배열되지 않은 특정 디바이스가 있을 수 있습니다. 또한 사이트에 액세스하는 디바이스에 관계없이 전체 웹사이트의 코드가 전달되기 때문에 웹사이트 로딩 속도가 느려질 수 있습니다. 하지만 반응형 디자인의 유연성 때문에, 웹사이트 설계 초창기와 혹은 매우 다양한 페이지로 구성된 경우에 특히 선호되는 솔루션입니다.
4. 적응형 디자인의 장단점
UX 디자이너의 입장에서는, 각 화면의 고정된 너비에 맞는 와이어프레임을 만들기만 하면 되기 때문에 적응형 디자인에 필요한 다양한 레이아웃을 디자인하는 것이 더 쉬울 수 있습니다. 각 화면 크기에 맞는 레이아웃을 완전히 제어함으로 최적의 사용자 경험을 디자인 할 수 있기 때문입니다. 심지어는 디바이스 크기에 따라 다른 콘텐츠를 포함하는 것이 합리적이라고 생각한다면, 그렇게 디자인 할 수도 있습니다.
예를 들어, 음식 배달 사이트 홈 페이지에 데스크톱 적응형으로 레스토랑 옵션, 다양한 음식 카테고리에 더해, 레스토랑 위치 검색 기능이까지 포함될 수 있습니다. 반면, 동일한 사이트에 대한 모바일 홈 화면에는 레스토랑 위치 검색 기능만 포함될 수 있습니다.
적응형 사이트는 개발자들이 구현하기 더 쉬우며, 주어진 화면 크기에 필요한 코드만 전달하기 때문에 반응형 사이트보다 훨씬 빠르게 로드되는 경향이 있습니다.
즉, 적응형 디자인은 UX 디자이너에게 많은 도전 과제가 될 수 있습니다. 일반적인 6가지 화면 크기 중 두세 가지만 디자인하여 작업을 제한할 수는 있지만, 이는 사용자가 설계되지 않은 장치에서 사이트에 액세스하면 사이트가 올바르게 위치하지 않는다는 것을 의미합니다. 또한 6가지 화면 크기를 모두 대상으로 디자인하더라도 일반적이지 않은 화면 크기는 여전히 대응되지 않습니다.
적응형 디자인은 웹사이트 재설계 또는 개선에 가장 적합한 경우가 많습니다. 예를 들어, 클라이언트가 변경할 의사가 없는 기존 웹사이트에 모바일 레이아웃이 필요한 경우 적응형 디자인이 가장 좋은 옵션일 수 있습니다.
5. 주요 시사점
반응형 디자인은 디바이스 화면 크기에 따라 레이아웃과 외관이 유동적으로 대응합니다.
적응형 디자인을 위해서는 각 디바이스마다 다른 레이아웃과 컨텐츠를 디자인해야 합니다.
반응형 디자인은 UX 디자이너가의 작업량이 적지만, 모든 화면 크기에서 레이아웃이 대응 될 수 있도록 개발자와 긴밀히 협력해야 합니다.
적응형 디자인을 위해서는 UX 디자이너가 다양한 크기의 화면을 위해 단일 웹사이트의 최대 6가지 버전을 만들어야 합니다. 이 작업은 많은 노력이 필요하지만, UX 디자이너는 레이아웃이 적용되는 모든 장치에 대해 사용자 경험을 최적화할 수 있습니다.
반응형 디자인은 새로 개설되는 큰 사이트에 가장 적합합니다.
적응형 설계는 리뉴얼이 필요한 작은 사이트에 가장 적합합니다.
부족한 번역글을 읽어주셔서 항상 감사합니다. 좋아요와 스크립에 큰 힘을 얻고 있습니다
