반응형 디자인: 모범 사례 및 고려 사항

반응형 웹사이트는 데스크톱뿐만 아니라 모바일, 태블릿, 때로는 TV에서도 모든 화면 크기와 해상도에 적응하는 웹사이트입니다.

Statista에 따르면 모바일 트래픽은 2017년 전 세계 트래픽의 52.64%를 차지했습니다. 이는 모바일 장치에 최적화 되지 않은 웹사이트 가 트래픽의 약 절반을 손실하고 있음을 의미합니다. 2018년 말까지 모바일 장치에 대한 전 세계 트래픽 점유율이 79%로 증가할 것으로 예상되며 이는 이례적인 증가입니다.

모바일 웹사이트가 없는 비즈니스는 놀라운 속도로 뒤쳐지고 있습니다. 방문자 10명 중 8명이 자신의 기기에 제대로 표시되지 않는 웹사이트 참여를 중단하기 때문입니다. 사용자가 뒤로 버튼을 누르고 경쟁업체를 대신 시도하는 것은 너무 쉬운 일이며 Google은 검색에서 반응이 좋지 않은 웹사이트의 순위를 매기기까지 합니다 .

여기에서 Google의 모바일 친화적 테스트를 볼 수 있습니다.

이것이 모바일이 데스크톱보다 더 중요하다는 것을 의미합니까? 아니요. 모바일 사용자의 83%는 원한다면 데스크톱에서 계속 사용할 수 있어야 한다고 말합니다.

모바일에 최적화된 eBay 버전과 모바일에 최적화 되지 않은 경우 어떻게 보이는지 살펴보세요. 최적화되지 않은 버전도 고려하시겠습니까?

오늘날의 인터넷에서 경쟁할 수 있는 웹사이트를 디자인하려면 웹 디자이너는 반응형 웹 디자인 (RWD)의 전문가 여야 합니다 . 어디서부터 시작해야 합니까?

반응형 웹 디자인에 대한 모바일 우선 접근 방식

모바일 퍼스트 웹 디자인은 모바일 웹사이트를 먼저 디자인하고 데스크톱 버전까지 작업하는 것을 의미합니다. 이 접근 방식이 잘 작동하는 데에는 여러 가지 이유가 있습니다.

1. 모바일 웹사이트는 사용성 문제가 더 많기 때문에(대부분 화면 공간이 부족하기 때문입니다) 모바일 디자인에 주요 초점을 맞추는 것이 실용적이고 더 효율적입니다.
2. 데스크톱 버전을 축소 하는 것보다 모바일 버전을 확장하는 것이 더 쉽습니다(모바일 웹사이트에 공간이 부족하기 때문에).
3. 모바일 우선 웹 디자인은 시각적으로나 기능적으로 필요한 것이 무엇인지 재평가하는 데 도움이 됩니다.

웹 사이트를 모바일 우선 반응형 사이트로 디자인하면 작업할 화면 공간이 적기 때문에 디자이너는 여러 가지 중요한 질문을 해야 합니다. 다음은 질문해야 할 질문입니다.

• 이 기능이 정말 필요한가요?
• 모바일용으로 미니멀한 디자인을 먼저 디자인하고 나중에 데스크톱용으로 확장할 수 있도록 하려면 어떻게 해야 할까요?
• 이 시각 효과가 모바일에서 로드하는 데 걸리는 시간의 가치가 있습니까?
• 주요 목표는 무엇이며 사용자가 이를 달성하는 데 도움이 되는 시각적 요소는 무엇입니까?

잠시 후 반응형 웹 디자인 예제를 살펴보겠습니다. 지금은 오늘날 어떤 기기, 화면 크기, 웹 브라우저가 관련이 있는지 이야기해 보겠습니다.

반응형 웹 디자인과 관련된 화면 해상도는 무엇입니까?

다음은 전 세계 모바일, 태블릿 및 데스크톱 사용자의 가장 일반적인 화면 해상도입니다. 보시다시피 해상도의 범위가 넓기 때문에 모바일, 태블릿, 데스크탑 모두 현재 시장 점유율을 지배하고 있지 않습니다. 이것이 우리에게 말해주는 것은 디자이너가 반응형 웹 디자인을 생각할 때 모든 해상도를 고려해야 한다는 것입니다.

• 360x640(소형 모바일): 22.64%
• 1366x768(평균 노트북): 11.98%
• 1920x1080(대형 데스크탑): 7.35%
• 375x667(평균 모바일): 5%
• 1440x900(일반 데스크탑): 3.17%
• 720x1280(대형 모바일): 2.74%

