화면설계: UI 요구사항

로그인 화면 하나만 봐도 UI에는 여러 층위가 겹쳐 있다 — 아이디/비밀번호 입력창이 물리적 배치라면, 로그인 버튼이 활성화/비활성화되는 방식은 구성과 표현이고, “로그인 실패 3회 시 잠금”이라는 메시지는 사용자에게 의미를 전달하는 기능적 UI다. 이 글은 이 세 층위를 기준으로 UI 요구사항을 정리한다.

UI (User Interface) 개요

사용자와 컴퓨터 사이의 연계 시스템인 UI는 다음과 같이 발전해왔습니다:

• 단순한 상호작용에서 실행 오류를 줄이기 위한 UI로 발전
• 단순한 기능의 전달에서 의미를 전달하도록 발전

UI 분야

• 물리적 제어
• 구성과 표현
• 기능적 분야 (의미를 전달)

UI 종류

• CLI: 명령 문자열
• GUI: 메뉴, 아이콘같은 그래픽 요소
• NUI: 사람의 음성, 촉각

UI 표준과 지침

구분

• UI 표준: 공통적으로 적용되어야 할 것
• UI 지침: 지켜야 할 세부 개발 방향, 가이드

레이아웃 구성 요소

위에서 아래로 다음 순서로 구성:

1. Indicator
   • 상태알림
2. Header
   • 회사의 로고
   • 사이트명
3. Navigation
   • 현재 위치
   • 다른서비스 이동(메뉴)
4. Contents
   • 내용
5. Button
   • 별도의 요소
   • 특정 정보 접근
6. Footer
   • 회사 정보
   • 저작권

UI 기본 요소

• 텍스트박스
• 라디오 버튼
• 토글 버튼
• 콤보 버튼
• 체크 박스
• 명령 버튼

웹 접근성 지침

한국형 웹 콘텐츠 접근성 지침

• 웹 표준: 동일하게 구현
• 웹 접근성: 누구나 어떤 환경에서라도 사용 가능 (예: 시각장애인을 위한 음성메뉴 안내)
• 웹 호환성: 다른 시스템환경에서도 동등한 서비스

웹 콘텐츠 접근성의 중요성

• 디지털약자(장애인, 노인)를 위한 대체 형식의 콘텐츠 제공이 접근성의 핵심
• 전자정부의 웹 사이트는 모든 국민이 이용해야 하므로:
  • 표준화되지 않은 기술 적용 금지
  • 화려하고 멋진 디자인보다 접근성 우선
  • 표준 접근성과 호환성을 엄격하게 준수

4가지 큰 원칙 (암기!)

• 인식
• 운용
• 이해
• 견고성

UI 프로토타입

기본 개념

• 시제품 성격
• 이해하는데 필요한 요소만 포함
• 지속적으로 보완, 개선
• 장점: 사용자 설득, 사전 결함 발견
• 단점: 반복적 작업으로 인한 비용 증가
• 프로세스: 분석 → 프로토타입 작성 → 피드백

프로토타입 전략

Paper Prototype

• 장점: 사전 지식 없이 수행 가능
• 단점:
  • 테스트가 불가능
  • UI 요소 간의 상호관계 나타내기 어려움

Digital Prototype

• 장점:
  • 파워포인트와 같은 소프트웨어로 제작
  • 테스트가 가능
  • 수정이 용이
• 단점:
  • 전문가가 필요
  • 숙지 시간이 필요

고려사항

• 기간 및 비용을 고려
• 효율성 중시!

핵심 정리

• UI 표준(반드시 지켜야 할 공통 규칙)과 UI 지침(권장 세부 가이드)은 강제성의 정도로 구분한다.
• 웹 접근성의 핵심은 “장애·환경과 무관하게 동일한 정보에 도달할 수 있는가”이며, 4대 원칙(인식·운용·이해·견고성)은 각각 “정보가 지각 가능한가 → 조작 가능한가 → 이해 가능한가 → 다양한 기술 환경에서 안정적인가”의 순서로 검증하면 외우기 쉽다.
• Paper Prototype과 Digital Prototype의 트레이드오프는 결국 “빠르고 저렴하지만 테스트 불가”와 “느리고 비싸지만 실제 동작 검증 가능”의 대비다.