[19.06.25] 오픈 패스_5일차_GUI

그동안의 피드백

팀 포맷으로 class로 일하는 방식과 UX framework은 시각 디자인 위주로 일해왔던 분들에게는 불편한 경험이었을 것이다.

 

하지만 

'class에서 겪는 게 이익인지?'

'회사에서 겪는게 이익인지?'를 비교하면 왜 그렇게 배우고 일했는지에 대한 답을 얻을 수 있다. 

 

class에서 겪는 불편한 경험은 '배움과 성장'이지만, 회사에서 경험은 퇴사로 이어질 수 있다.

Listen and Speak

시각 중심으로 일해왔던 사람들은 '듣기'에 대해 미숙하다. 훈련이 되어 있지 않다. 

그 훈련이 되어 있지 않으면 자신의 의견이 반박당했을 시, 그 경험을 '불편하다'라고 느낀다. 

불편함에 익숙해지고 지금 껏 해왔던 방식의 관성에서 벗어나는 훈련이 필요하다.

 

Perspective

내가 중요하다고 느끼는 건 남들이 중요하다고 생각하지 않는다.

각자 목표를 생각하는 관점이 다르고, 그 중요도가 다르다.

 

왜 그 사람이 그 관점을 가지고 있고, 그 의견을 뱉게 되었는가에 대한 과정을 물어봐야 한다.

속에 있는 관점에 대한 질문을 해야 한다.

 

물론 회사에서는 각 부서 간에 쟁취해야 하는 바를 회의에서 가져가야 하기 때문에, 끝까지 토론을 하기도 한다.

교육에서는 그 경험까지 하지 않지만, 도리어 좋게 좋게 넘어가는 경향이 나타나기도 한다.

 

Process - Conflict

충돌이 없을 때

1) 다 똑같은 생각만 하고 있는 사람만 있는 경우

2) 좋은게 좋은 거지 뭐 라는 경향

 

1번은 다양한 관점을 수용하지 못하고, 문제를 여러 관점으로 보지 못하고 있기 때문에 더 위험하다.

 

Tool

가장 많이 사용되는 협업 툴 : G suite 

To do : Trello

 

---

Design Foundation / Concept

The bridge between UX and GUI

 

1. GUI / UI / UX 

User Experience를 파악하기 위한 단계를 밟아왔다면 다영님과는 Interface(계면)에 대한 학습

 

2. Interface의 종류

1. CLI (Command Line Interface)

2. PUI (Physical User Interface)

3. AUI (Auditory User Interface) like VUI (Voice User Interface)

4. NUI (Natural User Interface) 

5. GUI (Graphical Usre Interface) 

 

3. 모바일 GUI의 특성

 

3-1. Mobile Usability

다영님이 삼성전자 재직 시 가장 많이 들은 질문 "동적 사용성 테스트 해봤니?"

 

3-2. 동적 사용성

모바일은 햇빛이 강할 때도, 어두울 때 시간에 상관없이 사용하는 기기

대부분의 경우 한 손으로 사용하는 기기

 

3-2-1. Context

서비스에 따라 다르겠지만, 특정 서비스를 이용하는 사용자의 Context를 고려해서 모바일을 설계하자는 접근

예를 들어 wifi가 작동이 안되서 앱을 사용할 수 없는 문제를 겪는 다면

여행 전 서비스를 제공하는 앱에게는 크게 문제 없겠지만, 여행 중 서비스를 제공하는 앱은 문제가 된다.

즉, 그 과정에 따라 문제라고 여기는 context가 달라진다.

 

3-2-2. Visibility

모바일에서는 출력물과 다르게 쨍한 대비 / 큼지막한 폰트 크기 / 컴포넌트의 크기가 다르게 디자인된다.

 

3-3. One - Handed, Touch 사용성

요즘 추세 모바일 사이즈가 증가함에 따라 왼손은 지지 역할로 거들 뿐, 오른손은 두 가지 손가락을 중심으로 사용한다. 

 

* 웹에서 Dialogs 취소 / 확인 버튼와 앱에서 취소 / 확인 버튼의 위치가 다르다.

 

버튼을 눌렀을 때 버튼의 condition feedback을 확인할 수 있을 정도의 크기로 디자인해야 한다.

 

3-4. OS

안드로이드

History Back 단계 별로 줄어드는 Back

Hierarchy Back 

---

뒤로가기 기능

안드 : PUI

iOS : GUI

 

iOS자리에 안드는 햄버거 (메인 네비게이션 바), iOS는 대안으로 하단 네비게이션 바

---

Segmented Control Funtion 

---

Basic Component 

Z공간에 대한 해석이 OS마다 다르다.

안드로이드는 쉐도우 / iOS는 블러로 그 해석을 달리 했다.

---

Design Language 

서비스 규모가 커지고, 협업해야 할 사람들이 많아질 수록 Consistency & Standard가 중요하다.

 

Case Study

1. Snow White (Apple, 1984-1990) 

