틴트와 아이콘
신입에게 알려주는 스케치, 틴트와 아이콘
Sketch 64에서 만든 내용입니다.
모바일보다 데스크톱에서 보는 게 좋습니다.
Tints,
왜 생겼을까?
스케치가 몇 주 전에 64로 업데이트되면서 간단한 기능이 하나 생겼습니다.
Tint라는 기능인데, 투명도를 기준으로 색을 오버라이드 할 수 있는 기능입니다.
그룹이나 심벌에만 적용할 수 있습니다.
매우 간단한 기능입니다.
스케치에서는 아이콘의 상태 변경 등에 사용해보라고 하고 있습니다.
이번에는 틴트를 통해서 아이콘에 대한 이야기를 하려고 합니다.
아이콘의
흐름과 구분
지금은 플랫 하거나 심플한 아이콘 혹은 모던한 아이콘을 씁니다. 가장 간단한 디자인 요소를 추출해서 그 요소들로 아이콘을 구성합니다. 현재의 경우 아이콘은 선과 면, 포인트로 구성되어 있습니다.
잠깐,
아이콘은 왜 만들어야 할까요?
디자이너를 크게 두 종류로 나누면, 아이콘을 직접 그리는 디자이너와 그리지 않는 디자이너로 나눌 수 있습니다. 어떤 사람은 아이콘은 주니어 혹은 신입이 해야 하는 일이라고 생각하고, 어떤 사람들은 브랜드의 연장선으로 보고, 어떤 사람은 UI의 기본적인 업무로 봅니다.
아이콘은 3가지로 분류할 수 있습니다.
Object: 대상을 그대로 아이콘으로 제작
Function or Operaction: 기능이나 동작을 대상으로 아이콘을 제작
Metaphor or Symbol: 기능을 특정한 오브젝트로 연상시키거나 상징적으로 표현하는 아이콘을 제작
아이콘의 제작 원칙도 3가지로 말하면, 일관성, 구체성, 간결성입니다.
아이콘은 Icon은 그리스어로 이콘이라고 하는데, 이콘은 종교적인 목적으로 제작된 예술품을 말합니다. 이 예술품의 목적은 눈으로 보이지 않는 천상의 세계 혹은 종교적인 심상을 불러일으키는 역할을 합니다.
UI 디자인에서는 사용자가 난해한 시스템이나 규칙, 실행 절차를 빠르고 간단하게 이해할 수 있게 해 줍니다.
페이스북의 좋아요, 애플의 커맨드 키의 사례를 보면, 그 이상의 역할을 하기도 합니다.
아이콘은 남녀노소, 인종과 국적을 넘어서,
복잡한 프로그램이나 시스템을 쉽게 이해할 수 있게 해 주고,
하나의 기능을 배우면, 연관된 기능을 쉽게 이해할 수 있게 해 줍니다.
상자 아이콘을 몇 가지 스타일로 만들어 봤습니다.
UI 디자인에서 아이콘은 스타일의 아름다움보다는 기능과 논리적인 체계를 많이 고려합니다.
디자인 시스템에서 사용하는 아이콘을 보겠습니다.
디자인 시스템과
아이콘
카본 디자인 시스템은 아이콘과 픽토그램을 구분합니다.IBM의 카본 디자인 시스템의 아이콘입니다. 상황과 역할에 맞게 다양한 아이콘이 준비되어 있습니다. 각 아이콘은 라인 혹은 면으로 되어 있고, 실외 사이니지를 위한 픽토그램도 구성되어 있습니다.
SF Symbol은 기기의 통합과 개발자의 커스텀을 지원합니다.애플은 SF Symbol을 선보였습니다. 라인과 면으로 되어 있고, 선의 경우는 9개의 굵기를 포함하고 있습니다. 서체인 SF와 함께 사용할 수 있는 폰트 시스템의 일부이며, 애플 와치를 포함한 iOS를 사용하는 기기에서 일관된 아이콘을 보여줄 수 있습니다.
머티리얼 아이콘은 다양한 형태로 나뉩니다.익숙하고 체계적인 머티리얼 디자인에서는 아이콘을 5가지 하위분류로 나눕니다. Filled, Outlined, Rounded, Two-Tone, Shape로 나뉩니다.
머티리얼 디자인 가이드에서 보여주는 Two-Tone입니다. 지금까지 선 혹은 라인, 선과 라인으로 되어 있는데, 투톤 아이콘은 검은색 기준으로 밝기 혹은 투명도의 차이가 있습니다.
애플에도 비슷한 사례가 있습니다. 애플은 투명도와 겹침 혹은 비침을 UI에서 자주 사용하는데, 기기의 경우에는 선과 면만 사용한 것이 아니라, 머티리얼의 투톤 아이콘과 비슷한 아이콘도 사용합니다. 작은 트렌드인 셈입니다.
멀리 돌아왔지만, Sketch에서도 비슷한 모습을 볼 수 있습니다. Sketch 툴에서는 라이트 모드와 다크 모드에 따라서, 아이콘이 크게 변화합니다. 다크 모드가 되면, 스케치 아이콘은 색이 사라지고, 검은색, 흰색, 회색으로 표현됩니다.
Sketch의 튜토리얼 웹사이트에서도 비슷한 아이콘을 볼 수 있습니다. 이 아이콘을 Sketch 64의 Tint로 만들 수 있습니다.
Tint를 통해서 Line과 Fill을 넘어서 Opacitiy를 사용한 아이콘을 UI에 쉽게 도입할 수 있습니다.
Tint를
사용해보자
스케치에서 라인 아이콘과 솔리드 혹은 Filled 아이콘을 만들면, 하나의 Shape가 되거나 스타일을 통해서 색을 Override 할 수 있습니다.
Layer Group이나 Symbol을 사용하면, Tint가 활성화됩니다. 이 경우, 색을 지정하면, 그룹이나 심벌에 지정한 투명도에 따라 색이 오버라이드 됩니다.
Tint는 다양한 투명도에 적용할 수 있습니다. 예를 들어 하나의 심벌 혹은 그룹에 3가지 투명도가 되어 있다면, 각각 색상이 한 번에 적용됩니다.
결과는 이렇습니다.
간결함보다는
명확한 디자인에 적합하다.
작고 재미있는 기능인데, 써보려고 하려면 다양하게 쓸 수 있습니다. 스케치에서 권장하는 용도는 아이콘의 상태를 표현하는 경우입니다. 활성화된 상태 혹은 비활성화된 상태의 아이콘을 표현할 때, 좀 더 디자인된 모습을 보여줄 수 있습니다.
제가 보기엔 스케치의 사례처럼 비슷비슷한 네모 아이콘 혹은 원 아이콘을 만들 때, 활용하기 좋을 것 같습니다. 실제로 스케치를 다크 모드에서 사용하다가 보면, 복잡한 기능을 볼 때 큰 도움이 될 듯합니다.
일반 사용자를 대상으로 하는 기능보다는 어드민이나, 내부 시스템 혹은 하드웨어와 연관이 많아서, 간결함보다는 명확한 아이콘이 필요한 곳에서 활용하면 좋겠습니다.
