TIL-27

연히·2025년 2월 24일

목록 보기

27/68

디자인 카타

평균 지출액 vs 월 별 지출액 어떤 것이 사용자 접근성이 높을까요?

* 왜 해당 UI가 더 좋은 지 작성합니다.

B안. (월 별 지출액)
매월의 지출 내역을 확인함으로써, 각 달의 특수한 지출을 파악할 수 있다. 또한 월별 지출을 보면, 특정 월에 지출이 급증하거나 급감하는 현상을 쉽게 감지할 수 있어, 이를 관리하거나 계획할 수 있다.

* 나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않은지 작성합니다.

A안. (평균 지출액) 간단하고 직관적이고 전체적인 흐름이나 장기적인 예산 계획엔 유리하나, 특정 시점에 대한 정보가 부족하며 큰 지출이 발생할 경우, 이를 반영하지 못해 평균이 왜곡될 수 있다.

* 의견 더하기

A안은 평균 지출액만 B안은 월 별 지출액만 표기 되었다면 두 가지의 장단점이 크게 두드러졌을 텐데, B안엔 평균 지출액도, 월 별 지출액도 모두 표기가 되어 있어 B안이 더 좋은 UI라고 생각한다.

하루 한 장 UX의 법칙 100

DAY 13. 빠르게 피드백을 제공하라. 그렇지 않으면 문제가 생긴다.

인간-컴퓨터 상호작용 연구자 제이콥 닐슨에 따르면, 디자인할 때 중요하게 고려해야 할 반응 시간 임계값을 다음과 같은 세 가지가 있다.

0.1초 : 시스템이 즉각적으로 반응하는 느낌을 주는 한계
1초 : 사용자가 지연을 인식하더라도 사고 흐름이 끊기지 않는 한계
10초 : 사용자가 현재 상호작용에 집중할 수 있는 한계

즉, 컴퓨터가 1초 이내에 입력에 반응하면 우리는 이를 '반응이 빠른' 시스템으로 생각하지만, 1초 이상 기다리게 되면 시스템이 느리다고 인식한다는 것이다. 그래서 UX 디자이너는 2초가 지나면 사용자에게 "컴퓨터가 처리 중임"을 알리고, 5초가 지나면 얼마나 더 기다려야 하는지를 알려주기 시작해야 한다.
왜냐하면 속도는 궁극적인 사용성 지표이기 때문이다. 속도는 사용자 경험에 큰 영향을 미쳐, 디자인 자체보다도 더 기억에 남을 수 있다.

DAY 14. 마찰이 항상 나쁜 것은 아니다.

디자이너의 역할이 사용자에게 최대한 쉽게, 모든 장애물을 제거하고, 그들이 목표를 가장 빠르게 달성할 수 있도록 경험을 디자인하는 것이라고 생각할 수 있다. 하지만 항상 그런 것은 아니다. 불필요한 마찰은 제거해야 하지만, 모든 상호작용이 마찰 없는 경험의 속도를 요구하지는 않는다. 때로는 사용자가 조금 더 천천히 진행하고, 그들이 무엇을 하려 하는지에 집중해야 할 필요가 있다.

식사 시간 팀 활동

* “아무거나 틀어줘!” 유튜브는 왜 랜덤 재생 기능을 테스트할까?

https://ditoday.com/why-is-youtube-testing-a-shuffle-feature/

최근 유튜브는 ‘아무거나 재생’ 버튼 기능을 테스트 중이다. 이 버튼은 사용자가 콘텐츠 선택에 드는 시간을 줄이기 위해, 무작위로 영상을 재생한다. 이는 기존 추천 알고리즘의 한계를 보완하고, 필터 버블 문제를 완화할 수 있는 방법으로 주목받고 있다. 그러나 비슷한 기능이 넷플릭스에서 실패한 사례가 있어, 유튜브는 세심한 UX 디자인을 통해 사용자의 선호에 맞는 콘텐츠를 추천해야 할 필요성이 있으며, 이를 통해 유튜브는 사용자 경험을 개선하고, 새로운 콘텐츠 큐레이션 방식에 도전하고 있다.

'UI 디자인의 모든 것' 3강

레이아웃

* 해상도

💡 해상도란 화면의 정밀도를 나타내는 지표로 스크린의 가로 픽셀 수 X 세로 픽셀 수를 기준으로 해상도의 정밀도를 표현한다.

해상도 선정 기준
- 현재 스크린 점유율 기준으로 작업하는 것이 좋다.
- StatCounter에서 조회하여 쉽고 빠르게 확인할 수 있다.
- 대표적으로 안드로이드는 360X800, IOS는 375X812 해상도를 사용한다.
일관된 디자인
- 사용자가 모든 해상도에서 일관된 디자인을 경험할 수 있도록 노력해야 한다.
- 다양한 해상도를 대응할 수 있도록 디자인하는 것은 중요하다.

* 고정과 가변 영역

💡 해상도에 맞는 레이아웃을 작업하기 위해서는 고정과 가변 영역을 잘 설정해야 한다.

고정 (Fix)
- 해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것이다.
- 좌우 마진은 모든 페이지에 일관되게 적용되어야 하기 때문에 고정으로 설정한다.
가변 (Flexible)
- 고정과 다르게 해상도가 커지거나 작아지면 비율에 맞게 같이 확대되거나 축소되는 것을 의미한다.
- 해상도에 따라 크기가 변하는 버튼, 배너와 같은 이미지는 가변으로 설정을 하는 편이다.

그리드 시스템

