2022-08-06 [프롬디자이너] UX/UI 해외 인기 아티클 스터디 6기 중 3주차 발표자료입니다. 1️⃣ 피그마에서 웹 디자인을 할때 반응형과 유동적인 그리드를 구축하는 방법 2️⃣ 나쁜 UX 디자인 - SaaS에서 피하지 못한 최악의 UX 디자인 13가지 3️⃣ UI 디자이너로 빠르게(쉽지는 않겠지만) 성장하는 방법 발표자료 원본 링크 : https://bit.ly/3P4aFpK

1. 이민호
해외 인기 아티클 6기
22년 3월 4주차 아티클
피그마에서 웹 디자인을 할때 반응형과 유동적인 그리드를 구축하는 방법
나쁜 UX 디자인 SaaS에서 피하지 못한 최악의 UX 디자인 13가지
UI 디자이너로 빠르게 쉽지는 않겠지만 성장하는 방법

2. 피그마에서 웹 디자인을 할때 반응형과 유동적인 그리드를 구축하는 방법
https://bootcamp.uxdesign.cc/figma how to build responsive and scalable grids for web design 9dd80a1e3668
요즘은 사람들이 어떤 디바이스로 서비스에 방문할지 예상하기 어렵습니다.
가능하다면 모든 디바이스를 지원하도록 구성하는 것이 좋지만, 모든 화면
사이즈 각각에 대해 디자인하는 것은 불가능에 가깝습니다.
이러한 상황을 위한 대안은 바로 반응형으로 구성되어 있으며 확장할 수 있는
그리드입니다. 반응형 그리드를 사용하면 화면 크기에 따라 레이아웃이
변경되도록 설정할 수 있습니다. 그리드를 통해 일관적인 레이아웃을
제공하고 의사결정을 최소화할 수 있습니다.
image: https://bootcamp.uxdesign.cc/week 9 responsive layout grid system b6faa7bfd7aa

3. Grid Anatomy
그리드를 구축하는데 도움이 되는 기본적인 요소들은 다음과 같습니다.
! Columns
컨텐츠를 배치하는 수직 블록입니다.
컬럼의 너비는 용도에 따라 고정되어 있을 수도 있고, 유동적일 수도 있습니다.
" Gutters
컬럼 사이의 공간을 의미합니다.
# Margins outside gutters
웹사이트 컨텐츠 영역과 스크린 가장자리 사이에 위치하는 공백입니다.
컬럼 수와 거터, 마진을 결정하는 정해진 규칙은 없습니다. 그리드의 스펙은 무엇을 만들고자 하는지에 의해 결정됩니다.
선호하는 스타일에 따라 컬럼들이 멀리 떨어져 있을 수도 있고, 여백 없이 붙어있을 수도 있습니다.

4. Types of Grids
반응형 그리드의 경우 유동적일 수도 있고, 중단점 단위로 고정되어 있을 수도 있습니다.
이러한 선택은 컨텐츠 영역의 크기가 화면 크기에 따라 변하는 정도에 영향을 줍니다.
1 Fixed Grid
고정형 그리드에서는 컨텐츠 영역의 최대 너비 컬럼 너비 가 고정됩니다.
화면 크기가 변하면 마진의 크기가 늘어나거나 줄어듭니다.
컬럼이 화면에 모두 표시되지 않는 시점이 되어야 컨텐츠 영역의 레이아웃이 변하게 됩니다.

5. Types of Grids
2 Fluid grid
유동형 그리드에서는 마진이 고정됩니다.
브라우저의 너비가 변하면 컬럼의 너비가 변합니다.
사용 가능한 모든 공간을 활용할 수 있다는 장점이 있지만, 각 요소들이 늘어나 보일 수 있습니다.
화면의 크기가 변경되면 컨텐츠 영역의 레이아웃이 함께 변합니다.
주어진 중단점 범위 내에서 여러 가지 화면 크기에 대응해야 할 때 활용하기 좋습니다.
💡 Tip. 데스크탑 환경에서는 고정형 그리드를 사용하고
모바일이나 태블릿 환경에서 유동형 그리드를 사용하는 것이 좋습니다.

