[+16] 프로토타이핑과 인터랙션
🚩오늘의 키워드
- 피그마 활용 심화 강의 (4)
- 와이어 프레임
😶TODAY I LEARNED
✔️피그마 활용 심화 4
[1] 컴포넌트 인터렉션
🔹컴포넌트 인터렉션의 개념
· UI들이 우리 행동에 따라 적합한 시각적 피드백을 제공.
( ex : 버튼을 누를 때 변하는 색상, 눌린 것 같은 효과 등 )
· 피그마에서 프로토타입을 사용해서 컴포넌트 자체에 UI의 시각적인 피드백을 인터렉션으로 구현 가능
· UI 상태가 달라지는 경우를 일일히 추가 화면으로 제작하지 않아도 되어, 시간과 비용을 절약 가능
📌 피그마 프로토타입으로 만들지 않는다고 문제가 되는 건 아니지만, 빠르게 아이디어를 구현하고 공유하는 과정에서 작은 시각적인 인터랙션이 큰 차이를 만든다.
- 버튼 컴포넌트에 인터랙션 적용하기
1. 버튼 컴포넌트 선택
2. Large, Primary, Default 인스턴스를 선택
3. 프로토타입 패널로 변경
4. 선택한 버튼에서 프로토타입 핸들을 드래그해 Large, Primary, Pressed 인스턴스에 이어줌
5. 트리거를 While Pressing으로 변경
[2] 오버레이 프로토타입
🔹오버레이 프로토타입
· 다이얼로그처럼 오버레이 속성을 가진 UI들은 프로토타입에서 오버레이를 활용해 제작 가능
· 프로토타입 대신 다이얼로그가 보이는 화면 디자인 자체가 필요한 경우도 있기 때문에 프로토타입으로 만들건지, 화면 디자인으로만 둘건지는 상황에 맞게 선택
- 다이얼로그 띄우기
1. 로그인 화면의 로그인 버튼 선택
2. 프로토타입 패널에서 + 아이콘 클릭
3. 트리거를 On tap, 액션을 Open Overlay 로 적용
4. 오버레이를 눌러 오버레이할 프레임을 선택
5. Close when clicking outside, Background 체크
[3] 드래그 프로토타입
🔹드래그 프로토타입
· 드래그 프로토타입은 드래그하는 방향에 따라 프레임 전환이 발생하는 기능
· 하나의 프레임에 드래그라는 동일한 트리거로 여러 프레임을 적용 가능
· 드래그 방향에 따라 다른 화면이 나오도록 만들 수 있음
· 캐러셀(이미지 슬라이드)나 회전 등의 인터랙션을 만들 때 유용
- 4방향으로 드래그 만들기
1. 정사각형 프레임 만들기
2. 각기 다른 색상의 정사각형 4개를 프레임 안에 넣기
3. 프레임을 복제하고, 그 다음 사각형을 삭제
4. 프레임을 다시 복제하고, 그 다음 사각형 삭제
5. 첫 번째 프레임의 맨 위 사각형을 누르고 프로토타입 열기
6. 두번째 프레임에 연결하고, 트리거를 On drag로 적용해 주세요
7. 애니메이션을 Push 로 적용하고, 방향을 → 로 변경해 주세요.
8. 두번째 프레임을 첫번째 프레임에 연결하고, 트리거를 On drag , 액션을 Back 으로 적용해 주세요.
9. 두번째 프레임의 맨 위 사각형을 세번째 프레임으로 연결해 주세요
10. 애니메이션을 Push 로 적용하고, 방향을 ↑ 로 변경해 주세요.
11. 세번째 프레임을 두번째 프레임에 연결하고, 트리거를 On drag, 액션을 Back으로 적용해 주세요.
12. 첫번째 프레임에서 프리뷰를 재생해 드래그해 보세요.
✔️컴포넌트 제작 복습
이제는 강의를 보고 따라 만들지 않고도 여기까지는 만들 수 있게 되었다!! 👍
✔️ OTT 와이어프레임
