Ⅰ. 소프트웨어 설계 : 화면 설계

1. 사용자 인터페이스 (User Interface)

사용자 인터페이스 (UI)
사용자와 시스템 간의 상호 직용이 원활하게 이루어지도록 도와주는 장치나 소프트웨어를 의미한다.

 

사용자 인터페이스의 세 가지 분야

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

사용자 인터페이스의 구분

• CLI(Command Line Interface) : 명령과 출력이 텍스트로 이루어지는 인터페이스이다.
  

  

  CLI (출처: https://namu.wiki/w/CLI)

• GUI(Graphical User Interface) : 아이콘이나 메뉼,ㄹ 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스이다.
  

  

  GUI (출처: https://lancangkuning.com/post/17139/prinsip-pokok-pemrograman-berbasis-gui.html)

• NUL(Natural User Interface) : 말이나 행동으로 조작하는 인터페이스이다.
  

  

  NUL (출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=haebang4&logNo=70176365823)

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

• 직관성 : 쉽게 이해하고 사용할 수 있어야 한다.
• 유효성 : 사용자의 목적이 쉽게 달성되도록 제작되어야 한다.
• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 한다.
• 유연성 : 요구사항을 최대한 수용하고, 실수를 방지할 수 있어야 한다.

사용자 인터페이스의 설계 지침 : 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

 

2. UI 표준 및 지침

UI 표준 및 지침 개요
UI 표준과 지침을 토대로 기술의 중립성(웹 표준), 보편적 표현 보장성(웹 접근성), 기능의 호환성(웹 호환성)이 고려되었는지 확인하여야 한다.

 

※ 웹의 3요소

• 웹 표준 : 웹에서 사용되는 규칙 또는 기술을 의미한다.
• 웹 접근성 : 어떤 환경에서도 웹 사이트에서 제공하는 모든 정보에 접근하여 이용할 수 있도록 보장하는 것을 의미한다.
• 웹 호환성 : 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비를 제공하는 것을 의미한다.

전자정부 웹 표준 준수 지침 : 정부기관의 홈페이지 구축 시 반영해야 할 최소한의 규약을 정의한 것이다.

• 내용의 문법 준수
• 내용과 표현의 분리
• 동작의 기술 중립성 보장
• 플러그인의 호환성
• 콘텐츠의 보편적 표현
• 운영체제에 독립적인 콘텐츠 제공
• 부가 기능의 호환성 확보
• 다양한 프로그램 제공

 

3. UI 설계 도구

UI 설계 도구
사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구이다.

 

1. 와이어 프레임 : 기획 초기 단계에서 제작하는 것으로 페이지에 대한 계락젹인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계이다. 개발자나 디자이너가 레이아웃을 협의하거나 진행 상태 등을 공유하기 위해 사용한다.
   와이어 프레임 툴에는 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등이 있다.
   

   

   와이어 프레임 (출처: https://blog.wishket.com/%ED%99%94%EB%A9%B4%EC%84%A4%EA%B3%84%EC%84%9C-wireframe%EB%9E%80-%ED%8F%89%EC%83%9D-%EC%8D%A8%EB%A8%B9%EB%8A%94-%EC%A0%9C%EC%9E%91-%EA%BF%80%ED%8C%81/)

2. 목업 : 와이어프레임보다 조금 더 실제 화면과 유사하게 만즈는 정적인 형태의 모형으로 시작적으로만 구성 요소를 배치한다.
   목업 툴에는 파워 목업, 발사믹 목업 등이 있다.
   

   

   목업 (출처: https://zippypixels.com/product/mockups/devices/free-android-app-mockup/)

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

   

   스토리보드 (출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=durandot&logNo=100148718290)

4. 프로토타입 : 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 모델이다. 작성 방법에 따라 페이퍼 타입과 디지털 타입으로 나뉜다.
   프로토타입 툴에는 HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오오븐 등이 있다.
   인터랙션 : UI를 통해 시스템을 사용하는 일련의 상호 작용으로 예를 들어 마우스로 아이콘을 클릭하면 해당 동작에 맞게 화면이 작동하는 것을 의미한다.
   

   

   페이퍼 프로토타입 (출처: https://www.edrawsoft.com/kr/for-beginners/what-is-prototyping.html)

5. 유스케이스 : 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다. 사용자의 관점에서 어떤 내용이 필요한지에 대한 순서도라고 할 수 있다.
   

   

   유스케이스 다이어그램 (출처: https://zdnet.co.kr/view/?no=00000039134587)

3. UI 요구사항 확인

UI 요구사항 확인
새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해 작성하는 단계이다.

 

UI 요구사항 확인 순서

UI 요구사항 확인 순서

1. 목표 정의 : 사용자를 대상으로 인터뷰를 하고, 의견이 수렴된 비즈니스 요구사항을 정의하는 단계이다. 인터뷰는 가능한 개별적으로 진행하며, 한 시간을 넘지 않도록 하고, 사용자 리서치 전에 진행해야 한다.
2. 활동 사항 정의 : 조사한 요구사항을 토대로 해야 할 활동 사항을 정의하는 단계이다.
3. UI 요구사항 작성 : 수집된 요구사항을 검토하고, 분석하여 UI 개발 목적에 맞게 작성하는 단계이다. UI 요구사항 작성은 다음과 같은 3단계로 진행된다.
   1. 요구사항 요소 확인 : 파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토한다. 요구사항 요소에는 데이터 요구, 기능 요구, 제품/서비스의 품질, 제약 사항이 있다.
   2. 정황 시나리오 작성 : 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것으로, 요구사항을 도출하기 위해 작성한다. 시나리오는 사용자 관점에서 작성하여야 한다.
   3. 요구사항 작성 : 정황 시나리오를 토대로 요구사항을 작성한다.