6. Building the Grid
Step 1 Deciding the breakpoints
디바이스 크기나 브라우저의 너비가 변하면, 페이지의 컨텐츠도 그에 맞게 조정됩니다.
각 중단점에는 최소 너비 속성이 있습니다. 다시 말해 화면 크기가 두 중단점 사이에 있을 경우, 더 작은 중단점을 기준으로 합니다.
화면 크기와 관계없이 일관성 있게 디자인하기 위해서는 적어도 세 개의 중단점을 기준으로 디자인해야 합니다.
360px, 720px, 1280px 으로 중단점을 둘 경우, 다음과 같은 범위를 가지게 됩니다.
IBM Carbon Design System의 standard breakpoints
Mobile 360px 719px
Tablet 720px 1279px
Desktop 1280px

7. Building the Grid
Step 2 Adding Frames/Artboard
피그마 또는 선호하는 도구 에서 각 디바이스를 위한 프레임을 추가합니다.
각 디바이스의 화면 크기는 우리가 설정했던 중단점 사이에 있어야 합니다. 여기서는 피그마의 프리셋 프레임에서 선택했습니다.

8. Building the Grid
Step 3 Adding the Grid
Mobile
프레임을 선택하고 컬럼 그리드를 추가합니다.
컬럼 수는 4개, 거터는 16, 마진은 24로 설정합니다.
열 너비는 자동으로 auto로 설정되며, 이는 유동형 그리드라는 것을 의미합니다.

9. Building the Grid
Step 3 Adding the Grid
Tablet
모바일과 비슷하지만 컬럼수를 8개로 늘립니다.
컬럼 수가 많아지면 큰 화면에서 레이아웃의 선택지가 많아집니다.
이렇게 하면 컨텐츠가 너무 확장되어 보이지 않게 할 수 있습니다.

10. Building the Grid
Step 3 Adding the Grid
Desktop
데스크탑을 위한 그리드는 고정형으로 하는 것이 좋습니다.
데스크탑 프레임에 컬럼 그리드를 설정하고, Type 을 stretch 에서 center 로 변경합니다.
컬럼 너비를 80px, 거터는 16px로 두고 컬럼 개수를 12개로 합니다.
12개의 컬럼을 사용할 경우 레이아웃 구성을 통해 다양한 상황에 유연하게 대응할 수 있습니다.
6개, 4개, 3개씩 컬럼을 묶거나, 3 6 3, 2 8 2 등 다른 개수의 그룹으로 묶을 수 있습니다.
💡 Web app의 경우 1440px 까지 유동형을 사용하다가 1440px을 넘어갈 경우 고정형으로 변경하는 것이 좋습니다.
이 이상의 화면에서 유동형 그리드를 계속 사용한다면 컨텐츠가 너무 늘어나 보일 수 있습니다.

11. Building the Grid
Step 3 Adding the Grid
Desktop with Side Navigation
사이드 네비게이션이 존재하는 그리드를 만들기 위해서는 그리드를 2개의 영역으로 나눠야 합니다. 하나는 사이드 네비게이션을 위한 영역이고, 나머지는 컨텐츠 영역입니다.
Side Nav
데스크탑 프레임 안에 사이드 네비게이션 영역이 될 248px 너비의 프레임을 추가합니다.
해당 프레임에는 1개 컬럼에 24px의 마진을 가지는 그리드를 생성합니다.
Contents Area
메인 프레임의 나머지 영역에 프레임을 추가합니다.
컨텐츠 영역의 너비가 1032px이기 때문에, 태블릿을 위한 그리드 700 1280 와 동일한 그리드를 사용합니다.
컨텐츠 영역의 horizontal constraints 를 left and right 로 설정합니다. 이렇게 하면 메인 프레임의 사이즈에 맞게 컨텐츠 영역이 조정됩니다.

