프로토타입 : 시제품
- 디자인 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것을 의미.
- 구현하는 정도에 따라서 단계를 나눌 수 있다.
·Lo-fi(Low-fidelity) : 와이어프레임 같이 낮은 단계의 프로토타입. 전체적인 흐름을 빠르게 맞출 수 있는 수준을 의미.
·Hi-fi(High-fidelity) : 높은 단계의 프로토타입. 실제 제품과 거의 같거나 유사한 수준으로 제작. - 이렇게 프로토타입을 제작 또는 이용한 테스트를 하는 것을 프로토타이핑이라고 한다.
프로토타입을 만드는 이유 :
·실제 제품을 만들지 않고 아이디어를 검증할 수 있다.
·팀 구성원과의 소통시 시각적인 결과물의 보조를 받아서 더 효과적으로 의견을 모을 수 있다.
·기획 단계 등에서 미처 생각하지 못한 부족한 부분이나 놓친 부분을 찾아내서나 더 좋게 수정할 수 있다.
- 피그마에도 프로토 타입 기능이 따로 있다.
장점 : 직관적이며 빠른 제작이 가능하다.
단점 : 전문 프로토타입 툴에 비하면 기능이 부족해 실제 제품처럼 동작에는 어려우며, 제한된 기능 탓에 오히려 프로토 타입이 실제품 제작보다 효율성이 떨어진다. - 피그마 프로토타입 구성 요소 3가지.
·핫스팟 : 프로토타입 시작 시점.
·커넥션 : 핫스팟-종착점 서로 이어주는 연결선.
·종착점 : 도착점.


- 프로토 타입 패널에서 어떤 기기 화면으로 테스트할 수 있는지 설정할 수 있다.
- 디바이스 부분을 통해서 어떤 기기를 기준으로 프로토 타입을 재생할지 선택할 수 있다. 디바이스를 선택하지 않으면 프레임 크기와 피그마 화면 크기에 따라 재생 화면이 달라질 수 있어 기기 선택을 권장한다.
배경색은 기기 바깥의 배경색을 고를 수 있다. - 피그마의 프로토타입 실행 방식
·프리뷰 모드 : 디자인하는 중간에 작업 중인 화면과 흐름을 빠르게 확인하고 논의할 때 사용. 디자인 중에도 사용 가능.
·프레젠테이션 모드 : 프로토타입을 공유 또는 사용할 때 프레젠테이션 형태로 만드는 것.
'UI\UX 공부 > figma강의 정리' 카테고리의 다른 글
| [5강] 화면 디자인 연결 요소 3인방 (0) | 2025.07.16 |
|---|---|
| [5강] 스크롤 컨테이너와 오버플로우 (0) | 2025.07.16 |
| [4강] 합성 컴포넌트와 네스티드 인스턴스 (0) | 2025.07.16 |
| [4강] 버튼에 아이콘 넣기/바꾸기 (0) | 2025.07.15 |
| [4강] 02. 버튼 컴포넌트 (1) | 2025.07.14 |