와이어프레임 & 프로토타입

와이어프레임 & 프로토타입

---

와이어프레임(wireframe)

• 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만듭니다.
• 와이어프레임을 표현할 때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나눕니다
  1. Lo-Fi Wireframe(Low Fidelity Wireframe)
     • 손으로 빠르게 그린 수준의 와이어프레임을 의미합니다
     • 작성하는데 시간이 많이 들지 않사 수정하거나 새로운 의견을 반영하기 쉽습니다
  2. Mid-Fi Wireframe(Middle Fidelity Wireframe)
     • Lo-Fi Wireframe을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi Wireframe이 됩니다.
     • 해당 페이지가 어떻게 작동하게 될지 예상할 수 있습니다.
  3. Hi-Fi Wireframe(High Fidelity Wireframe)
     • 와이어프레임을 완성본에 가깝게 작성한 것을 의미합니다.
     • 와이어프레임이라기보다는 목업에 가까운 형태입니다.
     • 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 이 단계까지 만드는 경우는 별로 없습니다.

 

---

 

프로토타입(prototype)

• 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능합니다.
• 본격적으로 개발에 들어가기 전 단계에서 작성하며, UI의 상호 작용을 시물레이션하는 것이 목적입니다.
• 얼마나 최종 결과물과 흡하게 만들었는지에 따라서 피델리티 레벨이 나뉩니다.
  1. Lo-Fi Prototype(Low Fidelity Prototype)
     • 구체적인 내용이 작성되지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해 볼 수 있는 수준의 프로토타입을 의미합니다.
     • User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있습니다.
  2. Mid-Fi Prototype(Middle Fidelity Prototype)
     • Hi-Fi 와 Li-Fi 프로토타입의 중간 정도의 완성도 프로토타입을 의미합니다.
     • 사용성 테스트를 위해서는 적어도 이 수준의 프로토타입을 작성해주는 것이 좋습니다..
  3. Hi-Fi Prototype(High Fidelity Prototype)
     • 최종 결과물과 거의 유사한 수준으로 만든 프로토타입을 의미합니다.
     • 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있습니다.

 

---

 

와이어프레임 vs 프로토타입

	와이어프레임	프로토타입
작성 시기	기획 단계	개발 전 단계
작성 목적	화면 구조 설계	UI 상호작용 시물레이션
특징	정적	동적

 

---

 

Figma

• Figma는 UI 디자인 & 프로토타이핑 툴입니다.

 

Figma 특징

1. 실시간 협업 기능
2. 다양한 환경 지원
3. 자동 저장 및 버전 관리
4. 다양한 무료 폰트 지원
5. 오토 레이아웃 기능
6. 프로토타이핑

 

Figma 사용법

 

프로젝트 새로 생성하기

 

간단한 사용방법 설명

1. 스크롤 설정

• 우측 메뉴 > Prototype / Scroll behavior / overflow
• 프레임이 씌여진 요소만 가능하므로 우클릭>Frame Selection 설정한다.

2. Nav와 같이 스크롤할 시 고정되는 기능 설정

• 우측 메뉴 > Prototype / Scroll behavior / position

3. 클릭 등의 이벤트 설정

• 원하는 요소 호버시 생기는 + 버튼 이동하여 이동 후 페이지로 이어주면 됩니다.
• 우측 메뉴 > Prototype / Interaction 에서 애니메이션 효과 적용 가능합니다.

4. 해당 요소 고정시키기

• 우측 메뉴 > Design / constraints 에서 고정 방향 선택

 

 

https://www.figma.com/

Figma: the collaborative interface design tool.