방콕 디자인 위크에 포스터를 제출해야 하기 때문에 파고다카트에 대한 포스터를 디자인해 봅시다.
To submit a poster for the Bangkok design week, I should design a poster that introduces about Pagoda Cart.
먼저 배경색을 지정해줄까요? 빨간색 카트였으니, 비슷하게 붉은 계열의 그라디언트 배경을 깔아줍니다.
First, choose the background color. The main color of the cart is red, so I chose a red gradient background color.
이제 이 배경을 카트와 함께 합쳐주면 포스터에 들어갈 이미지 완성!
Next, just put a cart on the background. And then the image for a poster is completed!
완성된 실제 포스터 디자인은 방콕 디자인 위크에 가서 포스팅하는 걸로! 아직은 비밀이에요 :)히히
I will show the completed poster at the Bangkok Design Week!! It is a secret :) HaHa
파고다 카트의 2D 프로토 타입을 만들어봅시당!!
Let's make a 2D prototype of Pagoda Cart!!
먼저 지난번에 3D 프로토타입을 캡쳐해서 라인을 따줬어요.
First, I drew lines on the captured image of a 3D prototype.
다음으로 색을 입혀주고, 그림자 효과도 줍니다.
메인 컬러는 태국하면 생각나는 색상인 빨강색을 선택해줍니다!
그라데이션 컬러를 이용했어요.
방콕의 카트이므로 Brand 이름은 Bangkart~~~
Next, add colors and drop shadow.
I chose RED as the main color because Thailand reminds me of red color.
I used a gradient color not to look so flat.
The name of the cart brand is 'Bangkart' which is a combination of Bangkok and Cart.
파고다 카트는 위와 같이 생겼어요. 탑의 지붕 부분에 상품을 진열할 수 있죠. 뒤쪽에 상품이 기댈 수 있는 벽이 있는데요, 이 벽 덕분에 상품이 좀 더 돋보이고 안정적으로 상품을 진열할 수 있습니다. 손잡이는 양쪽으로 달려있어서 어느쪽으로도 이동할 수 있죠.
Pagoda Cart looks like this. Goods can be displayed on the roof part. Goods can lean on the wall which is increasing the visibility of goods and the stability of the display. There are handles at both sides so a vendor can move any direction.
이렇게 지붕 부분을 잡고 앞으로 끌어당기면 서랍이 열리는데요, 서랍안에는 재고가 들어있어요. 서랍은 양쪽으로 열린답니다!
As you can see, if you grab the roof part and pull it, a drawer will be opened. In the drawer, goods are stored. Every floor is made with two drawers so they can be opened in both directions.
2D 디자인을 마쳤으니 이제 남은 건 포스터 작업이네요. 처음으로 모빌리티를 디자인해봤는데요, 참 매력적이면서도 어려운 거 같아요ㅎㅎ
2D design ends~~~So next is poster design. This is my first time that I design a mobility, and it is really attractive but difficult I think.
파고다 카트 3D 모델링한 결과물이다. 사용한 툴은 오토데스트 알리아스이다. 나는 3D 모델링은 못 하는데 같이 수업듣는 분께서 도와주셔서 만들 수 있었다 :) 다시 한번 감사합니다!
This is the 3D models of Pagoda Cart. It is designed by Autodesk Alias. I am bad at 3D modeling, but thanks to my friend who took the class together, this awesome model was designed! Thank you one more time:)
많은 것이 다르겠지만 나는 무엇보다도 BI, 그 중에서도 디스플레이가 가장 많이 차이가 난다고 생각한다.
간단하게 편의점과 슈퍼를 비교해서 예시를 들어보자. 편의점은 굉장히 진열이 깔끔하다. 답은 매대에 있다. 높이가 낮은 매대를 사용함으로써 한 상품당 하나씩만 대표적으로 보일 수 있게 한다. (물론 행과 열을 딱딱 맞춰서 진열하는 것도 당연히 한 몫한다.) 슈퍼에서 사용하는 매대는 높이가 높아서 뒤쪽의 재고까지도 보이기 때문에 상대적으로 깔끔하게 진열되었다는 생각이 들지 않는다.
이러한 예는 올리브영과 같은 드럭스토어에서도 찾아볼 수 있다. 화장품 매대에서 대부분의 매장은 하나의 샘플을 앞에 진열한다. 이후 고객이 상품을 원하면 진열대의 서랍을 열어서 서랍 안에 있는 재고를 꺼내어 손님에게 드리는 시스템이다.
이처럼 하나의 샘플만을 앞에 진열하는 건 다음과 같은 장점이 있다.
첫째, 테스터와 실제 판매상품을 분리한다.
화장품과 같이 테스터가 필요한 산업군에게 이러한 진열대는 거의 필수적이라고 할 수 있다.
둘째, 재고상품이 감춰지므로 더 깔끔하게 진열할 수 있다. 재고상품을 서랍에 넣어둠으로써 깔끔하고, 사람들이 각 아이템에 좀 더 집중할 수 있게 한다.
셋째, BI를 보여줄 공간을 제공한다.
다음은 올리브영의 매대이다. 보다시피 각 브랜드는 진열대에 각 상품의 특징을 써넣기도 하고, 브랜드의 아이덴티티를 보여줄 수 있는 이미지와 설명을 보여주기도 한다.
태국의 노점상 관련 영상을 보았을 때, 이들에게 필요한 것은 카트안에 무작정 꽉꽉 채워넣은 상품들을 전략적으로 진열하게 해줄 매대라고 판단했다. 카트는 그 특성상 위쪽이 비어있다. 즉, 가로축이 부족하다. 상품을 진열할 가로축을 추가하는 것이 필요하다.
구글이 2014년에 머티리얼 디자인을 발표했다. 구글이 GUI룰을 정한 이후로 색상을 이용한 계층화, 활성화 표시가 명확해졌다. 많은 웹 앱 디자인이 머티리얼 디자인을 적용했고 이러한 머티리얼 디자인 덕분에 사용자들은 훨씬 더 편리하고 균등하며 효율적인 UX를 경험하고 있다.
색상은 디자인을 할 때 굉장히 중요한 요소이다. 구글 머티리얼 디자인 가이드에서는 디자이너들에게 프라이머리 컬러와 세컨드 컬러를 정할 것을 권고한다. (물론 프라이머리 컬러로만 디자인하는 경우도 있다. ) 그리고 정한 컬러에서 베리에이션을 줌으로써 디자인을 일관적이면서도 풍성하게 할 수 있다.
프라이머리 컬러
(프라이머리 컬러로만 디자인한 경우이다.)
(1)브랜드 아이덴티티
프라이머리 컬러는 브랜드의 아이덴티티 BI를 나타낼 수 있는 색이다. 네이버의 초록색, 유튜브의 빨간색, 티몬의 주황색이 바로 각 브랜드의 프라이머리 컬러이다. 따라서 구글은 이러한 프라이머리 컬러는 탑바(앱바, GNB)에 적용해 브랜드의 아이덴티티를 명확히 표현할 것을 권고한다.
(2)색상표
구글의 머티리얼 디자인 색상표에서 프라이머리 컬러는 500 이상의 컬러, 쨍한 컬러를 사용하도록 권고하고 있다. 프라이머리 컬러를 정하면 그 컬러칩 안에서 명도, 채도 값을 변화시켜 베리에이션을 줄 수 있다.
(3)트렌드
2018년 트렌드 중 하나였던 그라디언트 디자인은 프라이머리 컬러에도 적용되었다. 그라디언트 컬러가 프라이머리 컬러가 될 수 있다.
(4)계층
프라이머리 컬러는 액센트 컬러보다 상위 계층에 속한다.
(5)비활성 세컨더리 컬러를 지정했을 경우, 프라이머리 컬러는 인터렉션이 없는 곳에 적용된다. 즉 프라이머리 컬러가 적용된 요소는 언터쳐블해야 한다.
(6)주 사용처
앱바(탑바, GNB), 푸터, 프로그레스 인디케이터, 로고, 커서, 순간 미리보기나 자동완성의 하이라이트, 체크박스 on 상태, 페이지네이션 등
세컨더리 컬러
프라이머리 컬러와 세컨더리 컬러를 지정해서 디자인한 경우이다.
(1)인터랙션
세컨더리 컬러는 인터랙션을 나타내는 색이라는 것이 가장 큰 특징이다. 터쳐블한 버튼, 텍스트, FAB에는 세컨더리 컬러를 적용한다.
(2)색상표
구글의 머티리얼 디자인 색상표에서 세컨더리 컬러 또한 500 이상의 컬러, 쨍한 컬러를 사용하도록 권고하고 있다. 프라이머리 컬러와 같은 명도와 채도값을 가진 컬러를 골라야 세련된 디자인을 할 수 있다.
이 보일러 조작기는 현재 내가 사용중인 보일러 조작기이다. 처음부터 나를 굉장히 당황스럽게 만들었고, 매뉴얼을 찾아봤지만 아직도 항상 헷갈리고 어렵다. 왜 이 보일러 조작기가 나쁜 디자인인가? 개념 모형과 가시성에 집중해서 살펴보도록 하겠다.
This Boiler Controller is what I am using in my house. At first, I was really embarrassed, and still now it is really confusing and difficult to use even though I had searched and read a manual. Why this boiler controller is a bad design? Let find out the reasons with concepts of 'conceptual model' and 'visibility'.
Conceptual Model #1
개념 모형(conceptual model)이란 어떤 시스템이 실제로 어떻게 작동될지에 대해서 어떤 사용자가 예상하는 사고 과정의 설명이다(2017, 나건, 조성주, 이경아). 디자이너의 개념 모형과 사용자의 개념 모형이 일치하면 그것이 좋은 디자인이다. 혹은, 시스템 이미지라는 매개를 통해 그 둘의 개념 모형이 쉽게 일치하게 된다면 좋은 디자인이라고 할 수 있다.
해당 보일러 조작기의 좌측 상단의 실내 온도 부분에는 사실 두 가지 기능이 혼재되어 있다.
(1) 실내온도의 온도를 조작하는 다이얼 기능과 (2) 오류 발생 시 어떤 오류가 발생했는지 알려주는 기능이다.
사진을 보면 다이얼이 30도에 맞춰져 있다. 30도라는 글자 위에는 기름이라는 글자와 함께 LED등이 있는 걸 볼 수 있다. 그런데 30도라는 글자와 기름LED는 전혀 관계가 없다. 즉, 다이얼을 돌린다고 해도 불빛이 밝혀지지 않는다.
정상적으로 작동하고 있다면 불빛은 다이얼 밑의 [운전]과 다이얼 맨 좌측의 [급수]에 밝혀진다. 정상적으로 작동하지 않는다면 보일러의 우측 하단에 있는 [재가동]에 불이 밝혀지고, 좌측 상단의 실내온도 부분에 있는 LED 등 중 [과열], [차단], [기름], [가스] 중 하나에 불이 밝혀진다.
나는 처음에 실내온도 부분에 왜 저런 과열, 차단, 기름, 가스가 있는지 이해하지 못했다. 그리고 다이얼과 저 메뉴들간에 무슨 관계가 있는지 혼란스러웠다.
또한 해당 보일러의 좌측 중간에 있는 예약 기능도 디자이너의 개념 모형과 사용자의 개념 모형 사이에 차이가 존재한다. 사용자는 이 예약 기능을 보고 다음과 같이 생각할 수 있다.
(1) n 시간 후 보일러가 작동하도록 예약된다.
(2) n 시간 후 보일러가 꺼지도록 예약된다.
전에 매뉴얼을 봤었는데 지금 다시 생각해보려해도 기억이 나지 않는다. 처음에는 한동안 보일러를 가지고 둘 중 무엇인지 알기 위해 실험해봤던 기억이 있다. (심지어 보일러가 너무 늦게 작동해서 실험에 실패했다ㅋㅋ)
이처럼 해당 보일러는 사용자로 하여금 제대로된 사용법을 찾게 해주는 Guessability가 부족하다. 그 이유를 좀 더 정리하자면 다음과 같다.
Visibility #2
시각적으로 정보를 제대로 전달하지 못했다. 좌측 상단에 [실내 온도]라고 쓰여져 있으므로 사용자들은 해당 다이얼과 그 주변 인터페이스가 실내 온도와 관련되어 있을 거라고 생각한다. 하지만 실제로는 실내온도 뿐만 아니라 오작동의 원인까지 함께 보여주고 있었다.
시각적으로 현재의 상태(운전중)를 나타내주는 LED 등은 있었지만, 배치가 잘못되어서 혼란을 준 경우라고 할 수 있다.
예약 기능도 마찬가지로 3시간 후 꺼짐인지, 3시간 후 켜짐인지 알려주면 좋았을 것이다. 글로 적을 수도 있고, 예약 기능을 On 했을 때 LED로 나타내줄 수도 있을 거 같다.
예시.
(1) n 시간 후 보일러가 작동하도록 예약되는 경우
예약 다이얼을 돌린다 -> [운전]LED가 점멸되고 [예약]LED가 켜진다. -> n 시간 후 운전 LED가 켜지고 예약 LED 는 점멸된다.
(2) n 시간 후 보일러가 꺼지도록 예약된다.
예약 다이얼을 돌린다 -> [운전]LED는 깜빡인 후 다시 켜지고 [예약]LED도 켜진다. -> n 시간 후 운전 LED와 예약 LED 는 점멸된다.
Feedback #1
지금까지 가시성을 살펴보았다면, 피드백을 한 번 살펴보도록 하겠다. 해당 보일러는 오작동 시 재가동 버튼이 깜빡거리고 좌측 상단에 위치한 5개의 LED 중 하나가 깜빡거리면서 오작동의 원인을 알려준다. 오작동된다는 상황과 원인을 알려준다는 점에서는 피드백을 주고 있다고 할 수 있다.
하지만, 실제 사용자인 나는 이것이 부족하다고 생각했다. 나는 다른 방에 있을 때 오작동된 사실을 전혀 알지 못한다. 왜냐하면 소리로 알려주지 않기 때문이다. 보일러는 오작동 시 생명과도 직결될 수 있기 때문에 소리로 피드백을 주어야한다고 생각한다.
두번째로 예약버튼에는 피드백이 없다는 것 또한 이 보일러 조작기의 단점이다. 예약 다이얼 위에도 LED 등이 있어서 제대로 예약이 된 건지 알려주는 피드백이 필요하다.
가시성(Visibility)이란 사용자가 중요한 정보와 행동의 결과 등을 쉽게 파악할 수 있도록 가시적이고 명백하게 나타내주는 것을 말한다(2017, 나건, 조성주, 이경아). 이러한 가시성의 예를 살펴보도록 하겠다.
#1 - 지하철 디스플레이
지하철 역에 디스플레이가 존재해서 어느 방면으로 가는 열차인지 알려주고 있다.
하지만 열차에 탄 사람은 어느 방면으로 가는 열차인지, 어느 역에 도착했는지 잘 알기 어렵다.
열차 창밖을 보아도 어느 역인지 표지판이 보이지 않는 경우가 많다.
1호선의 경우 열차 중앙에만 현재 위치, 어느 방면 지하철인지 디스플레이를 설치해놓았다.
하지만 이러한 디스플레이는 사람이 붐비거나 의자에 앉아있으면 보기 어렵다.
또한, 현재 도착한 역을 확인하고 싶은데 다른 정보가 출력되고 있을 경우,
원하는 정보를 실시간으로 확인할 수 없다.
이는 승차한 승객이 현재 도착한 역에 대해 피드백을 주어야하는 디스플레이의 피드백 역할이 좋지 않다라고 분석할 수 있다.
#2 - 자판기 디스플레이
1. 이 자판기는 동전투입구 옆에 위치한 디스플레이를 디자인함으로써 [판매중]이라고 현재 상태를 알려주고 있다.
2. 또한 카드리더기의 LED 가 [대기]상태에서 빛나고 있다. 이는 카드 리더기를 사용할 수 있다는 것을 사용자에게 보여주고 있는 가시성이다.
3. 제품을 선택하는 버튼에 파란색 불빛이 들어온다면 [재고 있음], 빨간색 불빛이나 X표시가 들어온다면 [재고 없음] 을 의미한다.
만약 자판기에 이런 디자인 요소가 없었다면 어땠을까? 자판기가 제대로 작동하고 있는지 우리는 알지 못했을 것이다. 돈을 투입하고 제품을 고를 때 재고가 없는 제품을 선택하고는 왜 작동하지 않는지 어리둥절했을 수도 있다.
이러한 자판기의 가시성은 사용자에게 편리함을 준다 :)
#3 - 화장실 문
이 사진은 공공화장실 문의 사진이다. 공공 화장실은 타인과 함께 쓰는 화장실이므로, 현재 다른 사람이 사용 중인지 인식하는 것이 중요하다. 위의 손잡이는 화장실을 사용중인 내부의 사용자가 손잡이를 돌리면 화장실문 밖에서 [비었음](파랑) 에서 [사용중](빨강)으로 바뀌게 된다. 이렇게 가시성을 디자인할 때 고려함으로써 사용자가 노크를 하지 않고도 해당 칸이 비었는지, 누군가가 사용중인지 알 수 있게 디자인한 사례이다.