프로토타입의 개념
원래 뜻은 시제품
실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있음
로우파이와 하이파이로 나눠짐
피그마에선 하이파이를 만들기 어렵다.
프로토타입을 만들거나 테스트하는 것을 프로토타이핑이라고 한다.
만드는 이유
1. 실제 제품을 만들지 않고 아이디어를 검증할 수 있다.
2. 팀원들과 시각적인 결과로 소통할 수 있다.
3. 부족하거나 놓친 부분을 확인할 수 있다.
피그마 프로토타입 소개
피그마에서 디자인한 화면을 실제 테스트해볼 수 있음
장점 - 직관적이다., 빠르게 만들 수 있다.
단점 - 실제 제품처럼 정교하게 움직이는 걸 만들 수 없다., 효율성이 떨어진다.(시간이 오래걸림) / 유-머 : 블루스파게티(스파게티면 같이 파란선이 많아서)
핫스팟 - 프로토타입을 시작하는 지점
커넥션 - 화면을 연결해주는 선
종착점 - 프로토타입이 끝나는 점
프로토타입 둘러보기
프리뷰모드_ shift + space 로 프로토타입을 미리 확인할 수 있다.
트리거와 액션
풀로우와 구성요소
커넥션 하나하나를 플로우라고 한다
플로우패널은 트리거, 액션, 애니메이션으로 구성됨
트리거는 액션을 시작하는 조건이나 이유
액션은 트리거로 만들어지는 결과
(트리거)~하면 (액션)~하게 한다.
트리거의 종류
- On click : 클릭 또는 탭/터치했을 때 액션을 실행해요.
- On drag : 드래그했을 때 액션을 실행해요.
- While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행해요.
Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과예요. - While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행해요.
Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과예요. - Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행해요.
- Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행해요.
- Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행해요.
- Mouse down : 커서/마우스가 영역을 누르면 액션을 실행해요.
- Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행해요.
- After delay : 일정 시간이 지난 후에 액션을 실행해요.
액션의 종류
- Navigate to : 페이지(프레임)를 이동하는 액션이에요.
- Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션이에요.
트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있어요. - Back : 직전 화면으로 이동하는 액션이에요.
뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있어요. - Set variable : 변수를 특정 값으로 설정하는 액션이에요.
트리거를 실행하면 변수를 원하는 값으로 설정할 수 있어요.
💡 변수 기능은 피그마 유료 계정부터 사용할 수 있어요. - Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션이에요.
💡 조건분기 기능은 피그마 유료 계정부터 사용할 수 있어요. - Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션이에요.
- Open link : 특정 URL을 여는 액션이에요.
💡 피그마 안의 특정 영역이나 프레임으로도 이동할 수 있어요. - Open overlay : 현재 프로토타입 화면에 라이트박스와 프레임을 보여주는 액션이에요.
다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용해요. - Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션이에요.
- Close overlay : 라이트박스을 닫는 액션이에요.
애니메이션
트리거는 시작조건, 액션은 실행하는 내용, 애니메이션은 어떻게 실행할지를 결정
화면을 어떻게 전환할지
피그마 애니메이션의 종류
- Instant : 별도의 애니메이션 없이 즉각 실행해요.
- Dissolve : 천천히 흐릿해지면서 화면을 전환해요.
페이드인/아웃이라고도 불러요. - Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 만들어요.
- Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환해요.
- Push : 현재 화면을 지정한 방향으로 밀면서 등장해요.
- Slide in/out : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장해요.
스마트 애니메이트
☆작동하는 요소의 이름(레이어의 이름)이 같아야함
레이어 이름이나 레이어 구조가 다르면 스마트 애니메이션이 움직이지 않는다.
스마트 애니메이트로 조작할 수 있는 속성
- 크기(Scale): 크기를 다르게 하면 커지게 하거나 작아지게 할 수 있어요.
- 위치(Position): 위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있어요.
- 투명도(Opacity): 레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있어요.
- 회전(Rotation): 요소를 자연스럽게 회전하게 만들 수 있어요.
- 배경색(Fill): 요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경할 수 있어요.
프로토타입 응용하기
스크롤
컨테이너보다 내용이 더 길어야 컨테이너에 스크롤을 적용할 수 있다.
스크롤 방식
- No scrolling : 스크롤하지 않아요. 기본값이에요.
- Horizontal : 가로 방향으로 스크롤할 수 있어요.
- Vertical : 세로 방향으로 스크롤할 수 있어요.
- Both directions : 가로 및 세로 방향으로 모두 스크롤할 수 있어요.
포지션
css에서 사용할 수 있음
스크롤을 하면 화면도 스크롤을 따라 움직이는데 바텀텝같이 고장되어있는 요소를 고정할때 포지션을 조정해서 만든다.
피그마에서 설정할 수 있는 포지션의 종류
- Static(스태틱): 대부분의 요소들이 가지고 있는 포지션이에요. 기본값이자 스크롤을 따라 같이 움직여요.
- Fixed(픽스드): 화면이 바뀌거나 스크롤하더라도 항상 고정된 위치에 있어요.
웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position 이에요. - Absolute(앱솔루트): Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이라는 점이 달라요. 즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 컨테이너를 기준으로 해요.
오토레이아웃 프레임 안에 있을 때만 사용할 수 있음
오토레이아웃에 영향받지 않고, 일반 프레임에 배치하는 것처럼 움직일 수 있음 - Sticky(스티키): 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이에요.
스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것을 뜻해요.
