UX디자인 - 모바일패턴(웹 앱, 안드로이드, ios 우수사례)

어떻게 해야 하는가?

{모바일 사용자에 대해 2가지 접근법이 존재}

1. 모바일 웹 브라우저를 통해 서비스에 접근하는 사용자 

2. 스마트폰에 설치된 앱을 사용하는 사용자

 

2가지 모두 장단점을 가지고 있음

- 앱의 경우, 기기의 모든 기능을 사용할 수 있지만 앱 설치라는 추가 단계가 필요

- 웹의 경우, 브라우저 컨트롤이 일부 공간을 점유

 

=> 웹 앱을 제작할 때, 다양한 모바일 운영체제와 각양각색의 스크린 크기에 접속하는 사용자를 만족시켜야 함

프로그레시브 웹 앱 - 웹 페이지 & 네이티브 앱의 다양한 장점을 가지고 있음

-> 사용자가 모바일 기기에 앱을 설치하지 않고도 사용할 수 있기에, 앱에 접근하는 단계의 수가 줄어들어 전환율을 높일 수 있음

---

{ 웹앱 접근법 - 반응형, 적응형, 가변형 }

다양한 모바일 기기를 지원하고자 한다면, 웹 사이트 or 웹 앱은 서로 다른 유형의 스크린과 해상도에 맞춰 조정이 필요

다양한 스크린 크기에 맞춰 웹 페이지를 조정하는 몇 가지 대표적인 기법에 관해 논의가 필요

 

{ 웹앱 접근법 - 반응형 동작 }

반응형 동작은 미디어 쿼리를 사용해 웹 페이지를 구성하는 요소의 위치와 크기를 조정 한다.

사용자가 데스크톱에 접속하면 콘텐츠를 3단으로, 모바일에서 접속하면 동일한 컨텐츠를 좌우로 꽉 차게 1단으로 표시 가능

{ 웹앱 접근법 - 유동형 동작 } 

유동형 페이지는 요소의 크기를 퍼센트로 정의, 따라서 큰 스크린에서 점유했던 공간과 동일한 퍼센트의 공간을 작은 스크린에서 차지하게 된다.

아주 간단한 페이지에서는 이러한 유형의 솔루션이 효과적일 수 있지만, 웹 페이지가 복잡하고 다수의 요소를 갖고 있을 때 이러한 솔루션을 사용해서 경험을 적절하게 조정하기가 힘듦  -> 단순성으로 인해 이메일에 종종 사용되는 기법

 

{ 웹앱 접근법 - 적응형 동작 }

적응형 동작을 하는 페이지는 미디어 쿼리를 사용하여 전체적인 경험을 사용자가 웹 페이지에 접속하는 기기에 맞게 조정한다.

이 기법은 사용자가 접속하는 기기의 성능에 따라 완전히 상이한 페이지를 제공하는 편이 더 낫다고 생각할 때 유용하다.

ex) 데스크롭으로 보험을 알아보는 사용자에게 표와 그래프가 등장하는 복잡한 웹 페이지 제공 가능, 동시에 스마트폰으로 접속하는 사용자에게 약간의 단계와 요소가 있는 보험 검색 앱을 보여줌

 

{ 웹앱 접근법 - 아이브리드 동작 }

각 솔루션의 장점을 활용하는 혼합된 전략, 기능성이 필수적이지 않은 콘텐츠 페이지에서는 유동형이나 반응형처럼 유연한 접근법을 사용가능하며, 기능성이 중요한 애플리케이션 영역에서는 접속에 사용되는 기기의 제약에 맞춰 적응형으로 사용자 경험을 조정 가능

{ 웹앱 접근법 - 프론트엔드 프레임워크 }

가장 인기 있는 기법은 반응형 동작, 지난 몇년간 몇몇의 HTML/CSS 프레임워크는 프론트엔드 개발자의 프로그래밍 태스크 수행을 훨씬 쉽게 만들어줌,  개발자에게 정확한 스펙을 제공하기 위해 이러한 프레임워크가 기능하는 방법을 이해하는 것은 디자이너에게 도움이 됨

그리드 시스템은 디자인의 레이아웃 측면을 커뮤니케이션할 수 있는 공통 레퍼런스를 제공

