2022-03-19 해외인기아티클 5기 발표자료입니다. 2021년 10월 1주차 해외 인기 아티클 - 타이포그래피 크기를 만들 때 피해야될 실수 5가지 (2021년) - 스타트업에서 당신이 유일한 디자이너일 때 디자인 시스템을 구축하는 방법 - 당신이 알아야 할 10가지 기본 UI 디자인 원칙

1. 이민호
해외 인기 아티클 5기
타이포그래피 크기를 만들 때 피해야될 실수 5가지
스타트업에서 당신이 유일한 디자이너일 때 디자인 시스템을 구축하는 방법
당신이 알아야 할 10가지 기본 UI 디자인 원칙
21년 10월 1주차 아티클

2. 타이포그래피 크기를 만들 때 피해야될 실수 5가지
5 Common mistakes to avoid while creating a typographic scale in 2021
마케팅 웹사이트를 위해
타이포그래피 크기[typographic scale]를 만들면서 겪었던
5가지 실수와 실수를 통해 배운 점을 정리합니다.
https://bootcamp.uxdesign.cc/5 common mistakes to avoid while creating a
typographic scale in 2021 5a409647758

3. 1 배리어블 폰트 Variable Font 를 사용하지 않고 너무 많은 폰트 굵기를 사용한 것
페이지를 구성하는 요소들에 대한 명확한 계층 구조와 대비를 만들어내려면 다양한 폰트 굵기가 필요합니다.
필요한 굵기의 폰트 파일을 모두 설치하면 페이지의 동작 속도가 느려질 수 있습니다.
배리어블 폰트를 사용하면 폰트 파일 하나로 다양한 폰트 굵기를 제공할 수 있기 때문에 유연하게 대응할 수 있습니다.

4. 1 배리어블 폰트 Variable Font 를 사용하지 않고 너무 많은 폰트 굵기를 사용한 것
배리어블 폰트
일반 폰트

5. Takeaway
1 배리어블 폰트 Variable Font 를 사용하지 않고 너무 많은 폰트 굵기를 사용한 것
빠른 페이지 로딩을 위해 Inter 같은 배리어블 폰트를 사용해보세요.
배리어블 폰트를 사용하지 않을 경우, 모든 폰트 weight 파일을 불러오는 것은 피해야 합니다.
페이지 속도에 영향을 많이 미치지 않을 정도로만 최소한으로 굵기 개수를 사용하세요.
참고. 어도비의 발표에 따르면, Pan CJK Source Han Sans 2.002버전의 경우
전체 Weight 파일의 크기를 합치면 593.7 MB 이지만, 배리어블 폰트로 변환했을 때는 32.9 MB에 불과하다고 합니다.
참고. 구글 폰트에서 배리어블 폰트만
필터링해서 확인할 수 있는 기능을 제공합니다.

6. 참고자료
1 배리어블 폰트 Variable Font 를 사용하지 않고 너무 많은 폰트 굵기를 사용한 것
https://www.youtube.com/watch?v WFBbEMu8Xrc
제2회 프롬콘 🌽 실전에서 직접 사용해보는 배리어블 폰트
박재한님 강연

7. 폰트 크기가 커지고 작아지는데 명확한 패턴이 없다면 우리가 아름답다고 인식하는 계층 구조를 만들기 어렵습니다.
일정한 비율을 통해 폰트 크기를 결정하게 되면 눈이 더 편안하게 인식할 수 있고,
새로운 폰트 크기를 추가할 때도 편리합니다.
2 비율을 통해 크기 scale 를 결정하지 않고 눈으로만 판단한 것
https://type scale.com/

8. 폰트 크기를 정하는데 도움이 될 만한 비례 비율은 이미 음악과 자연에서 널리 사용되고 있습니다.
비율을 계산하다 소수점이 나올 경우, 약간 값을 조정하여 정수값으로 맞추면 훨씬 편하게 사용할 수 있습니다.
엄격한 규칙이 있는 것은 아니니 다양하게 실험해보세요.
2 비율을 통해 크기 scale 를 결정하지 않고 눈으로만 판단한 것
Takeaway
type scale.com 에서는 다음과 같은 비율을 제공합니다.

