오늘 한일
-개인 과제 발제 참여(10시)
-실전 UI 디자인 2강 완강
-실전 UI 디자인 강의 실습 진행~
-실전 UI 디자인 3강(-2)
내일 할일
-실전 UI 디자인 3강 완강
-실전 UI 디자인 4강 진행
-강의 내용 실습 진행 이어서
📕실전 UI 디자인 2강
플랫폼과 레이아웃
디자인은 항상 사용자 맥락을 고려해 만들어지기에 사용자 기기에 따라 달라야 함
- 모바일-사용자의 이동이 간편, 한 손 조작, 빠른 탐색이 중요
- 데스크탑-넓은 화면을 활용해 복잡한 정보 구조도 한 번에 보여줄 수 있음
- 태블릿-모바일과 데스크탑 사이에 위치해 양손 조작, 세로/가로 화면 전환 고려 필요
플랫폼 별 주요 특징
데스크탑💻
- 정보량이 많아도 괜찮, 여러 활동으로 나눌 수 있음
- 마우스, 키보드, 스크롤 모두 사용 가능, 세밀한 정보 제시와 조작이 가능
- 한 화면 안에서 탐색과 입력을 동시에 처리하는 구조도 적합
태블릿📟
- 화면 너비가 넓고, 회전이 가능
- 양손 조작과 터치 기반 입력 동시 고려 필요
- 모바일보다 많은 정보를 한 화면에 담을 수 있지만 복잡한 인터렉션은 피하는게 좋음
모바일📱
- 화면 너비가 좁아 콘텐츠를 수직으로 나열해야 함
- 스크롤 탐색이 자연스럽고 인터랙션은 엄지손가락 중심
- 화면 내에 많은 정보를 넣기 보다느 단순한 흐름으로 설계
플랫폼별 레이아웃 전략
-
콘텐츠 구조
모바일-한 줄 흐름, 수직, 스크롤 중심->정보는 단계적으로
데스크톱-병렬 배치, 섹션 분리->정보는 한눈에 -
내비게이션 전략
모바일-상단 또는 하단에 최소한의 탐색 기능을 둬야 화면을 가지리 않음
데스크톱-사이드바나 전체 메뉴 구조를 함께 보여줘도 괜찮
*최근 트렌드는 데스크탑에서도 모바일 형태로 만드는 경우 많음
굳이 데스크탑 디자인 유지 X, 모바일 디자인 하나로 모든 플랫폼에 사용할 수 있도록 함 -
시선의 집중 영역
모바일-화면 상단 또는 하단에 시선이 먼저 닿음
데스크톱-화면 왼쪽 상단->오른쪽->아래 순으로 자연스럽게 시선이 흐름
📌반응형 레이아웃 유의할 점
- 실수1:모바일에 모든 콘텐츠를 그대로 넣으려 함
-작은 화면은 단순히 정보를 압축해서 집어넣는 것이 아니라 선택, 집중 필요 - 실수2:콘텐츠의 흐름이 디바이스마다 바뀌지 않음
-수직 스크롤이 편한 모바일과 병렬 탐색이 자연스러운 데스크톱의 사용 흐름은 다름 - 실수3:시선 흐름이 고려되지 않은 배치
-화면마다 눈이 먼저 가는 영역이 다름, 디바이스에 맞는 시선 흐름 고려 필요
UI 평가 지표 7가지 관점👓
- 정렬(Alignment)
정렬이 맞지 않으면 아무리 멋진 컴포넌트를 사용해도 어수선해 보임
반드시 왼쪽 정렬이어야 하나요?
:우리나라 문자는 왼쪽->오른쪽으로 읽기에 왼쪽 정렬이 자연스럽지만, 주목시킬 필요, 사용자에게 전달할 중요 정보는 가운데 정렬로 눈에 띄게 만들 수 있음. 또는 시선의 흐름, 콘텐츠의 흐름이 위->아래로 흐르고 있다면 가운데 정렬이 더 자연스러울 수 있음
- 공간감(Spacing)
같은 정보끼리는 가깝게, 다른 정보끼리는 멀리 배치해야 덩어리가 인식됨 - 정보 밀도(Density)->정렬, 배치에 영향 많이 받음
정보가 너무 빽빽하면 숨 막힘, 너무 적으면 불안하거나 공백이 많아 허전함 - 무게 중심(Visual Weight)
사람은 화면을 보는 순간 가장 먼저 눈에 띄는 것을 중심으로 전체 화면을 해석
눈으로 봤을 때 시각적으로 이 화면 안에서 어디에 가장 무게가 실려있는지에 대한 기준 - 시각적 위계(Visual Hierarchy)
위계는 무엇을 먼저 보고 어떤 순서로 행동할 것인가를 설계하는 일
가장 쉽게 접할 수 있는 경우->CTA 버튼 강조 - 정보 흐름(Flow)
위계가 정리되어 있어도 정보가 끊기는 지점이 있다면 사용자는 멈춤 - 목적 적합성(Fit for Purpose)
예쁜 디자인도 사용자의 목적에 부합하지 않으면 실패
앞의 다른 기준보다 더 중요, 우선적 고려해야 하는 요소
*인간은 기본적으로 이기적, 경제적
이기적->자신에게 이익을 주는 방향으로 생각
경제적->같은 결과라면 비용이 더 적게 드는 빙법을 선택
->사용자는 자신에게 혜택이 있을거라고 확신할 수 있을 때 사용, 같은 결과라면 편한 방법으로 해결하려고 하기에 목적 정확하게 전달, 더 쉽게 해결할 수 있도록 해야 함
MVP(Minimum Viable Product)
:최소 가치 제품, 사용자 문제 해결 개장 작은 형태의 제품
기획을 디자인으로 옮기는 방법
- 정보구조도(IA)
:전체적인 제품의 구성과 각 화면들의 관계 파악 가능 - 화면흐름도(Flowchart)=유저플로우, 유즈케이스
:실제로 사용자가 어떤 과정을 통해 제품을 사용하는지 시각적으로 확인 가능
플로우차트의 역할
-사용자가 어떤 의사결정 경로를 따라갈지 예측
-서비스에 필요한 화면 간 이동 구조 시각화
-MVP의 범위를 정의, 불필요한 화면 설계를 방지해 비용 절약
와이어프레임
-제품의 기본 구조이자 사용자 경험의 뼈대를 만들 때 와이어프레임 그림
와이어프레임 중요 이유
예쁘게 디자인하기 전 논리적으로 설계하기 위함
- 기능, 정보의 배치, 흐름, 위계를 시각적으로 정리 가능
- 시각적 표현 없이도 사용자 목적이 충족되는지 검토 가능
- 디자이너 혼자만이 아니라 기회자, 개발자와 의사소통의 도구가 됨
전략적 UI 사고 훈련
실제 제품 설계 시 배치에 대한 고민보다
- 이 화면은 사용자를 어떤 행동으로 이끌어야 하지?
- 지금 강조한 정보가 정말 그 행동을 돕고 있을까? 라는 질문이 더 중요
->UI는 목적에 맞는 전략적 구조가 더 중요(목적이 달라지면 구조도 변화해야 함)
화면 목적에 따른 전략
- 상품 구매 중심🛒
메인 이미지->제목 및 가격->후기->CTA로 구매 유도 - 구독 신청 중심📺
서비스 제목->구독 혜택->가격 및 비교 포인트 강조->CTA로 구독 유도 - 정보 전달 중심📢
제목->관련 정보->보조 정보 및 기능 안내
📗실전 UI 디자인 3강
컴포넌트의 실무적인 개념
-유지보수성과 확장 가능성을 고려해 만들어진 의도를 가진 시각 구조 단위
UI 요소=컴포넌트
- 버튼, 인풋 필드, 카드처럼 독립적인 기능을 가진 디자인 요소
- 검색창, 탭바처럼 인터렉션을 포함한 복합적인 UI 구조
- 배너, 상품 리스트, 게시물 피드처럼 반복 가능한 실제 디자인 패턴
=>우리가 다루는 모든 UI 요소는 컴포넌트, 의도적 사용되어야 함
📌컴포넌트 설계에서 중요한 것
-왜 이 구조를 컴포넌트화하는 것이 효율적인가 판단할 수 있는 사고력 중요
=>사고력이 뒷받침되지 않으면 실전의 여러 상황에서 유연한 대응 불가능
좋은 컴포넌트의 기준🚩
-좋은 컴포넌트는 사용성, 활용성을 고려해 설계하는 것이 핵심
- 재사용성(Reusability)
:다양한 페이지, 맥락에서 같은 의미로 사용될 수 있어야 함 - 유연성(Flexibility)
:상황, 상태, 데이터, 구조가 바뀌는 경우에도 레이아웃이 깨지지 않도록 고려 - 확장성(Scalability)
:다양한 조합으로 만들어져도 동일 컴포넌트에서 관리되도록 쉬운 구조 - 일관성(Consistency)
:제품 전체에서 동일한 컴포넌트는 항상 같은 높이, 라운드, 컬러로 유지 - 협업 친화성(Collaboration-friendly)
:컴포넌트의 네이밍, 상태명, 인터랙션 등 역할과 속성이 명확하게 정리
*시각적 디자인보다도 의미 구조와 재사용 가능성의 설계가 중요
