[정보처리기사 실기] 화면 설계

1. UI 요구사항 확인하기

UI(User Interface)

• 개요 : 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어

• 구분

  • CLI(Commend Line Interface) : 명령과 출력이 텍스트 형태

  • GUI(Graohical User Interface) : 아이콘이나 메뉴를 선택하여 작업을 수행

  • NUI(Natural User Interface) : 사용자의 음성이나 행동으로 기기를 조작

• 설계 원칙

종류	설명
직관성(Intuitiveness)	누구나 쉽게 이해하고 사용할 수 있게 제작
유효성(Efficiency)	사용자의 목적을 정확하고 완벽하게 달성될 수 있도록 제작
학습성(Learnability)	누구나 쉽게 배우고 익힐 수 있게 제작
유연성(Flexibility)	사용자의 요구사항을 최대한 수용하고 오류를 최소화할 수 있도록 제작

• 설계 지침

  • 사용자 중심

  • 일관성

  • 단순성

  • 결과 예측 가능

  • 가시성

  • 표준화

  • 접근성

  • 명확성

  • 오류 발생 해결

• 설계 도구

  • 와이어프레임(Wireframe) : 기획 단계의 초기에 제작, 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계

  • 목업(Mockup) : 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

  • 스토리보드(Story Board) : 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서

  • 프로토타입(Prototype) : 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

  • 유스케이스(Use Case) : 사용자 측면에서의 요구사항

 

ISO/IEC 9126 품질 요구사항

• 개요 : 소프트웨어의 품질 특성과 평가를 위한 국제 표준, 소프트웨어의 품질 평가 등에 사용

• 품질 특성

  • 기능성(Functionality) : 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부

상세 품질 요구사항	설명
적합성(Suitability)	지정된 작업과 사용자의 목적 달성을 위해 적절한 기능을 제공할 수 있는 능력
정확성(Accuracy)	사용자가 요구하는 결과를 정확하게 산출할 수 있는 능력
상호 운용성(Interoperability)	다른 시스템과 서로 어울려 작업할 수 있는 능력
보안성(Security)	정보에 대한 접근을 권한에 따라 허용하거나 차단할 수 있는 능력
준수성(Functionality Compliance)	기능성 관련 표준, 관례 및 규정을 준수할 수 있는 능력

• 신뢰성(Reliability) : 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도

상세 품질 요구사항	설명
성숙성(Maturity)	결함으로 인한 고장을 피해갈 수 있는 능력
결함 허용성(Fault Tolerance)	결함 또는 인터페이스 결여 시에도 규정된 성능 수준을 유지할 수 있는 능력
복구성(Recoverability)	고장 시 규정된 성능 수준까지 다시 회복하고 영향 받은 데이터를 복구할 수 있는 능력
준수성(Reliability Compliance)	신뢰성 관련 표준, 관례 및 규정을 준수할 수 있는 능력

• 사용성(Usablity) : 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도

상세 품질 요구사항	설명
이해성(Understandability)	소프트웨어의 적합성, 사용 방법 등을 사용자가 이해할 수 있는 능력
학습성(Learnability)	소프트웨어 애플리케이션을 학습할 수 있도록 하는 능력
운영성(Operability)	사용자가 소프트웨어를 운용하고 제어할 수 있도록 하는 능력
매력성(Attractiveness)	사용자가 소프트웨어를 다시 사용하고 싶어 하도록 하는 능력
준수성(Usablity Compliance)	사용성 관련 표준, 관례 및 규정을 준수할 수 있는 능력

• 효율성(Efficiency) : 사용자가 요구하는 기능을 할당된 시간과 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도

상세 품질 요구사항	설명
시간 효율성(Time Behaviour)	특정 기능을 수행할 때 적절한 반응 시간 및 처리 시간, 처리율을 제공할 수 있는 능력
자원 활용성(Resource Utilization)	특정 기능을 수행할 때 적절한 자원의 양과 종류를 제공할 수 있는 능력
준수성(Efficiency Compliance)	효율성 관련 표준, 관례 및 규정을 준수할 수 있는 능력

• 유지 보수성(Maintainability) : 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도

상세 품질 요구사항	설명
분석성(Analyzability)	결함이나 고장의 원인, 수정될 부분들의 식별을 가능하게 하는 능력
변경성(Changeability)	결함 제거 또는 환경 변화로 인한 수정 등을 쉽게 구현할 수 있는 능력
안정성(Stability)	변경으로 인해 예상치 못한 결과를 최소화할 수 있는 능력
시험성(Testability)	소프트웨어의 변경이 검증될 수 있는 능력
준수성(Maintainability Compliance)	유지 보수성 관련 표준, 관례 및 규정을 준수할 수 있는 능력

• 이식성(Portability) : 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도

상세 품질 요구사항	설명
적응성(Adaptability)	원래의 목적으로 제공되는 것 외에 다른 환경으로 변경될 수 있는 능력
설치성(Installability)	임의의 환경에 소프트웨어를 설치할 수 있는 능력
대체성(Replaceability)	동일한 환경에서 동일한 목적을 위해 다른 소프트웨어를 대신 사용될 수 있는 능력
공존성(Co-existence)	자원을 공유하는 환경에서 다른 소프트웨어와 공존할 수 있는 능력
준수성(Portability Compliance)	이식성 관련 표준, 관례 및 규정을 준수할 수 있는 능력

 