9. 적절한 폰트 크기를 찾는데 꽤 시간을 보냈다면, 실제 웹사이트에 바로 적용해보고 싶은 것이 당연합니다.
하지만 비례가 완벽해보였던 폰트도 모바일 인터페이스에서는 어울리지 않거나 너무 크게 보입니다.
데스크탑 환경을 위한 폰트 크기를 결정했다면 모바일 환경에서는 어떻게 보일지 확인해야 합니다.
3 웹과 모바일 환경에서 동일한 타이포그래피 크기를 사용한 것
소제목 [H3]
Font Size 15pt [20px]
Font Weight 600
소제목 [H3]
Font Size 14pt [18.67px]
Font Weight 700
본문 [p]
Font Size 11pt [14.67px]
Font Weight 100
본문 [p]
Font Size 13pt [17.33px]
Font Weight 100
브런치 데스크탑 브런치 모바일

10. 웹 인터페이스를 위해 설계된 타입 스케일은 모바일 환경과 잘 어울리지 않을 수 있습니다.
화면 해상도에 따라서 타입 스케일이 어떻게 변하면 좋을지 규칙을 정하면 좋습니다.
예를 들어, 화면 너비가 1024px 보다 작을 때를 변환점으로 두고
이 조건을 만족하면 H1 폰트 크기를 32px 에서 24px로 줄이는 방법이 있습니다.
SEO가 중요하지 않다면 웹과 모바일에서 동일한 타입 크기를 유지하는 대신
H1 태그를 H2로 바꿔버리는 선택을 할 수 있습니다.
하지만 구글 등 검색 엔진에서 H1 태그의 문구를 해당 페이지의 주된 주제로 인식하기 때문에
모바일을 위한 별도의 스케일을 만드는 것이 좋습니다.
3 웹과 모바일 환경에서 동일한 타이포그래피 크기를 사용한 것
Takeaway

11. 4 폰트 크기를 정할 때 줄 간격과 문단 간격을 결정하지 않은 것
디자이너가 H1과 H2 태그 사이에 20px의 간격을 요청했는데, 개발이 완료되었을 때 간격은 30px이 되어있었습니다.
이렇게 된 이유는 요소간의 간격을 고민할 때 줄 간격을 고려하지 않았기 때문입니다.
문단 사이에 여백을 둘 때도 비슷한 일이 발생합니다.
타입 스케일을 정할 때 모든 폰트 크기 각각에 대해 줄 간격을 정의해서 전달해야 합니다. [line height 명시]
아래 두 항목의 차이는 line height 뿐입니다. 🧐

12. 어떤 타입 스케일이 잘 어울린다고 해서 다른 모든 폰트에 동일한 타입 스케일을 적용할 수 있다는 것은 아닙니다.
동일한 폰트 크기라도 폰트에 따라 가독성이 크게 달라질 수 있습니다.
폰트를 바꿀 때는 다양한 맥락에서 테스트해보고, 가독성과 심미성을 유지할 수 있도록 조정해야 합니다.
5 여러 폰트를 사용할 때 모든 폰트에 동일한 폰트 크기를 사용한 것
동일한 폰트 크기라도 폰트에 따라 가독성이 크게 달라질 수 있습니다.
Pretendard
.
동일한 폰트 크기라도 폰트에 따라 가독성이 크게 달라질 수 있습니다.
동일한 폰트 크기라도 폰트에 따라 가독성이 크게 달라질 수 있습니다.
Noto Sans KR
NanumSquare
S-Core Dream

13. 스타트업에서 당신이 유일한 디자이너일 때 디자인 시스템을 구축하는 방법
How to build a design system if you re the only designer in a startup
회사에서 프로덕트 디자인의 유일한 담당자라면
힘들 수밖에 없습니다. 여러 작업을 동시에 처리해
야 하니 항상 바쁩니다. 제품을 디자인하고, 다른
사람들과 협업하고, 개발자나 QA를 서포트하고,
사용자 인터뷰도 해야 합니다.
저는 회사에 합류한 이후 새롭게 개편하는 앱의 디
자인 작업을 맡게 되었습니다. 그 과정에서 더 빠르
게 프로토타입을 만들어 낼 수 있도록 디자인 시스
템이 필요해졌습니다. 작업은 팀에서 주로 활용했
던 피그마를 사용했습니다.
https://uxdesign.cc/how to build a design system if youre
the only designer in a startup f4695d2f4b7f

