UI 설계

정보처리기사 필기 준비하며 정리한 내용입니다.

UI(User Interface)

• UX = 사용자 경험을 토대로 만들어진다.
• 정보기기와 사용자가 상호작용 가능하도록 연결해주는 매개체

 

UI 유형 ⭐

1. CLI
   • Command Line Interface
   • = CUI
   • 리눅스, 유닉스 시스템에서 사용한다
2. GUI
   • Graphical User Interface
3. AUI
   • Auditory User Interface
   • 사운드 관련
4. NUI
   • Natural User Interface
   • 특별한 하드웨어 없이 인간의 자연스러운 움식임을 인식하여 정보를 제공

 

UI 설계 원칙 ⭐

• 직관성
• 유효성 : 목적 정확하게 달성할 수 있어야 (웹툰보고싶다! 하고 누르면 웹툰이 나와야)
• 학습성 : 쉽게 배우고 익힐 수 있어야
• 유연성 : 사용자의 요구사항 최대한 수용(추가, 바꾸는 것)

 

UI 요구사항 ⭐

1. 기능적 요구사항
   • 어떤 기능을 수행해야 된다
2. 비기능적 요구사항
   • 품질에 관한 요구사항 (성능, 보안)

 

UI 설계 도구

기획자가 진행. 실무에선 와이어프레임과 SB로. (파워포인트로 만든다)

1) 와이어프레임 Wireframe

선으로 틀을 잡는다는 뜻

간단하게 대충 그림그린다는 뜻

보통 기획자가 만든다

기획자와 디자이너 둘이서만 쓰는 경우가 많다

2) 스토리보드 SB ⭐

프로젝트에서 필요한 전체적인 구성 (대부분의 정보 들어가있다)

모든 구성원이 다 본다

최종 결과 예상 가능한 기초 문서

• 작성 절차
  1. 표지
  2. 문서의 버전 (요구사항은 계속 바뀌므로)
  3. 인덱스 (목차
  4. IA(Information Architecture) 사이트맵 작성
  5. 공통모듈 작성 : 웹은 기본 구성화면 등의 내용을 공통 모듈 정의서로 작성한다.
     • GNB : 위에 들어가는 메뉴들
     • LNB : 왼쪽에 들어가는 메뉴들
  6. 화면설계와 description

3) 프로토타입 = 시제품

와이어프레임이나 스토리보드에 인터랙션(동적효과)를 적용해서 실제 구현된 것처럼 시뮬레이션 할 수 있다.

(고객을 안심시키는 용도)

4) 목업 Mockup ⭐

실제 화면과 유사하게 만든 정적 형태의 모형

5) 유스케이스

• 사용자의 기능 정의
  • 사용자 측면의 요구사항
  • 사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술
• 다이어그램 형태

 

 

감성공학

인간이 뭔가 만들고 싶은 걸 만드는 것

= 마음속의 이미지 파악(심리학) + 형상화(인간공학) + 구체적인 제품 생산

• 제품과 관련된 인간의 감성
  1. 감각적 감성
     • 제품에 관해(외관, 색상, 디자인) 사용자가 느끼는 감성
  2. 기능적 감성
     • 성능, 편리함
  3. 문화적 감성
     • 개인이 속한 사회나 문화에 관련된 것 (메이드인..)
• 감성공학의 접근 방법
  • 1류 접근 방법
    • 디자인 쪽 연계
  • 2류 접근 방법
    • • 문화적 감성
  • 3류 접근 방법
  • = 시제품으로 정량화된 값 환산