현재 모든 웹 트래픽의 절반은 모바일 세션에서 발생합니다. 또한 점점 더 많은 구매가 모바일 장치를 사용하여 이루어지고 있습니다. 예측에 따르면 2021년 말까지 모바일 상거래의 점유율은 전자 상거래에서 전체 소매 판매의 약 73%가 될 것입니다. 이러한 추세는 사이트의 모바일 버전에 더 많은 주의를 기울여야 하며, 사용자에게 가장 긍정적인 인상을 주어야 합니다. 따라서 다양한 디바이스에 사이트를 최적화하는 것은 오래전부터 디자인의 필수사항 중 하나였습니다. 하지만 스마트폰, 모바일, 반응형에 가장 적합한 접근 방식이 무엇인지, 디자인의 장점과 단점, 그리고 디자인 원칙이 무엇인지 알아 보겠습니다.
반응형 디자인과 Mobile First의 차이점은 무엇인가요?
반응형 디자인은 사이트의 데스크톱 버전 또는 방문 페이지가 모바일 화면에 맞게 조정됨을 의미합니다. 모바일 우선과의 차이점은 이 접근 방식에서도 데스크톱이 여전히 첫 번째 위치에 있다는 것입니다. 반응형 디자인에서 사이트 레이아웃은 사용자가 페이지를 보고 있는 화면 너비에 맞게 조정됩니다. 브라우저 창이 1픽셀씩 변경되더라도 페이지는 자동으로 새 크기에 맞게 조정되어 사이트의 모바일 버전을 만드는 데 시간을 낭비하지 않습니다. 동시에 모든 요소가 다른 장치에서 잘 보이는지 확인하는 것은 매우 중요한 요소로 여겨지고 있습니다.
모바일 우선 전략은 정반대에서 구축됩니다. 먼저 사이트를 스마트폰용으로 만든 다음 데스크톱용으로 마무리합니다.
Mobile First 접근 방식이란 무엇입니까?
이름에서 알 수 있듯이 모바일 우선 전략은 주로 모바일 장치에 초점을 맞춘 사이트 인터페이스를 설계하는 것입니다. 이 접근 방식의 철학은 가장 작은 화면에 대한 디자인의 프로토타입을 만든 다음 더 큰 디스플레이로 이동하는 것입니다. 이것이 웹 전문가들이 수년 동안 사용해 온 고전적인 Desktop First 접근 방식과의 많은 차이점이 있습니다.
전통적으로 웹사이트 제작은 컴퓨터와 노트북이 중심이였으며, 많은 콘텐츠를 큰 화면에 배치할 수 있기 때문에 레이아웃을 디자인하는 것부터 시작됩니다. 또한 이미 만들어진 웹사이트는 기능을 고려하여 다른 장치에 맞게 추가로 재개발되거나 조정하게 됩니다. 하지만 이제는 Desktop First 접근 방식에서 Mobile First 접근 방식으로 개발해야 하는 이유가 무엇일까요?
데스크톱 사이트의 모든 시각적 및 기능적 요소를 동일한 상호작용과 용이성을 유지하면서 모바일 버전으로 전송할 수 있는 것은 아닐 것입니다. 스마트폰을 위한 웹사이트 최적화는 종종 긴 페이지 로딩, 복잡한 탐색, 불편한 CTA 버튼 등 다양한 문제를 수반하게 됩니다. 디자이너가 열심히 노력해서 제작된 UI에 대해서 무엇을 말할 수 있을까요? 작은 스마트폰 화면을 위해 디자인의 미적이고 기능적이지 않은 요소의 상당 부분을 제거해야 하는 수고를 할 수도 있을 것입니다.
데스크톱에서 잘 보이고 작동하는 모든 것을 스마트폰에서 구현할 수 있는 것은 아닐 것입니다. Desktop First 접근 방식과 Mobile First 접근 방식을 비교할 때 기본 논리를 더 잘 이해하는 데 도움이 되는 방법론을 말할 수 있을 것이며, 거기에는 구현 기능의 성능 저하, 인터페이스의 복잡성, 다양한 효과 등이 있습니다. 만약 Mobile First 접근 방식에 대해서 구현하고자 하는 기능이 스마트 폰에 적합하지 않다면 기능을 변경하거나 아예 빼야 하는 경우가 생길 수 있을 것입니다. Desktop First 접근 방식에서는 정상 작동하는 기능이기에 Mobile First 접근 방식에서는 정상적인 작동이 어려울 수 있을 것입니다.
점진적 개발이란, 제약 조건이 많은 장치용으로 주로 설계된 제품을 만드는 것을 의미합니다. 가장 필요로 하는 기능 모듈이 포함되어 있으며, 다른 장치의 기술적 기능에 따라 점차 새로운 옵션을 추가할 수도 있고 제거해야만 할 수도 있을 것 입니다. 따라서 스마트폰의 기본 레이아웃을 만들었을 때 태블릿, 랩톱 및 PC에서 작동하는 사이트를 고려한다면 모든 디바이스에서 정상적으로 작동할 수 있도록 개발할 수 있을 것입니다.
Mobile First 접근 방식의 장단점
Mobile First 접근 방식의 모든 웹 디자인이 모두에게 충족할 수 있다고 주장하는 것은 불가능할 것입니다. Mobile First 접근 방식에는 강점과 단점이 있으므로 이 접근 방식을 사용하기 전에 충분히 장단점을 비교 검토해야 할 것입니다.
장점 1 - 사용자 친화적인 사용성
작은 글꼴, 잘린 이미지 및 부적절한 페이지 크기에 따른 별도의 설정이나 조정을 할 필요가 없습니다. 모바일용 UX 사이트를 디자인할 때 작은 화면에서의 사용성을 우선시하기 때문에 모바일 디자인에서 발생할 수 있는 모든 제한 사항을 고려해야 하며 사용자의 친화적인 사용성을 잊어서는 안될 것입니다. 때문에 모든 장치에서 제품과 상호 작용하는 긍정적인 경험은 높은 수준의 서비스 및 서비스 품질과 훌륭한 커뮤니케이션 전략과 함께 원하는 목표를 달성하는데 기여할 수 있을 것 입니다. 통계적으로 웹사이트가 모바일에 최적화되지 않은 경우, 사용자의 50%는 제품이나 콘텐츠가 좋더라도 한번 방문한 사이트의 재방문을 기대할 수 없을 것입니다.
장점 2 - 빠른 로딩 페이지
1~2초는 대부분의 사람들이 소위 First Contentful Paint(FCP)를 기다릴 준비가 된 시간입니다. 사용자가 검색 결과의 페이지 설명에 관심이 있더라도 로드하는데 시간이 오래 걸리는 사이트에서는 사용자는 즉시 사이트에서 이탈할 위험이 높을 것입니다. 다운로드가 3초 이상 걸리면 반송 확률이 32%, 5초 이상 걸리면 90% 증가한다고 합니다. 모바일에 최적화된 페이지는 반응형 페이지보다 빠르게 로드됩니다. Mobile First 원칙에 따라 설계된 사이트의 용이성은 다음과 같이 제공할 수 있을 것입니다.
- 가장 중요한 콘텐츠만 게시합니다.
- 품질 손실 없이 이미지를 사용하지만 크기는 더 작은 이미지를 활용할 수 있습니다.
- CSS와 많은 미디어 쿼리를 사용함으로써 사이트 요소의 크기를 조정하는 등의 불필요한 코드가 추가될 필요가 없습니다.
장점 3 - 검색 엔진 순위 우선 순위
Google은 2010년에 웹사이트 디자인의 벡터를 모바일 친화적으로 설정했습니다. 그런 다음 회사는 "모바일 장치 우선"에서 제품에 접근하겠다고 발표했습니다. 그리고 6년 후 모바일 장치에서 사용하기 쉬운 사이트를 분석하는 Mobile-First Index 알고리즘이 출시되었습니다. 이 검색 원칙은 곧 모든 사이트의 페이지 순위에 적용될 것으로 예상됩니다.
이것은 Mobile First 원칙에 따라 설계된 사이트만 검색 결과에서 최상위 위치를 차지할 수 있다는 것을 말할 수 있을 것입니다. Google 자체는 이 접근 방식을 요구하지 않겠지만 올바르게 구현된 반응형 디자인은 모바일 우선순위 인덱싱도 충족해야 한다는 것을 말하는 것입니다. 이는 Mobile-First Index 알고리즘을 준수하기 위해 사이트의 적응형 버전을 진단해야 함을 의미합니다. 이를 수행하는 방법 중에서 Google 모바일 친화성 테스트와 Search Console이 빠른 방법일 것입니다.
단점 1 - 디자인 기간 및 비용
이 접근 방식이 아직 널리 보급되지 않은 주된 이유 중 하나는 늘어나는 작업량 때문일 것입니다. 예를 들어 디자이너는 각각의 고유한 페이지 레이아웃의 한 가지 버전이 아니라 화면 설정이 다른 모바일, 태블릿 및 데스크톱 장치를 위한 여러 가지 버전을 준비해야 합니다. 동시에 해상도가 낮고 비표준 특성을 가진 오래된 장치를 기억해야 합니다. 그리고 이전에 사용하지 않은 대각선이 있는 새 모델이 나오면 다른 버전의 레이아웃을 준비해야 한다는 것을 의미합니다.
결과적으로 웹 사이트 디자인은 일반적인 Desktop First 방법에 비해 더 많은 비용과 시간이 소요됩니다. 그러나 단기적으로 비용과 편익을 고려하지 않는다면 시간이 지나면서 그러한 투자의 진정한 편익을 체감할 수 있을 것입니다. 예를 들어, 사용자가 2차 요소의 페이지에서 길을 잃거나 불편한 인터페이스와 모바일에서 느린 로딩으로 인해 짜증이 난다면 빠르고 저렴하게 웹사이트를 구축하는 것이 합리적일까요? 사이트 레이아웃 단계에서 문제를 해결하려면 프로토타입을 만들 때 문제를 해결하는 것보다 10배, 제품이 준비되었을 때 해결책을 찾으려고 하면 100배의 비용이 발생하게 될 수 있습니다.
단점 2 - 제한된 시각적 디자인
모든 Mobile-First 원칙을 준수하려면 창의적인 애니메이션, 중량감 있는 비디오 및 기타 놀라운 효과를 포기해야 하는 경우가 많습니다. 모바일에서 사이트의 간단한 인터페이스를 통해 사용자는 대상 작업에 집중할 수 있으며, 데스크톱에서는 이러한 웹사이트가 다소 겸손하고 지루해 보일 수 있습니다. 이러한 부분들을 충분히 고려하고 벤치마킹을 통해서 그리고 타겟 고객을 분석함으로써 적절한 대응을 하게 된다면 좋은 방안을 찾을 수 있을 것으로 보입니다.
예를 들어 Instagram은 모바일 전용 수준으로 유지되었으며, 데스크톱 버전은 휴대폰과 거의 동일합니다. Instagram은 다른 인기있는 소셜 네트워크를 따라잡고 새로운 기능을 추가하려고 노력하고 있지만 데스크톱의 디자인 측면에서는 수년 동안 동일하게 유지되어 왔습니다.
빠른 체크리스트
Mobile First 접근 방식을 위한 디자인 방법에는 어떤 것들이 필요한지 살펴 보겠습니다.
1) CTA(Call to Action)
웹 페이지 방문자가 특정 행동을 하도록 유도하는 장치를 말해요. 강한 CTA 장치는 방문자를 설득해서 클릭을 유도하는 역할을 하기 때문에 이커머스 기획자에게도 중요한 개념입니다. 모바일 버전은 대상 작업에 맞춰야 합니다. 예를 들어 사이트의 목표가 고객의 리드, 전화 및 요청을 유치하는 것이라면 강조하여 클릭을 유도해야 합니다.
2) 글꼴
모바일 버전의 크기(글꼴 크기)는 14~18픽셀이어야 합니다. 이는 텍스트의 가독성을 최대화하는데 중요합니다.
3) 내용에 대한 강조.
스마트폰 화면의 작은 크기는 그 조건을 나타냅니다. 사용자의 목표 행동을 달성하려면 먼저 사용자를 전환으로 이끄는 요소를 보여줘야 합니다. 사용자 흐름에 대한 연구는 처음에 사이트 페이지에 무엇을 표시해야 하는지 결정하는 데 도움이 됩니다.
4) 시각적 콘텐츠 계층 구조
표시할 항목과 표시 방법을 알고 있으면 사이트와의 사용자 상호 작용을 개선할 수 있습니다. 콘텐츠의 시각적 계층 구조에는 가장 필수적인 구성 요소를 강조 표시하고, 스마트폰 사용자의 특정 관심 영역에 배치하는 것이 포함됩니다. 동시에 디자이너는 심리적 기술을 사용하여 사이트 방문자의 관심을 필요한 요소에 집중시킬 수 있습니다.
5) 탐색 용이성
모바일 사이트에서 좋은 탐색은 까다로운 일입니다. 리소스를 통한 이상적인 사용자 여정을 제공하는 동시에 주요 콘텐츠에서 주의를 분산시키지 않도록 간결한 인터페이스 요소에 배치해야 합니다. 왼손잡이와 오른손잡이를 염두에 두고 설계 시, 이를 염두에 두십시오.
반응형 디자인이란?
반응형 디자인에는 모든 기기의 화면 크기에 맞게 늘어나는 앱 제작이 포함됩니다. 처음에 디자이너는 브라우저 창의 크기에 따라 동적으로 변경되는 단일 버전의 응용 프로그램을 만듭니다. 즉, 반응형 디자인은 브라우저 창의 변화에 반응합니다. 반응형 디자인에 대한 장단점에 대해 이야기하겠습니다.
반응형 디자인의 장점
반응형 디자인이 다양한 화면 형식에 앱을 표시하는 유연한 방법이라는 것을 이미 알고 있습니다. 반응형 디자인의 장점은 다음과 같습니다.
균일한 외관
로그인한 장치에 관계없이 응용 프로그램은 항상 동일하게 보입니다. 아이콘, 그림 및 텍스트는 동일하게 유지되며 서로 상대적으로 이동하는 경우 약간만 나타납니다. 사용자가 새로운 마크업에 익숙해지고 원하는 기능을 찾는 데 많은 시간을 할애할 필요가 없으므로 응용 프로그램은 친숙한 모양과 느낌을 유지하고 사용하기 편리합니다.
설계 시간 단축
이미 알고 있듯이 응용 프로그램 인터페이스는 디자인이 모든 화면 크기에 맞게 조정할 수 있는 단일 버전을 생성하기 때문에 모든 장치에서 동일하게 보입니다. 응용 프로그램의 한 버전을 디자인하는 데 디자이너의 많은 시간과 상당한 투자가 필요하지 않습니다. 이는 이 디자인을 통해 제한된 예산으로 비용을 절감할 수 있음을 의미합니다. 브라우저 창의 크기에 맞게 조정되는 사용자에게 친숙한 인터페이스와 간결한 디자인은 반응형 디자인을 특징짓는 두 가지 요소입니다.
반응형 디자인의 단점
따라서 반응형 디자인은 모든 장치에서 사용자에게 친숙하고 동일하게 보이는 디자인을 만들 수 있습니다. 하지만 반응형 디자인에는 다음과 같은 문제점을 안고 있다는 점을 인지하시기 바랍니다.
언밸런스 디자인
반응형 앱을 디자인할 때 웹과 모바일 버전 모두에서 동일하게 보기를 원합니다. 그러나 알 수 있듯이 반응형 디자인만을 사용하여 이를 구현하기에는 매우 어렵다는 것과 거의 불가능합니다. 모바일 버전은 불필요한 요소로 너무 오버로드되거나 반대로 컴퓨터에서 느리거나 멈춰서는 것을 경험할 수 있을 것입니다.
불편한 인터페이스
모든 것이 간단해 보일 것입니다. 브라우저 창이 변경되고, 응용 프로그램이 새로운 크기로 조정되고, 사용자는 확대 또는 축소된 형태로 표시될 전체 정보에 액세스할 수 있습니다. 그러나 축소의 경우 인터페이스 크기를 조정한 후 페이지의 모든 요소가 똑같이 사용하기 편리한 것은 아닙니다. 예를 들어 데스크톱에서 흔히 사용되는 내비게이션 메뉴는 모바일 장치에서 축소되어 읽을 수 없게 됩니다. 많은 정보가 포함된 부피가 큰 테이블은 완전히 읽을 수 없는 것처럼 보입니다. 결과적으로 손에 마우스와 키보드가없고 때로는 몇 초만 더 사용할 수 있는 모바일 사용자는 화면에 이해할 수 없는 인터페이스가 표시되고, 이해하지 못하고 페이지를 떠나게 될 것입니다.
다양한 장치의 적용 범위가 낮음
반응형 디자인은 모바일 버전의 가용성을 제공하지 않는 애플리케이션에만 적합합니다. 즉, 반응형 애플리케이션은 잠재적으로 고객이 될 수 있는 사용자의 모바일 부분을 다루지 않습니다. 모바일 사용자의 비율이 계속해서 증가함에 따라 이러한 단점은 반응형 디자인을 선호하는 결정적인 요인이 될 수 있습니다.
Mobile-First vs. Responsive Web Design. What to choose?
What to choose between responsive web design and mobile-first? Let's look at the pros and cons in this article and decide which one is best for your project.
gapsystudio.com
본 내용은 번역본으로 의역이나 오역이 있을 수 있습니다. 자세한 내용은 원문을 참고하시기 바랍니다.
'Topic > 기획자라면..' 카테고리의 다른 글
| 디자인 연구의 영향력을 높이기 위한 프레이밍 결과 (0) | 2023.05.26 |
|---|---|
| 사용자 중심 디자인을 방해하는 것들은 무엇이 있을까요? (0) | 2023.05.24 |
| 웹 3.0을 위한 UX 디자인 (0) | 2023.05.22 |
| 디자인 트렌드가 비즈니스에 좋지 않은 이유 (0) | 2023.05.15 |
| 오픈웹이란? (0) | 2023.05.08 |
| 행동 설계 : 설득력 있는 설계의 심리학 메커니즘 (0) | 2023.05.05 |