[UX/UI] 트위터 디자인 예제 (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를 설정하고 클릭 시 원하는 인터랙션과 애니메이션을 통해 다이얼로그가 올라오도록 설정할 수 있다.

  

  모든 인터랙션 설정, 애니메이션에 대해 유연하게 설정 가능한 것이 가장 큰 장점이다.