- 애플의 7개 부서를 이끄는 백설 공주라는 의미로 Snow White라고 지었다. 

- 최초의 업계 기준

 

2. Metro, Modern UI (Microsoft, 2000 - )

- UX Skima를 고려하지 못해 비판을 많이 받은 window 8 버전이 있음 

 

3. 스마트폰의 등장 (스큐어모피즘, Skeuomorphism)

 

4. Flat Design의 도래 (Apple, iOS 6) 

- 스큐어모피즘의 따듯함과 달리 Flat Design은 차가운 느낌으로 변화

- 그래서 그 따듯함을 전달하기 위해 헬베티카 ultra light, Blur 등을 적용

- 하지만 시인성 문제에 대한 비판을 받음

 

5. iOS 10으로 업데이트 (2016)

- Big, Bold, Beautiful 슬로건을 바탕으로 폰트를 San Fransisco로 변경 

- 전체 블러를 적용하지 않고 배경색을 추출해서 깔고, 투명도를 낮추는 방향으로 블러 효과를 적용

 

6. Human Interface Guidelines (Apple, 1985 - ) 

 

7. 안드로이드

- iOS를 따라잡기 위한 방법으로 customize를 특징으로 내세움

- 롤리팝 OS가 디자인 언어 등장으로 디자이너에게 중요한 의미를 지닌다.

- 4년 주기로 업데이트

- 2015년 Material Design Guidelines의 등장

- 구체적인 가이드라인이 정해져 있기 때문에 브랜드 아이덴티티를 표현하기 위해 Interaction을 활용하기 시작했다.

대표적인 예시로 에어비앤비

- 그 한계를 극복하기 위해 Material Design 2.0이 등장했다.

기본 규칙을 지키되, 테마를 바꿀 수 있는 가이드 (adaptable design이라는 키워드를 강조) 

 

8. Window (Fluent Design System, 2007 - )

- 현실공간에서 작동하는 언어

- AR / VR 시대에서 적용 가능한 언어로써 그 의미가 중요해지고 있다.

- Zero UI 역시 마찬가지로 적용

- Flat Design + Reality가 융합되는 디자인 시대로 가고 있다고 보여진다. 그래서 포토샵을 다시 가르치려고 하고 있다.

* design.facebook.com - 

 

---

Framework Sketch 에서 키워드를 뽑고, 그 키워드를 바탕으로 Design Concept을 도출! 

목표는 작게나마 Trpstore의 디자인 시스템을 만들기! :) 

 

Concept Keyword

1. Service Keyword

기능에서 출발한다.

기능 우선 순위를 매기거나, 우리 서비스의 컨셉에 맞는 기능을 추출하는 작업을 한다

 

1-1. Service Key Function

Framework sketch 때 경험 요소 키워드를 서비스 컨셉 키워드로 정리한다

스토리보드 중 필요한 기능들을 그 하위 키워드에 적어서 정리한다.

그리고 그 키워드를 한 번더 묶어서 큰 키워드로 정리한다.(ex. 신뢰성, 전문성, 확장성 같은 큰 키워드로 떨어진다)

*명확하지 않은 키워드는 지양해야 하므로, 이 키워드를 시각화 컨셉 키워드로 바꾸는 작업을 한다. 스케치해서도 표현이 가능하다.

ex. 신뢰성 -> 파란색, 산세리프 폰트 등의 '직관적인' 키워드로 변경

 

2. Visual Concept Keyword

2-1. Mood Board 만들기

시각 컨셉 키워드를 잡는 과정에서 사용한다.

무드보드를 선택할 떄, 일단 결이 안맞는다 싶은 것부터 제거하는 방식으로 좁혀나갔다.

2-2. 벤치마킹

2-3. 컬러 / 폰트 리서치

 

*숙제

시각화 키워드를 바탕으로 조원들끼리 키워드를 맡아서 무드보드 만들어 오기! :) 

추린 키워드들을 IA에 붙여오기 (ex. '신뢰가 가는' 키워드를 결제 화면에 적용하자!)

 

참고

99 descriptive design words you should know - 99designs

 

---

 

배운점 

서비스 컨셉 키워드는 7개 정도가 적당하고, 그 다음에 각 키워드 별로 시각 키워드를 뽑아 낸다. 

ex. 편리한 -> 폰트나 컬러 측면에서 시인성, glance 가 나온다. 이미지 측면에서는 직선적인 느낌으로 well_layered, grid 같은 키워드가 나온다. 그렇게 마인드맵으로 퍼트려 나가면서, 이미지 리서치할 정도의 키워드로 한번 더 묶는다. 

 

비주얼 컨셉 키워드를 적을 때, 명사나 기능과 관련된 키워드는 피한다. 꼭 형용사로 적도록 한다.

키워드들은 검색이 안나온다. 찾으려면 그 형용사를 타고 가면서 무드보드를 찾다보면, 키워드를 파악하게 된다.