구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있음 : Lo-fi(;Low fidelity - 낮은 단계의 프로토타입), Hi-fi(;Hi-fidelity - 높은 단계의 프로토타입)
프로토타입을 만들거나 또는 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함.
2) 프로토타입을 만드는 이유
실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음. : 아이디어와 컨셉을 실제 제품처럼 테스트해보고 결정하는데 도움을 주며, 실제 제품과 유사하게 만든 프로토타입은 사용자 대상 피드백을 수집하는 도구로 사용할 수도 있음.
팀 구성원들과 시각적인 결과물로 소통할 수 있음. : 글이나 말로만 기능을 논의하면 개개인마다 생각한 것이 다를 때가 있다. 프로토타입을 중심으로 논의하면 더 효과적으로 의견을 모을수 있음.
부족하거나 놓친 부분을 확인할 수 있음. : 실제 움직이는 화면들을 이동해가면서 기획 단계에서 미처 생각하지 못한 부분을 찾아낼 수 있음. 또한 프로토타입을 통해 사용자 시나리오를 테스트해보면서 더 나은 방향으로 수정할 수도 있음.
2. 피그마 프로토타입 소개
1) 피그마 프로토타입
피그마에서 디자인한 화면들을 바로 실제 작동하는 형태로 테스트해 볼 수 있는 유용한 기능
피그마 프로토타입의 장점 - 직관적이며 빠르게 만들 수 있음
피그마 프로토타입의 단점 - 실제 제품처럼 동작하는 걸 만들기 어려움 (기능이 제한적이기 때문에 흡사하게는 어려움) - 효율성을 떨어뜨려요 (정교한 프로토타입을 만드는 시간이 오래걸리고, 복잡해질수록 수정하거나 만드는 게 어려움)
Blue Spaghetti / 프로토타이핑 선들이 복잡하게 연결되어있는 모양
2) 피그마 프로토타입의 구성
(1) 피그마 프로토타입은 3가지 구성요소로 이루어져요.
1 / 핫스팟(Hot Spot) : 프로토타입을 시작하는 지점이에요. 핫스팟을 누른 채 종착점에 끌어다 놓으면 선으로 연결됨. 핫스팟은 상하좌우 모서리 각 중앙지점에서 끌어올 수 있음.
2 / 커넥션(Connection) : 화면을 서로 이어주는 연결선이에요. 핫스팟에서 종착점으로 방향이 정해짐.
3 / 종착점(Destination) : 도착하는 지점. 핫스팟과 커넥션으로 이어져 있으며, 종착점에서 핫스팟을 끌어 다른 화면과 이을 수 있음.
3. 트리거와 액션
1) 플로우의 구성요소
프로토타입의 흐름 하나하나는 플로우라고 불러요.
플로우는 트리거와 애니메이션, 액션으로 구성돼요. - 트리거(Trigger) : 액션을 시작하는 조건이나 이유, 계기예요. 사건이 발생했다는 뜻에서 이벤트라고 부르기도 함. - 액션(Action) : 트리거로 인해 만들어지는 결과. - 애니메이션(Animation) : 트리거를 통해 액션을 실행할 때, 어떻게 실행할건지를 뜻함. 인터렉션의 형태를 정하게 됨. 💡 프로토타입을 설계할 땐 '~하면 ~하게 ~한다' 라는 문장으로 기억하면 조금 더 쉬움.
2) 트리거의 종류
트리거는 프로토타입의 플로우를 실행하는 조건이에요.
어떤 이벤트(사건)가 발생하면 실행할 건지를 설정해요.
피그마 프로토타입 트리거는 10가지 종류가 있어요.
이름
설명
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
일정 시간이 지난 후에 액션을 실행
3) 액션의 종류
액션은 프로토타입의 플로우의 목적지이자 트리거로 인해 만들어지는 결과
어떤 이벤트가 발생하면 어떻게 되는지를 설정해요.
피그마 프로토타입 액션은 현재 11가지가 있어요.
이름
설명
Navigate to
페이지(프레임)를 이동하는 액션
Change to
컴포넌트의 다른 배리언츠를 변경하는 액션 *트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있어요.
Back
직전화면으로 이동하는 액션 *뒤로가게 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있어요.
Set variable
변수를 특정 값으로 설정하는 액션. *유료계정만 가능 / 트리거를 실행하면 변수를 원하는 값으로 설정할 수 있어요.
Set variable mode
변수를 특정 모드로 설정하는 액션 *유료계정만 가능/ 트리거를 실행하면 변수를 원하는 모드로 설정할 수 있어요.
Conditional
분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션 *유료계정만 가능 / 조건분기 기능은 피그마 유료계정부터 사용할 수 있어요.
Scroll to
현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션
Open link
특정 URL을 여는 액션 *피그마 안의 특정영역이나 프레임으로도 이동가능.
Open overlay
현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션 *다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용해요.
Swap overlay
라이트박스를 유지한 채 다른 프레임으로 교체하는 액션
Close overlay
라이트박스를 닫는 액션
스마트애니메이션 실습
4. 애니메이션
1) 프로토타입 애니메이션
트리거는 시작하는 조건을 뜻하고, 액션은 실행하는 내용을 뜻함.
애니메이션은 액션을 어떻게 실행할 지 결정함. -버튼을 누르면 다음화면으로 넘어간다 → 버튼을 누르면 천천히 오른쪽에서 왼쪽으로 화면이 밀려들어온다
또한 화면의 전환을 어떻게 처리할 건지도 정할 수 있음.
2) 피그마 애니메이션의 종류
(1) Instant : 별도의 애니메이션 없이 즉각 실행해요.
(2) Dissolve : 천천히 흐릿해지면서 화면을 전환해요. (페이드 인/아웃 이라고도 불러요.)
(3) Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 만들어요.
(4) Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환해요.
(5) Push : 현재 화면을 지정한 방향으로 밀면서 등장해요.
(6) Slide in/out : 현재 화면을 지정한 방향으로 밀어서 사라지게 하면서 등장해요.
3) 스마트 애니메이트(움직일 요소의 이름이 같거나 레이어 구조가 동일해야함.)
(1) 피그마 프로토타입에서 가장 중요한 애니메이션 기능 (2) 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어주는 기능이에요. (3) 스마트 애니메이트의 원리를 응용하면 다양한 UI 인터랙션을 구현할 수 있어요. (4) 스마트 애니메이트로 조작할 수 있는 속성
크기(Scale) : 크기를 다르게 하면 커지게 하거나 작아지게 할 수 있어요.
위치(Position) : 위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있어요.
투명도(Opacity) : 레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있어요.
회전(Rotation) : 요소를 자연스럽게 회전하게 만들 수 있어요.
배경색(Fill) : 요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경할 수 있어요.
5. 프로토타입 응용하기
1) 스크롤 컨테이너 만들기
스크롤 컨테이너는 피그마에서 가장 많이 사용하는 기본적인 프로토타입 기능이에요.
스크롤은 스크롤할 내용과 스크롤을 구현할 컨테이너로 이루어져요.
컨테이너보다 내용이 더 길어야 컨테이너에 스크롤을 적용할 수 있어요.
스크롤 방식(Scroll Behavior) : 프로토타입에서 선택가능
No scrolling
스크롤 하지 않아요. 기본값
Horizontal
가로 방향으로 스크롤 할 수 있어요.
Vertical
세로 방향으로 스크롤 할 수 있어요.
Both directions
가로 및 세로 방향으로 모두 스크롤 할 수 있어요.
2) 포지션 이해하기
(1) Position : 실제 개발에서도 사용하는 개념으로, 디자인과 레이아웃을 위한 코드인 CSS에서 사용할 수 있음. (2) 앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 같이 움직이지만 헤더나 앱의 버튼처럼 위치가 고정된 요소들이 있는데 이렇게 요소들을 고정할 때, 포지션을 조정해서 만들어요. (3) 피그마에서 사용할 수 있는 포지션의 종류
Static(스테틱) : 대부분 요소들이 가지고 있는 포지션. 기본값이자 스크롤을 따라서 같이 움직임
Fixed(픽스드) : 화면이 바뀌거나 스크롤 하더라도 항상 고정된 위치에 있어요. 웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position 이에요.
Absolute(앱솔루트) : Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이라는 점이 다름. 즉, Fixed는 화면 전체가 기준이고, Absolute는 본인이 담겨있는 컨테이너를 기준으로 해요.
Sticky(스티키) : 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이에요. 스크롤을 따라 움직이다가, 특정위치부터는 상단에 고정되는 것을 뜻해요.
피그마에서 포지션 설정하기 - Static, Fixed, Sticky : 프로토타입 패널에서 설정할 수 있음. - Absolute : 프레임 패널 안에서 찾을 수 있으며, 오토레이아웃 프레임 안에 있을때만 사용할 수 있다. 오토레이아웃에 영향을 받지않고, 일반프레임에 배치하는 것 처럼 움직일 수 있음.
