TIL 260303 UI 디자인과 컴포넌트 알아보기

Navigation bar 와 App bar

위치나 디바이스 서비스 등등 가타부타의 이유로 명칭이 고정되어 있지 않은 편이라 명칭을 딱 잘라 구분하지 않고 혼용하기도 함.

 

global navigation bar - 한번에 사용자가 바로 이동할 수 있도록 메뉴를 다 노출 시키기 위한 경우. 2026 나이키 공홈 웹사이트 참고

 

columns과 grid

grid system design 핀터 검색

column / gutter(spacing) / margin

메뉴 라벨이 안적혀 있는 경우 이유는 사용자들이 이미 친숙한 경우에 ! 앱 서비스 이용자들이 장기화 된 경우..

 

bottom naviation bar 가 모바일 디바이스 화면에 흔한 이유는 엄지 손가락이 쉽게 닿는 지점에 중요하고 자주 사용되는 네이게이션을 위치시키기 위해서라는 ux적 이유가 있다 

 

tab bar

네비게이션 안의 2nd depth가 되는 세부 메뉴

 

card와 surface

카드 서페이스

다이얼로그 서페이스

스크롤 가능한 서페이스

서페이스는 캔버스같은 기능 card는 카드처럼 분리된 형태

 

pop-up ( modal / dialogue )

모달은 백그라운드 기능을 멈추고 반응해야 다음 화면으로 넘어감

다이얼로그는 백그라운드를 이용 가능함 다른 인터페이스와 상호작용 가능

 

divider(구분선)와 section

맥락적 구분 블럭 단위를 섹션이라고 함

구분선은 말그대로 구분해주는 선 역할

 

sheet - action(액션이 필요한 시트), bottom, side

기능보다는 어떻게 노출시킬지 팝업/모달과 함께 형태 고민의 한 선택지로 볼 수 있음

 

popover

버튼 드롭다운 같은 곳에 즉시 선택 메뉴 제공할때 활용

플로팅 액션 버튼(FAB)으로 활성화, 툴팁 노출시에도 활용

 

FAB

주로 우측하단에 동그랗게 떠있어 시각적 강조 버튼으로 주요 작업을 연결

 

button

클릭 가능한 액션 트리거 역할 UI 요소

활성 비활성 호버 클릭됨 상태 변화 시각화 중요 (활성>호버>클릭됨>비활성으로 위계가 달라질 듯)

 

Input Field

데이터 입력 상호작용 컴포넌트 (단순입력.멀티라인 입력/드롭다운 또는 자동완성)

고려사항 입력 값 유효성 검사와 오류 메시지를 명확히 제공 플레이스홀더 또는 힌트를 통해 사용자가 기대하는 입력형태를 이해할 수 있도록 도움

 

check box와 radio button

하나 이상 선택 vs 하나만 선택

 

toggle switch

on/off를 유저에게 실시간으로 시각적 피드백 해서 직관적 제어 가능하게 함

고려사항에서 스위치 크기를 충분히 키우기! *24, 28, 32 정도가 클릭에 충분히 큰 정도*

 

slider

드래그로 상호작용하는 컴포넌트 0% - 100%

 

drop down

메뉴가 주르륵 밑으로 내려옴

화면 세로 절약 & 다양한 옵션

 

icon

빠르게 의미전달, 아이콘 디자인으로 UI를 시각적으로 풍부하게 하면서 가독성 확보

 

tooltip

팁 제공, 오래 머무르지 않을 것

 

badge

새로운 정보나 알림의 필요성을 직관적으로 나타내기 위함

 

dashboard

정보를 한 눈에 보여주는 메인 현황 화면(모니터링)

 

toast

잠깐 나타났다가 사라지는 알림

 

app launcher 

여러 앱으로 이동하는 메뉴로 글로벌 네비게이션에서 활용

 

dropdown

숨겨진 정보 옵션 펼쳐서 선택

 

---

UI의 여러가지 상태

 

skeleton state

화면 골조만 먼저 제공해서 각 섹션에 어떤 컨텐츠가 올지 예상하고 사용자가 로딩중의 상태를 기다릴 수 있게 함

 

empty state

사용자가 파일 등을 입력하도록 비어있는 상태

 

default state (<-> filled state)

입력 기다리는 기본 상태 활성화가 되지 않은 기본화면 상태

로그인 화면의 비활성화 상태를 기본 상태라고 할 수 있음

 

고려사항 : 입력값이 유효하지 않을 경우 즉시 메시지 제공 , 유효한 데이터를 시각적으로 명확히 구분

 

default(활성/비활성 표시 없는 기본 상태) - focused(선택됨) - filled(입력필드가 채워짐) 순서

 

error state

에러 원인 + 해결 방법 제시 할 것

위협하거나 당황시키지 않도록 작성

 

loading state

프로그레스 바 나 로딩 스피너 로 로딩 중 표현 (스켈레톤도 가능)

재치있는 애니메이션 첨부 등으로 지루함을 달래게 할 수도 있음(마이크로 인터랙션)

 

disabled state

특정 작업 수행 불가 알려줌

 

필요한 상태를 설계하기 위한 판단 기준

유저와의 상호작용 흐름 파악 / 시스템 응답 파악 / 데이터 및 콘텐츠 상황

 

 