---

😎{ 모바일 애플리케이션 디자인 패턴 } - 여기부터!

다양한 디자인 패턴이 대다수의 모바일 사용자에게 표준이 되었음, 이러한 패턴을 사용하는 솔루션은 사용자에게 자연스러운 경험을 만드는 효과적인 방법 / 다른 패턴을 파악하는 것은 특정 컨텍스트에서 어떤 솔루션이 효과적인지, 사용자에게 어떤 아이디어를 테스트해야 할지를 이해하는 데 도움이 됨

=> 디자인 패턴은 사용자 인터페이스, 그리고 애플리케이션 동작과 관련될 수 있음

{ 모바일 인터페이스 디자인 패턴 - 내비게이션 }

(1) 슬라이딩 드로어

"햄버거 메뉴" 로 알려져 있음

메뉴 아이콘을 클릭하면 열리는 트레이에 모든 요소가 담겨 있으며, 보통 3줄로 표현됨

이 접근법은 주요 스크린 공간의 대부분에 사용자가 찾는 콘텐츠를 배치하지만 내비게이션 옵션은 트레이에 모두 숨겨둠

이러한 메뉴의 장점은 초기 경험을 복잡하게 만들지 않으면서, 무한대의 요소를 담을 수 있다는 점

이 유형은 데스크톱 버전의 모든 요소를 그대로 제공할 수 있기에 웹 페이지의 모바일 버전을 만드는 데 있어 인기가 좋음

But, 이 솔루션이 가장 효과적인지 or 다른 경험이 훨씬 효과적인지 여부를 신중하게 분석해야 한다.

슬라이딩 드로어는 다수의 섹션이 동일한 중요도를 가진 앱이나 특정 섹션에서만 주로 시간을 보내는 앱의 경우 좋은 솔루션이 될 수 있음

(2) 상단탭 

 상단 영역의 메뉴는 대부분의 언어가 위에서 아래 방향으로 적어 나가듯 사용자가 일반적으로 읽어나가는 방향을 사용하여 정보를 표시한다. 이러한 배치는 모바일 인터페이스에 친숙하지 않은 사용자에게 특히 유용할 수 있다.

이 메뉴 유형은 웹 앱과 네이티브 앱 모두에서 사용되며 안드로이드 앱에서 훨씬 보편적

햄버거 메뉴와 함께 사용 가능하며 일반적으로 햄버거는 기본 메뉴, 상단 메뉴는 메뉴 항목의 선택이나 활성화된 화면을 하위 섹션으로 분할하는 용도로 사용됨

(3) 하단 메뉴

이 유형은 ios 앱에서 가장 흔히 사용되는 레이아웃, 최근에는 안드로이드, ios 모두에서 하단 메뉴를 사용하는 앱이 많아짐

하단 메뉴는 사용자의 엄지 손가락과 가깝기 때문에 큰 수고를 들이지 않고도 섹션을 쉽게 변경 가능 / 최대 5개의 섹션으로 앱 콘텐츠를 분할하도록 디자인 됨

일부 복잡한 앱에서는 더 많은 섹션이 필요하며, 5개 중 1개를 누르면 추가 섹션에 접근 가능 / 보통 more 라는 텍스트 or 점3개가 쉽게 이해할 수 있기 때문에 이 섹션에 많이 사용됨

스크린 기능을 배치하여 내비게이션 촉진하기

모바일 스크린은 커지고 있는 추세, 자주 쓰이는 기능을 엄지손가락이 닿는 범위 내에 위치 시키는 것이 더욱 중요해짐

(4) 이전 버튼

이전 버튼을 누르면 이동한 경로를 저장하는 이동 경로 같은 방식으로 바로 앞 화면으로 돌아갈 수 있음

이 버튼은 단계가 많은 복잡한 프로세스, 사용자가 이전 화면에 있던 항목의 상세 보기에 들어갔을 때도 사용됨

이전으로 돌아가는 기능은 데스크톱 브라우저와 마찬가지로 상단 왼쪽에 대체로 위치함

 

(5) 멀티스크린 태스크

