사용하기 쉬운 화면을 만드는 UI 디자인 원칙 5가지

좋은 UI는 사용자가 무엇을 할 수 있는지, 지금 무슨 일이 일어나는지, 실수했을 때 어떻게 돌아갈 수 있는지를 보여 줍니다. 통제권, 일관성, 명확한 탐색, 완료 안내, 기억 부담 줄이기라는 다섯 원칙을 예약 변경 화면에 적용해 보겠습니다. 예쁜 화면을 만드는 기준을 넘어, 사용자가 작업을 끝낼 수 있는지 판단하는 기준입니다.

Pixso의 UI 디자인·협업 기능으로 상태별 화면을 나란히 만들면 같은 원칙이 시작·진행·오류·완료 화면에 일관되게 적용되는지 팀과 비교할 수 있습니다.

법칙1: 사용자가 인터페이스의 통제권을 가진다

사용자는 작업을 시작했더라도 취소하거나 이전 단계로 돌아갈 수 있어야 합니다. 뒤로 가기, 취소, 실행 취소는 서로 다른 행동입니다. 뒤로 가기는 이전 화면으로 이동하고, 취소는 진행하던 작업을 중단하며, 실행 취소는 이미 적용한 변경을 되돌립니다. 이 차이를 문구와 동작에 반영하세요.

예약 시간을 바꾸는 화면에서 날짜를 골랐다가 취소했다면 기존 예약은 그대로 남아 있어야 합니다. 저장을 누르기 전부터 원래 예약이 사라진다면 사용자는 화면을 나가는 것조차 망설이게 됩니다. 저장하지 않은 입력이 있는 상태에서 나갈 때는 유지 또는 폐기 범위를 분명히 알려 줍니다.

플랫폼의 익숙한 탐색 방식을 따르되 제스처만 제공하지 마세요. 화면 가장자리에서 쓸어 넘기는 동작이 모든 환경에서 지원되거나 변경 취소를 뜻하는 것은 아닙니다. 눈에 보이는 뒤로 가기나 취소 경로와 키보드 조작도 함께 고려합니다.

법칙2: 익숙하고 일관된 방식으로 안내한다

자연성

사용자가 이미 아는 표현과 순서를 활용합니다. 예약 변경 화면의 날짜, 시간, 장소를 실제 예약을 설명하는 순서로 보여 주면 새로운 기호를 해석할 필요가 줄어듭니다. 내부 시스템 용어보다 사용자가 요청할 때 쓰는 말을 선택하세요.

일관성

같은 행동에는 같은 이름과 시각적 표현을 사용합니다. 한 화면에서 ‘예약 변경’, 다음 화면에서 ‘수정 제출’, 완료 화면에서 ‘갱신’이라고 부르면 같은 작업인지 판단하기 어렵습니다. 다른 결과를 내는 행동까지 모양을 억지로 같게 만들 필요는 없습니다.

친절한 피드백

사용자가 누른 뒤의 상태를 설명합니다. ‘변경 중’은 아직 처리 중이라는 뜻이고 ‘예약이 변경되었습니다’는 저장된 결과를 뜻합니다. 통신이 끊겼다면 실패와 완료 여부 불명을 구분하고, 결과를 확인하거나 다시 시도할 경로를 제공합니다.

법칙3: 내비게이션의 현재 위치와 목적지를 알린다

명확한 탐색은 메뉴를 크게 만드는 것만으로 해결되지 않습니다. 사용자는 자신이 어느 예약을 수정하는지, 이전 예약 목록으로 어떻게 돌아가는지 알아야 합니다. 화면 제목에 작업과 대상을 함께 표시하고, 현재 선택된 메뉴를 색상 외의 표시로도 구별하세요.

• 현재 위치: ‘내 예약 → 예약 상세 → 날짜 변경’처럼 관계를 보여 줍니다. 모든 화면에 복잡한 경로를 추가하기보다 실제로 필요한 탐색 깊이에 맞춥니다.
• 다음 결과: 단순한 ‘다음’보다 ‘변경 내용 확인’처럼 목적지를 설명하면 제출 전 검토 단계가 남아 있음을 알 수 있습니다.

모바일에서 탐색 메뉴를 접더라도 현재 작업의 제목과 돌아갈 경로는 찾을 수 있어야 합니다. 뒤로 이동했을 때 날짜 선택을 처음부터 다시 하게 만들지 않는지도 확인하세요.

법칙4: 작업이 끝났다는 사실과 결과를 보여 준다

완료 화면은 축하 문구보다 변경된 결과가 중요합니다. ‘완료’만 보여 주면 사용자는 날짜가 맞는지 확인하려고 다시 목록을 열어야 합니다. 예약 변경에서는 새 날짜와 시간, 장소를 보여 주고 예약 상세로 이어지는 경로를 제공합니다.

성공 화면을 먼저 보여 주고 실제 처리가 실패하면 신뢰가 깨집니다. 서버 결과에 맞는 상태를 표시하고, 실패 메시지에서는 무엇을 바꾸면 다시 진행할 수 있는지 알려 주세요.

법칙5: 기억보다 화면의 정보를 이용하게 한다

사용자가 생각하지 않게 만든다는 뜻은 판단을 대신한다는 뜻이 아닙니다. 필요한 정보를 기억해 다른 화면에 옮기는 부담을 줄이는 것입니다. 예약 시간 변경 전후를 같은 확인 화면에서 비교하고, 이전에 입력한 연락처를 다시 요구하지 않는 방식이 여기에 해당합니다.

요금이나 취소 조건처럼 결정에 중요한 내용은 마지막 버튼을 누르기 전에 확인할 수 있어야 합니다. 작은 글씨로 숨기거나 다른 페이지에서 본 조건을 외우게 하지 마세요. 정보가 길다면 핵심 조건을 먼저 보여 주고 자세한 설명으로 연결합니다.

Pixso에서 예약 변경 화면의 다섯 원칙 적용하기

1. 예약 상세, 날짜 선택, 변경 내용 확인, 변경 완료 프레임을 만듭니다. 기존 예약과 새 예약을 같은 예시 데이터로 채웁니다.
2. 버튼과 입력 요소를 컴포넌트로 정리하고 기본·선택·비활성·오류 상태를 구분합니다. 라벨을 바꿔도 의미가 뒤바뀌지 않는지 비교합니다.
3. 프로토타입에서 정상 경로와 취소 경로를 연결합니다. 시간이 마감된 예외 화면도 추가해 사용자가 다시 날짜를 고를 수 있게 구성합니다.
4. 팀원에게 ‘예약 시간을 바꾸되 확정 전 내용을 확인해 주세요’라는 과제를 주고, 어느 버튼을 선택하는지 관찰합니다. 막힌 위치에 댓글을 남겨 화면 단위로 수정 방향을 논의합니다.

프로토타입은 화면의 순서와 문구를 검토하는 데 쓰입니다. 실제 예약 저장, 중복 제출 방지, 장애 복구는 개발 단계에서 구현하고 별도로 확인해야 합니다.

다섯 원칙을 화면의 판단 기준으로 사용하세요

예약 변경에서는 취소해도 기존 예약이 남는지, 단계마다 같은 용어를 쓰는지, 변경 결과를 확인할 수 있는지가 핵심입니다. 다른 제품에서도 원칙의 이름을 외우기보다 실제 작업 하나를 골라 시작부터 결과까지 연결해 보세요. 문제가 보인 화면을 구체적으로 수정하는 편이 추상적인 평가보다 도움이 됩니다.