12. Using the Grid
그리드는 디자인의 기반을 잡는데 도움을 주는 가이드입니다. 그리드를 사용해 디자인할 때 다음 항목들을 명심하세요.
모든 컨텐츠는 컨테이너 내부에 존재해야 합니다.
컨테이너는 각 컨테이너가 걸쳐있는 컬럼의 맨 바깥쪽 가장자리까지 확장되어야 합니다. 그리고 거터 영역을 침범하면 안됩니다.
컨테이너 내부의 요소는 그리드를 따르지 않아도 됩니다. 각 요소들은 부모 컨테이너의 패딩에 따라 정렬될 수 있습니다.
이미지, 일러스트레이션, 히어로 이미지는 고정형/유동형 그리드에 상관없이 그리드 영역을 넘어서까지 확장될 수 있습니다.
피그마로 그리드를 디자인 할 경우, 부모 컨테이너에 horizontal constraints 를 추가하여 그리드에 맞게 반응형으로 조정되도록 하는 것이 좋습니다.
고정형 그리드에서는 Center , 유동형 그리드에서는 Left and right 로 설정해주세요.
레이아웃에 맞게 컨텐츠를 배치하고 프레임 크기를 조정하면서 그리드가 어떻게 바뀌는지 살펴보세요.

13. Conclusion
반응형 그리드를 통해 다양한 디바이스에서 디자인이 어떻게 보일지 컨트롤 할 수 있습니다.
그리드는 고정된 기준을 따르지 않아도 되고, 프로젝트에 맞게 설정하면 됩니다.
컬럼의 개수, 거터와 마진의 크기는 본격적으로 프로젝트를 시작하기 전에 결정해야 합니다.
그리드가 반영되더라도 가이드라인일 뿐 무조건 지켜야 하는 것은 아닙니다. 무엇인가 강조하기 위한 목적이 있다면 그리드를 벗어나도록 표현할 수 있습니다.
그리드 시스템은 보장이 아니라 보조 도구에 가깝습니다.
그리드는 여러 가지 가능성을 포함하고 있으며, 디자이너는 그 중에서 원하는 스타일에 가까운 것을 선택할 수 있습니다.
하지만 그리드를 잘 사용하기 위해서는 연습이 필요합니다.
Josef Muller Brockmann

14. 나쁜 UX 디자인 SaaS에서 피하지 못한 최악의 UX 디자인 13가지
https://userpilot.medium.com/bad ux design 13 worst ux design fails to avoid in your saas 973431a26208
우리는 소비자로서 서비스의 나쁜 UX를 종종 보게 됩니다.
Saas 서비스의 관점에서 보면 나쁜 UX는 결제하는 유저의 수를
줄어들게 할 우려가 있습니다. 따라서 우리가 어떤 부분에 주의해야
하는지 알아야 합니다. 그래야 제품에 포함된 나쁜 UX를 제거하거나,
이러한 항목을 피해서 디자인 할 수 있습니다.
이번 글에서는 13가지 디자인 실수에 대해서 알아보겠습니다.
image: Freepik.com

15. #1 새로운 기능을 새 탭에서 띄우기
이런 상황을 상상해 봅시다 :
매일 사용하는 프로젝트 관리도구를 살펴보다가, 작업 시간을 추적하는 새로운 기능을 발견하게 되었습니다.
그런데 어떤 기능인지 궁금해서 클릭해보았더니 갑자기 새 탭이 열렸습니다.
사용자의 관점에서 보면 이건 짜증나는 상황입니다. 이전에 하던 작업을 두고 갑자기 어딘가로 데려가버린 것이니까요.
서비스에서 온보딩 지원 소프트웨어를 사용할 경우 치명적입니다.
종종 사용자가 새 탭을 열었을 경우에는 페이지 변화로 인식되지 않는 경우가 있습니다.
이런 상황에서 사용자가 새 기능을 클릭할 때 관련된 툴팁을 보여주는
자동화 온보딩 시스템이 동작하지 않을 수 있습니다.
그러면 사용자가 온보딩용 툴팁을 보지 못하게 됩니다.

16. #2 긴 드롭다운 메뉴
엄청나게 긴 드롭다운 메뉴를 본 적이 있나요?
어마어마한 양의 텍스트가 등장하고, 우리가 찾는 것은 맨 아래에 있습니다.
이 문제는 고객의 국적을 묻는 웹사이트에서 흔히 나타납니다. 만약 드롭다운을 사용하는 앱을 만난다면 원하는 항목을 찾아 한참을 스크롤하게 될 겁니다.
아예 드롭다운을 없애고 사용자가 입력하게 하는 것이 더 나을 수 있습니다. 자동완성 기능을 더하는 것도 좋은 선택입니다.
GA4 속성 설정 Do

