2022년9월24일 TIL - 정보처리기사 : UI 설계/디자인, 와이어프레임, 프로토타이핑

정보처리기사 독학하기! 정리 요약 

UI/UX 디자인

디자인 기준

• 구체적인 이유없이 예쁜 것 ‘같다’ 라는 이유로 디자인하지 말 것. : 심리, 기분, 상황에 따라 바뀔 수 있다. 타인의 이게 더 나은 것 ‘같다’ 라는 이유없이 느낌에 따른 피드백에 들어왔을때 합당한 이유를 들어 디자인 근거를 설명할 수 있다. 이러한 근거까지 생각해서 피드백 협의를 진행할 것.
• 이용자의 동선은 단순하게, 조작 단계는 최소화하라.
• 기능의 분류에 따라 비슷한 것끼리 묶어줘라.

와이어프레임

Figma로 그려본 나의 첫 와이어프레임

 

UI 상세 설계

• • UI 요구사항들을 재확인
  • UI 프로토타입 재확인
  • UI 요구사항들과 UI 프로토타입에 기초해 UI 시스템 구조 설계
  • 사용자 별 정보 시스템의 기능 사용 구조 다이어그램UI 구조 설계
• 사용자 기반 메뉴 구조 설계
  • UI 시스템 구조를 바탕으로 사이트 맵 구조 설계
  • 사용자 관점에서 요구되는 프로세스들을 진행되는 순서에 맞춰 정리
• 화면 설계
  • UI 프로토타입과 UI 프로세스 정의를 참고해서 페이지별로 필요한 화면 설계
  • 화면별 고유 ID 를 부여하고 별도의 표지 페이지 작성
  • 화면별로 필요한 화면 내용 설계
• 하위 시스템 단위의 내외부 상세 화면과 폼 설계
  • 각 하위 시스템 단위의 상세 화면에 대한 조작 순서와 조작 방법 기술
  • 화면 단위로 입출력하는 정보에 대한 값, 형태, 입출력 조건 등 기술
  • 각 화면의 버튼을 클릭했을 때 처리 내역(입력/출력/조회)을 기술하여 개발자가 참조할 수 있도록 함

UI 설계 도구

화면 설계 도구

• 파워 목업(Power Mockup)
  • 파워 목업은 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴
  • 파워포인트에서 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있음
• 발사믹 목업(Balsamiq Mockups)
  • 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
  • 디테일한 화면 구성보다는 간단한 스케치에 활용
• 카카오 오븐(Oven)
  • 카카오에서 제작한 온라인 프로토타이핑 도구
  • 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유

프로토타이핑 도구

• UX핀(UXPin)
  • 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구
  • 구글 글라스에 포함된 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업 지원 가능
• 액슈어(AXURE)
  • UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구
• 네이버 프로토나우(ProtoNOW)
  • 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트, 등의 기능 지원 가능 도구