이 튜토리얼의 첫 번째 부분에서는 쿠키 동의 팝업을 만드는 방법을 배웁니다. 그런 다음 페이지를 특정 위치로 스크롤할 때 팝업을 표시하는 방법을 알아봅니다. 마지막으로 화면을 옆으로 슬라이드처럼 들어오는 팝업을 만드는 방법을 소개합니다.
https://uxpincommunity.cdn.prismic.io/uxpincommunity/504bb585-aa33-4fd6-a6d4-82db5e440823_cookies.mp4
→ 이 튜토리얼에 대해 이미 완성된 .uxp 파일 다운로드하기
- 왼쪽 빠른 도구모음에서 Box (상자) 또는 단축키 B를 눌러 캔버스에 상자를 추가합니다.
- 그런 다음 단축키 Option + I로 아이콘을 추가합니다.
- 속성패널의 Icons (아이콘) 섹션에서 기본으로 설정되어 있던 톱니바퀴 아이콘을 X 모양 아이콘으로 변경합니다.
- 왼쪽 빠른 도구모음 Forms (양식) 섹션에서 두 개의 Button (버튼)을 추가합니다. 단축키 Option + B를 이용하셔도 됩니다.
- ⌘ + G 단축키를 사용하여 모든 요소를 그룹화하고 그룹 이름을 *Cookie banner (쿠키 배너)*라고 합니다.
인터랙션 추가
- X 모양 아이콘을 선택하고 속성 패널 상단으로 이동하여 인터랙션을 추가합니다.
- Trigger (트리거)를 Click(Tap) (클릭 또는 탭)으로 설정합니다.
- Action (동작) 섹션에서 Hide (숨기기)를 선택합니다.
- 그 아래의 Element (요소)에서 *Cookie banner (쿠키 배너)*를 선택합니다.
- Animation (애니메이션)에서 Fade (사라짐)를 선택합니다.
- Animation (애니메이션) 설정에서 **Duration (시간)**을
150ms로 설정합니다.
- Add (추가)를 클릭합니다.
버튼에 인터랙션 붙여넣기