모바일 우선 디자인에 대한 실습 가이드

모바일 우선 접근 방식은 말 그대로 가장 작은 화면에 맞게 디자인하고 작업을 진행하는 것이다. 반응형(Responsive) 또는 적응형 디자인(Adaptive design)을 만드는 가장 좋은 전략 중 하나이다.

모바일 우선 접근 방식은 점진적 향상(progressive enhancement)의 주안점이다. 모바일 디자인은 가장 어려운 일인 만큼 먼저 해야 한다는 것이 이념이다. 모바일 디자인 질문에 대한 답을 얻으면 다른 장치를 위한 디자인이 더 쉬워진다. 요약하자면 가장 작은 디자인에는 필수 기능만 있을 것이므로 즉시 UX의 핵심을 디자인한 것이다.
반대 접근 방식은 단계적 저하(graceful degradation)이다. 이것은 처음부터 모든 복잡성을 통합하고 나중에 더 작은 장치를 위해 제거한다. 단계적 저하의 문제는 처음부터 모든 포괄적 디자인을 구축할 때 핵심 요소와 보조 요소가 병합되어 구별 및 분리가 더 어려워진다는 것이다. 전체 철학은 경험을 “축소”하고 있기 때문에 모바일 디자인을 사후 고려 사항으로 취급할 위험이 있다.

우리는 다른 사람들과 함께 모바일 우선 접근 방식을 통한 점진적 개선을 강력히 권장한다. 이 게시물에서는 팁과 기술을 설명하고 모바일 우선 워크플로를 사용하여 가상의 웹사이트를 구축하는 실습 강의로 마무리한다.

모바일 우선(Mobile-First) = 콘텐츠 우선(Content-First)

귀하의 사이트가 모바일 장치에서 좋다면 모든 장치에서 더 잘 해석된다. 하지만 더 중요한 것은 모바일 우선 접근 방식이 콘텐츠 우선 접근 방식이기도 하다는 것이다. 모바일에는 몇 가지 예를 들자면 가장 많은 제한 사항, 화면 크기 및 대역폭이 있으므로 이러한 매개 변수 내에서 디자인하면 무자비하게 콘텐츠의 우선 순위를 지정해야 한다는 것이다.

모바일 우선 접근 방식은 유기적으로 더 콘텐츠 중심적이며 따라서 사용자 중심적인 디자인으로 이어진다. 사이트의 핵심은 콘텐츠이다. 바로 이것이 사용자가 존재하는 이유이다.

그러나 한 가지 주의할 점은 모바일 사용자는 때때로 데스크톱 사용자와 다른 콘텐츠가 필요하다는 것이다. 기기별 콘텐츠는 컨텍스트를 고려하여 측정할 수 있다. 즉, 주어진 상황과 주어진 환경에서 사용자가 더 높이 평가할 사항은 무엇인지? 이를 미리 계획하는 가장 좋은 방법은 사용자 시나리오를 만드는 것이다.

모바일 우선 접근 방식의 또 다른 이점은 작은 화면 중단점(breakpoints)이 콘텐츠 주위에 더 잘 맞을 수 있다는 것이다. 다시 말하지만, 대안은 더 나쁘다. 이미 통통한 디자인을 작은 프레임워크에 짜넣어야 하는 것이다. 그러나 모바일 우선 접근 방식을 사용하면 콘텐츠 주변에 자연스럽게 중단점(breakpoints)이 생성되므로 어색한 편집이 필요하지 않는다.

모바일 우선 설계 프로세스

우리는 Figma 에서 디자이너를 돕는 프로세스를 설명할 것이다.

평소와 같이 와이어프레임은 레이아웃을 가장 효율적으로 구성하기 위해 권장되는 초기 단계이다. 와이어프레이밍이나 프로토타이핑을 할 때 반응형 중단점(breakpoints) 메뉴를 사용하여 가장 작은 것부터 시작하여 다양한 화면 크기로 이동하는 프로세스를 간소화한다.

이러한 사전 설정은 적절한 화면 크기를 레이아웃하므로 콘텐츠만 염두에 두고 와이어프레임할 수 있다.

절차는 다음 단계를 따른다.
1. 콘텐츠 인벤토리(Content Inventory) — 포함하려는 모든 요소가 포함된 스프레드시트 또는 이에 상응하는 문서이다.

출처: Maadmob

2. 시각적 계층 구조(Visual Hierarchy) – 콘텐츠 인벤토리의 요소에 우선 순위를 지정하고 가장 중요한 요소를 눈에 띄게 표시하는 방법을 결정한다.

