🔖 2021년 8월 3주 TOP3

🔖 2021년 8월 3주 TOP3

숫자를 소홀히 하지 마세요.

여러분의 작업 사례에 올바른 숫자 타입 스타일을 사용하는 방법에 대한 간략한 가이드입니다.

타이포그래피는 모든 브랜드의 시각적 기반을 쌓을 때 매우 중요한 역할을 합니다. 브랜드 글꼴은 가독성뿐만 아니라 브랜드의 개성을 나타내고 브랜드가 속한 산업과 관련이 있도록 신중하게 선택되어야 합니다. Times New Roman 타입을 만화책에서 사용한다던가, 중요한 정부 문서에서 Comic Sans를 사용하는 것은 말도 안 되는 것처럼 말이죠.

그러나 이런 혼란스러운 타이포그래피의 결정을 내릴 때, 숫자 영역은 종종 무시됩니다. 디자이너는 가끔 폰트 선택에 있어, 웹사이트에 가격을 표시하는 데 도움이 되지 않거나, 출판물에 초점이 될 만큼 스타일이 별로인 것을 뒤늦게 깨닫는 경우가 많습니다.

대규모의 타이포그래피를 선택하기 전, 숫자에 대해 존재하는 네 가지 스타일의 숫자를 인지하고 모든 잠재적인 사용 사례에서 시도하는 것이 중요합니다.

물론 4가지 스타일이 모든 글꼴에 있는 것은 아니므로, 미리 염두에 두는 것이 훨씬 더 중요합니다.

이제 한번 살펴보도록 하겠습니다. 먼저 테이블형(Tabular)과 비례형(Proportional)이 있습니다.

테이블형(Tabular Figures)

이름에서 알 수 있듯이 테이블형의 숫자는 테이블로 설계되어 있으며 열(Columns)에서 읽을 수 있도록 최적화되었습니다. 즉, 모든 숫자가 함께 수직으로 정렬될 수 있도록, 숫자들이 균일한 공간을 가지고 있습니다.

비례형(Proportional Figures)

비례형 숫자에는 알파벳에서 자간을 맞추는 방식과 비슷한 가변 간격이 있습니다. 따라서 '8'의 경우 '1'보다 더 많은 공간을 차지하고 있습니다. 네거티브 공간이 비례하기 때문에 텍스트와 잘 혼합될 수 있도록 디자인되었습니다.

다음에는 라이닝 (Lining)숫자와 올드스타일 (Oldstyle) 숫자가 있습니다.

라이닝 숫자(Lining Figures)

글꼴의 대문자 알파벳과 거의 동일한 높이를 가지고 있는 숫자입니다. 때로는 캡 높이(Cap Height)보다 약간 높거나 낮을 수도 있습니다.

올드스타일 숫자(Oldstyle Figures)

소문자 알파벳처럼 어센더(Ascenders)와 디센더(Descenders)가 있기 때문에 높이가 다양합니다.

함께 결합해보면

4가지 형태의 숫자가 나옵니다.

.. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

데스크탑 VS 모바일 디자인 : 당신이 알아야 할 유일한 규칙!

포트폴리오용 모바일 앱 제작에만 집중하는 디자인 학생이나 부트캠프 졸업생이 얼마나 많은지 항상 놀랐습니다. 종종 이것들은 제가 Behance 어디에선가 본 흥미롭지 않은 복사-붙여넣기 화면처럼 보입니다.

물론, 모바일 디자인은 앞으로 몇 년 동안 항상 HOT할 것입니다. 모바일 디자인을 위한 훌륭한 목업 리소스와 영감은 어디에나 있습니다.

가까이에서 저를 따라오는 독자들을 위해 모바일 프로덕트 디자인을 더 자주 강조합니다. 그러나 데스크탑 프로덕트 또는 기능을 위한 디자인은 매우 일반적이며 많은 대기업이 찾고 있습니다.

모바일 중심 프로덕트를 사용하는 회사의 경우에도 현재 트렌드는 크로스 플랫폼 디자인에 중점을 두고 있습니다. Amazon에서의 현재 업무나 Microsoft와 같은 회사에서의 과거 계약상의 역할에 있어서 데스크톱용 디자인은 필요한 스킬입니다.

