트위터 디자인 예제 (3)

4. 프로토 타이핑

비주얼 디자인을 기반으로 실제로 작동하는 화면을 만드는 과정이다.

4-1. Low Fidelity vs High Fidelity

Low Fidelity

• Rapid Prototype: 퀄리티에 중점을 두지 않고 빠르게 디자인을 확인하는 방법이다.

• 사용 툴: Figma, Sketch, InVision 등이 있다. 도구 하나를 익히는 데 매달리기보다 사용자 반응을 빨리 확인할 화면을 만드는 데 초점을 맞춘다.

High Fidelity

• 실제 플랫폼과 유사한 퀄리티를 보장하는 프로토타입을 제작한다.

• 사용 툴: Origami, Framer, Principle 등이 있다.

4-2. 프로토 타이핑 (Figma, Low Fidelity)

• 비주얼 디자인을 기반으로 Figma에서 작업한다.

  

  우측 탭의 Prototype 버튼을 클릭하고 Interaction를 추가하여 클릭 후 이동 View에 대해 설정할 수 있다. 각 Figma View에 따라 Interaction에서 버튼과 다음 View를 연결하는 등 사용자 흐름에 맞게 연결한다.

  

  기능을 단순하게 연결하고 사용자 흐름이 끊기지 않도록 만든다.

4-3. 프로토 타이핑 (Origami, High Fidelity)

• 정교한 사용자 테스트, 개발과 디자인 협업 시 디테일한 인터랙션, 애니메이션에 대해 논의할 수 있도록 실제 구현 수준으로 원하는 바를 인지할 수 있다.

  

  Origami를 사용하여 애니메이션, 시작 픽셀 등 실제 코딩에서 사용할 값과 유사한 정보를 사용하여 선을 연결하여 액션을 행할 수 있게 된다.

  

  Hit Area를 설정하고 클릭 시 원하는 인터랙션과 애니메이션을 통해 다이얼로그가 올라오도록 설정할 수 있다.

  

  인터랙션과 애니메이션을 세밀하게 조절할 수 있다는 점이 가장 좋았다.