한 화면에서 완료하기에는 너무 복잡한 태스크는 몇 개의 화면을 거치게 됨, 이러한 프로세스의 선형적인 성격에도 불구하고 사용자에게 탐색의 자유도를 제공해야 함

사용자는 자신의 실수를 바로잡기 위해 or 나중에 다시 돌아와 마무리 지으려고 앞뒤로 이동 가능해야 하며 가능하다면  사용자가 이어서 작성할 수 있도록 초안을 저장하는 방법이 도움이 됨

(6) 플로팅 버튼

플로팅 버튼은 스크린의 다른 요소 위에서 기능을 강조하기 앱(메일 앱)에서 흔히 사용, 구글의 머티리얼 디자인 스타일가이드에서 소개되었으며, 안드로이드 앱에서 일반적으로 사용됨

스크린의 여러 영역에서 표시 가능하며 지도에서 많이 사용됨, 일반적으로 엄지손가락이 닿는 영역과의 근접성을 고려해 스크린 하단에 주로 배치 

플로팅 버튼은 내비게이션 메뉴가  상단에 위치해 사용자가 다음 동작을 취하기 위해 손을 뻗어야 하는 경우에 특히 유용

{ 모바일 인터페이스 디자인 패턴 - 알림 }

잘 사용된 알림은 사용자의 관여도를 효과적으로 높이는 툴, 이를 사용하기에 앞서 사용자 승인을 받을 필요가 있음

알림은 사용자를 불필요하게 방해하거나 아주 짜증나게 할 수 있기에 사용자가 어떤 것에 흥미를 느끼는지를 파악하고 그들에게 의미 있는 콘텐츠를 제공하는 것이 중요

 

알림에서의 움직임

인간은 주변 시야를 통해 움직임을 손쉽게 알아챈다. 이 때문에 움직이거나 반짝이는 요소를 알림에 사용한다.

우리의 뇌는 이러한 움직임을 해석하고 주의를 기울이고 또는 사운드나 햅틱도 사용됨

동그라미 힌트

무언가에 변화가 생겼음을 알려주는 동그라미, 이 동그라미는 메뉴 아이템과 탭, 다른 요소 등에서 모두 사용되고 / 만약, 알림을 남발하면 특히, 사용자 관심을 끌지 못하는 컨텐츠에서의 앱의 알림 허용을 취소하는 경우를 각오해야 한다.

내부에 숫자를 표시하거나  or  동그라미 외에는 다른 요소 없이 사용하는 것이 일반적 / 내부에 숫자가 있는 경우, 해당 숫자는 사용자가 인터페이스에서 강조 표시가 된 요소를 클릭하면 확인하게 되는 신규 항목의 숫자를 의미

앱 아이콘 알림 숫자 세기

뱃지 앱 아이콘이라고 불리우며 모바일 폰의 홈 스크린에서 볼 수 있는 앱 아이콘은 이러한 유형의 동그라미를 숫자와 함께 모서리 한 곳에 표시하며, 이 숫자는 마지막으로 앱이 실행되고 나서 도착한 알림의 수를 의미

---

{ 모바일 인터페이스 디자인 패턴 - 대화 상자 }

대화상자는 재빨리 대응하기 위해 다른 행동은 못하게 막고 이는 대화상자를 거슬리고 성가시게 만듦

그렇기에 대화상자는 앱이 사용자의 인터렉션 없이는 진행할 수 없을 때 or 중요한 정보가 삭제 or 진행중이던 프로세스가 취소되는 경우처럼 예기치 않은 결과로 이어질 수 있는 행동에 대한 사용자의 확인을 받고자 할 때만 사용해야 됨

대화상자를 사용하기에 앞서 다른 대안은 없는지 고려 해봐야 하고, 플랫폼의 스타일 가이드를 따르는 것은 짜증나는 상황을 막는 데 도움을 줌

{ 모바일 인터페이스 디자인 패턴 - 이미지 갤러리 }

이미지 갤러리는 대량의 항목을 그래픽 방식으로 보여주는 매우 유용한 디자인 요소, 갤러리는 앱과 모바일 자체 시스템에서 모두 사용되기 때문에 사용자가 이전 경험을 통해 요소의 동작을 예상할 수 있다.

