[사용자 친화 웹] UI/UX-2

Chapter5. 와이어프레임 & 프로토타입
1.와이어프레임과 프로토타입의 특징을 기억한다.
2.와이어프레임과 프로토타입을 피델리티에 따라서 구분할 수 있다.
3.와이어프레임과 프로토타입의 차이점을 이해한다.
Chapter6. Figma
4.Figma의 특징을 기억한다.
5.Figma의 기본적인 사용법을 익힌다.
6.Figma를 사용하여 간단한 프로토타입을 제작할 수 있다.
과제1 - Figma 클론
7.Figma의 사용 방법을 익힌다.
8.Figma로 프로토타입을 제작할 수 있다.

1.와이어프레임은 기획 단계에서 내용의 구성, 구조등을 설계하는 정적인 단계이며 프로토타입은 개발 전 UI 상호작용을 테스트하는 동적인 단계로 개발 후 실제 사용에서 생길 문제 또는 개선사항들을 미리 체크해볼 수 있는 장점이 있다.

2.와이어프레임은 구조적 설계를 위한 밑그림정도의 가치가 있기 때문에 주로 내용물은 없는 스케치 상태의 Low 피델리티 또는 내용물에 뭐가 들어갈지 정도의 간단한 설명을 넣어주는 Middle 피델리티 정도에서 마무리한다. 하지만 프로토타입은 실제로 유저의 경험을 테스트하기 위해서 middle~high 피델리티를 요구하지만 low 피델리티 또한 user flow에서 이상이 있는지 또는 추가해야 할 상호작용이 있는지에 대해 체크하는 용도로는 사용된다.

3.와이어 프레임은 정적이며 기획단계의 스케치라면 프로토타입은 실제 제품과 유사하게 동작하는 모습을 보여주는 시제품과도 같은 성격을 띄고 있다. 

4.Figma는 실시간 협업 기능, 다양한 환경 지원, 자동 저장 및 버전 관리, 다양한 무료 폰트 지원, 오토 레이아웃 기능, 프로토타이핑 등의 여러가지 기능을 제공하며 일정 수준의 기능은 무료로 이용할 수 있다.

5,6,7,8.피그마는 기본적으로 여러가지 요소들을 컴포넌트로 묶어주며 프로토타입이라는 기능을 통해 상호작용을 연결해줄 수 있으며 그 상호작용을 하는 방법에 대해서도 선택할 수 있다. 또한 그리드를 이용해 내부 배치를 자연스럽게 해줄 수 있으며 컴포넌트에 여러가지 상태를 부여서 상호작용 또는 시간에 따라 변화하게 만들어줄 수 있다.

오늘은 피그마를 통해 간단한 클론을 만드는 과정을 진행했는데 이것저것 여러가지 기능이 많아서 재미있게 진행할 수 있었다. 완제품의 완성도는 크게 뛰어나지 않지만 이 프로토타입을 통해서 어떻게 만들어야 할지에 대해서 파악할 수 있어 다른 사람이 만든 프로토타입을 보면서 어떻게 프로그래밍을 해야 할지에 대해서도 고민해볼 수 있는 좋은 시간이 됐다.

https://www.figma.com/proto/pZVtEHcEvfAGV3Oy93zzrV/Untitled?node-id=26%3A61&scaling=scale-down&page-id=0%3A1&starting-point-node-id=26%3A149