14. 처음에는 많은 것들이 필요하지 않습니다.
아마 필요한 요소는 대부분 버튼, 드롭다운, 폼, 폰트, 색상 등 아토믹한 컴포넌트일 것입니다.
초기의 디자인 시스템에서 스타일링은 크게 중요하지 않습니다. 나중에 변경할 수 있습니다.
처음에는 오픈 소스 디자인 시스템으로 시작해보세요. 다음 페이지
1 오픈 소스 디자인 시스템을 활용하는데 주저하지 마세요

15. 1 오픈 소스 디자인 시스템을 활용하는데 주저하지 마세요
[무료] Ant Design Open Source
[무료] Lexicon DSL [유료] Tetrisly
[유료] Venus Design System

16. 디자인 시스템을 사용하기로 결정했다면,
색상이나 타이포그래피, 그리고 필수적인 컴포넌트 같은 간단한 것들에 먼저 집중하세요.
이런 전략을 사용하면 더 빠르게 디자인할 수 있게 됩니다.
인풋 필드를 예로 들면, 먼저 기본 상태에 대해서만 디자인하고 나중에 다른 상태들을 디자인할 수 있습니다.
인풋 필드 내부에서 어떤 아이콘을 사용해야 할지 확신할 수 없다면
일단 16x16 사이즈의 정사각형을 만들어서 회색을 채우고 컴포넌트로 만들어두세요.
이렇게 하면 작업을 더 이어나갈 수 있고, 나중에 아이콘을 업데이트하기 쉬워집니다.
2 기본 컴포넌트, 색상, 타이포그래피에 집중하세요

17. 스타트업의 유일한 디자이너라면 디자인 시스템을 구축하기엔 시간이 부족할 수 있습니다.
시간을 절약하기 위해, UI 구성에 필요한 모든 요소를 컴포넌트로 만드세요.
어떤 요소가 더 중요한지를 초반에 결정하는데 도움이 됩니다.
이상적으로는, 요소를 만드는 것으로 시작하고 다음 단계에서 컴포넌트로 변환해야 합니다.
그래야 컴포넌트를 교체하는데 드는 시간을 아낄 수 있습니다.
3 항상 컴포넌트로 시작하세요

18. 일이 너무 몰리다보면 컴포넌트를 만들지 못하고 기존의 아트보드를 계속 복사하여 작업하게 될 수 있습니다.
하나하나 찾아서 컴포넌트로 바꾸는 건 매우 귀찮은 작업입니다.
Master 플러그인을 사용하면 여러 엘리먼트를 하나의 컴포넌트로 변환할 수 있습니다. 다음 페이지
여러 아트보드에 있는 모든 엘리먼트를 변환하려면 대상을 전부 선택할 수 있어야 합니다.
Similayer 플러그인으로 여러 아트보드에 있는 요소를 클릭 한 번으로 선택할 수 있습니다. 다음 페이지
4 피그마의 Master 플러그인을 사용하세요

19. 4 피그마의 Master 플러그인을 사용하세요
Master Figma Plugin
37.5 for 1user
900 Unlimited users
Similayer Figma Plugin
Free

20. 작업이나 프로젝트 사이에 시간이 빌 때가 있습니다. 이런 시간에 디자인 시스템을 개선하는 것이 좋습니다.
이렇게 시간을 투자하면 새로운 기능을 만들거나 다른 프로토타입을 만들 때 보상받을 수 있습니다.
5 프로젝트 사이에 시간이 빌 때 디자인 시스템을 개선하세요