썸네일로 보이는 항목은 인터랙티브해야 하고 갤러리에서 이미지를 작은 사이즈로 보여주면, 이미지와 인터렉션하면 이미지가 확대될 거라고 생각처럼 이루어져야 함

 

{ 모바일 인터페이스 디자인 패턴 - 화살표 }

화살표와 화살표가 있는 오브젝트를 탭핑할 때 사용자가 기대하는 움직임 사이에는 자연스러운 관련성이 존재

일반적으로 위아래 화살표는 콘텐츠를 스크롤하거나 표시할 때 사용되고,  좌우 화살표는 스크린 사이에 앞뒤로 움직이는 것을 보여줄 때 주로 사용됨 (ios에서는 메뉴 옵션에서 화살표를 주로 사용함)

 

{ 모바일 인터페이스 디자인 패턴 - 세로와 가로방향 }

일반적으로 세로 방향으로 사용하지만 일부 앱은 가로 방향으로 사용하는 장점을 활용하기도 하고, 뛰어난 조작성이 요구되는 게임 같은 앱에서는 가로 방향에서 양손을 모두 사용할 수 있음

앱에서는 이 같은 방향을 이용하여 앱 콘텐츠를 보는 새로운 방식 or 양손으로 사용할 수 있는 새로운 인터렉션 방법을 소개할 수 있음 ex) 비디오 앱에서는 가로보기 모드를 제공하여 비디오를 전체 화면과 컨트롤 버튼으로 보여준다.

{ 모바일 인터페이스 디자인 패턴 - 사용자 인터랙션 }

(1) 원 탭 인터랙션

앱에서 할 수 있는 가장 간단한 행동은 탭, 관여도 향상을 목표로 하는 대부분의 앱에서 "하트 or 좋아요" 같은 간단한 기능을 제공함 / 사용자의 간단한 참여 덕분에 앱은 사용자 선호도를 기반으로 향후에 더 좋은 결과를 제공할 수 있음

(2) 공유 기능

사람들은 서로 연결되기 원하며 다양한 방식으로 앱에서 표현됨, 누군가를 팔로우하기, 친해지기, 친구 사귀기 혹은 콘텐츠 공유하기가 그런 방식 중 일부이며 앱은 그 목적에 따라 각자만의 소셜 용어를 개발할 수 있음

안드로이드에서는 연결된 3개의 점이 가장 일반적인 아이콘인 반면, ios 사용자는 위로 향하는 화살표가 있는 박스 형태에 익숙함

> 사용할 아이콘을 정할 때 각각의 플랫폼에서 가장 효과적인 아이콘을 사용하여 제공하는 것

 

(3) 댓글과 후기

댓글은 사용자와의 인터렉션을 형성하고 타임라인 안에서 대화가 어떻게 전개되었고 참여했는지를 분석할 수 있음, 이러한 유형의 인터랙션을 포함시키는 것은 제품 or 동영상에 신뢰성을 부여하며 사용자 주의를 사로잡고 그들이 플랫폼과 인터랙션할 수 있도록 끌어 당긴다. 

사용자 주의를 사로잡고 싶다면, 댓글을 단 사람의 이름과 이미지를 포함시켜야 하고, 사람들은 말보다 이미지를 더 잘 기억하기에 (그림 우월성 효과)라고 부르며 다른 사람의 이미지를 보여 줄 때 매우 효과적

{😎 모바일 인터페이스 디자인 패턴 - 에러처리 }

사람과 시스템 모두 문제가 생기는 경우가 발생하기 마련인데, 이러한 상황이 발생했을 때 사용자에게 상황을 적절히 알리고, 문제를 해결하는데 유용한 정보를 제공하는 것, 이러한 상황을 최대한 인간적으로 다뤄야 하며, 부정적인 상황을 즐거운 경험으로 전환시키려는 노력을 기울일 수 있음

[ 에러 메시지를 만드는 5 가지 Tip (시험 출제!) ]

1. 에러를 사용자가 이해하기 쉽게 설명하기 : 사용자는 서버 언어로 말하지 않을 뿐더러 코드를 이해하지도 못한다. 기술적인 용어는 피해야 한다.