17. #3 엄청난 양의 체크리스트
이상적인 경우 온보딩 체크리스트는 사용자에게 3 4개 정도의 활성화 과제를 제공하는 것이 좋습니다.
너무 과하지 않으면서, 제품의 기본적인 기능을 파악하기에 충분한 정보를 보여줘야 합니다.
하지만 종종 욕심이 지나쳐서 엄청나게 많은 체크리스트를 만들게 됩니다.
고객이 가입 1일차에 이탈하지 않고 모든 체크리스트를 해결할 수 있다고 생각하시나요?
사용자에게 많은 양의 정보를 한 번에 보내는 대신,
서비스에 익숙해지는데 도움을 주는 짧은 체크리스트를 제공하세요.
Don t
Do

18. #4 모달에 닫기 버튼이 없는 경우
최근 웹사이트에서는 유저를 잠시 멈추고 집중하게 만들기 위해 모달을 많이 사용합니다.
모달이 이러한 목적에 잘 맞는 이유는 모달이 너무 크기 때문입니다. 이전에 하던 작업에 방해가 될 수밖에 없습니다.
그런데 모달 밖으로 나올 방법이 없는 경우에는 이런 모달의 강력함이 독이 될 수 있습니다.
다른 선택지가 없기 때문에 특정한 행동을 할 수밖에 없도록 만드는 것은 나쁜 UX 디자인에서 종종 등장하는 다크 패턴입니다.
우리는 사용자가 모달에서 CTA 버튼을 클릭하도록 유도하고 싶습니다. 하지만 고객의 자율성을 고려해 모달에서 벗어날 수 있는 방법을 제공해야 합니다.
Don t
Do
Braze Cookie consent manager

19. #5 UI를 가리는 툴팁
이상적인 경우 툴팁은 특정한 UI 요소에 대해 상황에 맞는 정보를 간단하게 제공해야 합니다.
툴팁은 다른 UI를 가리는 형태로 배치되면 안됩니다.
가장 나쁜 상황은 툴팁이 설명하고자 하는 UI 요소를 툴팁 자체가 가려버리는 것입니다. 이것은 툴팁의 존재 이유에 부합하지 않는 상황이며 고객의 이탈을 유발할 수 있습니다.
Don t Don t

20. #6 원하는 것을 쉽게 발견하기 어려운 UI
UI가 너무 복잡해질 경우, 대부분의 사용자는 원하는 기능을 쉽게 찾을 수 없는 상태가 됩니다.
일반적으로는 제품의 핵심 기능 수를 줄이고 각각의 항목을 모두 찾기 쉽도록 디자인하는 것이 좋습니다.
대규모 엔터프라이즈 팀을 위한 제품을 만든다면, 모든 기능이 필수적이어서 줄일 수 없을 겁니다. 그래도 검색을 추가하는 등 사용자가 원하는 기능을 쉽게 찾을 수 있게 해야 합니다.
비슷한 방식을 도움말 센터 Help Center 에 적용할 수 있습니다 : 도움말 센터에서 원하는 항목을 쉽게 찾을 수 없다면 사용자 입장에서 사용성이 크게 떨어집니다.
GA4 상단 검색창 클릭시 Mixpanel 상단 검색창 클릭시
Do Do

21. #7 비밀번호에 대한 복잡한 요구사항
우리는 사용자에게 안전한 비밀번호를 입력하라고 요구합니다.
짧은 비밀번호나 password123 같은 단순한 비밀번호를 최대한 막고자 합니다.
이 때 어느 정도 안내를 하는 것은 합리적입니다. 하지만 너무 많은 요구사항 정보를 안내하는 것은 좋지 않습니다.
비밀번호를 만드는 데 너무 많은 것을 요구하게 되면 사용자들이 쉽게 스트레스 받을 수 있습니다.
사용성과 보안 사이에서 적정 지점을 찾아야 합니다.
Don t
Do
Notion

