[TIL]1004 학습일지

[강의]체계적으로 배우는 피그마 기초 완전 정복 1주차

5-9강

 

■  8포인트 그리드

개발자와 소통하기 용이하게 하기 위해 임의 숫자를 기준으로 하는데, 이를 8포인트 그리드 디자인이라 함.

*최근에는 디바이스 해상도가 개선되어 2배수도 가능

 

- 8은 1,2,4,8로 나눌 수 있음.

- 그만큼 디자인을 축소하더라도 픽셀이 망가지는 것을 최소화할 수 있음

- 즉 해상도 업/다운스케일에 용이함

 

예제) 아래와 같은 버튼 3개 디자인이 있다고 할 때에 XLarge 버튼을 만든다면 폰트사이즈와 여백은?

버튼S: 폰트 14pt, 여백 8px

버튼M: 폰트  16pt, 여백 12px

버튼L: 폰트  18pt, 여백 16px

버튼XL: ?

답) 폰트  20pt, 여백 20px

 

■  피그마에서 지원하는 이미지의 최대 사이즈: 4,096px

 

 

---

[아티클스터디]인지 부하를 줄이는 UX 디자인의 비밀

https://brunch.co.kr/@cliche-cliche/209

 

[아티클 요약]

인지비용을 줄이는 것은 UX에서 매우 중요하며,

인지 노력을 최소화하여 사용자가 최대한 빠르고 쉽게 목적에 도달하도록 하여야 함.

 

■ 인지비용

사용자가 웹/앱을 이용할 때 뇌에서 다양한 정보를 처리하고 결정 내리는데 소요되는 인지적 노력.

 

■ 인지부하

사람의 두뇌가 정보를 처리하고 이해하는데 드는 정신적 노력의 양.

 

■ 인지부하를 줄이는 방법들

1. 간결함과 명확성: 불필요한 요소 삭제, 핵심기능에 집중
2. 직관적인 내비게이션: 메뉴탐색에 용이하도록 명확한 메뉴, 논리적인 페이지 및 잘 정의된 사용자 흐름 중요
3. 청킹: 그룹핑
4. 시각적 계층화: 색상, 크기, 대비를 활용한 하이라키 정리, 중요 요소 식별에 도움. 특히 핵심 행동을 이끌어낼 수 있는 CTA(Call to Action, 행동유도문구. 예시로 '지금 구입하세요', '더 알아보기', '구매하기' )에 잘 적용되어야 함.
5. 피드백과 가이드 제공: 수행한 작업에 대한 명확한 피드백으로 혼란 감소
6. 일관된 디자인: 새로운 페이지를 보더라도 빠르게 이해하고 적응하기 위한 스타일, 구조의 일관성
7. 유저테스트 & 반복: 실제 사용자 테스트를 통해 지속적으로 개선 필요

[인사이트]

• 5번 항목은 생각하지 못했던 부분인데, 눈으로 충분히 정보를 인지하지 못한 상태에서 조작이 일어날 시 꼭 필요한 기능인 것 같다.
• 웹환경이 좋지 않아 새로고침을 한다거나, 회원가입 중 공백이 생길 때라던가 현재까지 내가 수행한 작업에 대해 누락된 부분을 피드백하거나 오기입시 붉은 색으로 표시해주거나, 가이드를 충분하게 제공해주는 것은 사용자가 앱을 사용하는 환경에서 포기하지 않고 사용하게 해주는 주요한 기능이라고 생각되었다.
• 일전에 도널드 노먼의 책에서 가전제품의 UI/UX 사례에 대해 읽은 적이 있는데, 이들은 간결한 화면이 아닌 버튼을 직관적으로 누를 수 있도록 하는 것이 UX적으로 훌륭하다고 예시를 든 사례가 있었다. 예를 들어 세탁기 기능에서 네비게이션을 통해 울세탁까지 두세단계의 과정을 거쳐 도달하는 것보다 다소 외견이 복잡해보일지라도 울세탁 버튼을 누르면 바로 도달할 수 있도록 하는 것이 더욱 사용이 편리하다는 결과를 보였다고 한다. 이처럼 인지부하에 대해 개념이 상충하더라도 유저테스트와 사용환경에 따라 유연하게 적용하는 것이 UX에서 중요한 것이라 생각된다.
• 유저는 정보를 읽는게 아니라 빠르게 이해하고 싶어한다는 것이 인상적이다.