사용자 인터페이스 (User Interface, UI)

사용자 인터페이스(User Interface, UI)는 사람이 시스템에 입력을 주고 처리 상태와 결과를 확인하는 접점입니다. 버튼, 입력창, 메뉴, 화면의 안내 문구가 대표적인 구성 요소이며 명령줄이나 음성으로도 구성됩니다. 화면의 모양과 함께 어떤 행동을 할 수 있고 그 결과를 어떻게 알아보는지가 인터페이스의 작동을 결정합니다.

입력과 결과를 연결하는 구성

검색 화면에서는 입력창이 검색어를 받고 버튼이 요청을 보내며 결과 영역이 찾은 내용을 보여 줍니다. 처리 중 표시와 결과가 없다는 안내도 인터페이스에 포함됩니다. 사용자가 무엇을 입력했고 현재 어느 단계에 있는지 알 수 있어야 다음 행동을 선택할 수 있습니다. 기능이 서버에 구현돼 있어도 화면에서 찾거나 실행할 방법이 없으면 이용자는 그 기능을 쓰기 어렵습니다.

MDN의 접근성 있는 HTML 안내는 버튼, 링크, 폼 요소를 이용자가 상호작용하는 주요 제어 요소로 설명합니다. HTML의 기본 버튼은 키보드로 이동하고 활성화하는 동작을 제공합니다. 글자나 상자를 버튼처럼 보이게 꾸미는 것만으로 같은 기능이 생기지는 않으므로, 요소의 의미와 실제 입력 동작을 함께 구현합니다.

인터페이스는 데이터 처리의 경계와도 연결됩니다. 저장 버튼을 누르면 요청을 보내고 결과를 받은 뒤 저장 상태를 표시하는 식입니다. 버튼을 눌렀다는 사실만으로 저장 완료 문구를 띄우면 서버에서 실패했을 때 화면과 실제 데이터가 달라집니다. 화면의 반응과 작업의 완료 조건을 연결하면 이용자가 결과를 잘못 이해하는 문제를 줄일 수 있습니다.

시각적 표현과 접근 방법

W3C WAI의 접근성 원칙은 정보를 인지할 수 있고 인터페이스를 조작할 수 있으며 동작을 이해할 수 있어야 한다고 설명합니다. 색이나 아이콘 하나에만 의미를 담으면 그 표현을 알아보기 어려운 이용자가 정보를 놓칠 수 있습니다. 입력창의 이름, 읽을 수 있는 문구, 키보드 이동 같은 요소가 함께 작동해야 이용 가능한 범위가 넓어집니다.

마우스로 누를 수 있는지와 키보드로 조작할 수 있는지는 별도로 확인할 부분입니다. 현재 선택된 위치를 알 수 없거나 화면 위에 열린 창을 닫을 수 없으면 키보드 이용자는 작업을 이어가기 어렵습니다. 화면 읽기 도구가 버튼의 목적을 알 수 있는 이름을 받는지도 중요합니다. 겉으로 같은 화면이어도 내부 요소와 이름을 어떻게 구성했는지에 따라 사용 경험은 달라집니다.

UI는 제품을 쓰는 전체 경험과 맞닿아 있지만 그 전체를 모두 뜻하지는 않습니다. 화면이 잘 구성돼 있어도 처리 시간이 지나치게 길거나 실제 결과가 부정확하면 이용자는 작업을 마치기 어렵습니다. 반대로 처리 기능이 같아도 안내와 조작 순서가 명확하면 실수를 줄이는 데 도움이 됩니다. 평가할 때는 화면 요소의 문제와 서비스 처리 과정의 문제를 구분해 기록합니다.

상태별 안내와 실제 사용 확인

W3C WAI의 폼 알림 안내는 제출 성공과 실패를 모두 알려 주고 오류를 고칠 수 있는 설명을 제공하도록 안내합니다. ‘실패했습니다’라는 문구만 보이는 경우보다 어떤 입력을 확인할지 알려 주는 경우가 다음 행동을 정하기 쉽습니다. 오류 표시가 해당 입력 요소와 연결되는지도 살피면 긴 폼에서 문제 지점을 찾는 부담을 줄일 수 있습니다.

디자인을 검토할 때는 데이터가 채워진 화면뿐 아니라 처음 연 화면, 로딩 중, 결과 없음, 접근 불가, 요청 실패 상태도 확인합니다. 모두 같은 빈 화면으로 보이면 이용자는 기다려야 하는지 다시 입력해야 하는지 알기 어렵습니다. 실제로 일어날 수 있는 상태를 먼저 나누고 각 상태의 문구와 가능한 행동을 정하면 화면에 필요한 요소가 드러납니다.

AI 도구로 만든 화면도 실제 입력과 결과를 연결해 확인합니다. 스크린샷은 배치와 글자 크기를 보여 주지만 키보드 이동, 폼 제출, 오류 복구가 동작하는지는 보여 주지 못합니다. 주요 작업을 처음부터 끝까지 수행하면서 어떤 요소를 조작했고 어떤 결과가 나왔는지 남기면 시각 검토와 기능 검토의 범위가 분명해집니다. 필요한 경우 좁은 화면에서도 같은 작업을 마칠 수 있는지 살핍니다.