소프트웨어 설계 2장 화면 설계

사용자 인터페이스

사용자 인터페이스(UI, User Interfac)의 개요

　사용자 인터페이스(UI)는 사용자와 시스템 간의 상호작용이 원할하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미한다. 초기의 사용자 인터페이스는 단순히 사용자와 컴퓨터 간의 상호작용에만 국한되었지만 점차 사용자가 수행할 작업을 구체화시키는 기능 위주로 변경되었고, 최근에는 정보 내용을 전달하기 위한 표현 방법으로 변경되었다. 사용자 인터페이스의 세 가지 분야는 다음과 같다.

• 정보 제공과 전달을 위한 물리적 제어에 관한 분야
• 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
• 모든 사용자가 편리하고 간단하게 사용하도록 하는 기능에 관한 분야

사용자 인터페이스의 특징

• 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소로, 소프트웨어 영역 중 변경이 가장 많이 발생한다.
• 사용자의 편리성과 가독성을 높임으로써 작업 시간을 단축시키고 업무에 대한 이해도를 높여준다.
• 최소한의 노력으로 원하는 결과를 얻을 수 있게 한다.
• 사용자 중심으로 설계되어 사용자 중심의 상호 작용이 되도록 한다.
• 수행 결과의 오류를 줄인다.
• 사용자의 막연한 작업 기능에 대해 구체적인 방법으로 제시해 준다.
• 정보 제공자와 정보 이용자 간의 매개 역할을 수행한다.
• 사용자 인터페이스를 설계하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.

사용자 인터페이스의 구분

　사용자 인터페이스는 상호작용의 수단 및 방식에 따라 다음과 같이 구분된다.

• CLI(Command Line Interface): 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
• GUI(Graphical Line Interface): 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
• NUI(Natural User Interface): 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
• VUI(Voice User Interface): 사람의 음성으로 기기를 조작하는 인터페이스
• OUI(Organic User Interface): 모든 사물과 사용자 간의 상호작용을 위한 인터페이스로, 소프트웨어가 아닌 하드웨어 분야에서 사물 인터넷(Internet or Things), 가상현실(Virtual Reality), 증강현실(Augmented Reality), 혼합현실(Mixed Readlity) 등과 함께 대두되고 있다.

사용자 인터페이스의 기본 원칙

　사용자 인터페이스의 기본원칙에는 직관성, 유효성, 학습성, 유연성이 있다.

• 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다.
• 유효성: 사용자의 목적을 정확하고 완벽하게 달성해야 한다.
• 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.
• 유연성: 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다.

사용자 인터페이스의 설계 지침

　사용자 인터페이스를 설계할 때 고려할 사항은 사용자 중심, 사용성, 일관성, 단순성, 결과 예측 가능, 가시성, 심미성, 표준화, 접근성, 명확성, 오류 발생 해결 등이다.

• 사용자 중심: 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야 한다.
• 사용성: 사용자가 소프트웨어를 얼마나 빠르고 쉽게 이해할 수 있는지, 얼마나 편리하고 효율적으로 사용할 수 있는지를 말하는 것으로, 사용자 인터페이스 설계시 가장 우선적으로 고려해야 한다.
• 일관성: 버튼이나 조작 벙법 등을 일관성 있게 제공하므로 사용자가 쉽게 기억하고 습득할 수 있게 설계해야 한다.
• 단순성: 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 한다.
• 결과 예측 가능: 작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계해야 한다.
• 가시성: 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계해야 한다.
• 심미성: 디자인적으로 완선도 높게 글꼴이나 색상을 적용하고 그래픽 요소를 배치하여 가독성을 높일 수 있도록 설계해야 한다.
• 표준화: 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 쉽게 사용할 수 있도록 설계해야 한다.
• 접근성: 사용자의 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 설계해야 한다.
• 명확성: 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 한다.
• 오류 발생 해결: 오류가 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 한다.

사용자 인터페이스 개발 시스템의 기능

　사용자 인터페이스 개발 시스템이 가져야 할 기능은 다음과 같다.

• 사용자의 입력을 검증할 수 있어야 한다.
• 에러 처리와 그와 관련된 에러 메시지를 표시할 수 있어야 한다.
• 도움과 프롬프트(Prompt)를 제공해야 한다.

UI 설계 도구

UI 설계 도구

　UI 설계 도구는 사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구로, 종류에는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있다. UI 설계 도구로 작성된 결과물은 사용자의 요구사항이 실제 구현되었을 때 화면은 어떻게 구성되는지, 어떤 방식으로 수행되는지 등을 기획단계에서 미리 보여주기 위한 용도로 사용된다.

