확장(Expand)은 선으로만 되어 있는 개체를 면의 형태로 확장시키는 기능으로 일러스트에는 확장(Expand)과 모양확장(Expand Appearance)이 있는데, 확장은 일반적으로 연필, 펜, 그라데이션 등 일반적인 선을 면으로 만드는 도구이며, 모양확장은 브러시로 그린 선, 브러시를 적용한 오브젝트에 적용합니다.
선 두께가 10pt인 빨강색의 직사각형을 그린 후 익스팬드 도구를 적용시킨 예
1. 오브젝트(Object) - 확장(Expand)을 선택
2. 칠(Fill)과 선(Stroke)을 적용시킬지 여부를 묻는 체크박스가 나오게 됩니다. 칠과 선을 체크한 후 적용
CIE(국제조명위원회 International Commission on illumination)에서 규정한 색상값으로
사람 눈이 감지할 수 있는 색차와 색공간에서 수치로 표현한 색차를 거의 일치시킬 수 있는 색공간이다.
이전까지 디지털컬러에 대한 표시가 X,Y,Z라는 인간의 눈에 Red, Green, Blue 에 각각 유사한 색공간으로 표시하여 왔지만 이러한 색공간에서는 인간이 느끼는 두 색간의 색차와 계산된 수치로 나타내는 색차가 색상에 따라서 많은 차이를 보이는 반면 CIE Lab은 균일한 색 공간 좌표로써 눈과 매우 근사한 차이를 보여주기 때문에 현재 세계적으로 표준화되어 있는 색공간이다.
CIE Lab에서의 색좌표는 L* a* b* 로 표시하게 되며, L*은 명도, a*는 Red와 Green의 정도, b*는 Yellow 와 Blue의 정도를 나타내는 입체좌표이다. 즉 수학에서의 입체공간 X,Y,Z와 유사하다. 그러나 CIE Lab공간은 완전한 구의형태는 아니다.
Green 계통은 중심으로부터 거리가 짧고, Red계통은 중심으로부터 거리가 Green보다는 훨씬 멀다.
명도를 나타내는 수치 L*은 영어로는 Lightness로서 L*=100은 흰색(흰색이라기 보다는 광원의 색에 가깝다)
L*=0 은 검은색이다.
a*=80은 a*=50보다 더 붉게 보이며, b*=50은 b*=20보다 훨씬 Yellow가 많게보인다
이공간에서 색의 차이란 구에 가까운 색공간에서의 두색의 위치간의 입체적인 거리라고 할 수 있다. 입체적으로 거리가 서로 멀면 색차이가 많이 나는 것이고, 거리가 거의 차이가 없으면 동일한 색으로 인지된다.
이 색공간을 이용한 색 표시계를 (CIE1976) L*a*b* 색 표시계 또는 CIE LAB 색 표시계라 한다.
버튼은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤 Imperative control 이다. <About Face 4>에서 엘런 쿠퍼는 "컨트롤의 세계에서 가장 본질적인 요소는 버튼이다. 버튼은 수없이 많은 얼굴을 지녔지만 실상은 하나다. 버튼을 클릭하는 순간 이에 연결된 시행(동사)은 즉시 발효된다. " 라고 했다. 버튼의 가장 큰 특징은 사용자가 터치했을 때 즉각적으로 명령을 실행시키는 점이다.
버튼은 어포던스가 있어야 한다.
버튼은 다른 컨트롤과 달리 누르는 행위를 유발하는 특징(어포던스 Affordance)이 있다. 사용자가 텍스트 필드 같은 입력 컨트롤로 정보를 입력하고, 선택 컨트롤로 항목을 선택한 후 버튼을 누르면 입력 데이터가 전송되거나 실행 파일이 구독된다. 즉, 사용 상황이 크게 바뀐다. 바꾸어 말하면 사용 상황이 크게 바뀌는 경우에 버튼을 사용하며, 이 때문에 버튼을 시각적으로 강조하여 누르는 행위를 유도한다. 버튼은 양각 형태의 입체적 느낌으로 표현되어 왔다. 현재는 버튼의 시각적인 효과보다는 컬러와 레이블과 정교한 상호작용 디자인으로 버튼의 형태가 변경되었다.
버튼은 실제 세계의 아날로그 기기의 조작 버튼을 메타포로 적용됐다.
메타포가 적용되면 학습 없이도 UI 요소 UI Element의 기능과 개념을 이해하여 직관적으로 사용할 수 있다. 아이콘과 폴더 구조 같은 UI요소가 메타포를 사용한 예이다. 오디오, 세탁기, 텔레비전 리모컨의 물리적인 버튼을 가상의 모바일 화면에 동일하게 조작되도록 구현된다. 따라서 오디오의 재생 버튼을 누르면 음악이 재생되고, 리모컨의 채널번호를 누르면 채널이 변경되는 것처럼 스마트폰 화면의 버튼을 누르면 기능이 즉각적으로 실행된다. 사용자는 실생활에서 경험한 물리적 버튼을 눌러 기기를 조작해 본 경험을 기반으로 모바일 화면의 버튼을 탭한다.
사용자가 실생활에서 가장 많이 사용하는 버튼은 아마도 엘리베이터 버튼일 것이다. 1층에서 엘리베이터의 올라가기 버튼을 손가락으로 누르면 버튼은 안으로 들어가고 손을 떼면 다시 올라온다. 버튼에 있는 화살표에 불이 들어오고 엘리베이터 문 우측의 등이 켜진다. 사용자는 이런 피드백을 통해 버튼의 실행을 알 수 있다. 다른 층에 있던 엘리베이터는 1층으로 이동한다. 이때 엘리베이터 문 상단에 층 번호가 나타난다. 엘리베이터가 1층에 도착하면 등이 깜박인 후 문이 열린다. 엘리베이터에 탑승한 후 가고 싶은 층의 버튼을 누른다. 일정 시간이 지나면 엘리베이터 문이 닫힌다. 또는 문 닫기 버튼을 누르면 문이 닫힌다.
이 모든 과정은 여러 번 반복적으로 경험했기 때문에 익숙하고 직관적이다. 엘리베이터에 타는 사람은 의식적으로 내려가고 올라가는 버튼을 보고 어떤 버튼을 누르면 올라갈 수 있는지 논리적이고 분석적으로 생각하지 않는다. - 층번호 버튼의 배열이 왜 2열, 3열이고 낮은 층이 왼쪽이고 높은쪽이 오른쪽인지 닫기 버튼과 열기 버튼이 왜 층 번호 하단에 있고 닫기 버튼이 오른쪽에 있고, 열기 버튼이 왼쪽에 있는지 생각하지 않는다. - 단지 엘리베이터 문 옆의 화살표가 있는 버튼을 가려고 하는 층 번호 버튼을 습관적으로 또는 직관적으로 누를 뿐이다. 이 과정은 빠르고 끊김이 없다. 사용자는 모바일UI버튼도 도 엘리베이터 버튼과 동일하게 작동할 거라고 예상하고 무의식적으로 버튼을 탭한다. 즉 직관적으로 상호작용하기 위해 버튼을 누른다.
버튼은 콘텐츠와 구분되어야 한다.
버튼과 콘텐츠가 같이 있을 때 버튼을 보고 실행 가능함을 한눈에 알아볼 수 있어야 한다. 버튼에 사용한 색과 스타일을 콘텐츠에 사용하면 사용자는 혼란스러워 한다. 색과 대비를 통해 시각적으로 구분하여 사용자가 혼란스럽지 않게 해야 한다. 버튼의 양각 효과를 지나치게 하거나 페이지 곳곳에 배치되면 산만하게 보이거나 콘텐츠 읽기를 방해할 수 있다. 버튼은 비슷한 것 끼리 묶어서 구성하며, 그 위치는 사용자가 하려는 작업의 진행 순서를 고려하여 지정한다. 한 화면에 지나치게 많은 버튼은 노출하지 않는다. UI 컨트롤은 사용자가 콘텐츠를 이해하고 상호작용 할 수 있게 해주는 수단일 뿐이다. 콘텐츠가 우선 Content First 가 되면서 버튼과 같은 컨트롤은 사용자가 콘텐츠를 보는데 방해가 되지 않는 방향으로 그래픽 요소의 사용을 최소화 해야한다. UI 디자이너는 아이콘과 버튼 등 UI컨트롤에 집중하지 않고, 콘텐츠 자체(이미지, 비디오 및 텍스트)에 더 집중해 디자인해야 한다.
버튼은 전환율과 직접적으로 연관성이 있다.
사용자가 버튼을 누르지 않는다면 전환은 이루어지지 않는다. 여기서 전환이란 온라인 마케팅용어로 앱과 웹사이트를 방문한 사용자가 <구매하기><다운로드><구독하기>등 매출과 관련성이 높은 행위 action을 함을 의미한다. 전환율은 전환수를 방문자수로 나누어 계산한다. 보통 퍼센티지 단위를 쓴다. 전환율이 높다면 당연히 기업의 매출은 높아진다. 전환을 유도하는 페이지 landing page에서 사용되는 버튼을 CTA버튼 (Call to action button) 이라고 한다. 사용자가 특정 행동을 취하게 하려면 설득력 있는 CTA버튼을 디자인 하는 것이 중요하다.
