UI 디자인의 80%를 완성하는 타이포그래피 핵심 비밀!

대부분의 UI는 사용자가 필요한 작업을 수행하는 데 도움이 되는 몇 가지 아이콘이 있는 텍스트와 버튼일 뿐입니다.

 따라서 타이포그래피를 마스터하는 것은 디자인의 20%로 80%의 결과를 제공합니다.

 왼쪽 사이드바에 있는 이 인기 있는 UI에서 모든 글꼴 스타일을 제거하는 것부터 시작해 보겠습니다.

  선택된 탭을 깨뜨렸는데, 이는 사용자 경험에 확실히 좋지 않습니다.

 지금 어디 있는지 전혀 알 수 없습니다.

  맨 위의 버튼도 마찬가지입니다.

 이제 피드 자체로 넘어가면 계층 구조와 초점이 없어서 무엇을 보고 있는지 알기 어렵습니다.

 그저 텍스트 덩어리일 뿐입니다.

 원본을 보면  UI 디자인에서 타이포그래피의 영향을 알 수 있습니다.

 처음부터 만들어 보겠습니다.

 가장 분명한 것은 제목을 나머지 요소보다 더 크고 굵게 만드는 것입니다.

 여기 간격이 있는 것을 알아차렸습니까? 간격 여백이나 패딩이 아니라 줄 높이가 작용하는 것입니다.

 나중에 자세히 설명하겠습니다.

 지금은 거의 완성된 UI가 있지만 지금 당장 더 좋게 만들 수 있습니다.

 이 전체가 마치 사용자에게 "이걸 읽어야 해"라고 말하는 것처럼 단일 정보 블록처럼 보입니다.

  마찬가지로 제목이 썸네일과 연결되어 있고 사용자는 다른 요소로 넘어가기 전에 이 두 가지를 함께 살펴봐야 한다는 것을 알고 있습니다.

 간단히 말해서 제목이 눈에 띄기만 하는 것이 아니라  이 그룹과 별도로 독립적으로 존재해야 합니다.

 인간의 뇌가 모양과 패턴을 인식하는 방식을 이해해야 합니다.

 여기서 무엇을 보시나요? 어떻게 두 그룹으로 나눌 수 있을까요? 이렇게 간격을 둘 수도 있지만 사람들은 여전히 6개의 원이 있는 한 그룹 과 3개의 원이 있는 두 그룹 사이에서 혼란스러워할 수 있습니다.

  크기를 시도해 보겠습니다.

 이것도 혼란스럽습니다.

 일부 사람들은 이것을 의도한 두 개가 아닌 세 개의 그룹으로 볼 수 있습니다.

   색상을 시도해 보겠습니다.

 세 개인지 두 개인지 여전히 명확하지 않지만  두 번째 그룹을 아래로 옮기면  세 개가 아닌 두 개의 그룹이라는 것이 매우 명확해집니다.

 친구나 동료에게 보여주면 이를 확인할 수 있습니다.

 이제 글꼴로 돌아가기 전에 단계를 되짚어 보겠습니다.

 요소를 그룹화하거나 구분하려면 크기, 색상 및 간격이 필요합니다.

 기술적으로 간격은 근접성의 법칙에 속하지만  요소를 그룹화하거나 구분하는 동일한 목적으로 사용됩니다.

 법률에 따라 모양을 사용하여 요소를 그룹화할 수도 있지만 이 경우에는 도움이 되지 않습니다.

 그러나 글꼴 두께가 있습니다.

 나중에 자세히 설명하겠습니다.

 지금은 앞서 디자인했던 UI로 돌아가 보겠습니다.

 방금 관찰한 것에서  제목을 강조하고 이 그룹에서 분리하기 위한 세 가지 속성이 이미 있습니다.

 필요한 것은 색상이지만 검정색 위에 흰색이 이미 가능한 최대 대비에 있으므로 이를 강조하려면 해당 색상을 약화해야 합니다.

 이를 수행하는 가장 쉬운 방법은 밝기 값을 조정하고 이 경우 가장 효과적인 방법을 찾는 것입니다.

  60% 밝기는 텍스트를 읽기 쉽게 유지하면서 제목을 강조하는 데 적합한 수준입니다.

 이것은 UI 디자인에서 매우 훌륭한 기술입니다.

 이  비디오의 스폰서가 누구인지 알고 있습니까? 그들은 복잡한 주제를 간단한 방법으로 설명하는 데 탁월합니다.

 훌륭합니다.

 수학, 과학 코딩 및 기타 여러 분야의 대화형 수업을 제공합니다.

 모두 최고 수준의 기관에서 수상 경력에 빛나는 연구원과 전문가 팀이 제작했습니다.

  수업에는 개념을 가지고 놀 수 있는 대화형 문제 해결 활동이 가득합니다.

 강의 비디오를 보는 것  보다 6배 더 효과적인 것으로 입증된 방법 내가 정말 좋아하는 수업 중 하나는 코드로 생각하는 것입니다.

  루프와 변수에서 중첩과 조건문에 이르기까지 필수적인 코딩 요소가 가득하여 코딩 여정을 시작하기에 좋은 출발점입니다.

  이미 기본 사항을 잘 알고 있다면 바로 넘어가 고급 주제를 탐색할 수 있습니다.

 brilliant에는 말 그대로 모든 것이 있으며  30일 동안 무료로 모두 사용해 볼 수 있습니다.

 brilliant.

