[정보처리기사][요약]1. 소프트웨어 설계(2)화면 설계

0. 서론

---

- 정보처리기사 자격증을 준비하는 사람들을 위한 네 번째 요약 포스팅입니다.

   이번 장에서는 소프트웨어 설계 중, '화면 설계' 에 대해 배워 볼 것입니다.

   UI 요구사항과, UI의 설계 방법에 대해서 알아볼 것입니다.

1. UI 요구사항 확인

---

- UI/UX를 구분해 두는 것은 중요합니다.

- UI : User Interface를 뜻합니다.

  UX : User eXeperience를 뜻합니다. 

- UX는 사용자 경험을 총체적으로 나타낸 것이고, UI는 시스템을 사람들이 사용할 수 있도록 편리를 위해 만들어진 것이라고 보는 것이 좋습니다. 

 

2. UI

---

1) 개념

- 사용자와 시스템 사이에서 소통할 수 있도록 고안된 물리적, 가상의 매개체입니다.

- 좁은 의미로는 기기, 소프트웨어의 화면 등 '직접적으로 접하는 화면' 을 뜻합니다.

 

2) 유형

- UI의 유형에는 크게 CLI, GUI, NUI, OUI 4가지로 구분됩니다.

   2.1) CLI

           - Command Line Interface 를 뜻하며, 정적 텍스트 기반 인터페이스입니다.
             명령어를 텍스트로 입력하여 조작해야합니다.
   2.2) GUI

           - Graphical User Interface 를 뜻하며, 그래픽 환경을 기반으로 마우스나 전자팬을 이용한 인터페이스입니다.
             비교적 사람들에게 친근하며 별도의 명령어를 외울 필요성이 적어 접근성이 높습니다.

   2.3) NUI
           - Natural User Interface 를 뜻하며, 직관적 사용자 반응 기반 인터페이스입니다.

             신체부위를 이용하는 인터페이스로 터치,음성 등을 이용합니다.

   2.4) OUI

           - Organic User Interface 를 뜻하며, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 인터페이스입니다.

3) 특징

- 오류 최소화

  구현하고자 하는 결과의 오류를 최소화 합니다.

- 작업 기능 구체화 

   특정 작업을 할 경우 구체적인 방법을 제시하므로써 다른 작업과 겹치지 않도록 합니다.

- 상호 작용

   사용자 중심으로, 사용자의 경험에 불편함을 주지 않도록 합니다.

- 작업시간 감소

   편의성을 뜻하며, 편리할 수록 작업속도 감소에 도움을 줍니다.

- 피드백 제공

   시스템 상태, 사용자의 지시 간 효과를 보여주어 진행상황 및 표시된 내용을 한 눈에 알기 쉽도록 도와줍니다.

 

4) UI 설계 원칙

- 1)직관성 2)유효성 3)학습성 4)유연성 총 4가지로 구성되어있습니다.

    4.1) 직관성

            - 직관적으로 쉽고, 이해 가능해야 합니다.

    4.2) 유효성

           - 사용자가 목표한 것에 정확하고 완벽한 방법으로 달성할 수 있어야 합니다.

    4.3) 학습성

           - 초보, 숙련자에 관계 없이 모두가 쉽고 빠르게 배울 수 있어야 합니다.

    4.4) 유연성

           - 사용자가 UI환경과의 의사소통이 제대로 되도록하고, 실수를 최소화 해야 합니다.

 

5) UI 설계 지침

*tip : UI 설계 원칙과 연계하여 생각하면 비교적 학습하기 편리합니다.

- 사용자 중심이 되어야 합니다.(유효성)

- 효율성을 높일 수 있게 설계되어야 합니다.(유효성)

- 버튼이나 조작법이 일관되어야 합니다.(학습성)

- 버튼이나 조작법이 따로 학습없이 사용할 수 있도록 단순해야 합니다.(학습성)

- 조작 시 결과에 대해 예측할 수 있어야 합니다.(직관성)

- 한 눈에 보여야 합니다.(직관성)

- 기존 사용법에 대해 숙지 시 학습된 것을 바탕으로 이용 가능해야 합니다.(학습성)

- 누구든지 쉽게 쓸 수 있어야 합니다.(직관성)

- 오류발생을 해결할 수 있어야 합니다.

 

6) UI 시스템의 필요 기능

- 사용자 입력을 검증하며, 에러처리와 에러 메세지(alert)를 처리해야합니다.