장치 고장과 마찬가지로 대상 고객의 사용자 인구 통계(또는 예상 사용자 인구 통계)와 일치하도록 위치별로 데이터를 분류해야 합니다. 일부 화면 크기는 현재 일반적이지 않지만 미래에는 될 수 있기 때문에 인기를 얻고 있는 해상도를 충족하는 것도 가치가 있습니다. 이것은 반응형 디자이너가 시장 점유율이 변하더라도 작동할 미래 지향적인 UX를 만드는 데 도움이 될 것입니다.

예를 들어, 360x640 해상도(대부분 Android를 사용하는 삼성 기기에 해당)는 작년에 5.43% 증가했습니다. 디자이너는 웹사이트 디자인을 시작하기 전에 이와 같은 귀중한 통찰력을 사용하여 주요 반응형 중단점을 결정할 수 있습니다.

오늘날 인기 있는 웹 브라우저는 무엇입니까?

반응형 웹 디자인은 모든 장치에서 원활한 경험을 제공하는 것이며, 웹 브라우저마다 웹 페이지를 렌더링하는 방식이 다르기 때문에 웹사이트가 다양한 모바일 및 데스크톱 웹 브라우저와 호환되는지 확인하기 위해 웹사이트를 테스트해야 합니다.

웹 사이트를 올바른 반응형 중단점으로 확장하는 것은 주로 웹 개발자의 책임이지만 최적의 사용자 경험을 만들기 위해 반응형 웹 사이트가 다양한 화면 크기에 어떻게 적응할지 정확히 결정하는 것은 웹 디자이너입니다.

다음은 모바일 및 데스크톱용 웹 브라우저 시장 점유율의 전 세계 분석입니다.

• 크롬: 55.04%
• 사파리: 14.86%
• UC 브라우저: 8.69%
• 파이어폭스: 5.72%
• 오페라: 4.03%
• 인터넷 익스플로러: 3.35%

반응형 디자인은 "모든 것을 적합하게 만드는 것" 뿐만 아니라 장치 하드웨어 및 웹 브라우저의 기능과 장치 해상도에 맞게 조정하는 것이기도 합니다. 이에 대한 한 가지 예는 Google 크롬이 CSS 속성 overscroll-behavior: 사용자가 뷰포트의 가장자리로 너무 세게 스크롤할 때 발생하는 상황을 정의)를 지원하지만 다른 웹 브라우저에서는 지원되지 않는다는 것입니다.

반응형 디자인 모범 사례

마찰 제거

앞서 언급했듯이 반응형 웹 디자인에 대한 모바일 우선 접근 방식은 디자이너가 사용자가 주요 목표를 달성하는 데 정말로 필요한 것이 무엇인지 평가하는 데 도움이 됩니다.

태블릿 버전(및 이후의 데스크톱 버전)을 구축하면서 이러한 사용자 목표를 달성할 수 있도록 하는 부차적 목표와 마이크로 인터랙션, 사용자 흐름 및 CTA(행동 촉구)에 대해 생각할 수 있습니다. 더 중요한 것은 사용자의 기본 목표에 먼저 초점을 맞추고 기본 또는 보조 목표에 도움이 되지 않는 불필요한 마찰을 제거하는 것입니다.

1차 목표는 제품 구매일 수 있고, 2차 목표는 뉴스레터 신청(나중에 구매로 이어질 수 있음)일 수 있습니다.

다음은 마찰을 제거한 훌륭한 예입니다. 모바일 사용자 인터페이스는 일반적으로 탐색하기가 더 어렵기 때문에 모바일 전자 상거래 상점의 경우 한 페이지 결제로 전환하고 데스크톱 전자 상거래 상점의 경우 다단계 결제만 활성화하는 것이 가장 좋습니다.

엄지손가락을 위한 디자인

반응형 웹 디자인은 사용자가 클릭을 통해 데스크톱 웹사이트와 상호 작용하지만 모바일 버전은 탭과 스와이프를 통해 상호 작용한다는 점에서 까다롭습니다. 신체적 차이도 있다. 데스크톱 사용자는 일반적으로 표면에 컴퓨터를 두고 있는 반면 모바일 사용자는 손에 장치를 들고 있습니다. 이러한 차이점은 모바일 UI 디자이너가 사용자가 상호 작용하는 탭 대상 및 기타 중요한 UI 요소를 디자인하는 방식을 크게 변경합니다.

몇 가지 예를 살펴보겠습니다.

