2. 화면설계

사용자 인터페이스 

사용자의 시스템 간의 상호작용이 원활하게 이루어지도록 도와주는 장치나 소프트웨어. 인터페이스와 관계있는 소프트웨어 개발 영역을 결정하는 요소: 소프트웨어에 의해 간접적으로 제어되는 장치와 소프트웨어를 실행하는 하드웨어, 기존의 소프트웨어와 새로운 소프트웨어를 연결하는 소프트웨어, 순서적 연산에 의해 소프트웨어를 실행하는 절차. 

 

사용자 인터페이스의 특징 

사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소. 소프트웨어 영역중 변경이 가장 많이 발생.

사용자의 편리성과 가독성을 높임으로써 작업 시간을 단축시키고 업무에 대한 이해도를 높여준다. 

사용자 중심으로 설계되어 사용자 중심의 상호 작용이 되도록 한다. 

수행 결과의 오류를 줄인다. 

사용자의 막연한 작업 기능에 대해 구체적인 방법을 제시해 준다. 

정보 제공자와 정보 이용자 간의 매개 역할을 수행한다. 

 

사용자 인터페이스의 구분 

CLI(Command Line Interface) - 명령과 출력이 텍스트 형태로 이루어지는 

GUI(Graphical User Interface) - 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 

NUI(Natural User Interface) - 사용자의 말이나 행동으로 기기를 조작하는. 멀티 터치, 동작 인식, 등 사용자의 자연스러운 움직임을 인식하여 서로 주고 받는 정보를 제공하는 사용자 인터페이스. Pinch, Press, Flick. 

VUI(Voice User Interface) - 사람의 음성으로 기기를 조작하는

OUI(Organic User Interface) - 모든 사물과 사용자 간의 상호작용을 위한 인터페이스로, 소프트웨어가 아닌 하드웨어 분야에서 사물인터넷, 가상현실, 증강현실, 혼합현실등과 함게 대두 되고 있음.

 

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

직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다 

유효성: 사용자의 목적을 정확하고 완벽하게 달성해야 한다

학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다 

유연성: 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다 

 

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

사용자 중심, 사용성, 일관성, 단순성, 결과 예측 가능, 가시성, 심미성, 표준화, 접근성, 명확성, 오류 발생 해결 

심미성보다는 사용성을 우선시하여 설계. 효율성을 높이게 설계. 발생하는 오류를 쉽게 수정할 수 있어야 하고 사용자에게 피드백을 제공해야 함.

 

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

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

---

UI 설계 도구 

UI 설계 도구

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구. 작성된 결과물은 사용자의 요구사항이 실제 구현되었을때 화면은 어떻게 구성되는지, 어떤 방식으로 수행되는지 등을 기획단계에서 미리 보여주기위한 용도로 사용. 

와이어프레임 

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

목업 

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

스토리보드 

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서. 디자이너와 개발자가 최종적으로 참고하는 작업 지침서로, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어있다. 스토리보드는 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI화면, 우측에는 description을 기입. description 은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분으로, 명확하고 세부적으로 작성해야 한다. 툴: 파워포인트, 키노트, 스케키, Axure 등. 

프로토타입

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

유스케이스  

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

---

품질 요구사항 

품질 요구사항 

소프트웨어의 품질은 소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체. 사용자의 요구사항을 충족시킴으로써 확립. 소프트웨어 품질 측정을 위해 개발자 관점에서 고려해야 할 항목. 

기능성 

소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지 여부를 나타낸다. 적절성/적합성, 정밀성/정확성, 상호 운용성, 보안성, 준수성. 

신뢰성 

소프트웨어가 요구된 기능을 정확하고 일관되게 오류없이 수행할 수 있는 정도. 성숙성, 고장 허용성, 회복성. 

사용성 

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

효율성 

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

유지 보수성 

환경의 변화 또는 새로운 요구사항이 발생했을 때 소프트웨어를 개선하거나 확장할 수 있는 정도. 분석성, 변경성, 안정성, 시험성. 

이식성 

소프트웨어가 다른환경에서도 얼마나 쉽게 적용할 수 있는지 정도. 적용성, 설치성, 대체성, 공존성. 

---

UI 상세 설계 

UI 시나리오 문서 

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

UI 시나리오 문서 작성 원칙 

개발자가 전체적인 UI 기능과 작동 방식을 한눈에 이해할 수 있도록 구체적으로 작성. 보통 계층 구조 또는 플로차트 표기법으로 작성. 대표 화면의 레이아웃과 그 화면에 속할 기능을 정희한다. 인터랙션의 흐름을 정희하며, 화면간 인터랙션의 순서, 분기, 조건, 루프 등으 명시한다. UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오를 정의한다. UI 시나리오 규칙을 지정한다.   

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

주요 키의 위치와 기능 - 모든 화면에 공통적으로 배치되는 중 키의 위치와 기능을 설명한것으로 여러 화면 간의 일관성 보장 

공통 UI 요소 - 체크박스, 라디오 버튼, 텍스트 박스 등의 UI 요소를 언제, 어떤 형태로 사용할지를 정희하고, 사용자가 조작하면 어떻게 반응하는지 그 흐름을 설명. 

기본 스크린 레이아웃(Basic Screen Layouts) - 모든 화면에 공통적으로 나타나는 타이틀, 오케이, 뒤로가기, 옵션 등의 위치와 속성을 정의한다. 

기본 인터랙션 규칙(Basic Interaction Ruels)  - 터치 제스처등에 공통적으로 사용되는 조작방법과 실행, 이전, 다음, 삭제, 이동 등의 화면 전환 효과 등을 기술 

공통 단위 태스크 흐름(Task Flows)  - 많은 기능들에 공통적으로 사용되는 삭제, 검색, 매너 모드 상태 등에 대한 인터랙션 흐름을 설명 

케이스 문서 - 다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의한 문서 

 

UI 시나리오 문서의 요건 

완전성(Complete) - 누락 되지 않도록 최대한 상세하게. 시스템 기능 < 사용자의 태스크에 초점을 맞춰 기술 

일관성(Consistent) - 서비스 목표, 시스템 및 사용자의 요구사항, UI 스타일 등이 모두 일관성을 유지

이해성(Understandable) - 누구나 쉽게 이해. 불분명하거나 추상적인 표현은 피한다 

가독성(Readable) - 표준화된 템플릿 등을 활용하여 문서를 쉽게 읽을 수 있도록. 일기 쉽도록 줄 간격, 단락, 들여쓰기 등의 기준을 마련한다. 시각적인 효과를 위해 여백이나 빈 페이지, 하이라이팅을 일관성 있게 지정한다. 하이퍼링크 등을 지정하여 문서들이 서로 참조될 수 있도록 지정한다. v1.0, v2.0 등과 같이 문서 인덱스에 대한 규칙이나 목차를 제공한다.  

수정 용이성(Modifiable) - 수정이나 개선이 쉬워야 한다 

추적 용이성(Traceable)  - 변경사항은 언제, 어떤 부분이, 왜 발생했는지 쉽게 추적할 수 있어야 한다. 

 

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

요구사항이나 의사소통에 대하 오류가 감소.

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

불필요한 기능을 최소화. 

소프트웨어 개발 비용을 절감하고 개발 속도를 향상. 

---