- 도움말(help)과 명령어를 쓸 프롬프트(prompt)를 제공해야합니다.

 

3. UI 표준

---

1) 개념

- 전체 시스템에 공통으로 적용되는 화면 간 이동 또는 화면 구성등에 대해 기준과 약속을 정하는 것 입니다.

 

2) 표준 구성

- 정책, 서비스 전체, 스타일 , 패턴 모델 , 조직 구성 등으로 이루어져 있습니다.

 

3) 고려사항

- 사용자가 불편하지 않아야 하며, 많은 업무 케이스를 포함해야합니다.

- 빠른 대처와 피드백이 가능해야합니다.

- 활용수단과 관리조직이 필요합니다.

 

4) UI패턴 모델

- CRUD 방식을 기반으로 하여 데이터의 입출력을 처리하는 화면 흐름을 포함하여, 표준절차를 표시하고 UI 모델을 개발하는 것입니다.

- 표준 프레임 워크로 개발하며 7가지 영역을 정의합니다.

    4.1) 업무화면 클라이언트 정의

    4.2) 서버 컨트롤러

    4.3) 서버 메세지 및 예외처리 정의

    4.4) 클라이언트와 서버 간 데이터 변환 정의

    4.5) 기업 포털 연계 정의

    4.6) 보고서 정의

    4.7) 외부 컴포넌트 연계 정의

 

4. UI 지침

---

1) 개념

- UI 표준에 따라 사용자 인터페이스 설계 및 개발 시 지켜져야 될 세부 사항입니다.

 

2) 스토리보드

- UI 화면 설계를 위해 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터 이동 등 여러가지를 총체적으로 쓴 문서입니다.

- 개발자나 디자이너가 참고하는 문서이며 기능 위주인지, 디자인 위주의 구성인지 구분해줄 필요가 있습니다.

 

5. UI 설계 프로세스

---

- 총 6가지 단계가 순차적으로 진행됩니다.

  1) 문제 정의

       - 왜 이 시스템을 만드는지, 혹은 시스템을 통해 해결하려는 문제가 무엇인지 정의합니다.
  2) 사용자 모델 정의

       - 어떤 사용자가 사용할 것인지 페르소나를 세우는 것을 뜻합니다.

  3)  작업 분석

        - 해결 해야 할 문제와 사용자 특징을 세분화하여 어떤 작업을 할 것인지 정리합니다.

  4) 컴퓨터 오브젝트 및 기능 정의

        - 분석한 작업을 인터페이스를 통해 표현할 방법과 세부사항을 정읳바니다.

  5) 사용자 인터페이스 정의

        - 작업 모델을 기반으로 사용자 인터페이스를 정의합니다.

           *시스템의 상태와 오브젝트를 정확히 설계하는 것이 중요합니다. 

  6) 디자인 평

        - 설계한 인터페이스가 분석한 직업에 맞게 설계되어있는지 편리한지 등을 평가합니다.

 

6. UI 흐름 설계

---

- UI 흐름 설계는 1)표현할 기능 정의 2)입력 요소 확인 3)UI 요구사항 기반 유스케이스 설계 4)기능 및 양식 확인 순으로 진행됩니다.

 

7. UI 설계 도구

---

1) 개념

- 사용자와 시스템 사이의 의사소통을 담당하는 도구입니다.

 

2) UI 개발 단계별 활용 가능한 설계 도구

분석, 설계, 구현 3가지로 나뉩니다.

     2.1) 분석

             - UI 패턴 도구, UI 모델링 도구를 사용합니다.

     2.2) 설계

             - UI 설계도구를 사용합니다.

     2.3) 구현

             - 프로토타이핑 도구를 사용합니다.

 

8. 감성공학

---

1) 개념

- 인간의 감성으리 정성, 정량적으로 나타내고 설계 해내는 공학입니다.

 

2) 접근방법

- 1류,2류,3류 접근 방법으로 나뉘며 갈수록 정량적인 방법 및 공학적인 방법으로 구체화 된다고 생각해주시면 됩니다.

 

9. 마치며

---

- 모두 해당 자료로 공부하여, 정보처리기사 필기 시험을 잘 보시기 바랍니다.

  자료는 요약본이 올라가며, 모르는 용어와 그림은 직접 찾아보면 공부에 더 큰 도움이 될 것입니다.

  긴 글 읽어주셔서 감사합니다.