3. 가장 작은 중단점(breakpoints)으로 디자인한 다음 확장 — 모바일 와이어프레임을 먼저 구축한 다음 이를 더 큰 중단점(breakpoints)의 모델로 사용한다. 공백이 너무 많이 생길 때까지 화면을 확장한다.

4. 터치 대상 확대 — 손가락은 픽셀 단위의 정확한 마우스 커서보다 훨씬 넓기 때문에 탭할 더 큰 요소가 필요하다. 이 글을 쓰는 시점에서 Apple은 터치 대상에 대해 44픽셀 정사각형을 권장한다. 하이퍼링크에 충분한 공간을 제공하고 버튼을 약간 확대하고 모든 대화형 요소 주위에 충분한 공간이 있는지 확인하자.

5. 호버링에 의존하지 말자 — 거의 당연한 이야기지만 디자이너는 종종 인터랙티브 작업에서 호버 및 마우스오버 효과에 의존한다. 모바일 친화적이라고 생각한다면 하지 않는것이 좋다. 아직 손끝에 대한 호버 컨트롤이 없다.

6. “APP”을 생각하라 — 모바일 사용자는 경험의 움직임과 약간의 제어에 익숙하다. 캔버스 외부 탐색 , 확장 가능한 위젯, AJAX 호출 또는 사용자가 페이지를 새로 고치지 않고도 상호 작용할 수 있는 화면의 기타 요소에 대해 생각해 보자.

7. 큰 그래픽 피하기 — 가로 사진과 복잡한 그래픽은 화면 너비가 몇 인치에 불과할 때 잘 표시되지 않는다. 휴대용 화면에서 읽을 수 있는 이미지로 모바일 사용자를 수용한다.

8. 실제 장치에서 테스트 — 웹사이트가 얼마나 유용한지(또는 그렇지 않은지) 스스로 발견하는 것보다 좋은 것은 없다. Desktop/Notebook 컴퓨터에서 벗어나 실제 휴대폰이나 태블릿에 제품을 로드해보자. 페이지를 탭하고, 사이트 탐색이 쉬운지~? 적시에 로드되는지~? 텍스트와 그래픽이 읽기 쉬운지~?

이것은 단지 기본 개요이다. 프로세스에 대한 전체 가이드를 보려면 반응형 디자인을 위한 무료 콘텐츠 와이어프레임을 다운로드해서 확인해 보자.

Mobile-First 설계 튜토리얼

장치마다 화면 크기와 방향에 따라 다른 레이아웃이 필요하다는 점을 감안할 때 사용자를 위해 여러 배열을 디자인하는 것이 좋습니다. 운 좋게도 Figma에서 바로 반응형 또는 적응형 변형을 만들 수 있다.

예제를 만들고 스마트폰에서 태블릿 및 데스크톱 보기로 콘텐츠를 확장하는 방법을 설명한다. 계속해서 예제를 만들고 아래를 따라해 보자.

콘텐츠 우선 순위 설정

“모바일 우선 접근”은 “데스크톱 우선”과 다르다. 더 작게 디자인할 때 잘라내지 않고 점차적으로 더 큰 레이아웃에 정보를 추가한다. 모바일을 생각한다는 것은 정보를 제거한다는 의미가 아니다. 정보를 1차, 2차, 3차 콘텐츠로 분류하는 것을 의미한다.

이 예에서 우리는 홈 페이지에 회사 이름 및 제품 링크와 같은 특정 요소가 있어야 한다는 것을 알고 있다. 블로그 게시물도 나쁘지 않을 것이다. 그러나 우리가 말했듯이 모든 것이 스마트폰 보기에 맞지는 않으므로 사이트의 목표인 자전거 판매를 달성할 수 있는 항목에 따라 우선 순위를 설정한다.

1. 최신형 자전거

2. 베스트 셀러 바이크

3. “나에게 딱 맞는 라이드 찾기” CTA

4. 회사명 및 히어로 이미지

5. 내비게이션

6. 검색

7. 두 번째로 많이 팔린 자전거

8. 상품권

9. 추천서

10. 최신 블로그 게시물

주문한 목록을 기반으로 우리의 작업이 판매를 얻는 디자인 문제를 해결할 것이라는 확신을 가지고 만들 수 있다.

스마트폰 보기

사용자는 얼마나 필요할까~?

모바일 우선을 생각하면 무엇이 정말 중요한지 생각하게 한다. 이 스마트폰 보기에서 가장 많이 팔린 자전거와 최신 모델은 판매로 직접 연결되므로 상품권, 덜 인기 있는 모델, 최신 뉴스와 같은 다른 항목을 내부 페이지에 남겨둘 수 있다. 마지막 클릭 유도문안은 특히 눈에 잘 띄며 손가락을 한 번만 탭하면 쉽게 칠 수 있다.