안녕하세요~ UXPin 총판 단군소프트입니다.

여러분은 웹 디자인 먼저 하나요? 모바일 디자인을 먼저 하나요? 이번 시간에는 웹 디자인, 모바일 디자인 중 어떤 디자인을 먼저 작업하는게 좋은지 알아보면서 모바일 우선 접근 방식이 무엇인지 어떤 프로세스로 작업하는지 배워보겠습니다.

모바일 우선 접근 방식은 말 그대로 가장 작은 화면을 디자인하고 점점 사이즈를 키워서 작업하는 것입니다. 반응형 또는 적응형 디자인을 만드는 가장 좋은 전략 중 하나입니다.

1. 모바일 우선 접근 방식은 진보적인 향상입니다.

모바일 디자인이 가장 어려운 일인 만큼 먼저 해야 한다는 것이 이념입니다. 모바일 디자인 질문에 대한 답을 얻으면 다른 기기를 위한 디자인이 쉬워집니다. 요약하자면, 가장 작은 디자인은 필수적인 기능만 가지기 때문에, 여러분은 바로 UX의 핵심을 디자인한 것입니다.

2. 반대되는 접근 방식은 품위 저하입니다.

이것은 처음부터 모든 복잡한 기능을 통합하고 나중에 작은 장치를 위해 기능을 제거합니다. 이 접근 방식의 문제점은, 처음부터 모든 것을 포괄한 디자인을 구축하기 때문에, 핵심 요소와 보충 요소가 합쳐져 구별과 분리가 어려워진다는 점이다. 이 방식의 철학은 모바일 디자인의 경험을 "축소"하는 것이기 때문에, 모발일 디자인을 불필요한 것으로 취급해 버릴 위험성이 있습니다.

우리는 다른 사람들과 마찬가지로 모바일 우선 접근법으로 진보적인 향상을 강력히 권고한다. 이 게시물에서는 팁과 기술을 설명한 다음 모바일 우선 워크플로우를 통해 가상의 웹사이트를 구축하는 실습 강의로 마무리하겠습니다.

웹사이트가 모바일 기기에 적합하다면, 모든 기기에서 더 잘 작동합니다. 그러나 더 중요한 것은 모바일 우선 접근법이 콘텐츠 우선 접근법이기도 하다는 것입니다. 모바일은 몇 가지 이유로 가장 많은 제한과 화면 크기, 대역폭을 가지고 있기 때문에 이러한 매개 변수 내에서 디자인하면 콘텐츠의 우선순위를 지정해야 합니다.

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

그러나 한 가지 주의할 점은 모바일 사용자가 데스크톱 사용자와 다른 콘텐츠가 있어야 하는 경우가 있다는 것입니다. 기기별 콘텐츠는 주어진 상황에서 사용자가 무엇을 더 잘 이해할 수 있는지와 같은 환경을 고려하여 측정할 수 있습니다. 이러한 상황을 사전에 계획하는 가장 좋은 방법은 사용자 시나리오를 만드는 것입니다.

모바일 우선 접근법의 또 다른 장점은 작은 화면 중단점이 콘텐츠 주위에 더 잘 맞을 수 있다는 것입니다. 다시 말하지만, 대안은 작은 프레임워크에서 큰 프레임워크 디자인을 압축해서 넣어야 하는 최악의 상황에 빠집니다. 그러나 모바일 우선 접근 방식을 사용하면 콘텐츠를 중심으로 자연스럽게 중단점이 전개되므로 어색한 부분이 없어 편집이 필요하지 않습니다.

우리는 UXPin에서 디자이너들에게 도움이 되는 과정을 설명할 것입니다.

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

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

절차는 다음과 같습니다.

1. 콘텐츠 인벤토리 – 포함하려는 모든 요소가 포함된 스프레드시트 또는 이에 상응하는 문서입니다.

2. 시각적 계층 구조 — 콘텐츠 인벤토리의 요소 우선순위를 지정하고 가장 중요한 요소를 명확하게 표시하는 방법을 결정합니다.

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

4. 터치 타겟 확대 — 손가락은 픽셀 크기의 마우스 커서보다 훨씬 넓어서 탭 할 요소가 더 커야 합니다. 이 글을 쓰는 시점에서 애플은 터치 타깃에 44픽셀 정사각형을 권장한다. 하이퍼링크의 충분한 공간을 제공하고 버튼을 약간 확대하여 모든 대화형 요소 주위에 충분한 공간을 확보해야 합니다.

5. 호버(hover)에 의존하지 마십시오 — 거의 당연한 이야기지만, 디자이너는 상호 작용 작업을 할 때 호버(hover) 및 마우스 오버(mouseover) 효과에 의존하는 경우가 많습니다. 만약 당신이 모바일 친화적이라고 생각한다면, 그러지 마세요. 아직 손가락 끝에 대한 호버 컨트롤은 없습니다.

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

7. 큰 그래픽 피하기 — 가로 사진 및 복잡한 그래픽은 화면 너비가 몇 인치밖에 되지 않으면 잘 표시되지 않습니다. 휴대용 화면에서 읽을 수 있는 이미지로 모바일 사용자의 요구를 충족합니다.

8. 실제 장치에서 테스트 — 웹 사이트가 얼마나 유용한지(또는 유용하지 않은지) 스스로 발견하는 것보다 더 좋은 것은 없습니다. 데스크톱/노트북 컴퓨터에서 벗어나 실제 휴대폰이나 태블릿에 제품을 로딩하십시오. 페이지를 탭 하세요. 사이트 내비게이션이 알아보기 쉬운가요? 적절한 타이밍에 로딩이 되나요? 글과 그래픽은 읽기 쉽나요?

이것은 단지 기본적인 개요일 뿐입니다. 프로세스에 대한 전체 가이드를 보려면 반응형 디자인을 위한 무료 콘텐츠 와이어 프레밍을 다운로드하십시오.

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

예제를 만들고 스마트폰에서 태블릿 및 데스크톱 보기로 콘텐츠를 확장하는 방법에 대해 설명합니다. UXPin 무료 평가판을 통해 체험해보세요.

다음 시간에는 이어서 모바일 우선 반응형 디자인에 대한 실습 가이드 <제2장>을 준비중이니 많은 기대와 관심 부탁드립니다.

그럼 다음 시간에 만나요~:)

이 글은 UXPin의 A Hands-On Guide to Mobile-First Responsive Design를 번역한 글입니다.