2. 비례하는 언어를 사용하기 : 에러 상황을 표현하는 심각성은 사용자의 에러 인지에도 영향을 준다.    인터페이스 요소를 사용하여 문제의 심각성에 맞는 에러를 표시해야 한다.

3. 가급적 방향을 줄이기 : 앱의 전반적인 작동에 영향을 주지 않는 에러는 부분적으로 표시해야 하며, 사용자가 앱의 다른 영역을 사용하는 것은 허용해야 함

4. 가능하다면 솔루션 제공하기 : 에러 메시지에 무엇이 잘못되었는지를 설명하는 것에 덧붙여 에러 해결 방법을 알려준다면 사용자들은 이를 환영함, 에러 메세지에 탭이 가능한 기능을 포함시켜서 사용자가 문제 해결 방법을 찾아가게 할 수도 있다.

5. 사용자가 찾아보거나 취소할 수 있게 허용하기 : 즉시 해결될 필요가 없는 에러에서는 사용자가 찾아보면서 상세 정보를 얻거나, 취소하고 문제를 나중에 해결할 수 있게 해야 한다.

 

{ 모바일 인터페이스 디자인 패턴 - 오버레이 팁 }

적절한 타이밍에 등장하는 도움말 메시지는 사용자가 길을 잃는 것을 막아줄 수 있다.

오버레이 팁을 사용하여 최근에 앱에 추가된 신기능을 설명하거나 사용자가 써본 적 없는 기능을 강조할 수 있음, 지속적으로 개선된 앱은 살아 있는 앱이지만, 변경은 사용자가 기능을 찾지 못할 확률을 줄여나가면서 신중하게 진행해야 한다.

{ 모바일 인터페이스 디자인 패턴 - 방어벽 }

방어벽 또는 방해물은 사용자에게 메세지를 보여주는 대화상자의 한 종류로 광고를 홈페이지 전체에 삽입하는 행위를 말함

방어벽은 전체 화면을 점유하며, x 혹은 건너뛰기를 제공하여 메세지를 읽고 싶지 않은 사용자는 창을 닫을 수 있다. 다른 방해와 마찬가지고 아주 신중하게 사용해야 한다.

목적이 무엇이든,  읽는 순서상 메시지의 끝부분에 " 알겠습니다. or ok " 라고 버튼에 적는 것이 다음 동작에 대한 사용자의 혼란을 막는데 도움이 됨 / 방어벽을 벗어날 수 있게 하는 옵션을 포함시키는 것이 좋음

{ 모바일 인터페이스 디자인 패턴 - 콘텐츠 내부 메시지 }

사용자 인터랙션을 덜 거슬리게 하는 옵션은 컨텐츠 내부 메시지이다.

이 기법은 앱의 콘텐츠 섹션 사이에 메세지를 통합하는 방법으로 이루어지며, 지난번 버전에서 새롭게 추가한 신기능을 사용하기 위해 첫 단계를 돕거나 or 그들이 일반적으로 찾아본 적 없는 앱의 특정 영역을 소개해 줌  => 앱 맞춤화, 사용자 경험을 개선하기 위한 새로운 사용자 데이터를 수집하는 용도로 이 기법을 사용할 수도 있다.

😎여기까지!

{ 모바일 인터페이스 디자인 패턴 - 다른 모바일 사용자 인터페이스 디자인 패턴 }

모바일 플랫폼들의 스타일 가이드를 확인하자, 스타일 가이드에는 앱의 사용가능한 예제와 아이디어가 가득하며, 앱을 디자인할 때 모든 디자이너가 마주치게 되는 공통 문제점을 해결해 줄 수 있음

가이드에서는 많은 디자인 패턴이 폭넓게 다뤄지고 연구되며, 좋은 사용자 인터페이스를 만드는 방법의 예제와 피해야 하는 전형적인 에러의 목록을 제공한다.

But, 각각의 앱은 저마다 특색이 있고 사용자 그룹마다 디자인 솔루션에 서로 다르게 반응, 따라서 디자인에 대한 반복적인 테스트 진행을 추천함

디자인 가이드 준수가 인터페이스를 명확하고 자연스러운 방식으로 정리하는 데 도움을 주지만, 사용자가 선호하는 세부 사항을 찾는 것은 테스트와 학습을 통해 얻어내야 하는 과제임

