UX/ UI - Wireframe , Prototype , 피그마 (Figma) 사용

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

와이어프레임 :

선으로 틀을 잡는다는 의미. 기획 단계에서 페이지 어떻게 구성할 것인지 구조 잡는 목적 

 

와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨이 나눕니다.

 

1. Low Fidelity Wireframe (Lo-Fi Wireframe)

2. Middle Fidelity Wireframe (Mid-Fi Wireframe)

3. High Fidelity Wireframe (Hi-Fi Wireframe)

 - 와이어프레임을 완성본에 가깝게 작성한 것을 Hi-Fi 와이어프레임이라고 합니다. 와이어프레임이라기 보다는 목업에 가까운 형태이며, 작성하는데 시간도 많이 들고 수정도 어렵기 때문에 와이어프레임을 작성하는 목적과는 맞지 않아 Hi-Fi한 수준까지 만드는 경우는 거의 없습니다.

 

프로토타입

 - 실제 제품과 거의 흡사한 형태로, 페이지 이동과 상호작용 등이 가능. 본격 개발 전 단계이며 UI 작용을 시뮬레이션 하는 것이 목적 

 

프로토타입 역시 얼마나 최종 결과물과 흡사하게 만들었는지에 따라서 피델리티 레벨이 나뉩니다.

1. Low Fidelity Prototype (Lo-Fi Prototype)

- 구체적인 내용이 작성되어있지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입을 Lo-Fi 프로토타입이라고 합니다. User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있습니다.

2. High Fidelity Prototype (Hi-Fi Prototype)

최종 결과물과 거의 유사한 수준으로 만든 프로토타입을 Hi-Fi 프로토타입이라고 합니다. 이 단계에서는 디자인을 거의 확정하게 되며, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능합니다. 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있습니다.

3. Middle Fidelity Prototype (Mid-Fi Prototype)

Hi-Fi 프로토타입처럼 완성도가 높지는 않지만, Lo-Fi 프로토타입보다는 최종 결과물에 가까운 프로토타입을 Mid-Fi 프로토타입이라고 합니다. 사용성 테스트를 하기위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해주는 것이 좋습니다.

 

 

 

---

Figma  ( UI 디자인& 프로토타입 툴 ) 

Figma 특징 

1. 실시간 협업 가능 : 한 화면에서 여러 사람 동시 작업 가능 
2. 다양한 환경 지원 : 웹 브라우저 기반이기에 mac, window, linux 등 다양한 os에서 가능 
3. 자동 저장 및 버전 관리 : 자동저장, 히스토리 기능
4. 다양한 무료 폰트 지원 : 구글폰트 사용가능하기에 별도 폰트 설치 불필요
5. 오토 레이아웃 기능 : 
6. 프로토타이핑 : Figma에서 제공하는 프로토타입 기능으로 Lo-Fi 수준의 프로토타입부터 Hi-Fi까지 제작 가능 

 

 

 

자주 사용하는 기능 & 단축키 모음

기본 단축키

• 복사하기 : Command + C
• 붙여넣기 : Command + V
• 잘라내기 : Command + X
• 복제하기 : Command + D 혹은 Option 누른 상태로 드래그
• 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭
• 그룹으로 묶기 : Command + G
• 프레임으로 묶기 : Command + Option + G
• 그룹, 프레임 해제하기 : Command + Shift + G
• 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기

오토 레이아웃

• 오토 레이아웃 추가하기
  • 오토 레이아웃 적용할 요소 선택 → Shift + A
  • 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택
• 오토 레이아웃 제거하기 : Shift + Option + A

컴포넌트

• 단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Command + Option + K 혹은 상단 Create component 버튼 클릭
• 컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택
• 상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택
• 컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties 에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가
• 컴포넌트의 인스턴스 생성
  • 컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
  • 화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다놓기

Figma는 이 외에도 다양한 단축키를 제공합니다. Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인하실 수 있습니다.

• Command 키가 아니라 Control 키입니다. 헷갈릴 수 있으니 주의하세요!