와이어프레임(wireframe)
제품 기획 단계에서 페이지 구조를 잡기 위한 것
1. Low Fidelity Wireframe (Lo-Fi Wireframe)
손으로 빠르게 그린 수준
2. Middle Fidelity Wireframe (Mid-Fi Wireframe)
아이디어가 어느정도 구체화 된 후에 보기좋게 다듬어준 수준. 해당 페이지가 어떻게 작동할지 예상 가능
3. High Fidelity Wireframe (Hi-Fi Wireframe)
완성본에 가깝게 작성한 것. 와이어프레임이라기 보다는 목업에 가까운 형태. 와이어프레임 작성 목적과 맞지 않기 때문에 Hi-Fi 수준까지 만드는 경우는 거의 없음
프로토타입 (prototype)
실제 제품과 흡사하게 구현한 것으로 페이지 이동과 상호작용이 가능함
개발 들어가기 전 단계에 작성
UI의 상호작용을 시뮬레이션 하는 것이 목적
1. Low Fidelity Prototype (Lo-Fi Prototype)
간단한 상호작용과 페이지 이동 정도만 테스트해볼 수 있는 수준의 프로토타입
User flow 상에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토할 수 있음
2. High Fidelity Prototype (Hi-Fi Prototype)
최종 결과물과 거의 유사한 수준
디자인을 거의 확정하며 실제 제품과 다름없이 작동하므로 사용성 테스트가 가능
테스트를 통해 개발비용 투입 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 가능
3. Middle Fidelity Prototype (Mid-Fi Prototype)
사용성 테스트를 하기 위해서는 적어도 Mid-Fi 수준의 프로토타입을 작성해주어야 함
Wireframe VS Prototype
| 와이어프레임 | 프로토타입 | |
|---|---|---|
| 작성 시기 | 기획단계 | 개발 전 단계 |
| 작성 목적 | 화면 구조 설계 | UI 상호작용 시뮬레이션 |
| 특징 | 정적 | 동적 |
| 피델리티 | Low ~ Middle (High는 거의 작성 안함) | Middle ~ High (Low는 테스트에 적합하지 않음) |
Figma
가장 인기있고 강력한 UI 디자인 & 프로토타이핑 툴
와이어프레임, 프로토타입 제작 뿐 아니라 브레인스토밍, 아이디에이션, 다이어그램 제작, 디자인 시스템 구축 등 다한 분야에서 사용.
기본 단축키
복사하기 : 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 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키 확인 가능
