프로젝트 계획(12-4) 사용자 인터페이스(UI) 설계 [소프트웨어공학]

이번에는 사용자 인터페이스 설계를 배울 것이다.

그냥 인터페이스가 아니라 사용자 인터페이스임을 알고 알아보자

 

---

사실 우리는 소프트웨어의 개발을 프로그램을 동작을 위해 만든 것이다. 

사람이 하는 일을 프로그램이 하게 하려는 것이 소프트웨어 개발의 주목적이었다.

그 분야도 사실 주로 과학 분야나 군사 분야 여서 사용자 인터페이스가 사실 필요가 없었다.

 

그렇지만 컴퓨터가 대중들에게 보급되고 일상생활에서 컴퓨터가 쓰이다 보니까 사용자의 인터페이스를 고려해야 했다.

 

컴퓨터가 적용되는 분야도 다양해졌고 사용하는 방식도 일괄처리에서 다양한 형태로 바뀌었다. 

다시 말해서 사용자의 입장이 어느 시대보다 중요해진 시기가 되었다.

 

**모든 소프트웨어는 사용자의 만족이 큰 목적이 됨
++소프트웨어 시스템에 있어서 사용자의 만족이란 
그 기능과 사용자 인터페이스 그리고 시스템의 기능이 정확하고 완벽해야 만족이 되었다. 

 

---

다시, 사람과 컴퓨터 사이의 의사소통이라는 관점에서 보자면 인터페이스의 형태는 매우 다양하게 나올 수 있다.

 

살짝 맛만 보자면

 

사용자 인터페이스는 이런 역할을 한다.

 

사람과 컴퓨터 사이의 대화를 체계적으로 표현하는 역할을 한다.

 

사람은 컴퓨터 시스템에 명령을 내리고 자료를 전달하고 
컴퓨터는 사람에게 처리된 정보나 처리 상태, 도움말 등을 전달한다.

 

 

---

그럼 이러한 사용자 인터페이스의 종류는 몇가지나 될까?

 

4가지정도로 나눌 수 있다.

 

 

1. 그래픽 사용자 인터페이스(Graphic User Interface)
직접 조작형 인터페이스이다. 간략화된 작업 환경을 보여주고 그 속에 아이콘과 텍스트로 이루어진 객체를 직접 조작함으로 일을 수행한다.

 

++우리가 바탕화면을 더블 클릭하면 파일이 열리는 이유다.

2. 웹 인터페이스
인터넷과 웹브라우저를 통하여 페이지를 열람하고 조작하는 인터페이스이다.

GUI와 아주 흡사한데 다양한 종류의 콘텐츠, 즉 하이퍼텍스트를 네비게이션 하기 위함이다.

 

3. 명령어 인터페이스

정해진 명령 문자열을 입력하여 시스템을 조작하는 인터페이스이다.

CMD 입력창 같은 것이다. 우리가 명령어를 외우지 않으면 아무것도 할 수 없다.

 

4. 텍스트 사용자 인터페이스
자연어에 가까운 문장을 입력하여 시스템을 조작하는 인터페이스이다.

요즘에는 인공지능이나 게임 분야에서 많이 채택하는 편이다.

 

++ 더욱 발전해서 Voice UI도 있다. 음성인식을 인터페이스 환경으로 제공하기도 한다.

 

---

 

그렇다면 어떤 UI가 좋은 UI일까??

 

당연하게도 기능이 잘 수행되어야 좋은건 알겠다. 또 다른 요인이 뭐가 있을까?

 

 

좋은 사용자 인터페이스란 직관적으로 사용가능하고 사용하는 도중에 오류가 적어야한다.

다시 말하자면 얼마나 편하게 사용할 수 있는지가 큰 요인이다.

 

 

좋은 인터페이스를 위한 사용자와 시스템간의 대화설계서에서 따라야 할 큰 원칙이 있다.

 

1. 일관성

