디자인 시각적 요소들.
디자이너의 시각 기준이
퍼포먼스를 결정한다.
디자인은 여러 시각적 요소의 구성으로 완성된다. 그 과정에서 구성의 기준과 표현에 따라 퍼포먼스가 달라진다. 시각적 요소들을 구성하는 과정에서 어떤 기준을 적용하고 표현하는지에 따라 퍼포먼스가 충분히 달라질 수 있다. 같은 프로젝트를 진행하더라도 디자이너마다 시안의 퍼포먼스가 다른 이유는 각자 적용하는 시각적 기준이 다르기 때문이다. 시각적 요소들의 기준 하나하나 모두 중요하지만, 시각적 요소들의 조화가 가장 중요하다. 시각적 요소들에 대한 기준 하나하나 고민하고 조화를 이루기 위해 노력하면 퍼포먼스가 더 좋아지지 않을까 생각해 본다.
Grid
형태를 완성하는 것은 그리드.
그리드는 오브젝트의 형태에 대한 기준을 세울 수 있고, 레이아웃의 기준도 세울 수도 있다. 그리드 시스템을 활용하는 이유는 기준을 세워 일관성을 유지하기 위함이다. 그 기준을 명확하게 명시하게 되면, 그것이 디자인 가이드의 한 부분이 된다. 그리드 시스템은 절대적인 것이 아닌, 디자이너의 자유도에 따라 충분히 변동할 수 있다. 여기서는 일반적이고 자주 사용하는 그리드를 명시한다.
PC
일반적으로 Web에서는 12 Columns를 자주 사용한다. 그 이유는 12 Columns는 6단, 3단, 2단으로 구성이 용이하기 때문이다.
12 Columns은 6단, 3단, 2단으로 구성이 용이하다.
20 Columns도 활용할 수 있다.Mobile
모바일에서는 6 Columns를 자주 사용한다. 그 이유는 1단. 2단, 3단으로 구성이 용이하기 때문이다. 모바일 환경에서는 사용성을 고려해 3단 이상으로 레이아웃을 구성하지 않는다.
6 Columns는 1단. 2단, 3단으로 구성이 용이하다.
6 Columns의 활용.Golden ratio
황금비는 기하학의 창시자 유클리드가 기원전 300년 무렵에 정의한 것으로 근삿값이 약 1.618이다. 하지만 미국 존스홉킨스대의 천문학자 마리오 리비오는 “대부분의 인공물과 관련해서 우리가 상식처럼 알고 있는 황금비율은 과학적인 근거가 없는 것”이라고 지적한다. Golden ratio는 절대적인 수치가 아닌 하나의 기준으로 활용하는 것이 좋다.
Golden ratio는 절대적인 수치가 아닌 하나의 기준으로 활용하는 것이 좋다.과거 사람들은 꼭 1.618이 아니라 1.5와 1.8 사이를 오갔다고 한다. 1860년 경 독일의 심리학자 구스타프 페히너는 여러 종류의 사각형 가운데 가장 보기 좋은 사각형을 찾는 실험을 진행했다. 가장 많은 사람들이 선택한 사각형의 가로 세로 비는 13:21, 약 1:1.615였다.
App Icon에 Golden ratio를 활용한 애플.
콘텐츠 영역에 Golden ratio를 활용한 페이스북.legibility
정보를 전달하는 텍스트는 가독성이 매우 중요하다. 그것이 핵심 정보일 경우 더 그렇다. 가독성을 높이기 위해서는 폰트의 크기, 명도 대비, 행간, 자간 등 여러 요소를 적절하게 조절하고 구성해야 한다. 각 요소들을 적절하게 조절하여, 잘 읽히는 구성을 찾아내는 것이 중요하다. 대부분 가장 일반적인 형태가 가독성이 좋다. 그 이유는 가장 익숙하기 때문이다.
가독성
글자의 크기, 정렬, 행간, 자간, 명도 대비를 통해 얼마나 쉽게 읽을 수 있는지를 나타내는 정도.
읽기 쉬운 것이 가독성이 좋은 것.인지 시점의 일관성이 없을 경우 잘 읽히지 않는다. 또 행간의 간격이 너무 넓어도 잘 읽히지 않는다. 인지 시점이 일관되고, 행간 또한 최적의 비율을 유지하면 훨씬 읽기 편하다.
디자이너의 판단 기준에 의해 잘 읽히고, 그렇지 않기도 한다.크기
전체 정보의 구성은 대부분 타이틀, 서브 타이틀, 그리고 디스크립션으로 구성된다. 정보를 구성할 때 폰트 크기에 차이를 두면 좀 더 읽기 수월하다. 폰트 비율에도 Golden ratio를 활용할 수 있다. 애플은 1:1.618의 비율은 아니지만 그것에 근사한 1:1.7의 비율을 활용해 정보를 구성한다.
애플의 사례.명도 대비
명도 대비는 배경색과 폰트 색의 대비를 말한다. 팀 버너스 리는 웹의 힘은 보편성에 있다고 정의한다. 그만큼 누구나 접근하고 사용하기 위해 최소한의 편의가 제공되어야 한다는 것이다. 중요한 정보는 웹 접근성을 고려해 명도 대비 4.5:1 이상을 권장한다. (색약자와 저시력자를 위한 기준 4.5:1)
웹 접근성 기준 4.5:1 권장.중요한 내용은 최소 4.5:1 이하를 벗어나지 않도록 폰트 시스템을 구성하는 것이 좋다.
중요한 정보를 표현하는 폰트 시스템은 명도 대비 최소 4.5:1 이상을 유지.Color
컬러를 활용하면 전체적인 톤 앤 매너를 의도할 수 있다. 따뜻한, 차가운, 고급스러운, 캐주얼 등 여러 가지 톤 앤 매너를 의도할 수 있다. 단, 톤 앤 매너의 정의를 바로 해야 한다. 명확한 이유 없이 동적인 이미지에 정적인 컬러를 사용하거나, 부드러운 이미지에 딱딱한 컬러를 사용하는 것은 별로 좋지 않다.
컬러 지표를 참고하는 것도 방법이다.
컬러 사용 예시.Image
커뮤니케이션 도구 중에 이미지만큼 쉽고 강력한 것도 없다. 이미지를 잘 활용하면 강력한 커뮤니케이션 도구가 되지만, 자칫 연관성 없는 이미지는 커뮤니케이션의 오류를 유발한다. 이미지는 그만큼 어떤 것을 보여줄지에 대한 부분과 표현 방법에 많은 고민이 있어야 한다. 나는 이미지 컨셉을 고민할 때 보통 키워드로 컨셉을 설정한다. 그리고 컨셉에 맞는 이미지 맵으로 목표 이미지를 설정해 그것에 점점 도달해 나가기 위해 노력한다.
비주얼 키워드 이미지 맵.이미지 키워드에 맞는 컨셉을 설정한다.
컨셉을 설정한다.최종 목표 이미지와 키워드를 설정하고, 그것에 도달하기 위해 수정하고 디벨롭한다.
목표 이미지와 키워드.
이미지 제작 과정.명확한 컨셉을 통해 비주얼 커뮤니케이션을 한다.
최종 비주얼 이미지.Icon
아이콘 사용 시 가장 중요한 것은 상징성이다. 상징성을 표현하기 위해 메타포와 단순화 작업이 중요하다. 아이콘 또한 커뮤니케이션 요소임을 잊지 말아야 한다. 아이콘을 사용할 때와 사용하지 말아야 할 때를 구별해야 한다. 시각적으로 허전함을 달래기 위해 사용하는 것은 별로 권하지 않는다. 상징성을 통해 커뮤니케이션이 가능할 때 사용하길 권한다. 아이콘의 메타포는 대부분 아날로그에서 아이디어를 얻는다.
office information icon.
icon 사용 예시.Button
버튼은 UI에서 사용자의 의지에 따라 서비스를 작동하게 하고, 정보를 제공한다. 그렇기 때문에 사용자에게 버튼의 의미와 선택 시 일어날 액션에 대해 명확하게 명시해야 한다.
버튼의 구조.
버튼의 종류.Visual Hierarchy
시각적 계층구조는 논리적인 연관성 또는 종속성 등이 시각적으로 적절하게 표현이 됐는지 여부가 중요하다. 디자이너는 콘텐츠 또는 서비스의 논리적 우선순위를 파악하고 디자인해야 한다.
그리드의 시각적 계층구조.
정보의 시각적 계층구조.
정보의 시각적 계층구조.
버튼의 시각적 계층구조.Optical Adjustment
디자인을 할 때 수치로 정확하게 표현해야 할 때와 눈으로 조정해야 할 때가 있다. 시각보정은 디자이너의 경험적 노하우이다. 수작업이 아닌 이상, 보통 컴퓨터로 디자인 작업을 한다. 컴퓨터는 조형의 크기와 정렬, 색의 대비를 디지털 정보로 인식한다. 그 과정에서 오류가 있을 수 있다. 보통 얼라인 기능으로 정렬을 맞추지만 시각적으로는 안 맞아 보이는 상황이 종종 발생한다. 또는 시각적으로 불안정해 보이는 경우도 발생한다. 하단 이미지는 네이버의 스플래시 화면이다. 네이버 로고가 정확히 상하 센터에 정렬되어 있지 않다.
네이버 스플래시 화면에서 로고는 조금 상단으로 위치해 있다.하단 이미지에서 좌측 이미지는 네이버 로고를 정확히 센터 정렬한 이미지다. 우측의 상단으로 보정한 이미지와 비교했을 때, 어느 쪽이 더 편하고 안정감 있는가? 우측 이미지가 좀 더 안정감 있지 않는가?
좌측은 센터 정렬, 우측은 상단으로 시각보정.컴퓨터는 조형의 크기와 간격, 색의 대비를 디지털 수치로 인식한다고 했다. 그 대표적인 사례가 하단의 이미지이다. 왼쪽은 컴퓨터의 얼라인 기능으로 정렬했을 때, 우측은 시각적으로 보정했을 때 이미지이다. 무조건 얼라인 기능으로 정렬을 맞추는 건 옳지 않다.
왼쪽은 얼리인 기능으로 정렬, 우측은 시각적으로 보정.사각형과 원은 동일한 사이즈라 하더라도 원이 좀 더 작아 보인다. 그럴 경우 10px 정도 크기를 조정해 준다.
동일한 수치라도 원은 사각형보다 작아 보인다.폰트는 같은 사이즈라도 볼드 적용 시 더 커 보인다. 그럴 경우 볼드를 2pt 정도 작게 조정하면 동일해 보인다.
볼드 적용 시 2pt 정도 작게 조정해준다.동일 컬러를 사용했지만 면적이 더 넓은 요소가 더 진해 보이고, 면적이 작은 요소는 더 연해 보인다. 그럴 경우 둘 중 하나의 명도를 낮추거나, 높이거나 조정해 준다.
동일 컬로도 면적에 따라 명도 조정이 필요하다.Call To Action(CTA)
UI에서 CTA는 매우 중요하다. CTA는 사용자를 최종 목적지로 향하게 해야 한다. 그렇기 위해서는 시각적으로 유도가 필요하다. 쉽게 말해 시각적 강조와 위치다. CTA가 상단에 위치하는 것을 본 적이 있는가? 전략적으로 상단에 위치하는 경우도 있지만, 대부분 전체 내용 중 하단에 위치한다.
아이폰의 전화 걸기 화면, 우버의 콜 화면.하단 이미지는 토스의 예시 화면이다. 만약 좌측 이미지처럼 '더치페이'와 '보내기'의 강조가 동일하면, 송금 화면에서 CTA는 없는 거나 마찬가지다. 좌측은 예시 화면이고, 토스의 실제 서비스 화면은 우측이다. 송금 화면에서는 '보내기'가 CTA다.
토스의 송금하기 화면 예시.