---

모바일 디자인 행동 패턴

몇 가지 디자인 행동 패턴과 이를 사용하여 특정 프로세스를 최적화하거나 사용자 경험을 더욱 효과적으로 조정하는 방법

상황에 맞는 디자인 패턴 선택이 프로세스의 핵심 결정 요소 

{ 모바일 디자인 행동 패턴 - 점진적인 노출 }

앱의 기능성을 사용자의 전문적인 기술 수준에 맞게 조정하는 것, 경험이 적은 사용자들은 앱의 간소화 버전을 보고 고급 사용자들은 더 많고 복잡한 기능을 접하게 됨

모든 사용자는 자신의 니즈에 맞는 앱을 보게 만들어야 하고, 신규 사용자는 시간이 지나면서 전문가가 되고 새로운 기능을 발견하게 됨

{ 모바일 디자인 행동 패턴 - 느긋한 로그인 }

이전에는 콘텐츠에 접근하려면 등록을 필수적으로 요구하는 것이 일반적 But, 최근에는 앱과 접하는 처음 몇 초간의 순간을 중요하게 여기기 때문에 유연하게 대응 하기위해 익명의 방문자가 앱을 사용하고 콘텐츠 읽어 보기를 허용하고 꼭 필요한 경우에만 등록을 요구함

{ 사용자 등록을 필수화하기에 적절한 시점 }

1. 자신의 의지로 가입을 결정할 때

2. 이름과 사진이 함께 있는 리뷰를 작성할 때

3. "좋아요"와 같은 인터랙션을 할 때

4. 결제를 진행할 때

 

{ 모바일 디자인 행동 패턴 - 아래로 밀어서 리프레시하기 }

데스크톱에서 F5 버튼을 눌러 새로고침하듯, 사용자는 스크린을 아래 방향으로 잡아당김으로써 결과가 업데이트 되리라 예상

사용자 제스처에 시각적 피드백을 추가하려면 일종의 스피너를 포함시켜 스크린 상단이 늘어나는 동안에 사용자의 손가락 움직임을 따르게 함 / 일부 앱에서는 사용자가 아래로 내릴 때 길어지는 그림자를 추가하여 동일 효과를 내기 위해 화면 상단을 늘림

 

{ 모바일 디자인 행동 패턴 - 검색 추천 }

검색 시스템을 제공할 때, 사용자의 멘탈모델에 맞게 제대로 구조화하는 것이 중요함

사용자 입력을 줄이기 위해 기능적인 제안을 해야 한다.

공통 카테고리 or 일반적인 관심을 가질 결과를 제공해야 함

사용자가 (1) 동일한 컨텐츠를 몇 차례 검색한 앱에서 이전 검색이라는 제안을 제공할 수 있고, 사용자가 (2) 무언가 적기 시작하는 순간 ,단어제안과 결과를 우리가 가진 정보와 함께 제공할 수 있음

(3) 검색 결과가 없다면, 사용자가 새로운 검색 여정을 시작할 수 있도록 전환 옵션을 제공하는 것이 좋음

 

{ 모바일 디자인 행동 패턴 - 상호성 }

누군가에게 호의를 베풀면 상대방은 일반적으로 은혜를 갚아야 하는 마음 (상호성 효과)

플랫폼이 무언가 가치 있는 것을 준다는 느낌을 받으면 플랫폼과 더 인터랙션하고 싶은 느낌을 갖게 됨

사용자에게 가치 있는 무언가를 제공한다. 그러고 나서 인터랙션을 요구하면 사용자는 기꺼이 참여할 것 ex) 네이버 맛집 리뷰

---

{ 안드로이드와 ios 차이점 }

처음에는 각각의 플랫폼이 매우 다른 스타일을 가지고 있음, 최근에는 2개의 플랫폼 모두 최소한의 인터페이스를 사용하고 공통적이고 단순한 스타일로 진행 중

But, 각각의 플랫폼 스타일 가이드를 이해하는 것은 매우 중요함. 안드로이드에서는 머티리얼 디자인 가이드 애플에서는 ios 휴먼 인터페이스 가이드라인을 확인할 수 있음