22. #8 선형적인 제품 둘러보기 과정
새로운 제품에 가입한 뒤 둘러보기 과정을 진행하고나서 이게 나랑 무슨 관련이 있다는 거지? 라는 생각을 해본 적이 있나요?
Saas 서비스를 많이 사용하는 사람들에게 선형적인 둘러보기 과정에 대해 물어본 결과, 다음과 같은 의견을 받을 수 있었습니다.
제품 둘러보기 과정은 항상 스킵합니다. 내가 원할 때 볼 수 있는 툴팁이 좋아요.
제품 둘러보기 과정에 문제가 있는 것은 아니지만, 대부분의 경우 그다지 필요하지 않은 상황에서 나타나는 것 같습니다.
제품 둘러보기 과정을 싫어하지만 내가 더 이상 진행하지 못하고 막혀있는 상황에 나타난다면 좋을 것 같아요.
내가 써보지 않은 기능을 클릭할 때마다 간단한 애니메이션과 짧은 텍스트로 설명해주는 것이
제가 겪어본 것 중에서 최고의 온보딩 경험이었습니다.
최악의 온보딩은 가입한 첫 날 50가지 기능 전체를 다 설명하려고 하는 서비스였구요.
이러한 상황은 Saas 비즈니스를 하면서 유저 리서치를 하지 않고, 고객의 세그먼트를 나누지 않으며,
모든 고객에게 동일한 형태로 안내하는 경우에 발생합니다.
선형적인 제품 둘러보기는 다음과 같은 과정을 거친다고 볼 수 있습니다.
동일한 제품 기능을 / 동일한 순서로 / 동일한 방식으로 / 모든 사용자에게
이것은 몇 년이 지나도 동일한 강의 노트로 계속 강의를 하는 강사와 비슷한 상황입니다.
가능하면 툴팁을 통해 특정 기능의 사용 방법을 설명하는 짧은 대화형 안내 interactive walkthroughs 를 적용해 보세요.
Do

23. #9 영구적으로 존재하는 데모 컨텐츠
데모 컨텐츠는 사용자가 데이터를 입력한 뒤에 제품이 어떤 식으로 보일지 보여줄 수 있는 좋은 방법입니다.
잘 적용했다면 실제 데이터가 적용된 뒤에는 데모 컨텐츠가 사라져야 합니다. 실제 데이터가 반영된 시점에서 데모 컨텐츠의 목적을 달성했기 때문입니다.
하지만 데모 컨텐츠가 계속해서 남아있는 경우가 있습니다. 심지어 없애려고 해도 없어지지 않는 경우가 있습니다.
만약 제품에서 개인화 경험을 제공하고 싶은 경우에는 이러한 현상이 발생하는 것은 좋지 않습니다.
Do

24. #10 업계 전문 용어 남용
Saas 비즈니스에서는 간결하게 표현해야 하는 경우가 많습니다.
모달이나 툴팁, 짧은 설문 등을 잘 활용하기 위해서는 특히 그렇습니다.
사용자에게 제품의 의도를 설명할 시간이 충분하지 않기 때문에,
요점만 간단히 전달하려고 합니다.
간결한 문구를 선택하는 과정에서 업계 전문 용어를 남발하게 될 수 있습니다.
쉽고 빠르게 내용이 전달되고 있는지 고민해야 합니다.
Don t Do

25. #11 시스템 상에서 띄우는 모달을 남용하는 것
모달은 본질적으로 파괴적입니다.
크고, 눈길을 끄는 일러스트로 채워져 있으며, 클릭해야 할 것 같은 CTA 버튼이 존재합니다. 당연히 사용자의 주의가 집중될 수밖에 없습니다.
만약 이런 모달이 사용자의 행동에 의해 나타났다면 괜찮습니다.
예를 들어, 고객이 제품 둘러보기 시작 같은 버튼을 직접 클릭했더니 모달이 나타났다면 놀라지 않습니다.
하지만 유저의 의도적인 행동 없이 시스템에 의해 자동적으로 모달이 나타나기도 합니다.
사용자는 자율성을 가지기를 원하는 상황에서,
시스템이 자동으로 띄우는 모달을 남용할 경우 사용성을 저하시킬 가능성이 높습니다.
시스템에 의해 등장하는 모달은 중요하고 긴급한 상황에서 사용하는 것이 좋습니다.