와이어프레임(Wirefram)

　와이어프레임은 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계이다. 와이어프레임 툴에는 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등이 있다.

목업(Mockup)

　목업은 디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형이다. 시작적으로만 구성요소를 배치하는 것으로 실제로 구현되지는 않는다. 목업 툴에는 파워 목업, 발사믹 목업 등이 있다.

스토리보드(story Board)

　스토리보드는 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서이다. 디자이너와 개발자가 최종적으로 참고하는 작업 지침서로, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어 있다. 스토리보드 툴에는 파워포인트, 키노트, 스케치, Axure 등이 있다.

프로토타입(Prototype)

　프로토타입은 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형이다. 프로토타입은 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플이다. 프로토타입은 작성 방법에 따라 페이퍼 프로토타입과 디지털 프로토타입으로 나뉜다. 프로토타입 툴로는 HTML/CSS, Axure, Flinto, 네이터 프로토나우, 카카오 오븐 등이 있다.

유스케이스(Use Case)

　유스케이스는 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기위해 수행할 내용을 기술한다. 사용자의 요구사항을 빠르게 파악함으로써 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화 할 수 있다. 유스케이스는 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것으로 일반적으로 다이어그램 형식으로 묘사된다. 유스케이스 다이어그램이 완성되면, 각각의 유스케이스에 대해 유스케이스 명세서를 작성한다.

품질 요구사항

품질 요구사항

　소프트웨어의 품질은 소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 추족하는가를 나타내는 소프트웨어 특성의 총체이다.

• ISO/IEC 9126
  • ISO/IEC 9126은 소프트웨어의 품질 특성과 평과를 위한 표준 지침으로서 국제표준으로 널리 사용된다.
  • 특성
    • 기능성: 적절성/적합성, 정밀성/정확성, 상호 운용성, 보안성, 준수성
    • 신뢰성: 성숙성, 고장 허용성, 회복성
    • 사용성: 이해성, 학습성, 운용성, 친밀성
    • 효율성: 시간 효율성, 자원 효율성
    • 유지 보수성: 분석성, 변경성, 안정성, 시험성
    • 이식성: 적용성, 설치성, 대체성, 공존성
• ISO/IEC 25010
  • 특성
    • 기능 적합성: 기능 완전성, 기능 정확성, 기능 적절성
    • 성능 효율성: 시간 효율성, 자원 효율성, 사양
    • 호환성: 공존성, 상호운영성
    • 사용성: 적절 인지정도, 학습성, 조작성, 사용자 오류 방지, UI 미학, 접근성
    • 신뢰성: 성숙성, 사용가능성, 결함 허용성, 복구성
    • 보안성: 기밀성, 무결성, 부인방지, 책임추적성, 인증성
    • 유지 보수성: 모듈성, 재사용성, 분석성, 변경성, 시험성
    • 이식성: 적응성, 설치성, 대체성

기능성(Functionality)

　기능성은 소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부를 나타낸다.

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

신뢰성(Reliacblity)

　신뢰성은 소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행할 수 있는 정도를 나타낸다.

• 성숙성(Maturity): 결함으로 인한 고장을 피해갈 수 있는 능력
• 고장 허용성(Fault Tolerance): 결함 또는 인터페이스 결여 시에도 규정된 성능 준수를 유지할 수 있는 능력
• 회복성(Recoverability): 고장 시 규정된 성능 수준까지 다시 회복하고 직접적으로 영향 받은 데이터를 복구할 수 있는 능력

사용성(Usablity)

　사용성은 사용자와 컴퓨터 사이에 발생하는 어떠한 행위에 대하여 사용자가 쉽게 배우고 사용할 수 있으며, 향후 다시 사용하고 싶은 정도를 나타낸다.

• 이해성(Understandability): 소프트웨어의 적합성, 사용 방법 등을 사용자가 이해할 수 있는 능력
• 학습성(Learnability): 소프트웨어 어플레케이션을 학습할 수 있도록 하는 능력
• 운용성(Operability): 사용자가 소프트웨어를 운용하고 제어할 수 있도록 하는 능력
• 친밀성(Attractiveness): 사용자가 소프트웨어를 다시 사용하고 싶어 하도록 하는 능력

효율성(Efficiency)

　효율성은 사용자가 요구하는 기능을 할당된 시간 동안 한정된 자원으로 얼마나 빨리 처리할 수 있는지 정도를 나타낸다.