UI 요구사항 확인

• 개요 : 새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계
• 순서
  1. 목표 정의 : 사용자들을 대상으로 인터뷰를 진행한 후 비즈니스 요구사항을 정의
  2. 활동 사항 정의 : 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의
  3. UI 요구사항 작성 : 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성
     1. 요구사항 요소 확인 : 데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항 등을 검토
     2. 정황 시나리오 작성 : 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사
     3. 요구사항 작성 : 정황 시나리오를 토대로 요구사항을 작성

 

UI 프로토타입  제작 및 검토

• 개요 : 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형, 테스트가 가능

• 장·단점

장점	단점
사용자 설득과 이해가 쉬움	반복적인 개선 및 보완 적업으로 작업시간이 늘어날 수 있음
개발 시간이 감소	필요 이상으로 자원을 소모
오류를 사전에 발견	정확한 문서 작업이 생략될 수 있음
요구사항의 가변성이 감소
최종 사용자 요구사항을 극대화

• 종류

  • 페이퍼 프로토타입(Paper Prototype) : 손으로 직접 작성

    1. 제작 기간이 짧은 경우 적용

    2. 제작 비용이 적을 경우 적용

    3. 업무 협의가 빠른 상황일 경우 적용

  • 디지털 프로토타입(Digital Prototype) : 툴을 사용하여 작성

    1. 재사용이 필요한 경우 적용

    2. 산출물과 비슷한 효과를 필요로 할 경우 적용

    3. 숙련된 전무가가 있을 경우 적용

• 작성 시 고려 사항

  • 프로토타입 범위 확인 : 프로젝트의 범위나 리스크 상황 등 주변 여건을 감안

  • 프로토타입 목표 확인 : 프로토타입을 통해서 얻고자 하는 목표를 명확하게 준비

  • 프로토타입 기간 및 비용 확인 : 투입되는 기간 및 비용은 최소화

  • 프로토타입 산출물 확인 : 실제 개발에서는 참조만 하는 수준으로 활용

 

2. UI 설계하기

UI 화면 설계 기본 구성요소

• 윈도우(Window)

• 메뉴(Menu)

• 아이콘(Icon)

• 포인터(Pointer)

 

UI 유용성 평가

• 개요 : 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도

• 사용자 모형 : UI의 구조, 기능, 가치 등의 사용자가 생각하는 모형

• 개발자 모형 : 시스템 설계자가 만들고자 하는 모형

• 실행 차 : 사용자가 원하는 목적과 실행 기능이 다르기 때문에 발생

• 평가 차 : 사용자가 원하는 목적과 실행 결과가 다르기 때문에 발생

 

실행 차를 줄이기 위한 UI 설계 원리

1. 사용 의도 파악

2. 행위 순서 규정

3. 행위의 순서대로 실행

 

평가 차를 줄이기 위한 UI 설계 원리

1. 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도

2. 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도

3. 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

 

UI 상세 설계

• UI 시나리오 작성 원칙

  • 개발자가 쉽게 이해할 수 있도록 구체적으로 작성

  • 사용자와 화면 상호 작용에 대해 인터랙션의 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등을 명시

  • 예외 상황에 대비한 케이스를 정의

• 작성 요건

요건	설명
완전성(Complete)	사용자 테스크에 초점을 맞춰 기술하며 누락되지 않도록 최대한 상세하게 기술
일관성(Consistent)	서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지
이해성(Understandable)	추상적인 표현을 피하며 누구나 쉽게 이해할 수 있도록 설명
가독성(Readable)	표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 작성
수정 용이성(Modifiable)	시나리오의 수정이나 개선이 쉬워야 함
추적 용이성(Traceable)	변경 사항을 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야 함

• 기대 효과

  • 요구사항과 의사소통에 대한 오류가 감소

  • 개발 과정에서의 재작업이 감소하고, 혼선이 최소화

  • 불필요한 기능을 최소화

  • 소프트웨어 개발 비용을 절감

  • 개발 속도를 향상

 

웹 콘텐츠 접근성 지침(KWCAG : Korean Web Content Accessibility Guidelines)

• 개요 : 장애인이 비장애인과 동등하게 접근할 수 있는 웹 콘텐츠의 제작 방법을 제시
• 세부 지침

지침		고려 사항
인식의 용이성	대체 텍스트	적절한 대체 텍스트 제공
	멀티미디어 대체 수단	자막 제공
	명료성	색에 무관한 콘텐츠 인식
		명확한 지시 사항 제공
		텍스트 콘텐츠의 명도 대비
		자동 재생 금지
		콘텐츠 간 구분
운용의 용이성	입력장치 접근성	키보드 사용 보장
		초점 이동
		조작 가능
	충분한 시간 제공	응답시간 조절
		정지 기능 제공
	광과민성 발작 예방	깜빡임과 번쩍임 사용 제한
	쉬운 내비게이션	반복 영역 건너뛰기
		제목 제공
		적절한 링크 텍스트
이해의 용이성	가독성	기본 언어 표시
	예측 가능성	사용자 요구에 따른 실행
	컨텐츠의 논리성	컨텐츠의 선형 구조
		표의 구성
	입력 도움	레이블 제공
		오류 정정
견고성의 지침	문법 준수	마크업 오류 방지
	웹 애플리케이션 접근성	웹 애플리케이션 접근성 준수