UI 요구사항

정처기

UI 요구사항

효ㄷi 2025. 2. 11. 14:34

1️⃣ UI (User Interface) 개요

✔ UI란?

사용자와 컴퓨터 간 원활한 상호작용을 돕는 시스템
단순한 기능 전달이 아니라, 정보의 의미를 효과적으로 전달

✔ UI의 3가지 영역

물리적 제어 → 정보 제공 및 기능 전달
구성 & 표현 → 콘텐츠의 시각적 표현 및 배치
기능적 요소 → 사용자가 쉽게 이해하고 사용할 수 있도록 설계

✔ UI의 종류

CLI (Command Line Interface) : 명령어 입력 방식
GUI (Graphic User Interface) : 그래픽 요소(아이콘, 메뉴) 활용
NUI (Natural User Interface) : 음성, 터치, 동작 기반

2️⃣ UI 표준과 지침

✔ UI 표준이란?

모든 UI에 공통적으로 적용해야 할 개발 방향과 원칙
다양한 환경에서도 일관된 UI 제공을 목표

✔ UI 스타일 가이드 작성 프로세스

구동 환경 정의 → 운영체제, 브라우저, 디바이스 환경 고려
레이아웃 정의 → 화면을 여러 영역으로 나누고 배치 설정
네비게이션 정의 → 정보 탐색 & 이동 방식 규정
기능 정의 → 적용될 기능과 데이터 간 관계 설정
구성 요소 정의 → UI 요소(버튼, 입력창 등) 디자인 규칙 정리

✔ 레이아웃 구성 요소

Indicator → 알림, 상태 표시
Header → 로고, 사이트명 등
Navigation → 현재 위치 & 이동 지원
Contents → 주요 정보 표시
Button → 사용자 입력을 받는 요소
Footer → 저작권, 회사 정보 등

3️⃣ UI 요소 종류

사용자와 상호작용할 수 있는 UI 요소들

텍스트 박스 → 정보 입력
라디오 버튼 → 하나의 값 선택
토글 버튼 → 두 상태 전환
콤보 박스 → 드롭다운에서 항목 선택
체크 박스 → 여러 개 선택 가능
명령 버튼 → 특정 작업 실행

4️⃣ 한국형 웹 콘텐츠 접근성 지침 (WCAG)

✔ 웹 사이트 개발 시 고려할 사항

웹 표준 준수 → 브라우저 환경에 상관없이 동일하게 작동
웹 접근성 보장 → 장애인, 고령자 등 누구나 정보 이용 가능
웹 호환성 확보 → 다양한 시스템과 환경에서 정상 작동

✔ 웹 콘텐츠 접근성 (Web Content Accessibility) 정의

디지털 약자(장애인, 노인)도 정보를 쉽게 이용할 수 있도록 보장
대체 콘텐츠 제공 → 텍스트, 음성 지원 등
다양한 입력 방식 지원 → 마우스, 키보드 외에도 접근 가능

✔ WCAG 준수 원칙 (4가지 핵심 요소)

인식성 (Perceivable) → 모든 사용자가 정보를 인식할 수 있도록 설계
운용성 (Operable) → UI 요소를 쉽게 탐색하고 조작 가능해야 함
이해성 (Understandable) → 콘텐츠를 누구나 쉽게 이해할 수 있어야 함
견고성 (Robust) → 미래 기술과 환경에서도 접근 가능하도록 설계

✔ 전자정부 웹 표준 준수 지침

웹 문법 & 표현 원칙

적절한 문서 타입 & 인코딩 방식 지정
논리적이고 마크업을 활용한 구조적 페이지 구성
표준화된 문법 사용

웹 접근성과 호환성 보장

스크립트는 비표준 확장 기능 배제
스크립트 비활성화 사용자 위한 대체 정보 제공
플러그인 없는 웹 브라우저 고려

콘텐츠 표현 & 운영체제 호환성

독립적인 콘텐츠 제공 (운영체제 영향 없음)
법적 요건에 맞는 미디어 형식 사용
인증 기능은 다양한 브라우저에서 정상 작동
특정 운영체제 전용이 아닌 Windows, Linux, Mac 등 최소 2개 이상 지원

5️⃣ UI 프로토타입 개요

✔ UI 프로토타입이란?

사용자 요구사항을 검증하기 위한 최소한의 기능을 갖춘 시제품
핵심 요소만 포함하여 점진적으로 개선
사전 테스트를 통해 사용자 반응 & 문제점 조기 발견

✔ UI 프로토타입 작성 과정

사용자 요구사항 분석
도구 활용하여 프로토타입 작성
사용자가 직접 피드백 제공 & 수정 반복

✔ UI 프로토타입 전략

📝 Paper Prototype

손으로 직접 스케치하여 UI를 구상하는 방식
장점: 빠르고 비용이 적게 들며 즉각적인 변경 가능
단점: 실제 테스트가 어렵고 UI 요소 간의 상호작용 표현이 제한적

💻 Digital Prototype

파워포인트, 아크로뱃, Visio, Keynote 등을 활용한 디지털 제작
장점: 최종 제품과 유사한 환경에서 테스트 가능, 수정 용이
단점: 소프트웨어 활용 능력이 필요

✔ UI 프로토타입 작성 시 고려할 사항

✅ 목표 & 대상 명확화 → 어떤 사용자에게 어떻게 활용될 것인지 고려

✅ 시간과 비용 효율성 고려 → 최소 비용으로 효과적인 결과 도출

✅ 실제 개발 수준과 유사한 품질 유지 → 지나치게 단순하면 효과 떨어짐

✅ 사용자 피드백을 적극 반영 → 지속적인 개선 & 수정

총정리

📌 UI 요구사항 핵심 정리

1️⃣ UI 개요

사용자와 시스템 간 원활한 상호작용을 위한 인터페이스
CLI(명령어 기반), GUI(그래픽 기반), NUI(음성·터치 기반)

2️⃣ UI 표준과 지침

UI 표준: 일관된 UI 제공을 위한 개발 원칙

UI 스타일 가이드 작성 과정

구동 환경 정의 → OS, 브라우저, 디바이스 고려
레이아웃 정의 → 화면 구성 영역 설정
네비게이션 정의 → 정보 탐색 & 이동 방식
구성 요소 정의 → 버튼, 입력창 등 디자인 규칙

3️⃣ UI 요소 종류

텍스트 박스 (입력) / 라디오 버튼 (하나 선택) / 체크 박스 (다중 선택)
토글 버튼 (상태 전환) / 콤보 박스 (드롭다운 선택) / 명령 버튼 (작업 실행)

4️⃣ 웹 접근성 & 표준 지침

WCAG 4대 원칙

인식성: 모든 사용자가 정보를 인식할 수 있도록
운용성: UI 요소를 쉽게 조작할 수 있도록
이해성: 콘텐츠를 쉽게 이해할 수 있도록
견고성: 미래 기술에서도 접근 가능하도록

전자정부 웹 표준

문서 구조 표준화 / 비표준 스크립트 배제 / 운영체제·브라우저 호환성 확보

5️⃣ UI 프로토타입

사용자 요구사항을 검증하기 위한 시제품
Paper Prototype → 손으로 스케치 (빠르지만 테스트 어려움)
Digital Prototype → 소프트웨어 제작 (테스트 가능하지만 제작 시간 필요)
프로토타입 작성 시 고려사항: 목표 명확화, 비용 최소화, 사용자 피드백 반영