UI/UX

기본 정보

명칭: UI / UX
영문명: User Interface / User Experience
한글명: 사용자 인터페이스 / 사용자 경험
분류: 디자인 및 서비스 설계
주요 용도: 사용자가 쉽고 편리하게 서비스를 이용할 수 있도록 설계
관련 주제: #UI #UX #디자인 #웹디자인 #앱디자인

개요

UI(User Interface)는 사용자가 직접 보고 조작하는 화면과 요소를 의미하며, UX(User Experience)는 서비스를 이용하면서 사용자가 느끼는 전체적인 경험과 만족도를 의미한다.

좋은 UI는 보기 쉽고 사용하기 편하며, 좋은 UX는 사용자가 원하는 목표를 빠르고 자연스럽게 달성할 수 있도록 돕는다.

현대 웹사이트와 모바일 애플리케이션에서는 UI와 UX를 함께 고려한 설계가 매우 중요하다.

UI와 UX의 차이

UI	UX
화면 디자인	사용자 경험
버튼, 색상, 폰트	사용 흐름
레이아웃	사용성
시각적 요소	만족도
인터페이스	전체 경험

UI/UX 설계 과정

요구사항 분석

↓

사용자 조사

↓

와이어프레임

↓

UI 디자인

↓

프로토타입

↓

개발

↓

테스트

↓

서비스 운영

UI 구성 요소

버튼(Button)
입력창(Input)
체크박스(CheckBox)
라디오 버튼(Radio)
드롭다운(Dropdown)
카드(Card)
테이블(Table)
모달(Modal)
탭(Tab)
네비게이션(Navigation)

UX 구성 요소

사용자 흐름(User Flow)
정보 구조(IA)
사용성(Usability)
접근성(Accessibility)
반응 속도
피드백
오류 처리
만족도

와이어프레임

와이어프레임은 화면의 구조를 단순하게 표현한 설계도이다.

+----------------------+

LOGO

------------------------

MENU

------------------------

IMAGE

------------------------

CONTENT

------------------------

BUTTON

+----------------------+

디자인보다 기능과 배치에 집중한다.

프로토타입

실제 서비스처럼 동작하는 시뮬레이션 화면이다.

목적

사용자 테스트
화면 검증
개발 전 확인
기획 검토

디자인 시스템

대표적인 디자인 시스템

Material Design
Apple Human Interface Guidelines
Fluent Design

디자인의 일관성을 유지하는 기준이 된다.

반응형 디자인

하나의 화면으로 다양한 기기에 대응하는 방식이다.

PC

↓

Tablet

↓

Mobile

화면 크기에 따라 레이아웃이 자동으로 변경된다.

접근성(Accessibility)

모든 사용자가 서비스를 이용할 수 있도록 설계하는 것을 의미한다.

예시

이미지 대체 텍스트
키보드 조작 지원
명확한 색상 대비
충분한 글자 크기
스크린 리더 지원

UX 5원칙

좋은 UX는 다음 요소를 고려한다.

사용하기 쉬운가?
배우기 쉬운가?
빠르게 사용할 수 있는가?
오류가 적은가?
만족스러운가?

UI 디자인 원칙

일관성 유지
단순한 구조
명확한 계층 구조
적절한 여백
충분한 대비
직관적인 아이콘
명확한 버튼 구분

대표 디자인 도구

Figma
Adobe XD
Sketch
Photoshop
Illustrator

현재는 Figma 사용 비중이 가장 높다.

협업 대상

기획자
프론트엔드 개발자
백엔드 개발자
QA
PM
마케터

UI/UX와 개발

UI/UX

↓

Figma

↓

HTML

↓

CSS

↓

JavaScript

↓

React / Vue

↓

서비스

디자인은 프론트엔드 개발의 기반이 된다.

주요 활용 분야

웹사이트
모바일 앱
관리자 페이지
ERP
쇼핑몰
키오스크
게임 UI
SaaS 서비스

장점

사용자 만족도 향상
이탈률 감소
전환율 증가
사용성 개선
브랜드 이미지 강화

단점

설계에 시간 소요
지속적인 사용자 테스트 필요
요구사항 변경에 따른 수정 비용 발생

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

8pt Grid 시스템 사용
디자인 시스템 구축
컴포넌트 재사용
모바일 우선(Mobile First) 설계
접근성(WCAG) 고려
컬러 및 폰트 가이드 통일
Figma Auto Layout 활용
프로토타입 테스트 진행
개발자와 디자인 토큰 공유
사용자 피드백 기반 지속 개선

UI/UX와 함께 사용하는 기술

대표 개발 및 협업 도구

Figma
FigJam
Adobe XD
Miro
Zeplin
Jira
Notion

출처

Nielsen Norman Group
Material Design 공식 문서
Apple Human Interface Guidelines