화면 구성·내비게이션·입력 및 오류 설계

화면 설계의 네 관점

1. 화면 구성: 어떤 정보와 행동을 어느 우선순위로 배치할 것인가
2. 내비게이션: 사용자가 현재 위치와 이동 경로를 알 수 있는가
3. 입력: 오류를 줄이면서 필요한 값을 정확히 받을 수 있는가
4. 피드백·복구: 처리 상태와 오류 원인, 다음 행동을 알 수 있는가

이 결정은 UI 표준·지침과 요구사항을 바탕으로 스토리보드·와이어프레임·프로토타입에 반영한다.

화면 구성

• 한 화면의 목적과 대표 과업을 분명히 한다.
• 관련 정보와 동작을 가까이 묶는다.
• 제목·본문·보조 정보의 시각적 위계를 구분한다.
• 가장 중요한 행동과 위험한 행동을 명확히 구분한다.
• 현재 선택·처리·오류 상태를 숨기지 않는다.
• 같은 의미의 요소는 화면마다 일관된 용어와 배치를 사용한다.

내비게이션

자주 혼동하는 요소

• 탭: 같은 수준의 관련 내용을 전환한다.
• 단계 표시: 여러 단계 과업의 진행 위치를 보여 준다.
• 브레드크럼: 정보 구조상 현재 위치와 상위 경로를 보여 준다.
• 링크: 다른 위치·정보로 이동하는 것이 중심이다.
• 버튼: 저장·삭제·제출 등 행동 실행이 중심이다.

브라우저 뒤로가기, 업무 단계의 이전, 입력 취소는 결과와 상태 보존 규칙이 서로 다를 수 있다.

화면·폼 흐름

화면 흐름 예시

정상 경로만 그리지 않고 다음을 함께 설계한다.

• 시작·종료 조건
• 화면 전이와 전이 조건
• 선택·분기·반복
• 취소와 이전 단계
• 권한 부족, 데이터 없음, 입력 오류
• 오류 후 재입력·복구 경로

검토 시 막다른 화면, 돌아갈 수 없는 흐름, 무한 반복, 중복 제출, 입력값 손실 여부를 확인한다.

입력 폼 설계

입력 컨트롤 선택

라디오 버튼은 서로 배타적인 선택, 체크박스는 독립적인 복수 선택에 적합하다.

레이블과 안내

• 레이블은 입력값의 의미를 지속적으로 보여 준다.
• 플레이스홀더는 예시·형식 보조이며 레이블을 완전히 대신하지 않는다.
• 필수·선택 여부와 입력 형식을 입력 전에 알린다.
• 자동 변환이나 기본값이 있다면 결과를 예측할 수 있게 한다.

검증과 오류 메시지

입력 검증과 피드백 예시

검증은 입력 중, 항목 이탈 시, 제출 시 등 규칙에 맞는 시점에 수행한다. 모든 오류를 입력할 때마다 즉시 표시하면 오히려 방해가 될 수 있다.

좋은 오류 메시지는 다음을 포함한다.

1. 오류가 발생한 위치
2. 무엇이 잘못되었는지
3. 어떻게 수정할 수 있는지

예: “생년월일이 올바르지 않습니다”보다 “생년월일은 YYYY-MM-DD 형식으로 입력하세요”가 수정 행동을 안내한다.

중요한 작업에는 검토 화면, 최종 확인, 취소·되돌리기 같은 오류 예방 수단을 고려한다. 오류 후에도 문제가 없는 입력값은 가능한 한 보존한다.

스토리보드에 기록할 내용

• 화면명과 목적
• 구성요소와 데이터
• 버튼·링크 동작
• 전이 대상과 조건
• 입력 규칙과 오류 문구
• 권한·예외·취소 처리
• 공통 UI 표준 적용 항목