21. 컴포넌트를 만들기 시작하면 적절한 컴포넌트 이름을 정할 시간이 부족할 겁니다.
좋은 이름을 정하는 것은 컴포넌트 수가 많아진 다음으로 미루는 것을 권장합니다.
한 번에 컴포넌트 이름을 바꿀 수 있는 다양한 플러그인들이 있습니다. 다음 페이지
피그마의 Rename Layers 기능이 도움이 될 수 있습니다.
https://help.figma.com/hc/en us/articles/360039958934 Rename Layers
6 시작하는 단계에서는 좋은 이름을 짓는데 집중하지 마세요

22. 6 시작하는 단계에서는 좋은 이름을 짓는데 집중하지 마세요
Rename It
여러 레이어/컴포넌트 이름을 동시에 변경
레이어/컴포넌트 순서에 맞게 이름 변경
Ultra Renamer2
레이어/컴포넌트 순서에 맞게 이름 변경
Regulator
색상 이름을 한 번에 변경
한 번에 컴포넌트 이름을 바꾸는 데 도움이 되는 피그마 플러그인

23. 당신이 알아야 할 10가지 기본 UI 디자인 원칙
10 Fundamental UI Design Principles You Need to Know
대부분의 사람들은 뭔가 잘 동작하지 않을 때
UI 디자인을 인식합니다. 이런 이유로, 좋은 UI
디자인이란 잘 보이지 않으면서 사용자가 방해받지
않고 편안하게 작업할 수 있게 하는 디자인이라고
말할 수도 있습니다. 좋은 UI를 보여주는 사례들을
살펴보면 어느 정도 일정한 규칙을 따르는 경향을
발견할 수 있습니다.
https://dribbble.com/resources/ui design principles

24. UI 디자인은 사용자 경험에 혼란을 일으키는 장애물을 제거해
사용자가 직관적으로 서비스를 탐색할 수 있는 환경을 만드는 것을 목표로 합니다.
모든 프로젝트는 서로 다르기 때문에 디테일은 다를 수 있습니다.
하지만 좋은 UI에 대한 일반적인 원칙은 모든 프로젝트에 동일하게 적용할 수 있습니다.
다양한 프로젝트에 적용할 수 있는 10가지 UI 원칙에 대해 살펴보겠습니다.
10 essential UI design principles

25. 1 UI 디자인을 단순하게 유지하기
무엇을 디자인하는지, 왜 하는지, 목표가 무엇인지를 계속 생각해야 합니다.
멋진 그래픽을 통해 디자이너로서의 만족감을 느끼는 것은 그 다음입니다.
디자인 결과물이 사용자에게 실용적인 결과를 제공하지 못하면
해당 항목은 제거하는 것이 좋습니다.

26. UI 디자인의 첫 번째 단계는
사용자를 이해하고 사용자의 니즈를 파악하는 것입니다.
사용자를 잘 이해하고 있다면, 이제 사용자가 어떻게 행동할지 예측할 수 있게 됩니다.
적절한 UI 디자인을 통해 사용자에게 딱 필요한 정보와 도구를
필요한 시점에 제공해야 합니다.
사용자가 원하는 정보와 다를 경우,
사용자 행동을 다른 방향으로 유도할 수 있도록 디자인합니다.
2 예측하고 선제 대응하기

27. 사용자들은 실제로 통제하고 있는지는 별개로,
통제하고 있다는 느낌을 받고 싶어합니다.
사용자가 원할 때는 존재해야 하고, 기대했던 대로 동작해야 합니다.
인터페이스가 특정한 행동을 강제하거나
결정을 내려버리는 것처럼 느끼지 않아야 합니다.
3 사용자가 운전석에 앉아있게 만들기
사용자가 설정을 바꾸더라도 언제든지 다시 돌아와서 변경할 수 있습니다.

28. 제품 내부의 일관성을 지키는 것도 중요하지만,
일반적인 업계 표준에서 크게 벗어나지 않는 것도 중요합니다.
좋은 UI 디자인 프로젝트는 바퀴를 다시 발명하는 대신 개선합니다.
4 체계적이고 일관적으로 디자인하기

