Prototyping Design의 중요성 및 도구 (학습일지 7주차)
< Prototyping Design >
Prototyping은 두 가지 툴로 나눌 수 있다.
1. Time based Flow Design
2. State based Interation Design
1. Time Based Flow Design
(시간 기반의 동선을 점검하기에 용이)
프로젝트 초기에 서비스의 플로우를 그려보고 실제 서비스의 콘셉트를 확인해 보는 과정이다.
Pros (장점)
- 프로젝트의 초반의 콘셉트를 명확히 확인
- 필요한 경우 빠른 테스트 또한 수행 가능
- 초반 적극적 커뮤니케이션에 유용
- 프로토타입을 통한 구성원 간 합의 도출
Cons (단점)
- 리치한 인터랙션을 보여주기엔 한계
- 툴마다의 트랜지션과 애니메이션 수준의 한계
+ 대표적인 툴
1) Paper Prototyping
- 종이라는 이점으로 빠르게 그려보고 수정할 수 있다.
- 툴에 익숙하지 않은 누구라도 적용해 볼 수 있다.
- 테스트 중간에 바로 그려서 궁금한 부분을 물어보거나 수정할 수 있다.
- 실제와 차이가 있을 수 있으며 인터랙션을 표현하기에 한계가 있다.
2) POP
- 페이퍼 프로토타이핑 요소를 카메라로 찍기만 해도 진짜 모바일 서비스처럼 올려서 사용해 볼 수 있다.
- 스케치를 통해 빠르게 콘셉트를 확인하고 동선을 보기에 유용하다.
3) Figma
- 웹 기반 프로그램이라 무조건 설치하지 않아도 된다.
- UI도 심플하여 처음 접하는 사람들도 쉽게 사용할 수 있다.
- 실시간으로 대화를 나눌 수 있다.
- 디자이너가 작업한 것을 개발 소스로도 쉽게 뽑아낼 수 있다.
- 빠르게 플로우를 점검할 수 있다.
2. State based Interaction Design
(상태나 상황, 인터랙션을 테스트하기에 용이)
서비스의 특정 장면(scene)에 대한 리치한 인터랙션 디자인을 만들어보고 테스트하는 과정이다.
Pros (장점)
- 상상 속 다양한 인터랙션을 직접 구현
- 구현한 인터랙션을 기반으로 설득에 용이
- 실제 코딩 시 명확한 테이터 값 전달 가능
- 빠르고 다양한 인터랙션 테스트 가능
Cons (단점)
- 전체 서비스의 플로우를 확인하기 어려움
- 초기 러닝커브가 높아 학습에 오랜 시간이 소요
- 디테일한 인터랙션을 위해서는 코딩이 필요
- 자칫 프로토타이핑의 미세한 부분까지 논의
+ 대표적인 툴
1) ProtoPie
- 스케치, xd, 피그마에서 작업한 파일을 불러와서 작업할 수 있다.
- 익숙해지는데 시간이 걸리지만 한번 익숙해지만 다양한 인터랙션을 쉽게 만들어낼 수 있다.
- 리치한 인터랙션을 코드 없이 구현해 낼 수 있다.
2) Framer
- 구현하고자 하는 인터랙션의 자유도가 높다.
- 러닝커브가 매우 높은 편이라 어려운 툴 중 하나이다.
- 피그마, 스케치 등과 연동이 된다.
- 팀원과 프로토타이핑을 공유하며 협업할 수 있는 기능이 추가되었다.
- Summary
1. 언어로 표현하기 어려운 디자인을 명확히 전달 (Making your language dear)
2. 개발 중인 서비스의 테스트와 검증 가능 (Testing your service to user)
3. 제대로 만들고 있는지에 대한 지속적 확인 (Building right thing)
- Have to know
1. 상황에 맞는 올바른 도구를 선택하는 것이 중요 (Choosing right prototyping)
2. 반복적으로 진행하고 수정하는 것이 중요 (Iterative Testing & Feedback)
3. 빠르게 만들고 또 버려질 수 있는 것이 중요 (Quick & Dirty Prototype)
**강의 - 11.실무 프로세스 및 노하우_대기업(네이버,카카오) ch2-5,6**