💡 25-04-30 (수)
UI/UX 디자인이란?
디자인은 앱이나 웹에만 디자인이 국한되지 않고 일상생활에서도 많이 사용된다
🟧 UI : 사용자 인터페이스
사용자가 제품(웹사이트,앱)을 사용할때 직접 보거나 조작하는 화면요소를 말한다
(버튼,메뉴,아이콘,입력창 같은 시각적 구성요소)
-> 사용자가 보는 모든 디자인
디자이너는 사용자가 디지털 제품을 사용할때 시각적으로 보이는 모든 것을 설계하는 사람이다
UI 디자인의 목표 ▶︎ 단순히 예쁘게 만드는 것이 아니라 명확하고 직관적이며 사용자가 쉽게 조작할 수 있도록 만드는것
UI 핵심요소는
▪️ 레이아웃
▪️ 컬러/타이포
▪️ 버튼(통일성 중요)
: UX의 흐름의 방향을 제시해준다
▪️ 아이콘(단순함>복잡성)
: 아이콘 의미와 카테고리 이름이 대응되는 걸 써야한다
너무 아이콘만 사용해도 의미전달이 어려우니 적절하게 사용한다
(너무 추상적인 아이콘은 ❌)
▪️ 여백과 정렬(기본중의 기본❗)
: 여백이 없으면 답답한 느낌
정렬을 잘 맞춰야 깔끔하고 정돈한 느낌을 주며 가독성을 높임
⤴︎ 텍스트는 왼쪽 정렬
▪️ 피드백
: 어떤 버튼을 눌렀을때 사용자에게 피드백을 준다
예를 들어 로딩이 되고 있다는 사실을 사용자에게 표현해주지 않으면 사용자는 모른다그래서 프로세스바를 보여줌으로써 사용자가 이해할 수 있게 피드백을 준다
⭐ 직관적, 통일성, 사용자의 빠른 행동, 전체적인 균형 - UI의 핵심
🟧 UX : 사용자의 경험
: 사용자가 제품이나 서비스를 사용할때 느끼는 전반적인 경험
(사용의 편리함,만족도,기대 충족 여부 등등)
-> 사용자가 느끼는 감정과 전체적인 흐름
사용자의 목표를 파악하자
⤴︎목표 ▶︎ 사용자가 제품을 사용할때 불편,스트레스 없이 기분 좋게 원하는 바를 이루도록 도와주는 것
UX의 핵심요소는
▪️ 사용자 리서치
: 내가 쓰는게 아닌 사용자가 쓰는 것이라는걸 항상 인지한다
사용자 입장에서 문제를 발견하고 해결해야 함 -> 가설, 설문조사 등
▪️ 페르소나(=가면)
: 개인이 사회적으로 드러내는 모습
(심리학/UX디자인/마케팅 등 다양한 분야에서 사용됨)
✴️ 사용자에 대한 공감의 시작
김지현이라는 사람을 위해 배달앱을 더 쉽고 편리하게 만들려고 고민한다
▪️ 사용자여정
✴️ 공감을 설계로 옮기는 지도
'4단계-대기'에서 초조함을 느끼는 점을 보고 실시간 위치 추적 기능이나 예상 도착 시간 알림을 추가할 수 있다
반응형과 적응형
▶︎ 반응형 (responsive web design)
: 웹 페이지 사이즈 조절시 안에 있는 요소들이 변한다
디바이스의 해상도의 크기에 따라 웹사이트의 크기도 유연하게 대응한다
반응형으로 구축하면 브레이크 포인트가 적용되어 크기에 맞게 요소들이 하나씩 줄어든다
➕ 브레이크 포인트 : 화면의 너비가 일정 크기 이상 작아지거나 커질 때, 레이아웃이나 스타일을 바꿔야 하는 기준점
예전에는 모바일,pc,테블릿 3가지 버전으로 각각 디자인했지만,
요즘엔 피그마를 사용하여 오토레이아웃으로 바로 적용시킬 수 있다
(버전이 다양하지만 URL 주소가 통일되어있음)
▶︎ 적응형 (Adaptive web design)
: 사이즈 조절해도 안에 있는 요소들이 안 변한다
서버나 클라이언트가 웹에 접근한 기기를 체크한 다음 기기에 맞는 템플릿을 제공한다
▶️ 맞춤형 제공
반응형과는 다르게 URL의 주소가 다르다(모바일/pc버전)
반응형과 적응형에는 정답이 없다
상황에 맞게 사용하면 된다 ‼️
Notch
: 카메라나 센서를 배치하기 위해 화면 일부를 파낸 형태
(스마트폰 화면 윗부분이 쏙 들어간 부분)
앞으로 디자인을 하면서 기기가 가지고 있는 특성을 이해해야한다
하지만 너무 어렵게 생각하지 않아도 됨 ❗
✴️ https://www.figma.com/community/file/1385659531316001292
아이폰의 노치 영역을 고려한 다양한 구성 요소가 포함되어 있어서 디자인할때 참고하면 된다
8배수 그리드
구글에서 머터리얼 가이드로 모든 사이즈를 8배수를 하겠다고 말했다
-> 디자인,시각적으로 좋다
➰ https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632
디자인에서 8배수로 했을때 장점들을 설명해주는 기사다
뭘해야 할지 모르겠으면 4배수/8배수로 디자인하면 된다 ❗
(1~8 중 아무거나 쓰고 8부터는 8의 배수로 쓰는 경우도 있음)
➰ https://medium.com/design-bootcamp/designing-in-the-8pt-grid-system-f3c1183ea6e8
"디자인에 부차적인 작은 정보를 담고 싶은 특별한 사용 사례가 있는데, 바로 이때 4pt 그리드 시스템을 활용합니다"
🗣️ 8배수 그리드로 했을때
디자인 일관성 유지로 전체 레이아웃이 더 깔끔하고 조화로워지며, 반응형 디자인에 유리하다
4배수 그리드
8배수 그리드로는 세밀한 조정이 힘들다
하지만 4배수로 쓰면 더 세밀하게 표현이 가능 -> IOS가 주로 사용
➰ https://uxdesign.cc/goodbye-8-point-grid-hello-4-point-grid-1aa7f2159051
✅ 더 높은 유연성 : 4의 배수를 사용하면 요소 간의 간격을 더 세밀하게 조정할 수 있어 복잡한 레이아웃에 적합하다
✅ 정밀한 조정 가능 : 텍스트 필드, 버튼, 테이블 등 다양한 요소들의 크기와 간격을 보다 정확하게 설정할 수 있다
그리드
🔻 gutter : columns 사이 간격
🔻 모바일 컬럼 - 4~6
🔻 웹 컬럼 - 12
☑️ 개발자 도구 : command + shift + C
먼저 프레임을 깔아준뒤 layout grid 선택하면 된다
마진값을 모르겠다 -> 프레임 (너비(width)값 - 화면 너비값)/2
➰ https://www.figma.com/resource-library/what-is-product-design/
▶︎ Figma 라이브러리 - UX/UI에 대해 더 알아가고 싶을 때
UX/UI 디자인, 제품 디자인, 협업 방법 같은 걸 배우고 익힐 수 있게 정리해둔 디자인 학습용 자료 모음 사이트
✏️ 클론 디자인을 위한 앱 서비스 선정 및 화면 선택하기
최근에 내가 가장 많이 사용한 앱이 무엇일까 생각해보면 유튜브같다
평소에 아무 생각없이 사용했던 앱에 디자인 눈으로 새롭게 다가가 보고싶은 생각에 유튜브 앱을 선택하게 되었다