• 시간 효율성(Time Behaviour): 특정 기능을 수행할 때 적정한 반응 시간 및 처리 시간, 처리율을 제공할 수 있는 능력
• 자원 효율성(Resource Behavior): 특정 기능을 수행할 때 적절한 자원의 양과 종류를 제공할 수 있는 능력

유지 보수성(Maintainability)

이식성(Protability)

　이식성은 소프트웨어가 다른 환경에서도 얼마나 쉽게 적용할 수 있는지 정도를 나타낸다.

• 적용성(Adaptability): 원래의 목적으로 제공되는 것 외에 다른 환경으로 변경될 수 있는 능력
• 설치성(Installability): 임의의 환경에 소프트웨어를 설치할 수 있는 능력
• 대체성(Replaceability): 동일한 환경에서 동일한 목적을 위해 다른 소프트웨어를 대신하여 사용될 수 있는 능력
• 공존성(Co-existence): 자원을 공유하는 환경에서 다른 소프트웨어와 공존할 수 있는 능력

UI 상세 설계

UI 시나리오 문서 개요

　UI 상세 설계는 UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계로, UI 상세 설계를 할 때는 반드시 시나리오를 작성해야 한다.

UI 시나리오 문서 작성 원칙

　개발자가 전체적인 UI의 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성한다. 보통 계층(Tree) 구조 또는 플로차트(Flow Chart) 표기법으로 작성한다.

UI 시나리오 문서 작성을 위한 일반 규칙

　UI 시나리오 문서를 작성하면서 적용할 일반적인 규칙은 다음과 같다.

• 주요 키의 위치와 기능, 공통 UI 요소, 기본 스크린 레이아웃(Basic Screen Layout), 기본 인터랙션 규칙(Basic Interaction Rules), 공통 단위 태스크 흐름(Task Flows), 케이스 문서 　UI 요소는 다음과 같다.
• 체크박스(Check Box), 라디오 버튼(Radio Button), 텍스트 박스(Text Box), 콤보 상자(Combo Box), 목록 상자(List Box)

UI 시나리오 문서의 요건

• 완정성(Complete)
  • 누락되지 않도록 최대한 상세하게 기술해야 한다.
  • 해당 시스템의 기능보다는 사용자의 태스크에 초점을 맞춰 기술한다.
• 일관성(Consistent)
  • 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지해야 한다.
• 이해성(Understandable)
  • 누구나 쉽게 이해할 수 있도록 설명한다.
  • 불분명하거나 추상적인 표현은 피한다.
• 가독성(Readable)
  • 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록 해야 한다.
  • 문서 인덱스에 대한 규칙이나 목차를 제공한다.
  • 줄 간격, 단락, 들여쓰기 등의 기준을 마련한다.
  • 시각적인 효과를 위해 여백이나 빈 페이지, 하이라이팅을 일관성 있게 지정한다.
  • 하이퍼링크 등을 지정하여 문서들이 서로 참조될 수 있도록 지정한다.

UI 시나리오 문서로 인한 기대 효과

• 요구사항이나 의사소통에 대한 오류가 감소한다.
• 개발 과정에서의 재작업이 감소하고, 혼선이 최소화된다.
• 불필요한 기능을 최소화한다.
• 소프트웨어 개발 비용을 절감한다.
• 개발 속도를 향상시킨다.

HCI/UX/감성공학

HCI(Human Computer Interaction or Interface)

　HCI는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문으로, 최종 목표는 시스템을 사용하는데 있어 최적의 사용자 경험(UX)을 만드는 것이다.

UX(User Experience)

　UX는 사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험을 말한다. 단순히 기능이나 저차상의 만족뿐만 아니라 사용자가 참여, 사용, 관찰하고, 상호 교감을 통해서 알 수 있는 가치 있는 경험을 말한다.

• UX는 기술을 효용성 측면에서만 보는 것이 아니라 사용자의 삶의 질을 향상시키는 하나의 방향으로 보는 새로운 개념이다.
• UI가 사용성, 접근성, 편의성을 중시한다면 UX는 이러한 UI를 통해 사용자가 느끼는 만족이나 감정을 중시한다.
• UX의 특징
  • 주관성(Subjectivity): 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적이다.
  • 정확성(Contextuality): 경험이 일어나는 상황 또는 주변 환경에 영향을 받는다.
  • 총체성(Holistic): 개인이 느끼는 총체적인 심리적, 감성적인 결과

감성공학

　감성공학은 제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술로, 인문사회과학, 공학, 의학 등 여러 분야의 학문이 공존하는 종합과학이다.