만약 세이브하는 단축키의 모양이 플로피 디스크모양이었는데 다른 화면에선 플로피 디스크는 새로하기 기능이면 어떻게 될까?? 데이터 다 날리겠지?? 그만큼 사용에 있어서는 일관성이 중요하다.

2. 적절한 사용자 지원

사용자가 어떤 액션을 취했거나 오류가 발생했을 때 무엇인지 모르면 문제다. 시스템이 무엇이 오류인지 알려줘야 한다. 그래야 다음 번에 오류가 생기는 것을 피한다. 그렇지 않으면...

 

++우리가 컴파일 오류 떴을 때 어떤 라인이 오류가 떴는지 나오지 않는다면 아마도 우리가 C언어 1만 Line을 수행하다 오류가 났다면 우리는 컴퓨터를 부수고 말 것이다.

3. 적당한 피드백

사용자가 어떤 액션을 취했을 때 사용자는 시스템이 어떻게 반응할 것인지 기대한다. 당연한 말이다.

즉 우리가 액션을 취했는데 오류가 아님에도 기대한 반응을 보이지 않는다면 내가 한 액션이 시스템에 전달되었는지 몰라서 계속 액션을 취할 것이다. 그렇다면 오류가 아닌 것도 오류가 생길 수 있다.

 

++ 우리가 마우스로 클릭 후 모래시계가 생기는 경우를 볼 수 있는데 이 때 한 번 더 클릭을 하면 응답 없음이 나오면서 오류가 생긴다... 모래시계로 바뀌었다는 것은 기다리라는 것이다. ㅋㅋㅋㅋㅋㅋ  근데 나는 아직까지 모래시계에서 한번더 누르지 않고 기다린 사람을 본적이 없다. ㅋㅋㅋㅋㅋ안되면 될 때 까지 누른다 ㅋㅋㅋㅋㅋ

 

4. 최소의 사용자 입력

사용자는 많은 입력을 하기 싫어한다. 편하자고 하는 일인데 입력이 많은 인터페이스는 비효율적이다. 또한 입력이 많으면 오류가 생길 확률도 늘어난다.

 

 

다시 말하지만 결국 사용자를 배려하는 사용자 중심의 설계를 만드는 것이 궁극적 목표다.

 

---

그렇다면 우리는 UI를 만들 때 어떤 마음가짐으로 만들어야 할까??

 

우리가 가져야 할 7가지 가이드라인이 있다.

 

당연한 말이지만 살짝 맛만 보자.

 

 

1. 배우기 쉽고 쓰기 쉬운 인터페이스를 만들라

위에 말했듯이 다들 플로피 디스크가 세이브 버튼인 것을 알고 있다면 굳이 우리가 바꿀 필요가 없다. 만든 UI에서도 플로피 디스크 이미지를 쓰면 되겠다.

2. 효율성을 높이는 기능을 제공하라

우리가 많이 쓰는 기능을 사용자가 보기 쉽게 가장 맨위로 놓는 기능은 어떨까?? 당연히 효율성이 높아진다.

가장 많이 쓰는 기능을 단축키로 설정하면 어떨까? 그것도 당연히 효율성이 높아진다.

 

3. 사용자가 도움을 받거나 오류를 수정하기 쉽게 하라

그 옛날에 도움주는 개 기억하나?? 갑자기 나와서 무엇이든 물어보세요 하는데 사실 아무것도 해결이 안된다.... 이런 도움말 말고 정말 도움을 주는 것을 제공하자.

4. 입력 자료의 오류를 최소화

예를 들면 프로그램을 종료하려고 했을 때 우리가 저장 안되었을 때 끄면 경고 메세지가 뜬다 정말로 끄겠냐고

그 때 저장을 안한 것을 생각하고 저장을 하면 베스트!! 잘못하고 또 누르면 ... ㅂㅂ

5. 사용자에게 피드백을 제공하라

무엇인가 눌렀을 때 수행시간이 너무 길어서 사용자가 내가 제대로 누른건지 아닌지 모를 때 UI가 시간이 오래 걸릴 것 같다는 메세지를 딱 띄우면 사용자는 다시 액션을 취하기보다는 기다리겠지??