그래서 데스크탑 프로덕트를 디자인해 본 적이 없는 사람이 최대한 빠르고 쾌적하게 지낼 수 있도록 데스크톱과 모바일의 유사점과 차이점을 이해하기 위해서 제가 가지고 있는 가장 중요한 규칙을 여러분과 공유하겠습니다.

또한 실제 프로덕트의 예를 통해 이러한 유사점과 차이점의 원인이 무엇인지 자세히 설명하겠습니다. (따라서 다음 고객이나 미래의 면접관의 질문에 쉽게 대답할 수 있습니다.)

그 점에서 가을 채용이 다가오고 있습니다. 지금 꿈의 회사에서 인턴하는 방법에 대해 자세히 알고 싶다면 여기를 클릭하여 UX 행성에 대한 특집 기사를 읽어보세요. (Amazon, Google, Apple의 실제 사례)

이제 주제로 돌아가서 다음과 같은 첫 번째 규칙이 있습니다.

1차원 vs 2차원으로 생각하기

크로스 플랫폼 디자인의 전반적인 일관성, 디자인 언어 및 사용자 흐름을 구성하는 요소를 이해하려면 먼저 1차원 VS 2차원의 사고 방식에 익숙해져야 합니다. 이것은 모바일 VS 데스크탑 디자인을 마스터하는 가장 중요한 규칙입니다.

기능적 관점에서 데스크탑과 모바일 프로덕트의 기능은 거의 동일해야 합니다. 즉, 데스크탑과 모바일 프로덕트에서 동일한 작업을 수행할 수 있어야 합니다. 데스크톱 Amazon 웹사이트에서만 온라인 쇼핑을 할 수 있고 Amazon 모바일 앱에서 패키지를 반품해야 한다면 이상하지 않을까요? (네, 매우 이상할 것입니다)

차이점은 인터페이스의 뷰view 레벨 레이아웃과 제어 레벨 사용자 흐름에 있습니다. (아래에서 정의하겠습니다)

1 Rule : Visual Level Layout을 사용한 첫 번째 예

모바일 UX 디자인에 익숙하신 분들은 뷰view 레벨 레이아웃 측면에서 데스크탑 인터페이스는 모바일 인터페이스의 여러 인터페이스를 연결하는 것으로 이해할 수 있습니다.

아래의 데스크탑 와이어프레임 예를 살펴보십시오.

데스크탑과 모바일 와이어프레임을 나란히 배치했을 때, 모든 데스크탑 와이어프레임이 여러 개의 개별 전화 화면처럼 보이는 방법을 확인해 봅니다. 모바일용 디자인만 했을 경우 데스크톱 시각적 레이아웃을 생각하기에 좋은 방법입니다.

위의 모바일 예제에서 볼 수 있듯이 인터페이스 레이아웃 수준에서 모바일 와이어프레임의 레이아웃은 일반적으로 1차원입니다. 화면 공간이 제한되어 있기 때문에 세로 레이아웃만 있습니다. 따라서 무엇을 디자인하든 상관없습니다. 전체 레이아웃은 비교적 단순하고 정보는 "1차원"으로 제한됩니다.

이제 데스크탑 레이아웃을 다시 살펴보겠습니다. 다음은 인기 있는 모바일 앱인 데스크톱용 Spotify의 예입니다.

보시다시피 데스크탑 레이아웃은 일반적으로 "2차원"입니다. 더 큰 화면 공간으로 데스크탑은 더 많은 정보를 담을 수 있습니다. 세로 치수뿐만 아니라 가로 치수도 있습니다. 대부분의 정보는 수평 치수를 기반으로 분산됩니다(대부분의 프로덕트에 대한 엄격한 요구 사항은 아님).

예를 들어, 데스크탑의 고전적인 "측면 탐색"은 여러 수준의 모바일 인터페이스를 하나의 인터페이스로 직접 통합할 수 있습니다(Spotify 데스크탑이 하나의 인터페이스에서 여러 모바일 화면을 캡처하는 방법 참조).

..
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

디자인 시스템의 색상

