UI 설계 도구
- UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구이다.
- 종류는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스 등이 있다.
와이어프레임(Wireframe)
- 기획 단계의 초기에 제작하고 개략적인 레이아웃이나 뼈대를 설계한다.
- 영역구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다.
- 대표적인 툴
- 손그림
- 파워포인트
- 키노트
- 스케치
- 일러스트
- 포토샵
목업(Mockup)
- 와이어프레임보다 디자인, 사용 방법 설명, 평가 등을 위해 조금 더 유사하게 만든 정적인 형태의 모형
- 실제 구현되지 않고 시각적 구성 요소만 배치한다.
- 대표적인 툴
- 파워 목업
- 발사믹 목업
스토리보드(Story Board)
- 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름을 추가한 문서이다.
- 개발자와 디자이너가 최종적으로 참고하는 작업 지침서로 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어있다.
- 상단이나 우측에는 제목, 작성자 등을 입력하고 좌측에는 UI화면, 우측에는 설명을 기입한다.
- 대표적인 툴
- 파워포인트
- 키노트
- 스케치
- Axure
프로토타입(Prototype)
- 프로토타입은 와이어프레임이나 스토리보드 등에 인터렉션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모델이다.
- 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플이다.
- 작성 방법에 따라 페이퍼 프로토타입, 디지털 프로토타입으로 나뉜다.
- 대표적인 툴
- HTML/CSS
- Axure
- Flinto
- 네이버 프로토나우
- 카카오 오븐
유스케이스(Use Case)
- 사용자 측면에서 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한다.
- 프로젝트 초기에 시스템의 기능적인 요구를 결정하고 결과를 문서화할 수 있다.
- 자연어로 작성된 요구사항을 구조적으로 표현한 것, 일반적으로 다이어그램 형식으로 묘사된다.
- 유스케이스 다이어그램이 완성되면, 유스케이스 명세서를 작성한다.
비전공자 개발초보입니다!