UI 디자인 (User Interface Design)
개요·정의
<img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663429662740/ffcjRzrXsTCDKgX6s8aDwC/articles/1788071764370-ad2e8289d5fa9fec.webp" alt="" data-orientation="original" data-original-src="https://d2xsxph8kpxj0f.cloudfront.net/310519663429662740/ffcjRzrXsTCDKgX6s8aDwC/articles/1788071765101-9deb6425bac6dc9f.webp" width="600" />
© Apple
UI 디자인(User Interface Design)은 사용자가 디지털 제품이나 기기를 직접 조작하는 화면과 요소를 설계하는 분야다. 앱과 웹사이트뿐 아니라 자동차 디스플레이, 스마트워치, 키오스크, 가전제품의 터치패널처럼 사람이 기계를 조작하는 다양한 화면을 포함한다.
버튼과 메뉴를 보기 좋게 배치하는 것만으로 UI가 완성되지는 않는다. 무엇을 누를 수 있는지 구분돼야 하고, 조작한 뒤에는 시스템이 어떤 상태인지 바로 확인할 수 있어야 한다. 글자와 색, 아이콘, 간격뿐 아니라 선택 상태와 오류 표시, 화면 전환과 움직임도 함께 다룬다.
같은 서비스 안에서는 조작 규칙을 일정하게 유지해야 한다. 한 화면에서 사용하는 버튼의 형태와 동작이 다른 화면에서도 이어져야 사용자가 기능을 매번 다시 배울 필요가 없다.
특징
정보의 순서는 크기와 위치, 간격, 색으로 구분한다. 제목과 본문, 주요 버튼, 보조 기능을 모두 같은 크기로 놓으면 어떤 행동을 먼저 해야 하는지 파악하기 어렵다. 가장 중요한 기능이 먼저 보이도록 차이를 만든다.
조작한 결과는 바로 보여줘야 한다. 버튼을 누르면 상태가 바뀌고, 파일을 올리는 동안에는 진행 상태를 표시하며, 잘못 입력한 항목이 있다면 어느 부분을 고쳐야 하는지 알려준다. 사용자가 시스템의 반응을 확인할 수 있어야 같은 동작을 불필요하게 반복하지 않는다.
화면 크기에 따라 같은 기능도 다르게 배치한다. 스마트워치에서는 한 번에 보여주는 정보를 줄이고, 태블릿이나 폴더블처럼 화면이 넓으면 두 개의 작업 영역을 동시에 보여줄 수 있다. 하나의 UI를 그대로 확대하거나 줄이는 방식만으로는 서로 다른 기기에 대응하기 어렵다.
접근성도 기본 조건에 들어간다. 충분한 글자 크기와 명암 대비, 넓은 터치 영역을 확보하고 색 하나에만 의미를 맡기지 않아야 한다. 화면을 직접 보기 어려운 사용자를 위해 스크린리더가 요소의 역할을 제대로 전달하는지도 함께 확인한다.
사례
애플 리퀴드 글래스
애플은 2025년 iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26, tvOS 26에 리퀴드 글래스(Liquid Glass)를 공통으로 적용했다. 반투명한 버튼과 탐색 영역이 뒤쪽 콘텐츠를 비추고, 사용자의 움직임과 화면 상태에 따라 형태가 변한다. iOS에서는 스크롤할 때 탭 막대가 작아졌다가 다시 위로 움직이면 커지는 방식도 도입했다. 서로 다른 기기의 운영체제를 하나의 시각 규칙으로 연결한 대규모 UI 개편 사례다.
구글 머티리얼 3 익스프레시브
구글은 2025년 안드로이드와 Wear OS에 머티리얼 3 익스프레시브(Material 3 Expressive)를 공개했다. 기존 머티리얼 디자인을 바탕으로 형태와 색, 움직임의 변화 폭을 키우고 개인화된 색상을 시스템 전반에 연결했다. 스마트폰뿐 아니라 작은 원형 화면의 스마트워치에서도 필요한 정보를 빠르게 구분할 수 있도록 컴포넌트와 움직임을 다시 조정했다.
삼성 One UI 8
삼성전자가 2025년 정식 배포한 One UI 8은 스마트폰 한 종류만을 기준으로 화면을 만들지 않고 일반 스마트폰과 폴더블, 태블릿의 서로 다른 화면 구조에 대응했다. 갤럭시 Z 폴드 계열에서는 AI 결과를 별도의 분할 화면이나 플로팅 화면으로 띄워 원래 작업을 유지할 수 있게 했고, 생성된 이미지와 텍스트를 멀티윈도 사이에서 바로 옮길 수 있도록 구성했다. 같은 운영체제가 화면 크기와 폼팩터에 따라 UI를 다르게 배치하는 최근 사례다.