1과목 - 소프트웨어 설계
2장. 화면 설계
10. 사용자 인터페이스
사용자 인터페이스 (UI, User Interface)의 개요
-
사용자 인터페이스는 사용자와 시스템 간의 상호작용이 원활히 이뤄지도록 도와주는 소프트웨어
-
사용자 인터페이스의 세 가지 분야
- 정보 제공과 전달을 위한 물리적 제어에 관한 분야
- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
- 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야
-
사용자 인터페이스의 특징
- 사용자 만족도에 가장 큰 영향을 미치는 중요한 요소
- 정보 제공자와 공급자 간의 매개 역할을 수행
-
사용자 인터페이스의 기본 원칙
- 직관성 : 누구나 쉽게 이해하고 사용
- 유효성 : 사용자의 목적을 정확하고 완벽하게 달성
- 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함
- 유연성 : 사용자 요구사항을 최대한 수용하고 실수를 최소화
-
사용자 인터페이스의 설계 지침
- 사용자 중심 : 실사용자에 대한 이해가 바탕
- 일관성 : 사용자가 쉽게 기억하고 습득할 수 있게 설계
- 단순성 : 조작 방법을 단순화시켜 인지적 부담을 감소
- 결과 예측 가능 : 작동시킬 기능만 보고도 결과를 예측할 수 있게 설계
- 가시성 : 메인 화면에 주요 기능을 노출시켜 조작이 쉽도록 설계
- 표준화 : 기능 구조와 디자인을 표준화
- 접근성 : 다양한 계층이 사용할 수 있도록 설계
- 오류 발생 해결 : 오류 발생 시 쉽게 인지할 수 있도록 설계
12. UI 설계 도구
UI 설계 도구
- 사용자의 요구사항에 맞게 UI 화면 구조나 배치 등을 설계할 때 사용하는 도구
- 종류
- 와이어프레임
- 목업
- 스토리보드
- 프로토타입
- 유스케이스
와이어프레임 (Wireframe)
- 기획 초기 단계에 제작하는 것으로, 페이지에 대한 뼈대를 설계하는 단계
- 화면 단위로 설계
목업 (Mockup)
- 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 모형
- 시각적으로만 구성 요소 배치 (실제 구현되지 않음)
스토리 보드 (Story Board)
- 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 것
- 디자이너와 개발자가 최종적으로 참고하는 작업 지침서
- description 은 화면에 대한 설명, 전반적인 로직, 예외처리 등을 작성하는 부분으로 명확하고 세부적으로 작성
프로토타입 (Prototype)
- 와이어프레임이나 스토리보드 등에 인터랙션 적용
- 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
유스케이스 (Use Case)
- 사용자의 요구사항을 구조적으로 표현한 것으로, 일반적으로 다이어그램 형식으로 묘사
- 유스케이스 다이어그램 작성 후 유스케이스 명세서 작성
13. UI 요구사항 확인
UI 요구사항 확인
- 새로 개발할 시스템에 적용할 UI 관련 요구사항을 작성하는 단계
- 순서
- 목표 정의
- 사용자들을 대상으로 인터뷰를 진행하여 비즈니스 요구사항 정의
- 활동 사항 정의
- 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항 정의
- UI 디자인 방향을 제시하고, 필요한 예산과 일정 결정
- UI 요구사항 작성
- UI 요구사항은 반드시 실사용자 중심으로 작성
- 목표 정의
UI 요구사항 작성
- 요구사항 요소 확인
- 파악된 요구사항 요소의 종류와 표현 방식 등을 검토
- 정황 시나리오 작성
- 정황 시나리오는 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
- ex) 윤희는 회의가 끝난 후 핸드폰을 켰다. 주요 회의 내용을 메모하고 다음 약속을 확인했다.
- 육하원칙에 따라, 사용자 관점에서 시나리오 작성
- 정황 시나리오는 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
- 요구사항 작성
- 정황 시나리오는 토대로 작성
14. 품질 요구사항
품질 요구사항
- 소프트웨어의 품질은 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체
- 사용자의 요구사항을 충족시킴으로써 확립
- ISO/IEC 9126 : 소프트웨어 품질 특성과 평가를 위한 표준 지침
- 6가지 품질 특성 정의
기능성 (Functionality)
- 소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부
- 적절성/정합성 : 사용자 목적 달성을 위해 적절한 기능을 제공하는 능력
- 정밀성/정확성 : 사용자가 요구하는 결과를 정확하게 산출하는 능력
- 상호 운용성 : 다른 시스템들과 어울려 작업하는 능력
- 보안성 : 접근을 권한에 따라 허용하거나 차단하는 능력
- 호환성 : 표준 및 규정을 준수할 수 있는 능력
신뢰성 (Reliability)
- 소프트웨어가 요구된 기능을 정확하고 일관되게, 오류없이 수행할 수 있는 정도
- 성숙성 : 결함으로 인한 고장을 피하는 능력
- 고장 허용성 : 결함 시에도 규정된 성능 주순을 유지하는 능력
- 회복성 : 고장 시 복구할 수 있는 능력
사용성 (Usability)
- 사용자와 컴퓨터 사이 발생하는 행위에 대해 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도
- 이해성 / 학습성 / 운용성 / 친밀성
효율성 (Efficiency)
- 사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도
- 시간 효율성 / 자원 효율성
유지 보수성 (Maintainability)
- 환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도
- 분석성 : 결함이나 고장의 원인 식별을 가능하게 하는 능력
- 변경성 : 결함 제거 또는 환경 변화로 인한 수정을 쉽게 하는 능력
- 안정성 : 변경으로 인한 예상치 못한 결과를 최소화하는 능력
- 시험성 : 소프트웨어의 변경이 검증될 수 있는 능력
이식성 (Portability)
- 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도
- 적용성 / 설치성 / 대체성 / 공존성
15. UI 프로토타입 제작 및 검토
UI 프로토타입의 개요
- 프로토타입은 사용자 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로 최대한 간단하게 구현
- 필요한 기능은 반드시 포함되어야 하며 실사용자 대상으로 테스트하는 것이 좋음
UI 프로토타입의 장단점
- 장점
- 요구사항과 기능 불일치로 인한 혼선을 예방할 수 있어 개발 시간 단축 가능
- 사전 오류 발견 가능
- 단점
- 필요 이상으로 자원을 소모할 수 있음
- 사용자의 모든 요구사항을 반영하기 위한 반복적인 작업 때문에 작업 시간이 증가할 수 있음
프로토타이핑의 종류
- 페이퍼 프로토타입
- 아날로그적인 방법, 손으로 직접 작성하는 방법
- 비용이 저렴하고 즉시 변경할 수 있으나 테스트하기 부적합
- 디지털 프로토타입
- 프로그램을 사용하여 작성하는 방법
- 최종 제품과 비슷하게 테스트할 수 있고 재사용 가능
UI 프로토타입 제작 단계
- 사용자 관점에서, 사용자의 요구사항을 분석하는 단계
- 요구사항을 충족하는 프로토타입을 작성하는 단계
- 작성된 프로토타입을 사용자가 직접 확인하는 단계
- 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지는 단계
- 사용자가 최종 승인할 때까지 3~4단계 반복
16. UI 설계서 작성
- UI 설계서는 사용자 요구사항을 바탕으로 UI 설계를 구체화하여 작성하는 문서
- 기획자, 개발자, 디자이너와의 원활한 의사소통을 위해 작성
- 작성 순서
- UI 설계서 표지
- UI 설계서 개정 이력
- 수정될 때마다 어떤 부분이 수정되었는지 정리해 놓은 문서
- UI 요구사항 정의서
- 시스템 구조
- 전체 시스템 구조 설계
- 사이트 맵
- 사이트에 표시할 콘텐츠를 한 눈에 알아볼 수 있도록 메뉴별로 설계
- 프로세스 정의서
- 화면 설계
18. UI 상세 설계
UI 시나리오 문서 개요
- UI 상세 설계는 UI 설계서를 바탕으로 모든 화면에 대한 자세한 설계를 진행하는 단계
- UI 시나리오 문서를 반드시 작성해야 함
- 사용자가 최종 목표를 달성하기 위한 방법이 순차적으로 묘사된 것
UI 시나리오 문서 작성 원칙
- 전체적인 UI 기능과 작동 방식을 한눈에 이해할 수 있도록 작성
- 예외 상황에 대비한 다양한 케이스 정의
UI 시나리오 문서의 요건
- 완전성 (Complete)
- 누락되지 않도록 최대한 상세하게 기술
- 기능보다 사용자의 태스크에 초점
- 일관성 (Consistent)
- 서비스 목표, 요구사항, 스타일 등이 모두 일관성 유지
- 이해성 (Understandable)
- 누구나 쉽게 이해할 수 있도록 불분명하거나 추상적인 표현은 배제
- 가독성 (Readable)
- 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록
- 하이퍼링크를 지정하여 문서들이 서로 참조될 수 있도록 지정
- 수정 용이성 (Modifiable)
- 시나리오의 수정이나 개선이 용이해야 함
- 추적 용이성 (Traceable)
- 변경 사항을 쉽게 추적할 수 있어야 함
UI 시나리오 문서로 인한 기대 효과
- 요구사항이나 의사소통에 대한 오류 감소
- 불필요한 기능 최소화 및 개발 비용 절감
19. HCI / UX / 감성공학
HCI (Human Computer Interaction or Interface)
- HCI는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하는 학문
- 최적의 UX를 만드는 것이 최종 목표
UX (User eXperience)
- UX는 사용자가 서비스를 이용하면서 느끼는 총체적인 경험
- UX의 특징
- 주관성 / 정황성 / 총체성
감성공학
- 제품이나 작업 환경을 사용자 감성에 알맞도록 설계하는 기술
- 인간의 삶을 편리하고 쾌적하게 만드는 것이 목적