26. #12 자동 재생 영상
영상 컨텐츠는 엄청나게 매력적입니다. 최근에는 제품 온보딩 과정에 영상을 쉽게 추가할 수 있도록 도와주는 Saas 솔루션이 늘어나고 있습니다.
영상 컨텐츠의 몰입감은 사용자가 실제로 관심있는 내용으로 끌어들일 때 엄청난 도움이 됩니다.
하지만 사용자에게 관련 없는 내용으로 유도하려 할 때는 문제가 발생할 수 있습니다.
이와 연관된 대표적인 사례는 사용자가 무엇을 하고 있든 상관하지 않고 영상을 자동으로 재생하는 것입니다.
운이 좋아서 일부 관심 있는 사람들이 그 영상을 볼 수도 있습니다.
하지만 자율성을 침해받은 고객들이 닫기 버튼을 누르는 경우가 더 많을 겁니다.

27. #13 비어있는 상태
새로운 플랫폼에 가입했을 때, 사용자는 상호작용 할 수 있는 컨텐츠로 가득차 있기를 기대합니다.
적어도 데이터를 더 많이 입력하면 화면이 어떻게 변할지 확인할 수 있는 데모 컨텐츠를 찾게 됩니다.
UX 디자인에서는 이러한 상황을 비어있는 상태 Empty State 라고 합니다.
비어있는 상태는 컨텐츠가 이미 채워져 있는 상황보다 더 많은 활성화 에너지를 필요로 하기 때문에, 사용자의 활성도가 낮아지는 원인이 됩니다.
미술 시험에서 빈 종이에 그림을 처음 그리기 시작할 때 겪는 어려움과 비슷합니다. 심리학적으로 비어있는 상태에서 처음부터 시작하는 것은 어렵습니다.
Autopilot 의 공동 창업자인 Shiv Patel 은 이러한 이유로 빈 화면 empty states 이 모두 데모 컨텐츠로 대체되어야 한다고 주장합니다.
Do Don t

28. UI 디자이너로 빠르게 쉽지는 않겠지만 성장하는 방법
https://uxdesign.cc/how to grow as a ui designer the quick but not the easy way dcef8e409e63
UI 디자인이 잘 되면 정말 단순해집니다. 선과 박스, 그리고 텍스트
묶음으로만 구성되어 있습니다. 기본적인 컨셉을 잡는 것은 어렵지 않지만,
잘 하기는 어려운 그런 영역입니다.
막막한 상황에서 작업을 쉽게 시작할 수 있도록 도움을 주는, 공개된
디자인 시스템 같은 도구가 여러 가지 있습니다. 하지만 디자인 방법론이나
접근 방식, 전반적인 스타일을 이해하는 데는 더 많은 시간이 필요합니다.
여기서는 더 나은 디자이너가 되고 있다고 느끼게 해준 10가지 방법에 대해
소개해보려고 합니다.
image: Freepik.com

29. 성공적인 제품을 모방하여 UI에 대한 감각을 높이세요.
모방은 처음 시작했을 때 방향을 잡을 수 있는 유일한 방법입니다.
모방하는 과정은 제품이 어떻게 만들어지는지 이해하는데 도움을 줍니다.
다만 다른 사람들의 작업을 내 작업이라고 생각하지는 마세요.
인스타그램이나 에어비앤비같은 서비스는 하루 아침에 만들어진 것이 아닙니다.
성공적인 제품을 모방함으로써 수년간에 걸친 디자인 개선 결과를 배우게 됩니다.
이 과정은 UI에 대한 감각을 개선하고, 명백하지 않은 디자인 요소를 알아챌 수 있게 합니다.
작은 버튼에서 발생하는 인터렉션이라든지, 정보가 배치되는 방식에 집중해보세요.
디테일을 살피는 안목이 늘어날 것입니다.

30. 꾸준하게 하세요.
훌륭한 결과를 만들기 위해서는 나쁜 결과물도 많이 만들어봐야 합니다.
지금 하는 것이 효과가 있는지 알 수 있으려면 충분히 오랜 기간 지속해야 합니다.
복리의 법칙을 이해하고 계속 연습하세요.
매일 기술을 연마하기 위해 노력하는 간단한 행동이 더 나은 디자이너가 되는데 큰 영향을 미칠 겁니다.
글쓴이의 경우 Daily UI 챌린지를 통해 매일 조금씩이라도 연습하는 습관을 들일 수 있었고, 이러한 습관이 비주얼적인 부분을 향상시키는데 큰 도움이 되었습니다.