• 사람들은 일반적으로 기본 데스크탑 탐색이 맨 위에 있을 것으로 기대합니다. 그러나 모바일에서는 하단에 있어야 합니다. 엄지손가락이 위로 편안하게 닿지 않습니다.
• 다른 대화형 요소도 쉽게 접근할 수 있어야 합니다. 이것은 엄지손가락이 장치 화면의 측면과 모서리에 닿기 더 어렵기 때문에 화면 중앙에 유지하는 것을 의미합니다.
• 쉽게 탭할 수 있도록 중요한 링크와 CTA의 높이는 44픽셀 이상이어야 합니다(작은 탭 타겟은 사용성에 좋지 않습니다).

추천 자료: 모바일 사용성에 대한 기본 가이드.

모바일 장치의 기본 하드웨어 활용

모바일 하드웨어(예: 장치 카메라 또는 GPS 서비스)는 기본 앱을 위해 특별히 예약되어 있지 않으며 앞서 언급했듯이 반응형 웹 디자인은 "모든 것을 적합하게 만드는" 것에 관한 것이 아닙니다. 또한 장치의 기능에 적응하는 것입니다. 모바일 웹 디자인의 경우 모바일 장치는 카메라를 사용하기 쉽기 때문에 데이터 입력과 같은 일부 미세 상호 작용은 웹 사이트에서 사용 가능한 기본 하드웨어를 활용하는 한 실제로 작은 화면에서 더 쉽습니다.

몇 가지 예를 살펴보겠습니다.

• 신용/탑업 카드 스캔(모바일에서는 양식이 까다로운 경우가 많으므로)
• 미디어가 이미 장치에 있으므로 소셜 미디어에서 사진 공유
• 이중 인증(이미 모바일 장치를 사용하고 있기 때문에)
• 주식/분석을 빠르게 확인(모바일 앱은 정보를 단순화하기 때문에)
• 음성으로 웹 검색 수행(핸즈프리가 타이핑보다 쉽기 때문에)

기본적으로 레이아웃을 유동적/적응형으로 만들기

모든 사용자가 데스크톱 브라우저를 최대화하지는 않습니다. 즉, 설계자는 오늘날 사용자가 사용하는 장치의 반응형 중단점을 고려해야 하지만 이러한 중단점 사이에서 발생하는 일도 고려해야 합니다.

반응형 중단점은 레이아웃과 콘텐츠를 새 장치로 "리플로우"하는 데 사용해야 하지만, 그 사이의 모든 크기를 고려하려면(만일 경우를 대비하여) 레이아웃이 유동적 이어야 합니다(즉, 자연스럽게 적응/늘어남에 따라 브라우저 크기 조정).

유동적/적응형 레이아웃을 디자인할 때 다음 팁을 염두에 두십시오.

• 백분율 단위는 요소를 유동적으로 허용합니다.
• 최소 및 최대 너비를 설정하면 "그러나 이보다 더 작거나 크지는 않음" 시나리오를 사용할 수 있습니다.
• SVG 이미지 형식은 품질 손실 없이 확장 및 축소할 수 있으며 해상도에 독립적입니다(JPG 및 PNG가 아닌 다른 형식).

가로 방향을 잊지 마세요

이전에 특정 반응형 중단점에 대해 이야기했지만 이러한 모바일 뷰포트를 가로 방향으로도 표시할 수 있다는 점도 고려해야 합니다. 유동적인 레이아웃을 구현하면 기술적으로 콘텐츠를 적응형으로 만들 수 있지만 세로 뷰포트의 상당 부분을 잃으면 사용성과 접근성에 방해가 될 수 있습니다.

탐색은 일반적으로 안전하지만(사용자가 일반적으로 두 개의 엄지 손가락으로 가로 방향을 탐색하기 때문에 실제로 더 나을 때도 있음), 사용자가 가로 방향에서 더 많이 스크롤해야 하므로 최적보다 덜 스크롤됩니다.

디자이너는 랜드스케이프 중단점을 위한 디자인도 고려할 수 있습니다. 예를 들어 모바일에서 세로로 쌓인 타일 요소는 왼쪽 및 오른쪽 탐색 버튼이 있는 슬라이더로 표시될 수 있으므로 사용자가 스크롤할 필요가 없습니다.

타이포그래피도 반응형일 수 있음을 기억하십시오.

UX 디자이너는 일반적으로 픽셀 단위를 사용하여 웹 사이트를 디자인하지만 실제 웹에서는 장치마다 해상도가 다르기 때문에 한 점이 더 이상 픽셀과 같지 않습니다. 예를 들어 iPhone X는 458 PPI(Pixels Per Inch)를 가지고 있으므로 픽셀 크기가 작아지는 경우 동일한 물리적 공간에서 보다 선명한 그래픽을 얻을 수 있습니다(Apple은 이를 "Retina" 기술이라고 하고 Android는 이를 "hDPI").