6. 끌리는 레이아웃과 설계를 창조하라

당연히 눈에 띄는 레이아웃과 설계가 각광받는다. 이는 생략

7. 익숙한 용어와 이미지를 사용하라

당연히 나한테 익숙한 것에 더 끌린다. 당연하니까 이것도 생략

 

---

사용자 인터페이스는 어떻게 설명하는지 알겠다.

그러면 화면 설계는 어떻게 할까...?? 많지만 짧게 하고 끝내자.

 

화면 설계를 위한 원리가 있다. 좀 보면
1. 화면을 설계하는 동안 사용자의 특성을 기억한다
2. 논리적으로 관련 있는 항목들은 빈 줄 등으로 구별하기 쉽게 한다
3. 정보를 조직적으로 표현하기 위하여 다양한 정렬 방식을 사용한다
4. 다중 화면의 경우 화면 사이의 일관성이 중요하다
5. 여러 가지 다른 배치로 시험한다

 

또한 UI컨트롤이라는 것이 있는데 이것도 살짝만 보자 
메뉴바 ,명령 버튼, 다이얼로그 박스
텍스트 박스, 토글 버튼
리스트 버튼, 드롭다운 리스트 박스
라디오 버튼, 체크 박스

들이 있다.

 

 

---

또한 출력물 설계도 있다.

그렇지만 그냥 생략하고 데이터 설계로 바로 가자. 이게 중요하다.

 

관계형 데이터베이스를 위한 주요 모델링 도구는 엔티티 관계 다이어그램이다.

엔티티 관계 다이어그램(Entity-Relationship Diagram)

 

관계를 나타내는 방법은 3가지가 있다.
1. 테이블 이름을 함수 이름
2. 속성들을 매개변수
3. 기본 키는 밑줄

 

** 그렇지만 위의 표현 방법은 그림 표현이 아닌 경우 개별 테이블을 지칭할 때나 유용하다.

그래서 이에 대한 대안으로 ER 다이어그램을 쓴다.

 

ER 다이어그램은 테이블보다는 엔티티를 강조하고 관계형 데이터베이스 모델링에 가장 널리 사용되는 도구이다.

UML 다이어그램과 다르게 ER 다이어그램은 표준화 된 표현 없다. 

 

**그렇지만 대부분 엔티티는 박스로 표시하고 관계는 마름모로 표현하는게 관례화 되어있다.

**그래서 관계형 데이터베이스를 설계할 때 우선 영구 저장할 데이터의 엔티티를 찾아내고 엔티티들 사이의 관계를 파악한 후 각 엔티티의 모든 속성이 기본 키에만 종속되도록 3차 정규형으로 만든다.

//얘는 데이터베이스 배울 때나 배우자

 

그래서 설계를 예시로 더 잘 배우자면 

 

1. ERD를 작성해야한다.

 

그러려면 시스템의 엔티티를 파악하기 위하여 클래스 다이어그램을 리뷰해야한다.

그 후  1:1, 1:M, M:N 관계를 결정하기 위해서 관계 분석을 해야한다.

 

 

 

2. 데이터 요소들을 엔티티에 배정한다.

데이터 사전에 있는 모든 자료 요소가 엔티티와 관련되어있는지 검토한다. 그래야 안빼먹지.

 

3. 모든 테이블에 대하여 3차 정규형으로 만든다.

즉 기본 키, 보조 키, 외부 키를 파악해야 하는 것이 우선이다. 

그럼 이렇게 된다.

 

 

4. 자료 사전의 모든 요소를 검토한다.

자료 사전에 있는 모든 데이터 엔티티들이 완전하고 바르게 문서화 되었는지 확인한다. 확인 또 확인해야한다.

 

5. 완성

최종 ERD와 정규화 된 테이블을 생성한 후에는 데이터베이스로 변환한다.// 나중에 배우자