31. 디자인 문서를 읽으세요.
디자인 문서를 이케아에서 가구를 샀을 때 같이 들어있는 매뉴얼 같은 것이라고 생각하세요.
디자인 문서는 디자인이 모범 사례를 따르고, 플랫폼이나 환경이 달라지더라도 일관성을 유지할 수 있도록 도와줍니다.
이를 통해 유명한 앱들이 하드웨어 플랫폼에 어떻게 통합되어 있는지, 그리고 빅테크 회사들이 어떤 디자인 방법론을 사용하는지 배울 수 있습니다.
Google People AI Research Guidebook
https://pair.withgoogle.com/guidebook
Google Material Design v3
https://m3.material.io/
Apple Human Interface Guidelines
https://developer.apple.com/design/human interface guidelines/guidelines/overview/
IBM Carbon Design
https://carbondesignsystem.com/
다음 문서를 읽어보세요.

32. 디자인에 대한 글을 작성해 보세요.
복잡한 아이디어를 쉽게 설명하는 것은 디자이너로서 엄청난 능력입니다.
처음 Medium 아티클을 작성했을 때, 글을 쓰는 과정에서 디자인의 근거를 설명하기 위한 단어를 찾는 것이 얼마나 어려운 일인지 깨닫게 되었습니다.
글쓰기는 어렵습니다. 글쓰기는 생각하는 것입니다.
글을 더 많이 써보세요. 작업 결과나 근거, 생각의 과정을 더 잘 설명할 수 있게 될 겁니다.
디자인 결과를 다른 사람에게 설명할 수 있는 만큼 좋은 디자이너로서 인정받을 수 있습니다.

33. 디자인 아티팩트, 문서를 만들어보세요.
잘못된 문서화는 좋은 디자인도 망칠 수 있습니다.
디자인 아티팩트를 만드는 것도 요점을 전달하기 위해 중요한 과정입니다.
디자인 아티팩트란 디자인을 준비하는 과정에서 만들어내는 결과물을 의미합니다. 페르소나, 사이트맵, 와이어프레임, 고객 여정 지도 같은 것들이 해당됩니다.
그 동안의 경험에 따르면, 디자인 아티팩트를 만들면서 내가 가정했던 내용들을 검증하고 방향성을 명확히 할 수 있었습니다.
디자인을 위한 근거를 탐색하는데 도움이 되기도 했습니다. 이 과정을 통해 디자인을 보다 엄격한 프로세스로 진행하게 되었습니다.

34. UI 트렌드를 이해하세요.
단순히 트렌드를 따르지 말고, 왜 이런 트렌드가 되었는지 이해하세요.
그라디언트 같은 것들이 트렌드가 되었을 때, 시각적으로 화려하다는 이유로 별 생각없이 맹목적으로 따르게 될 수 있습니다.
왜 트렌드가 되었는지, 그리고 이 유행이 얼마나 더 오래갈지 고민해보세요.
예를 들어, 그라디언트는 2018년에 유행이었습니다. 플랫 디자인을 개선하고 디자인에 깊이와 차원을 더하는데 도움이 되었기 때문입니다.
브루탈리즘 웹 디자인
그라디언트

35. UI/UX 뉴스를 계속 확인하세요.
디자이너로서, 우리가 만들어내는 것만큼 우리가 소비하는 것이 무엇인지도 중요합니다.
매일 새로운 정보를 흡수하는 방법을 배워야 합니다. 팟캐스트, 트위터, 디자인 서적, 미디엄 아티클 등 다양한 경로가 있습니다.
항상 새로운 정보를 받아들이고, 기존의 사고 방식에 끊임없이 도전해야 합니다.
디자인은 계속 진화하고 있습니다. 오늘 배운 것이 내일은 적절하지 않거나 구식이 될 수도 있습니다.
계속 영감을 찾고 다른 사람들로부터 배우는 것을 멈추지 마세요.
Sidecar
https://sidebar.io/
UX Collective Newsletter
https://newsletter.uxdesign.cc/
Hey Designer
https://heydesigner.com/
UX/UI/프로덕트 관련 뉴스레터 해외
User Experience Database
https://www.uxdatabase.io/newsletter
Good UI
https://goodui.org/
Growth Design
https://growth.design/case studies