* 그리드란?

💡 그리드(Grid)라는 단어는 사전적으로 '격자무늬'라는 의미를 갖고 있다. 바둑판이나 모눈종이를 떠올리면 이해가 쉽다.

디자인 헤이아웃에 동일한 규칙을 적용하여 일관된 UI를 할 수 있게 도와준다.
Desktop, Tablet, Mobile 반응형 디자인 작업 시 해상도 대응이 용이해진다.

* 4가지 기본 요소

컨테이너(Container) - 콘텐츠 폭. 콘텐츠를 감싸고 있는 너비를 의미한다.
컬럼(Column) - 단의 넓이를 의미한다.
- Mobile: 2~6 (4컬럼을 주로 사용) / Tablet: 6~12 (6~8컬럼을 주로 사용) / Desktop: 12~16 (12컬럼을 주로 사용)
커터(Gutter) - 컬럼과 컬럼 사이의 간격을 의미한다.
- Mobile: 8~16 / Tablet: 16~24 / Desktop: 24~32
마진(Margine) - 화면의 좌우 여백의 너비를 마진이라고 부른다.
- Mobile: 16~20 / Tablet: 20~36 / Desktop: 24~36
그리드 설정 - http://gridcalculator.dk/

* 반응형 디자인

💡 정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것을 반응형 디자인이라고 한다.

반응형 디자인 왜 중요할까?
- 다양한 디바이스 사용
- 일관된 디자인
- 비용 효율화
- 콘텐츠 최적화
브레이크포인트(Breake point)란?
반응형 디자인에서 레이아웃이 변화하는 지점을 의미한다.
브레이크포인트 설정 - 현재 기준 가장 많이 사용하는 디바이스 해상도를 파악하기 위해 점유율을 확인해야 한다.
최적화된 그리드, 12컬럼 - 12컬럼 크리드는 반응형 디자인에 최적화 되어 있다.

'UI 디자인의 모든 것' 4강

반복되는 UI 디자인 분석

* 공통 UI 요소 찾아보기

💡 UI 디자인에서 공통으로 사용하고 있는 요소를 컴포넌트로 만들 수 있다.

❓ 공통 요소를 찾기 위해 아래 질문을 던져보자.

여러화면에서 공통으로 사용되는 UI 요소는 무엇인가?

동일한 스타일이나 동작을 가진 요소는 무엇인가?

기본 요소(item)
- 가장 작은 요소의 컴포넌트이다.
- 칩, 아이콘, 라이도 버튼, 체크박스, 버튼 등이 있다.
조합 요소(Module)
- 기본 요소+기본 요소, 기본 요소+조합 요소
- 카드(이미지+텍스트). 서치바(아이콘+입력필드), 스낵바(텍스트+버튼) 등이 있다.
섹션(Section)
- 조합 요소+조합 요소_여백(마진, 패딩)
- 네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등이 있다.
개발자 모드에서 분석하기

각 요소의 기준을 명확히 정의해 줘야 한다.

반복되는 UI를 찾을 때에는 큰 영역에서 작응 영역 순으로 찾아야 한다.

* 컴포넌트 구성

💡 UI 컴포넌트는 다양한 엘리먼트와 컴포넌트를 조합하여 만든다.

엘리먼트(Element)
- 더 이상 쪼개지지 않은 가장 작은 단위를 의미한다. (=파운데이션)
- 컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등의 요소들이 엘리먼트에 속한다.
컴포넌트(Component)
- 엘리먼트+엘리먼트를 조합하여 재사용이 가능한 블록의 형태인 형태를 의미한다.
합성 컴포넌트(Compound Component)
- 컴포넌트+컴포넌트를 조합하여 합성 컴포넌트를 만들 수 있다.
페이지(Page)
합성 컴포넌트를 활용하여 UI화면을 그려낼 수 있다.

컴포넌트는 작은 단위부터 점진적으로 큰 단위로 작업해야 한다.

* 컴포넌트 네이밍

💡 컴포넌트 네이밍을 구조화하면 원활한 커뮤니케이션을 할 수 있다.

영문 네이밍
- 네이밍은 영문으로 정의해야 한다.
- 아이콘과 컴포넌트 네이밍은 개발로 활용될 확률이 높기 때문에 영문으로 정의해 주는 것이 좋다.
사용 맥락에 따른 네이밍
- level : item, module, section 등
- type : button, card, list, chips, checkbox 등
- direction : row, vertical, column, horizontal 등
- size : small, medium, large, xlarge, 2xlarge 등
Assets 패널 적용
- 라이브러리 파일 탐색 용이
  - Assets 패널은 파일의 구조를 반영하여 라이브러리 경로를 표시하고 있다.
  - 파일 경로는 File>Page>Frame(Section)의 구조를 따르고 있다.
  - 파일 경로의 각 단계는 Assets 패널의 제목을 나타낸다.
  - 알파벳순으로 페이지를 표시하고 있다.
- 단축키
  - 맥 : ⌥ Option + 2
  - 윈도우 : Alt + 2

🥰 Blah Blah

오늘은 복습을 중심으로 공부해서 조금은 숨통이 트인 하루. 예전엔 아티클이 다 읽을 수도 없게 쏟아져 나온다고 생각했는데, 매일 몇개씩 읽다보니 막상 읽을게 별로 없다. UX/UI 공부도 계속 하다 보면 조금은 익숙해질 날이 올까~

연히

끊임없이 배우는 디자이너 입니다 :)

이전 포스트

TIL-26

다음 포스트