모바일 UI/UX디자인 [UI 디자인 패턴]

디자인 패턴이란?

건축가 크리스토퍼 알렉산더가 제안한 방법

여러 건축물들을 관찰하다 보니 발견되는 공통적인 요소들을 패턴으로 규정한 후, 필요에 따라 이를 조합하여 만드는 방식을 제안 

소프트웨어 분야에서 디자인 패턴

소프트웨어 분야에서 디자인 패턴이 각광받기 시작하면서 이를 소프트웨어 개발 방법에서 사용했다.

소프트웨어 분야에서는 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 활용한다는 의미로 쓰였다. 

특정한 상황에서 구조적인 문제를 해결할 수 있는 방식을 설명해준다.

UI디자인 분야에서의 디자인 패턴

UI디자인은 화면에 콘텐츠 배치, 레이아웃 등을 디자인하는 분야인데 디자인 패턴이 대두되었던 이유는?

UI디자인 또한 디자이너가 원하는 방식대로 디자인할 수 없으며, 해당 앱/웹을 사용하는 사용자가 쉽게 이해하고 사용할 수 있는 형태로 디자인 해야하기 때문이다. 또한 모바일 앱은 웹사이트보다 스크린 사이즈가 작고, 하나의 화면에 적은 개수의 기능만을 배치해야하기 때문에 디자인 가이드가 강경한 편이다. 

- 어떠한 목적/기능을 위한 레이아웃을 디자인 함에 있어서

- 콘텐츠, 버튼, 컴포넌트 등의 배치에 대한 디자인 패턴을 의미

안티 디자인 패턴 : 사용자에게 부정적인 경험을 제공하므로 안티 패턴이라 명명한다. 이는 오히려 피해야 할 부분이며,자신이 '안티 패턴'으로 디자인하고 있지는 않은지 참조해야한다.
안티 디자인 패턴의 예)
구글링
[디자인 패턴: 재사용 가능한 객체지향 소프트웨어의 요소] 최초의 책 

모바일 앱 UI 디자인 패턴

1)목적/기능을 위한 레이아웃

2)요소의 배치 = UI디자인 패턴 

EX) 로그인: 로그인에 필수적인 아이디 입력, 패스워드 입력, 회원가입 버튼 등의 요소 배치

EX) 같은 타임라인이지만 목적과 의도에 따라 UI가 다르다 : facebook / snapguide / behance / vine / tumblr

3)주의사항 

- UI디자인 패턴은 항상 변화하므로, 항상 최신 버전에서 확인한다.

- UI디자인 패턴에는 모션/인터랙션도 포함되므로, 스마트폰에서 확인하는게 좋다. 버튼을 눌렀을 때의 동작 피드백, 색의 변화, 사운드의 재생 등 다양한 요소를 확인할 수 있기 때문이다.

- 운영체제마다 UI디자인과 GUI디자인은 다르기때문에 해당 운영체제의 스마트폰 앱으로 확인해야한다. 

EX) 안드로이드 버전 VS IOS버전 

UI 디자인 패턴 참조 사이트

서치시, 내가 찾는 카테고리 분류가 있는지 확인한다.

구글링 : UI DESIGN PATTERN

http://inspired-ui.com/

http://mobile-patterns.com/ 

http://patterns.com/

http://androidpatterns.com/

http://developer.android.com/

http://developer.apple.com/

모바일 앱 UI디자인 패턴 스케치 

- 바로 PPT문서로 정리하는 것보다는, 스케치로 구체화 하는것을 권장

- 종이에 연필로 그리고, 팀원들과 협의하고 수정해서 확정하는 것이 좋다.

- 스케치 템플릿을 활용해서 UI디자인을 스케치 할 수 있다.

- 스케치시, 정밀하게 표현하는 것보다 와이어프레임 방식으로 스케치하면 쉽고 빠르다.

- 사진은 네모박스에 X자 표시, 이미지가 들어가는 곳은 개략적인 아이콘 방식으로 표현

- 스케치 템플릿을 활용해서 UI-lxD디자인을 스케치할 수 있다.

UI플로우라 불리는 화면 간의 연결(네비게이션) 표현을 할 수 있다. 

- 필요할 경우, 동일한 목적의 페이지를 여러 개 디자인하고 비교/평가할 수 있다.

운영체제별 앱 UI(레이아웃)의 구조

- 기본적으로 상단과 하단의 바는 운영체제별로 고유의 네비게이션을 표현한다.

- 앱 개발 시에는 멀티 운영체제를 대상으로 하므로, 운영체제별 분리 방식 혹은 중립적 방식의 UI 디자인을 선택한다.

- 앱 개발시 운영체제별 분리 방식을 선택할 수 있다. (EX.예전 포스퀘어) 그러나 비용, 관리 어려움 등의 문제로 최근에는 중립방식의 디자인을 선호한다. 

- 운영체제별로 세부적이고 구체적인 디자인 지침이 필요하다. 

- 공통 요소, 차이 요소 등을 구체적으로 이해하여 효과적 UI디자인이 이루어져야 한다.