[정보처리기사] 1과목 소프트웨어 설계 - 화면 설계

📌 사용자 인터페이스

UI (User Interface)

UI란, 사용자가 소프트웨어나 하드웨어와 상호작용 할 수 있도록 돕는 시각적, 기능적 요소들의 집합을 말합니다.

일반적으로 우리가 "화면"이라고 부르는 것이 바로 UI라고 볼 수 있겠습니다.

---

UI 설계 원칙

• 직관성(Intuitiveness) : 누구나 쉽게 이해하고 사용할 수 있어야 함
• 유효성(Effectiveness) : 정확하고 완벽하게 사용자의 목표가 달성되어야 함
• 학습성(Learnability) : 모두가 쉽게 배우고 사용할 수 있게 제작되어야 함
• 유연성(Flexibility) : 사용자의 실수를 방지할 수 있게 제작되어야 함

---

UI의 유형

1. CLI (Command Line Interface)

• 텍스트 기반 인터페이스
• 명령어를 텍스트로 입력
• DOX, UNIX 등 운영체제에서 사용

 

2. GUI (Graphic User Interface)

• 그래픽 환경을 기반으로 한 인터페이스
• 키보드나 마우스 활용

 

3. NUI (Natural User Interface)

• 키보드나 마우스 없이 신체를 활용
• 멀티 터치, 동작 인식 등을 활용

 

4. OUI (Organic User Interface)

• 모든 사물 그대로가 인터페이스 장치가 됨

OUI는 아직은 조금 추상적인 개념이라 사진이 없습니다.
내가 보고, 듣고, 느끼는 모든 것들이 시스템과 소통할 수 있는 개념이 된다는 것이죠.

 

---

UI 설계의 주요 지침

1. 사용성을 가장 우선적으로 고려해야 함 (사용성 >>> 심미성)

아무리 예뻐도 사용하기가 어려우면 좋은 UI가 아니라는 것이죠!

 

2. 오류 발생 시, 발생한 부정적 내용을 적극적으로 사용자에게 알려야 함 (텍스트, 색, 음성 활용)

 

3. 편리한 사용을 위해 개발자가 아닌 사용자 중심으로 설계되어야 함

---

📌 UI 설계 도구

UI 설계 도구

1. 와이어프레임 (Wireframe)

• 화면 구조와 요소 배치를 간단하게 나타낸 기본 뼈대

출처: https://shin-ae.github.io/2018/04/17/wireframe/

 

2. 목업 (Mockup)

• 디자인, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형
• 시각적으로만 구성요소를 배치하는 것으로, 구현되지 않음

출처: https://baro-order.com/magazine/%EB%AA%A9%EC%97%85-Mock-up-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/171/

 

3. 스토리보드 (Storyboard)

• 사용 흐름을 시각화한 스크립트 및 그림
• 서비스 구축을 위한 대부분의 정보들이 담긴 문서

출처: http://www.gsky000.com/wp/%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B3%B4%EB%93%9C11-6/

 

4. 프로토타입 (Prototype)

• UI의 상호작용(인터랙션) 요소를 포함한 모델
• 와이어프레임보다 더 정교하고, 목업보다 상호작용 요소가 많음

5. 유스케이스 (Use Case)

• 사용자 측면에서의 요구사항
• 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것 (일반적으로 다이어그램 형식)

출처: https://narup.tistory.com/70

---

📌 품질 요구사항

1. 기능성 (Functionality)

사용자 요구사항을 만족하는 기능을 갖고 있어?

 

2. 신뢰성 (Reliability)

요구된 기능을 오류 없이 정확하게 수행할 수 있어?

 

3. 사용성 (Usability)

사용자가 쉽게 배우고 사용할 수 있어? 그리고 사용자들이 나중에 또 쓰고 싶어해?

 

4. 효율성 (Efficiency)

사용자가 요구하는 기능을 한정된 자원으로 빠르게 수행할 수 있어?

 

5. 유지 보수성 (Maintainability)

새로운 요구사항이 생겼을 때 유연하게 대처(개선, 확장)할 수 있어?

 

6. 이식성 (Portability)

다른 환경에서도 쉽게 적용할 수 있어?

---

📌 UI 상세 설계

UI 시나리오 문서

UI 상세 설계는 UI 설계서를 바탕으로 실제 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계입니다.

이 때, 반드시 필요한 것이 바로 "UI 시나리오 문서"입니다.

UI 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름 등을 문서로 정리한 것이죠!

---

UI 시나리오 문서 작성 원칙

• 보통 계층(Tree) 구조 또는 플로차트(Flow Chart) 표기법으로 작성
• 모든 기능에 공통적으로 적용될 UI 요소와 인터랙션을 일반 규칙으로 정의
• 대표화면의 레이아웃과 그 화면에 속할 기능을 정의
• 예외 상황에 대비한 다양한 케이스 정의

---

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

주요 키의 위치와 기능	모든 화면에 공통적으로 배치되는 주요 키의 위치와 기능 설명
공통 UI 요소	UI 요소를 언제, 어떤 형태로 사용할지 정의하고, 사용자가 조작하면 어떻게 반응하는지 흐름 설명
기본 스크린 레이아웃 (Basic Screen Layouts)	모든 화면에 공통적으로 나타나는 Titles, Soft Key, Option 등의 위치와 속성 정의
기본 인터랙션 규칙 (Basic Interaction Rules)	터치 제스처 등에 공통적으로 사용되는 조작 방법과 화면 전환 효과 등을 기술
공통 단위 태스크 흐름 (Task Flows)	많은 기능들에 공통적으로 사용되는 삭제, 검색, 등에 대한 인터랙션 흐름 설명
케이스 문서	다양한 상황에서 공통적으로 적용되는 시스템의 동작을 정의

---

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

• 요구사항이나 의사소통에 대한 오류 감소
• 재작업 감소, 혼선 최소화
• 불필요한 기능 최소화
• 개발 비용 절감
• 개발 속도 향상

---

UI 화면의 구성 요소

1. 콤보 박스 : 선택 항목이 있는 드롭다운 메뉴

 

2. 토글 버튼 : 상태를 전환하는 켜기/끄기 버튼

 

3. 라디오 버튼 : 여러 옵션 중 하나만 선택

 

4. 체크 박스 : 여러 옵션 중 여러 개 선택 가능

---

UI 제스처의 구성 요소

• 탭 : 화면을 터치
• 드래그 : 터치한 상태에서 끌기
• 플릭 : 짧고 빠르게 화면을 쓸기
• 팬 : 터치 상태에서 천천히 움직이기
• 핀치 : 두 손가락으로 모으거나 벌리기

---

📌 HCI / UX / 감성공학

HCI (Human Computer Interaction or Interface)

HCI는 사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문을 말합니다.

최종 목표는 "최적의 사용자 경험(UX)"을 만드는 것이죠!

---

UX (User Experience)

UX는 사용자가 서비스를 이용하면서 느끼는 총체적인 경험을 말합니다.

출처: https://thehotskills.com/user-experience/

 

<UX의 특징>

• 주관성(Subjectivity) : 사람의 신체적, 인지적 특성에 따라 다르므로 주관적임
• 정황성(Contextuality) : 상황 또는 주변 환경의 영향이 있음
• 총체성(Holistic) : 개인이 느끼는 총체적인 심리적, 감성적 결과임

---

감성공학

감성공학은 제품을 사용자의 감성에 알맞도록 설계 및 제작하는 기술입니다.