2장 : 화면 설계(1과목)
1. 사용자 인터페이스 (UI : User Interface) ★★★ 직유학유
- 사용자와 시스템 간의 상호작용(의사소통)이 원활하게 이루어지도록 도와주는 장치, 또는 소프트웨어
- 사용자의 만족도에 가장 큰 영향을 미친다.
- 변경이 가장 많이 발생한다.
- 분야
- 물리적 제어 분야
- 표현 및 구성 분야
- 기능 분야
- 구분
- CLI(Command Line Interface): 명령과 출력이 텍스트 형태로 이루어지는 인터페이스
- GUI(Graphical User Interface): 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
- NUI(Natural User Interface): 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
- OUI(Organic User Interface): 모든 사물과 사용자간의 상호작용을 위한 인터페이스로 소프트웨어가 아닌 하드웨어 분야에서 사물 인터넷, 증강현실, 혼합현실 등과 함께 대두되고 있음
- 기본 원칙
- 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 함
- 유효성: 사용자의 목적을 정확하고 완벽하게 달성해야 함
- 학습성: 누구나 쉽게 배우고 익힐 수 있어야 함
- 유연성: 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함
- 설계 시 고려사항
- 사용자 중심
- 일관성
- 단순성
- 결과 예측 가능
- 가시성
- 표준화
- 접근성
- 명확성
- 오류 발생 해결
2. 웹의 3요소
- 웹 표준(Web Standards): 웹에서 사용되는 규칙 또는 기술을 의미하는 것으로 웹 사이트 작성 시 이용하는 HTML, Javascript에 대한 규정이나 웹 페이지가 다른 기종이나 플랫폼에서도 구현되도록 제작하는 기법 등을 포함
- 웹 접근성(Web Accessibility): 누구나, 어떠한 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것을 의미
- 웹 호환성(Cross Browsing): 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것을 의미
3. UI 설계 도구 ★★★
- UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구
- 와이어프레임 (예 : 손그림, 파워포인트, 키노트, 스케치 등): 초기에 제작, 페이지에 개략적인 레이아웃이나 UI요소 등의 뼈대
- 목업 (예 : 파워 목업, 발사믹 목업 등): 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
- 스토리보드 (예 : 파워포인트, 키노트, 스케치 등): 와이어프레임 + 디스크립션(설명)
- 프로토타입 (예 : HTML/CSS, Axure, 네이버 프로토나우, 카카오 오븐 등): 와이어프레임 or 스토리보드 + 인터랙션 형태의 동적 형태
- 유스케이스: 사용자 측면의 요구사항으로 일반적으로 다이어그램 형식으로 묘사됨
4. 네비게이션 (Navigation)
- 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것
- 사용자 중심
- 이미지 맵 : 그림에 하이퍼링크를 연결
- 사이트 맵 : 트리 구조 형태
5. 소프트웨어 아키텍쳐 ★★★
- 개발할 소프트웨어의 기본 틀을 만드는 것
- 밑그림을 그리는 과정
- 전반적인 구조를 설계한다.
- 아키텍쳐의 결정은, 비기능 요구사항과 큰 관련이 있다.
- 초기에 작성되기 때문에, 개발 및 유지 보수 작업에 영향을 준다.
- 물리적이 아닌, 논리적인 구성을 정의하는 것이다.
6. 품질 요구사항 기신사효유이
- 국제 표준
- ISO/IEO 9126: 소프트웨어의 품질 특성과 평가를 위한 표준 지침으로서 국제 표준으로 널리 사용
- ISO/IEC 25010 (호환성과 보안성이 더 강화됨)
- ISO/IEC 12119: ISO/IEC 9126을 준수한 품질 표준으로 테스트 절차를 포함하여 규정함
- 종류
- 기능성 - 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부 적절성/적합성, 정밀성/정확성, 상호 운용성, 보안성, 준수성 적정상보준
- 신뢰성 - 소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도성숙성, 고장 허용성, 회복성
- 사용성 - 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 정확하게 이해하고 사용하며, 향후 다시 사용하고 싶은 정도를 나타냄이해성, 학습성, 운용성, 친밀성
- 효율성 - 사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지시간 효율성, 자원 효율성
- 유지 보수성 - 환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도분석성, 변경성, 안정성, 시험성
- 이식성 - 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지적용성, 설치성, 대체성, 공존성
6. UI 프로토타입 ★★★
- 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로 테스트가 가능함
- 최대한 간단하게 만들어야 함
- 핵심 기능만 제공함
- 실제 사용자를 대상으로 테스트하는 것이 좋음
- 아키텍처가 확정된 이후, 실제 분석 작업이 완료되기 이전에 진행함
- 종류
- 페이퍼 프로토타입 (Paper Prototype)
- 디지털 프로토타입 (Digital Prototype)
7. UI 상세 설계 ★★★
- 모든 화면에 대한 자세한 설계를 진행하는 단계
- 반드시 시나리오를 작성해야 함
- tree 구조 또는 flow chart 표기법으로 작성함
- 시스템의 기능이 아닌, 사용자의 테스크에 초점을 맞추어 작성함
- 예외 처리 방식, 인터랙션 흐름, 기능 구조 등을 포함함
** 인터랙션 디자이너 : UI 시나리오 문서를 작성하는 사람
8. HCI (Human Computer Interaction or Interface)
- 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문
- 최종 목표는 시스템을 사용하는 데 있어 최적의 사용자 경험(UX)을 만드는 것
9. UX (User eXperience)
- 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험
10. 감성 공학
- 사용자의 감성에 알맞도록 설계 및 제작하는 기술로 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합과학