org를 방문하거나  설명에 있는 링크를 클릭하면 연간 프리미엄 구독료가 20% 할인됩니다.

  조금 확대해서 보면 이 색상 트릭이 모든 곳에서 사용되는 것을 볼 수 있습니다.

 가장 중요한 요소는 가장 높은 대비를 갖고 다른 요소를 약화시키기 위해 밝기 값을 조정했지만 이것은 약간 다릅니다.

 지금은 영상 후반부에서 다루겠습니다.

 지금은 hsl 색상 함수와 UI 디자인에서 어떻게 사용되는지 이해해야 합니다.

 색조 채도 및 밝기의 약자입니다.

 이것은 빨간색, 초록색 또는 파란색과 같은 원하는 색상 유형입니다.

  색상 휠에서 0에서 시작하여 빨간색 120은 초록색, 240은 파란색입니다.

 기본 색상 채도를 선택하는 것으로 생각하면 해당 기본 색상의 강도를 제어할 수 있습니다.

 채도가 100%이면 가장 강렬한 색상이 되고 0%이면 회색 음영으로 바뀌며 마지막으로 밝기를 사용하여 밝기를 50%로 제어합니다.

 기본 색상은 0에서 검은색이고 100에서는 흰색입니다.

 따라서 색조는 0에서 360 사이의 색상 값을 나타냅니다.

 채도는 백분율로 측정한 강도이고 밝기는 색상을 지정하기 위해 밝기를 제어하는 ​​백분율입니다.

    이 비디오에서는 밝기 값만 필요합니다.

 결국 이 비디오는 색상이 아닌 글꼴 스타일과 관련이 있습니다.

  여기서 한 일이 바로 밝기가 100%이고 이것은 60입니다.

 동일한 개념을 사용하여 이것을 카드 안에 넣고 카드에 10% 또는 20%의 밝기를 줄 수 있습니다.

 색상을 사용하여 밝기 값에만 집중할 수도 있습니다.

 이 색상은 카드에 너무 밝으므로  10%로 낮추겠습니다.

 이 그룹에 기본 색상을 적용 하고 작동하는지 보겠습니다.

 잠시 후에 확인하겠지만 먼저 제목에는 더 밝은 색상이 필요합니다.

 이 경우 기본 색상은 작동하지 않기 때문입니다.

 90%는 좋아 보이지만 이 그룹에는 기본 색상이 약간 어둡습니다.

 따라서 70으로 올려서 효과가 있는지 보겠습니다.

 효과가 있을 것 같지만 확대하여 실제 UI에서 어떻게 보이는지 보겠습니다.

 제목이 눈에 띄는지, 그룹이 읽기 쉬운지 확인하고 싶습니다.

 이상적으로는 실제 사용자를 대상으로 테스트하는 것이 좋지만 피드백을 위해 친구나 동료에게 보여줄 수도 있습니다.

 그런데 이것은  활성 탭을 강조하기 위해 더 밝은 색상을 사용한 것입니다.

 나머지 비디오로 넘어가기 전에 더 밝은 음영이 위에 나타나 더 중요해집니다.

 우리가 배운  기본 개념을 사용하여 이 UI를 개선해 보겠습니다.

  사용자가 구독하는 채널 목록이 있습니다.

 어떻게 하면 더 나은 사용자 경험을 제공할 수 있을까요? 첫째, 계층 구조가 없습니다.

 모든 것이 텍스트 덩어리처럼 보입니다.

 둘째, 이 버튼은 눈에 띄어야 합니다.

  제목을 강조하기 위해 크기와 두께를 확대한 다음 사용자 이름을 약화하기 위해 더 어두운 색상과 더 작은 크기  버튼을 강조하기 위해 더 밝은 색상이지만 버튼이 여기서는 좀 이상해 보이네요.

 오른쪽으로 옮겨서 카드 안에 모든 것을 감싸 보겠습니다.

 이제 훨씬 나아 보입니다.

 버튼이 여전히 약간 부피가 있어 보입니다.

 사용자 이름과 일치하도록 글꼴 크기를 줄여 보겠습니다.

 좋아 보이지만 확대된 것을 기억하세요.

 원래 크기에서 작동하는지 확인해야 합니다.

 사용자 이름은 읽기 어려울 수 있고 버튼도 굵기가 필요할 수 있습니다.

 지금은 디자인을 판단하는 것을 여러분에게 맡기겠습니다.

 기어를 바꿔 보겠습니다.

 이것이 앱과 UI의 99%를 디자인하는 데 필요한 모든 글꼴 크기입니다.

 이 세 가지만 굵기와 색상과 결합하면 전체 UI를 구축하기에 충분합니다.

 여기에 몇 개의 글꼴 크기가 보 입니까? 이것들을 제외하고는 모두 16픽셀의 동일한 글꼴 크기를 갖습니다.

  굵기와 색상이 글꼴 크기에 미치는 영향은 매우 크기 때문에 계층 구조를 만들기 위해 많은 크기가 필요하지 않습니다.

 크기 굵기와 색상을 결합하면 문제가 해결될 수 있습니다.

  이와 같은 유형 스케일을 만들어야 한다고 말하는 것은 아니지만 이것도 큰 도움이 되지 않습니다.

 아마  이와 비슷한 것이 더 필요할 것입니다.

 그렇습니다.

 그게 전부 입니다.

 제목과 두 개의 헤딩을 제외하고 14픽셀입니다.

 이 비디오 페이지에서는 제목과 프로젝트의 채널 이름을 제외하고 모든 것이 14픽셀입니다.

 기본 글꼴 크기를 14픽셀 또는 16픽셀 일반 굵기와 100% 밝기로 선택하세요.

 잠시 후에 밝기 모드를 사용하겠지만 먼저 마무리하겠습니다.

 기본 글꼴을 선택한 후 해당 크기로 모든 것을 디자인해 보세요.

 꼭 두 픽셀 위아래로 조정해야 할 때는 그게 전부입니다.

 이것이 글꼴 크기입니다.

  작업을 더 쉽게 하기 위해 전역 변수로 지정하세요.

 CSS 비디오는 아니지만 다음과 같이 할 수 있습니다.

 먼저 글꼴 굵기를 설정한 다음 글꼴 크기와 줄 높이를 설정하고 마지막으로 글꼴 패밀리를 설정합니다.

 인기 있는 글꼴이면 무엇이든 잘 작동합니다.

 Google에서 무료로 받을 수 있습니다.

 먼저 픽셀 단위를 rem 값으로 변환합니다.

  사용자가 필요한 경우 글꼴 크기를 조정할 수 있도록 접근성 지침을 따라야 합니다.

 두 번째로 이 m 값은 매우 중요합니다.

 이 간격을 기억하세요.

 이것은 제목이 눈에 띄고 독립적으로 유지되는 데 중요합니다.

 대부분의 경우 수동으로 추가할 필요가 없습니다.

 간격이나 여백은 줄 높이가 자동으로 처리하여 텍스트 요소의 여백 하단 역할을 하므로 전역 변수는 이와 비슷할 수 있습니다.

 이것이 최상위 UI를 구축하는 데 필요한 전부이지만 모든 H1 요소가 동일한 글꼴 스타일을 공유하는 것은 아니라는 점을 명심하십시오.

 문서 계층 구조의 코드는 시각적 계층 구조의 스타일입니다.

 이것이 명백한 해결책이라고 생각할 수 있지만 실제로는  이와 비슷해야 합니다.

 상식을 사용하여 사용자가 무엇에 집중할지 판단하고  디자인에 만족하면 해당 텍스트를 강조하십시오.

 확대하여 전체 UI를 봅니다.

 글꼴 크기는 상대적 단위이므로  현재 이웃 요소에 따라 달라집니다.

 둘 다 주의를 끌기 위해 경쟁하고 있습니다.

 더 큰 글꼴 크기를 시도해 보고  효과가 있는지 확인해 보겠습니다.

 크고 굵은 글꼴은 종종 눈에 너무 거슬릴 수 있으므로  무게를 줄이고 효과가 있는지 확인해 보겠습니다.

 보기에는 좋지만 이것은 동적 숫자이므로 이것도 고려해야 합니다.

 시각적 계층 구조만을 위해 디자인하지 마십시오.

 기능도 위한 디자인입니다.

 이제 이 디자인을 밝은 모드로 변환하여 마무리하겠습니다.

 생각보다 훨씬 쉽습니다.

 앞서 말했듯 이 흰색, 회색, 검은색의 세 가지 색상으로 시작해 보겠습니다.

 필요한 것은 L 값이므로 항상 hex 또는 RGB 대신 hsl을 사용하십시오.

 배경은 순수한 검정색이므로 밝은 모드는 순수한 흰색이 됩니다.

 하지만 L 값을 보면 간단한 계산을 했습니다.

  100에서 L 값을 빼면 이러한 색상에 대해서도 해야 할 일이 전부입니다.

    그라데이션 배경에 사용되는 색상과 텍스트 레이블 및 버튼에 사용되는 색상이 많은 이 UI에 대해서도 같은 작업을 해 보겠습니다.

 수정 없이 밝은 배경에서 이러한 색상이 어떻게 보이는지 보여드리겠습니다.

   100에서 L 값을 빼면 다음과 같습니다.

 이제  CSS 변수를 사용하여 색상을 바꾸기만 하면 됩니다.

 계속할 수 있지만 이 비디오는 색상이 아닌 글꼴 스타일을 다룬다는 것을 기억하십시오.

  내 웹사이트에서 이 색상 생성기를 확인할 수 있습니다.

 이 색상 생성기는 일반적인 회색 색상 구성표에서 벗어나는 데 도움이 될 수 있습니다.

 링크는 좋아요 및 구독 버튼 바로 아래 설명에 있습니다.