라이브러리를 매력적이고 일관된 색상 팔레트로 세팅할 수 있는 방법에 대해 알아봅시다.

디자인 시스템을 처음부터 새로 만드는 것은 결코 하루 이틀 걸리는 작업이 아닙니다. 다른 사람들이 어떻게 작업했는지 읽어보고, 몇 가지 샘플을 보면서, 올바른 도구를 선택해서 UI 라이브러리를 구축할 준비를 이미 하셨나요? 그렇다면 이제 Figma 또는 Sketch를 열고 Colors를 작업할 준비가 되었습니다!

이 아티클 시리즈는 자기만의 디자인 시스템 UI 라이브러리를 만들 때 도움이 될 수 있는 아티클 시리즈입니다. 이전 시리즈들은 여기에 있습니다.

디자인 시스템을 만들 때 타이포그래피 다음으로 가장 중요한 것은 색상입니다. 그래픽 사용자 인터페이스에는 아이콘과 패널, 그림이 없을 수도 있지만 분명히 일부 색상들과 텍스트들은 포함되어 있습니다. 그렇기 때문에 올바른 톤의 조합을 선택하는 것은 매우 중요합니다.

네이밍 규칙

올바른 네이밍 규칙을 정하는 것이 가장 먼저 해야 할 일입니다. 이것은 색상과 톤을 정의하기 전에 먼저 해야 합니다. 왜냐고요? 설명드릴게요.

디자인 시스템의 색상 네이밍은 목적을 반영해야 합니다. 그렇기 때문에 색상 네이밍을 단순히 빨강, 자주색, 파랑보다는, 기본 1차(Primary), 보조 2차(Secondary), 보조 3차(Tertiary)처럼 지정해야 합니다. 이렇게 하면 더 많은 유연성을 얻을 수 있으며, 프로젝트에서 만약에 브랜드 변경이 발생하더라도 색상 네이밍은 UI 라이브러리에서 동일하게 유지될 수 있습니다. 다음 네이밍들을 준비해봅시다.

네 맞아요, 기본 색상이 있네요. 하지만 뛰어난 유연성과 접근성을 보장하려면 색상에 두 가지 이상의 톤이 포함되어야 합니다. 틴트 & 쉐이드(Tints & Shades)를 만들어주셔야 합니다.

이러한 변형에는 다음 네이밍 규칙을 사용하는 것이 좋습니다.

기본 색상톤의 경우에는 '500' 네이밍을 사용하고 밝은 톤 색상의 경우 '400', '300', '200' 및 '100'을 사용합니다. 어두운 톤에는 '600', '700' 등의 큰 숫자를 사용합니다.

그렇게 하면 다음과 같은 규칙이 적용됩니다.

[색상 네이밍] / [톤]

네이밍의 예는 다음과 같습니다.

왜 이 숫자들을 색상 톤 네이밍으로 선택해야 할까요? 숫자로 톤 네이밍을 짓는 것은 간단하고 쉽게 이해할 수 있으며, 추후에도 톤을 쉽게 확장할 수 있습니다.

색상 네이밍을 'Secondary light lighter lighter'처럼 짓게 된다면 관리하기가 어려울 거예요!

Figma 또는 Sketch에서 디자인할 때에는 색상 네이밍 뒤에 '/'를 추가하는 것이 좋습니다. 그러면 여러분의 색상 톤들이 한 조로 모이게 됩니다.

디자인 시스템에 필요한 톤은 몇 가지나 됩니까?

사실 간단한 답은 없습니다. 랜딩 페이지의 일부 작은 프로젝트에는 1개의 기본 톤만 필요할 수 있습니다. 3가지 톤만 필요한 것도 있습니다. 하지만, 디자인 해결책의 편안함을 느끼기 위해서는 적어도 5가지 색상은 기본, 2가지 색상은 밝은 톤, 2가지 색상은 어두운 톤으로 하는 것이 좋습니다.

그러나 매우 유연한 디자인 시스템을 원한다면 모든 색상에 대해 8개 또는 9개의 톤을 가지도록 노력해보세요. 제가 디자인 시스템에서 했던 것처럼 모든 새로운 프로젝트를 빠르게 시작하실 수 있을 것이에요.

..
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램