29. 가능하면 최소한의 단계와 화면 수를 유지하도록 노력하세요.
작업을 주제별 그룹으로 묶어서 관리하는 것이 좋습니다.
아무도 찾지 않는 페이지에 세부 기능을 넣지 마세요.
Three Click Rule :
사용자는 앱 내의 아무 곳에서
세 번 이내의 클릭으로 필요한 작업을 수행할 수 있어야 합니다.
5 불필요한 복잡성을 피하기

30. 직관적인 네비게이션을 구성하고, 정보를 보여줄 때 라벨을 함께 표기합니다.
인터페이스를 탐색하는 경험이 혼란스러워서는 안됩니다.
크게 고민하지 않더라도 무의식적으로 탐색할 수 있게 해야 합니다.
페이지의 구성은 깔끔하고 논리적이며 명확해야 합니다.
사용자가 현재 위치를 기억해야 한다는 부담을 갖지 않도록
현재 위치와 네비게이션에 대한 시간적 단서를 제공합니다.
6 명확한 이정표를 제공하기

31. 사람들은 실수할 수 있고, 마음을 바꾸는 경우도 많습니다.
앱을 처음 사용하는 경우에는 자신에 행동에 대한 확신이 없을 수도 있습니다.
필요하면 언제든지 작업 결과를 되돌릴 수 있도록 해야 합니다.
실행취소 및 다시실행 기능을 추가하는 것도 방법입니다.
이를 통해 부정적인 경험을 최소화하면서 서비스를 더 안전하게 탐색할 수 있습니다.
7 실수에 관대해지기
Human Interface Guidelines

32. 사용자가 현재 진행상황을 확인할 수 있어야 합니다.
사용자의 행동이 서비스에 잘 전달되었고, 일이 진행되고 있다는 것을 보여주세요.
상태 정보는 어디서든 항상 쉽게 찾을 수 있어야 합니다.
사용자는 지금 무슨 일이 일어나고 있는지 알아야 합니다.
에러 코드 가 아니라, 쉽게 이해할 수 있는 방식으로 상황을 설명해야 합니다.
에러가 발생했다면, 문제를 설명하고 사용자가 무엇을 해야 하는지 알립니다.
이 때 사용자의 잘못이 아니라 시스템이 오작동 했을지도 모른다는 점을 염두에 두어야 합니다.
8 관련된 피드백을 제공하기

33. 명확한 계층 구조를 정하지 못하면 UI를 깔끔하게 디자인하기 어렵습니다.
화면에 보이는 모든 항목은 사용자 경험에 필수적인 것들이어야 합니다.
불필요한 것들은 프로토타입을 만드는 과정에서 확인하고 제거합니다.
필수적인 것들을 모아두어도 그 중에서 더 중요한 것이 무엇인지 알 수 있도록
UI를 디자인합니다.
9 기능에 우선순위 매기기

34. 모든 사람이 나와 내 주위 사람들과 비슷할 것이라고 가정하지 마세요.
서비스를 사용하는 사람들은 다양한 문화적 배경을 가지고 있습니다.
현실적으로 모든 케이스를 고려할 수는 없지만,
내 방식만이 유일한 해결 방법이라고 생각하지는 않는 것이 좋습니다.
세상의 많은 사람들은 글을 오른쪽에서 왼쪽으로 읽기 때문에,
시각적 요소를 배치했을 때 모든 사용자가 항목을 왼쪽부터 보지 않을 수도 있습니다.
색상처럼 단순한 요소도 사람마다 다르게 인식합니다.
문화적인 차이도 있지만 색약 또는 색맹인 사람들도 있습니다.
따라서 색상만으로 항목을 구분하도록 하는 디자인은 피하는 것이 좋습니다.
10 접근성을 고려하여 UI 디자인하기

35. 사람들이 공기가 오염되거나 부족해지기 전까지는 알아차리지 못하는 것처럼,
좋은 UI 디자인도 사용자의 불편함을 줄여서 잘 드러나지 않는 경향이 있습니다.
앞에서 살펴본 간단한 UI 디자인 원칙을 지키는 것만으로도 더욱 효과적인 인터페이스를 디자인하는데 도움이 됩니다.
The Golden rules of UI Design

36. 감사합니다 :]