Ⅵ. 화면 설계 - UI 설계.

1. UI 흐름 설계

• UI 흐름 설계는 업무의 흐름이나 업무 수행과 관련된 일련의 흐름을 흐름도 형식으로 표현하는 활동.

1. UI 설계서 구성 요소

• UI 설계서 표지 / UI 설계서 개정 이력 / UI 요구사항 정의 / 시스템구조 / 사이트맵 / 프로세스 정의 / 화면설계.
  
  

2. UI 설계 원리

• 실행 차를 줄이기 위한 UI 설계 원리
  • 사용의도 파악
  • 행위 순서 규정
  • 행위의 순서대로 실행
• 평가 차를 줄이기 위한 UI 설계 원리
  • 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도
  • 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
  • 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
    
    

3. UI 흐름 설계 수행 절차

1. UI 설계안의 적정성 확인 : 설계원리에 맞게 되었는지 적정성 확인
2. 화면과 폼의 흐름 설계
   • 화면에 표현되어야 할 기능적 요구사항 및 비기능적 요구사항 검토
   • 화면의 입력요소 및 유스케이스를 통한 UI 요구사항 확인
   • 유스케이스 설계
   • 기능 및 양식 확인

2. UI 상세설계

1. UI 상세설계 프로세스

1. UI 요구사항 최종 확인
2. UI 구조 설계
3. 사용자 기반 메뉴 구조 설계
4. 화면 설계
5. 하위 시스템 단위내∙외부 상세 화면과 폼 설계
   
   

2. UI 검토 및 보완

1. UI 검토 수행
   • 사용성의 반복적인 검토를 통해 완성도가 높은 UI 상세설계 수행이 가능하므로 UI 검토를 2~3번 수행
   • UI스토리보드 활용을 통해 페이퍼 프로토타입의 평가는 짧은 단위로 개발 및 평가를 반복하여 확인
2. UI 검토 보완
   • UI 검토 수행을 통한 사용자 평가 결과를 토대로 설계를 보완.
3. 사용성 검토 및 검증 수행
   • 고수준의 프로토타입을 활용하여 내부 개발자 및 전문가들의 UI사용성 평가를 통해 개선사항을 지속적으로 반영.

3. UI 설계 도구

1. 설계 도구의 개념

• 사용자와 시스템 사이에 의사소동 할 수 있도록 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구.
  
  

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

• 분석 : UI패턴 / UI모델링
• 설계 : UI설계
• 구현 : 프로토타이핑 툴
  
  

3. UI 설계 도구의 유형

1. 화면 설계 도구
   • 파워목업[Power Mockup] : 파워포인트에 추가 메뉴를 설치해 목업 기능 사용 지원 툴.
   • 발사믹 목업[Balsamiq Mockups] : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉 전달 할 수 있는 목업 도구.
   • 카카오 오븐[Oven] : 카카오에서 제작한 온라인 프로토 타이핑 도구 / 장점은 직관적 인터페이스.
     ✱ 목업(Mockup) : 실제 제품이 나오기 전 만드는 모형을 의미(비용절감 목적)
2. 프로토타이핑 도구
   • UX핀[UXPin] : 웹브라우저로 화이어프레임과 프로토 타이핑 작업 동시 가능 / 다양한 목업 지원.
   • 액슈어[AXURE] : UI설계보다는 스토리보드에 포함되는 정책, 플로차트, 디스크립션까지 작성 가능한 도구.
   • 네이버 프로토나우[ProtoNOW] : 네이버에서 만든 프로토타이핑 툴 / 스토리보드, 플로차트 등의 기능 지원.
     
     

4. UI 디자인 도구

• 스케치[Sketch] : 다양한 목업 & 템플릿 활용, 레이아웃 중심의 UI 디자인 설계 지원
• 어도비 익스피리언스 디자인 CC[Adobe XD] : UI 디자인에 최적화된 툴. 직관적 인터페이스 제공 도구.
  
  

5. UI 디자인 산출물로 작업하는 프로토 타이핑 도구

• 인비전[Invision] : 디자이너 작업 결과를 사이트 업로드 후 UI를 연결해 간단한 인터랙션 적용이 가능한 도구.
• 픽사에이트[Pixate] : 프로토 타이핑 툴. 모바일 앱 프로토타이핑 최적화, 디테일한 인터랙션 설정 가능 도구.
• 프레이머[Pramer] : 코드 가반의 프로토 타이핑 도구 / 코드 기반으로 실제 작업물과 흡사하게 작동.
  
  

• 정보처리기사 필기 합격 후 실기대비 정리 및 책없이 간단히 보기위해 작성하였습니다.
• 2020년 수제비 정보처리기사 책 기반으로 정리 하였습니다.
• 저작권 관련 문제가 있다면 hojunbbaek@gmail.com 으로 메일 주시면 바로 삭제 조치 하도록 하겠습니다.