36. UI/UX 뉴스를 계속 확인하세요.
디자이너로서, 우리가 만들어내는 것만큼 우리가 소비하는 것이 무엇인지도 중요합니다.
매일 새로운 정보를 흡수하는 방법을 배워야 합니다. 팟캐스트, 트위터, 디자인 서적, 미디엄 아티클 등 다양한 경로가 있습니다.
항상 새로운 정보를 받아들이고, 기존의 사고 방식에 끊임없이 도전해야 합니다.
디자인은 계속 진화하고 있습니다. 오늘 배운 것이 내일은 적절하지 않거나 구식이 될 수도 있습니다.
계속 영감을 찾고 다른 사람들로부터 배우는 것을 멈추지 마세요.
from.designer
https://maily.so/from.designer
디자인 나침반 레터
https://maily.so/designcompass
UX/UI/프로덕트 관련 뉴스레터 국내
팁스터
https://maily.so/tipster

37. 예술의 방향성에 대해 공부하세요.
UI 디자인도 디자인입니다.
UI 디자인을 일반적인 관점에서의 디자인이라고 생각하는 것이 도움이 된다고 생각합니다.
결국 UI는 시각적인 요소들로 구성되어 있습니다.
디자인할 때 예술적인 감각과 미학을 더할 수 있으면 디자인 결과를 개선하고 더 매력적으로 보이게 할 수 있습니다.
시각적 위계, 색 이론, 시각적 부하 및 기본적인 예술의 개념들을 이해하는 것은 아름다운 UI를 디자인하는데 도움이 됩니다.
awwwards.
https://www.awwwards.com/

38. 본인이 아직 과정 중에 있다는 것을 이해하세요.
다른 사람들도 처음에는 별로였습니다.
디자이너로서의 여정은 스프린트보다는 마라톤에 가깝습니다. 마음에 들지 않더라도 계속 움직여야 합니다.
더닝 크루거 효과 Dunning Kruger effect 에 대해 알고 있어야 합니다.
사람들이 특정 영역에서 본인의 지식이나 능력을 과대 평가하는 인지적 편향을 말합니다.
여정 초기에 생길 수 있는 안일함에 주의하세요. 디자이너로서 성장하는데 방해가 될 수 있습니다.

39. 성장에는 속도 제한이 없습니다.
표준화된 페이스라는 건 바보들을 위한 것입니다.
어느 업계든 어떤 수준에 도달하려면 N년의 경험이 필요합니다. 라고 말하는 사람들이 있을 겁니다.
연차가 유용한 지표일 수는 있지만, 내 성장을 이러한 기준에 맞출 필요는 없습니다.
나에게 맞는 속도를 찾으세요. 나에게 맞는 적당한 난이도를 유지하세요.
매일 조금씩 나아지도록 꾸준히 진행하면, 나중에 얼마나 성장했는지 놀라게 될 것입니다.
표준화된 페이스라는 건 바보들을 위한 것입니다. 시스템은 누구든 따라올 수 있도록 설계되어 있습니다.
만약 당신이 다른 사람들보다 더 의욕 넘치는 상태라면, 다른 사람들의 기대치보다 훨씬 많은 것들을 해낼 수 있습니다.
그리고 이 원칙은 학교든 일이든 삶의 모든 영역에 적용할 수 있습니다.

40. Conclusion
디자인은 창의적인 분야입니다. 디자인에 대한 열정이 없다면 성장이 멈출 것입니다. 열정을 강하게 유지하세요.
디자인을 잘하게 된다. 라는 것은 오랜 시간에 걸쳐 지속적으로 일어나는 일입니다. 여기엔 끝이 없습니다.
좋은 디자이너가 되는 것은 다른 사람들과 함께 도전적인 문제를 해결하는 것도 포함됩니다.
인내심을 가지고 좋은 디자이너가 되기 위한 여정을 즐기세요. 그리고 같은 길을 걷고 있는 다른 사람들을 도와주세요.
이 글에서 무엇인가 얻어갈 수 있으면 좋겠습니다. 읽어주셔서 감사합니다!

41. 감사합니다 :