이것은 예를 들어 16px 글꼴 크기가 해상도에 따라 일부 장치에서 더 크거나 작게 보일 수 있음을 의미합니다. 웹 개발자는 일반적으로 1em이 1포인트인 반응형 단위 유형인 글꼴 크기를 정의하기 위해 em 단위를 사용합니다.

Zeplin, Sympli, Marvel 및 InVision과 같은 디자인 핸드오프 도구는 디자이너가 공동 책임인 문제에 대해 개발자와 협업하는 데 도움이 될 수 있습니다. 디자이너가 디자인을 실행하고 개발자가 코드를 실행하는 동안 전체 제품 디자인 워크플로는 견고한 커뮤니케이션이 필요한 팀 작업입니다.

반응형 디자인 성능 최적화 팁 및 모범 사례

반응형 웹 디자인은 모양뿐만 아니라 작동 방식과 느낌도 중요합니다. 의도한 기기에서 더 빨리 로드되도록 웹사이트를 조정하는 것도 마찬가지로 중요합니다.

중요하지 않은 이미지 및 비디오 지연 로드

이미지와 비디오는 웹사이트의 전체 다운로드 크기의 큰 부분을 차지하지만 한 번에 모두 로드할 필요는 없습니다. 미디어 렌더링이 지연될 수 있는 두 가지 시나리오가 있습니다. 사용자가 스크롤 없이 볼 수 있는 부분 아래로 스크롤할 때 스크롤 없이 볼 수 있는 콘텐츠를 로드할 수 있고, 레이아웃 및 콘텐츠가 다운로드된 후에만 렌더링 차단 미디어를 다운로드해야 합니다. 페이지 성능을 향상시키기 위해 무겁고 중요하지 않은 요소의 로드가 지연되는 이 방식을 지연 로딩이라고 합니다.

조건부 로딩

일부 웹사이트 요소는 모바일 사용자를 대상으로 하지 않거나 최소한 추가적인 인지 부하의 가치가 없습니다. 우리는 모바일 웹사이트가 단순하기를 원하므로 특정 시나리오에서 요소를 숨기는 것이 합리적입니다. 즉, 숨겨진 경우에도 이러한 요소를 로드하여 브라우저 리소스와 대역폭을 낭비하지 않도록 해야 합니다. 따라서 특정 조건에서만 이러한 요소를 포함하는 것이 가장 좋습니다.

다시 한 번, 개발자는 코드로 이를 달성할 수 있습니다. 그러나 디자이너는 특정 요소가 있어야 하고 존재하지 않아야 하는 시기와 위치에 대한 조건을 전달하여 페이지 성능을 향상시킬 수 있습니다.

반응형 이미지

앞서 언급했듯이 일부 장치는 인치당 더 많은 픽셀을 표시하므로 올바른 해상도로 내보내지 않으면 이미지가 흐릿해질 수 있습니다. 장치의 해상도에 따라 일부는 2배(@2x), 3배(@3x), 심지어 4배(@4x) 크기의 이미지가 필요합니다. 웹 브라우저는 이제 장치에 따라 올바른 이미지 해상도를 선택하는 <picture> 요소를 지원합니다.

반응형 웹 사이트를 제작하는 디자이너는 오늘날의 장치에서 사용되는 모든 해상도로 이미지를 내보내어 올바른 장치에 맞게 이미지를 조정할 수 있습니다(확실하지 않은 경우 개발자에게 문의하십시오. 반응형 웹 디자인에서는 커뮤니케이션이 핵심입니다).

결론

와이어프레이밍은 디자인 프로세스 초기에 주름을 없애는 데 도움이 될 수 있으며 이는 반응형 웹 디자인에 모바일 우선 접근 방식을 취할 때 잘 작동합니다. 좀 더 주의를 기울여야 하는 반응형 중단점이 있거나 모바일 반응 면에서 효과적이지 않은 개념이 있을 수 있습니다. 나중에 (즉, 시각적 미학을 추가하기 전에) 보다 빨리 도로의 요철을 찾는 것이 좋습니다.

Adobe XD, Marvel 및 InVision과 같은 최신 디자인 도구를 사용하면 팀이 실제 장치에서 프로토타입을 테스트하고 상황에 맞는 피드백을 논의하며 모든 시나리오에서 레이아웃이 작동할 때까지 일반적으로 팀으로 공동 작업할 수 있습니다.

반응형 디자인이 내부 테스트와 피드백에 의해 주도되는 린 UX 워크플로를 사용하면 사용자 경험이 실제 사용자에게 처음으로 제공되기 전에 모든 플랫폼과 화면 해상도에서 원활하게 작동하는지 확인할 수 있습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법