다만, 앱의 시각적 아이덴티티와 스타일 가이드라인 적용 사이에서 균형을 찾아야만 함

 

{ 안드로이드와 ios 차이점 - 버튼 동작 }

2개의 시스템에서 동일한 앱의 차이점을 제대로 인식하는것은 어떤 순서로 경험을 모든 사용자에게 더 친숙하게 만드는지를 살펴보는 데에 도움을 줌

{ 안드로이드와 ios 차이점 - 스크린 밀도 기능}

디자인과 기능성은 다양한 해상도와 영상 비율에 맞춰 조정될 필요가 있음, 다양한 기기에서 최종 앱을 테스트하는 것은 솔루션의 품질을 보장하기 위해 필수적

ios의 경우, 애플 기기에서 앱을 테스트하면 되지만 / 안드로이드의 경우, 다양한 제조사에서 나오는 기기에서 테스트해야 됨 => 제조사는 그들의 목표 고객에 맞는 서로 다른 시장 기준에 따라 제품을 생산하고, 그들만의 독특한 니즈에 맞춰 운영체제를 변경할 수 있음

 

{ 안드로이드와 ios 차이점 - UI 구성요소 }

메뉴 : 

- ios는 스크린 하단에 앱 메뉴를 제공하는 방법이 특징 / 안드로이드는 메뉴를 하단과 상단 양쪽 모두에 탭 or 드로어 형태를 제공, 최근 트렌드에서는 다수의 앱이 안드로이드에서 하단 메뉴를 포함, 구글도 머티리얼 디자인 가이드라인에서 이러한 트렌드를 고려해옴

 

룩앤필 (look and feel) :

머티리얼 디자인 가이드는 그림자로 표시하는 가상 높이, 플로팅 액션버튼 혹은 중력 감지와 같은 관련된 움직임 요소가 특징

ios는 일반적으로 그림자 사용에 더 조심스러우며, 반투명한 효과와 평평한 스타일을 조합하여 메뉴와 대화상자에 사용함

 

아이콘 :

앱이 다양한 플랫폼에서 지원되는 경우, 각각의 플랫폼에 맞춰 아이콘과 그래픽 세트를 개발할지 아니면 하나의 시각 스타일로 모든 플랫폼을 대응할지를 결정할 필요가 있음

플랫폼별로 차이를 두지 않은 앱에서, 단순한 단색 아이콘 or 두꺼운 선과 함께 속이 빈 아이콘을 사용(다양한 스크린 사이즈와 해상도에서 잘 작동됨)

아이콘을 플랫폼에 맞춰 조정하는 앱에서, ios에서 더 얇은 아이콘을 주로 사용, 반전된 단색 아이콘으로 탭 바와 일부 기능에서 선택된 상태를 표시 / 안드로이드에서 단색과 굵은 테두리에 빈 아이콘 사용, 색상과 불투명도를 이용하여 다양한 상태 표시

> 플랫폼 자체의 기본 스타일과 당신의 브랜드 아이덴티티 사이에서 균형을 찾아야 함

폰트 :

앱에서 사용할 폰트 선택은 사용자 경험의 특징에 큰 영향을 미침, 가독성은 사용자 인터페이스의 모든 구성 요소 사이에 간격을 분배할 필요가 있기 때문에 더 복잡할 수 있음

폰트 선택은 브랜드 이미지에 영향을 받을 수 있으므로 기능성과 디자인 사이에서 균형을 찾을 필요가 있음

---

 {실용적으로 진행하기 }

디자인 솔루션을 구현할 기술을 직접 아는 것은 중요하기에, 적어도, 운영체제별로 하나의 기기를 가지고 있어야 함

다양한 솔루션 탐구하기 :

앱이 다양한 플랫폼에 맞춰 어떻게 조정 되는지를 연구하고 비교해야 함, 운영체제는 수 많은 디자인 패턴을 적용하고 복잡한 문제를 해결하기에 안드로이드와 ios 둘 다를 꼼꼼하게 분석해야 함

솔루션을 개발하는 목표에 따라, 자신의 솔루션을 분석하고 평가한다. 솔루션에 따라 대규모 사용자 그룹 or 소규모나 특정 그룹에 적합할 수 있음