마디아 디자인 유튜브를 보면서, 내용의 위계를 파악하는게 중요하다고 생각했다.
그리고 그 위계를 아름답게 보여주기 위한 디자인스킬이 플러스 부가적인 것
각 기능 디자인이 주는 느낌도 알아두어야 적재적소에 활용 예를 들어 팝오버는 동그랗고 톡톡 튀는 팝한 느낌이 든다.
가독성을 가르는 것 : 크기(볼륨), 색, 위치, 자간, 행간 기타 등등
어떤 것이 가독성이 좋고 나쁜지 구별하는 것이 중요하다

---

레이아웃 (UI 구조화)

컨텐츠 구조화 패턴 / 시각적 흐름 패턴

 

UI 패턴 - 사용자에 맞게 결정함. 형태의 템플릿 고정!

유기체가 패턴! 원자 -> 분자 -> 유기체 수준

다양한 UI 패턴 - navigation, card, modal 등등에 각자 패턴이 지정됨

 

---

컬러

웹 접근성 지침 WCAG 에서는 텍스트의 가독성을 보장하기 위한 최소한의 대비 기준 제시

 

20%(프라이머리) 40%(세컨더리) 40%(뉴트럴) 비율이 일반적 프라이머리는 보통 하나
컬러 위계 구분해보는 연습
정보 위계 구분해보는 연습

---

폰트

 

UI 디자인용 폰트 체크리스트

• 읽기 쉬운 모양의 폰트 = 산세리프체
• 여러 두께와 언어를 지원하는 폰트
• 무료 사용 가능한 폰트

세리프체와 산세리프체

전체 인터페이스 디자인 폰트의 80%가 산세리프체를 활용

자간을 조절하는 경우가 생기는데 이것은 크기가 커질경우 자간이 더 커지는 비율이 커져서, 같은 위계일 경우 자간같은 폰트 스타일 역시 모두 통일 시켜줘야함.

 

폰트 크기는 최소 12px, 기준점은 14~18px로 하고 4, 8 단위로 커지거나 작아지게 게 크기 위계를 둠

기본적으로 regular와 medium을 기본으로 씀 최대 light까지(그 밑은 너무 얇아짐) 내려가지만, regular와 medium 차이가 얼마 안나기 때문에 둘 중 하나만 사용 

대비는 4.5:1 이상이어야 장애 여부와 상관없이 모두 편안하게 읽을 수 있음.

위계 조절하고 싶을 때 크기보다는 대비를 낮추는 편으로 선택할 수도 ...(강사님의 경우)

 

자간/행간 조절

같은 위계일 경우 자간/행간같은 폰트 스타일 역시 모두 통일 시켜줘야함.

자간 : 제목처럼 크기가 커질경우 자간이 커지는 비율이 커져서 -2에서 -1px 씩 조절

행간 : 여러줄이 아닌 경우 보통 120%, 여러줄은 150~180%

 

자주 쓰이는 폰트 

프리텐다드

Apple SD 산돌고딕 Neo(한글 IOS) + SF pro(영어 IOS)

Noto Sans KR(한글 android) + Roboto(영문 android)

---

아이콘

 

UI디자인에서 가장 많이 사용되는 것은 단순한 면과 선으로 이루어진 플랫한 스타일의 16~24px 크기의 작은 아이콘

아이콘은 초보의 경우 라이브러리 사용을 추천하며, 직관적이지만 과도한 단순화 혹은 보이지 않는 미세한 디테일을 경계해야 함.

 

직관적인 아이콘의 조건

• 정보의 핵심적인 의미를 포함
• 많은 사람들이 익숙해하는 형태

대표적인 아이콘 Material Icons (*Figma에서 Material Symbols plugin 검색)

 

비슷한 타 서비스의 UI 레퍼런스를 참고하거나 유저수가 많고 대중적인 서비스의 아이콘을 참고

의미/형태를 나타내는 영어 키워드로 검색하기

---

피츠의 법칙

'목표가 가까울수록, 그리고 클수록 더 빨리 클릭할 수 있다.'

 

관련 책 추천

UXUI의 10가지 심리학 법칙

도널드 노먼의 이모셔널 디자인

UX디자인의 7가지 비밀

UX/UI 심리학 소재 브런치 글

---

컴포넌트

 

Google_ Material Design UI Components

Components – Material Design 3

 

containment 1 (화면에서 정보 담기)

• 카드
• 리스트
• 디바이더

containment 2 (한정된 화면에서 더 많은 정보 전달하기)

• 시트
• 드롭다운
• 페이지네이션
• 캐러셀
• 아코디언

action (사용자가 행동하게 하기)

• 버튼
• FAB
• 아이콘 버튼
• 세그먼트 버튼

selection (사용자가 선택하게 하기)

• 데이트 피커
• 칩
• 슬라이더
• 라디오 버튼
• 체크박스
• 토글 스위치

communication (사용자와 대화하기)

• 뱃지
• 스낵바
• 프로그래스바
• 툴팁
• 다이얼로그

navigation (사용자가 탐색하게 하기)

• 앱바
• 네비게이션바(GNB,사이드 네비게이션)
• 서치바
• 브레드크럼
• 탭

text input (사용자가 직접 입력하게 하기)

• 인풋박스 - default, abled, disabled, 검색 및 자동완성, 텍스트 영역

컴포넌트 분석 실습

컴포넌트 분석.pdf

1.84MB