Figma 프로토타입 슬라이드 및 팝업 기능 사용 방법
1. 슬라이드(카로셀) 기능 설정 방법
1) 아트보드(프레임) 설정
- Figma에서 **Frame (프레임)**을 생성하고, 슬라이드할 콘텐츠를 추가함.
- 한 프레임에 여러 개의 이미지 또는 콘텐츠를 가로로 정렬하여 배치함.
- 슬라이드할 콘텐츠를 감싸는 마스크(Mask) 프레임을 만들어 가려지는 부분을 설정함.
2) 오토 애니메이트 기능 적용
- 각 슬라이드 상태를 별도의 프레임으로 복사함.
- 첫 번째 슬라이드가 있는 프레임을 선택하고 Prototype 탭으로 이동.
- 슬라이드할 방향(다음 프레임)으로 드래그하여 연결선을 생성.
- Interaction Details에서
- Trigger: On Drag
- Action: Navigate To
- Animation: Smart Animate
- Easing: Ease Out 또는 Ease In-Out 적용
- 동일한 방법으로 이전 슬라이드로 돌아가는 기능을 설정.
- 프레젠테이션 모드에서 슬라이드가 정상 작동하는지 테스트.
3) 자동 슬라이드(Loop) 설정
- 슬라이드 콘텐츠를 연결한 후, 각 프레임에서 After Delay 트리거 추가.
- Trigger: After Delay (2~3초 추천)
- Action: Navigate To (다음 슬라이드)
- 마지막 슬라이드에서 다시 첫 번째 슬라이드로 연결하여 무한 루프 설정 가능.
2. 팝업(모달) 기능 설정 방법
1) 팝업 디자인 구성
- 팝업이 될 프레임(모달)을 기존 프레임 위에 생성.
- 팝업 배경(딤드 처리)을 추가하고 **Opacity(불투명도)**를 30~50%로 조정.
- 닫기 버튼(X) 또는 다른 영역을 터치하면 팝업이 닫히도록 설정할 예정.
2) 팝업(Overlay) 프로토타입 연결
- 팝업을 트리거할 **버튼(예: "자세히 보기")**을 선택.
- Prototype 탭에서 팝업 프레임으로 연결선을 드래그함.
- Interaction Details에서
- Trigger: On Click
- Action: Open Overlay
- Overlay: Center (또는 사용자 지정 위치)
- Animation: Smart Animate 또는 Dissolve 적용
- Close when clicking outside 옵션 체크 (팝업 외부 터치 시 닫힘 설정)
3) 팝업 닫기 기능 추가
- 팝업 프레임 내 닫기 버튼(X)을 선택하고 Prototype 탭으로 이동.
- 닫기 버튼 → 기존 화면으로 연결 후, Interaction Details 설정.
- Trigger: On Click
- Action: Close Overlay
- Animation: Smart Animate 또는 Dissolve
3. 슬라이드 & 팝업 결합하기 (예: 이미지 확대 보기 팝업 + 슬라이드 기능)
- 팝업(모달) 내부에 슬라이드(카로셀) 콘텐츠를 추가함.
- 팝업 내부의 이미지 또는 콘텐츠를 슬라이드 기능과 동일한 방식으로 설정.
- 팝업이 열리면 슬라이드 기능이 활성화되도록 연결 설정.
- 팝업 내부에서 좌우 드래그 기능을 추가하여 이미지 탐색 가능하게 설정.
📌 요약
- 슬라이드(카로셀) → Smart Animate + Drag 설정
- 자동 슬라이드(Loop) → After Delay 트리거 사용
- 팝업(모달) → Open Overlay 설정 + 닫기 버튼은 Close Overlay 설정
- 슬라이드 & 팝업 결합 → 팝업 내부에서 슬라이드 기능 설정 가능
Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=342-3105&p=f&t=7cJmheFKujClXLSb-0
쿠팡 앱 UI 요소 상세 정리
1. 헤더 영역
- 뒤로 가기 버튼 → 이전 화면(홈 또는 카테고리 페이지)으로 이동.
- 검색 바 → 검색어 입력 및 자동완성 추천어 제공.
- 검색 바 Placeholder → "검색어를 입력하세요" 또는 인기 검색어를 표시하여 사용자 가이드 역할 수행.
- 취소 버튼 → 검색어 입력 도중 터치 시 입력된 검색어 삭제 또는 검색 페이지 닫기.
- 전체 삭제 버튼 → 최근 검색어나 입력한 검색어 목록을 한 번에 삭제하는 기능 제공.
- 입력 필드 → 사용자가 검색어를 입력할 수 있는 공간으로, 키보드 입력과 자동완성 기능을 지원.
- 음성 검색 아이콘 → 음성 명령을 통한 검색 기능 제공.
- 카테고리 필터 버튼 → 특정 카테고리 내에서 검색할 수 있도록 필터 옵션 제공.
- 햄버거 메뉴 아이콘 → 터치 시 사이드 또는 풀스크린 메뉴가 열리며, 상품 카테고리 및 추가 기능(이벤트, 설정 등) 탐색 지원.
- 장바구니 아이콘 → 현재 담긴 장바구니 상품 개수를 표시하며, 터치 시 장바구니 페이지로 이동.
2. 컨텐츠 영역 (검색 결과 및 상품 리스트)
- 최근 검색어 → 사용자가 이전에 검색한 내역을 표시하여 빠른 재검색 가능.
- 추천 검색어 → 쿠팡이 제안하는 맞춤형 검색어 목록을 제공.
- 인기 검색어 → 실시간 트렌드 기반의 검색어 순위를 표시하여 사용자 유입 유도.
- 관련 검색어 → 입력한 검색어와 연관된 추가 검색어 리스트를 제공하여 검색 확장 가능.
- 더보기 버튼 → 추천 및 최근 검색어 리스트를 확장하여 더 많은 검색어를 표시함.
- 로켓프레시 상품 필터 → 로켓프레시 배송이 가능한 상품만 검색 결과에 표시되도록 설정.
- 로켓배송 체크박스 → 체크 시 로켓배송이 가능한 상품만 필터링하여 표시.
- 배송 포함 버튼 → 검색 결과에서 표시되는 상품 가격이 배송비를 포함한 가격으로 정렬되도록 설정.
- 카테고리 필터 → 특정 카테고리 선택 시 해당 범위 내에서만 검색 가능.
- 썸네일 레이아웃 버튼 → 상품 리스트를 리스트형 또는 그리드형으로 전환할 수 있는 UI 제공.
- 추천 상품 → 사용자의 검색 기록 및 관심 상품을 기반으로 맞춤형 상품을 제안.
- 광고 상품 → 스폰서 배지가 포함된 상품으로, 특정 키워드 검색 시 상단 또는 특정 위치에 배치됨.
- 제품 썸네일 → 검색 결과에 표시되는 제품 이미지로, 터치 시 해당 상품의 상세 페이지로 이동.
- 상품 제목 → 제품명을 표시하며, 길이가 길 경우 일부만 보이도록 축약 처리됨.
- 가격 정보 → 정가, 할인 가격, 쿠폰 적용가 등을 함께 표시하여 가격 비교를 용이하게 함.
- 할인 배지 → "특가", "할인 중" 등의 배지를 추가하여 사용자 클릭 유도.
- 리뷰 개수 및 평점 → 사용자 리뷰 수와 별점(1~5)을 함께 표시하여 신뢰도 강화.
- 찜(♥) 버튼 → 터치 시 해당 상품을 관심 목록에 추가하거나 삭제할 수 있음.
- 스토어 정보 → 해당 상품을 판매하는 스토어 정보(쿠팡 직접 판매 또는 입점 판매자)를 표시.
- 배송 정보 → "내일 도착", "로켓배송" 등의 빠른 배송 옵션을 강조하는 텍스트 제공.
3. 키보드 요소
- 기본 키보드 → 검색어 입력을 위한 일반 텍스트 키보드 제공.
- 음성 입력 버튼 → 음성 명령을 통한 검색 기능 지원.
- 완료(Enter) 버튼 → 검색어 입력 후 실행 버튼 역할 수행.
- 검색 제안 리스트 → 입력 중 추천 검색어 및 자동완성 기능 제공.
- 키보드 내 검색 버튼 → 키보드에서 바로 검색 실행 가능.
- 한영 전환 버튼 → 한국어와 영어 입력 방식을 변경할 수 있도록 지원.
- 이모지 입력 버튼 → 검색어 입력 시 이모지를 추가할 수 있도록 지원.
4. 하단 네비게이션 요소
- 홈 버튼 → 메인 홈 화면으로 이동.
- 검색 버튼 → 검색 페이지로 이동.
- 마이페이지 버튼 → 주문 내역 및 개인화된 정보 확인.
- 장바구니 버튼 → 장바구니 페이지로 이동 및 상품 개수 표시.
- 햄버거 메뉴 아이콘 → 상품 카테고리 및 추가 메뉴 탐색을 지원하는 UI 요소.
5. 추가 UI 요소
- 세그멘티드 컨트롤 → 검색 결과를 다양한 기준(예: 추천순, 낮은 가격순, 최신순)으로 필터링할 수 있는 탭형 UI.
- 카로셀 영역 → 여러 개의 추천 상품 또는 광고 배너를 가로 슬라이드 방식으로 제공.
- 태그 영역 → 특정 키워드(예: "무료배송", "베스트셀러")를 강조하여 사용자가 검색 결과를 쉽게 필터링할 수 있도록 제공.
- 상품 비교 버튼 → 여러 개의 상품을 선택하여 가격, 리뷰, 배송 조건 등을 비교할 수 있는 기능.
- 필터 아이콘 → 터치 시 가격, 브랜드, 배송 옵션 등의 상세 필터를 적용할 수 있도록 설정.
- 알림 아이콘 → 이벤트, 할인 정보, 장바구니 알림 등을 확인할 수 있는 UI 제공.
- 페이지네이션 → 검색 결과가 많을 경우 페이지 이동을 지원하는 UI(또는 무한 스크롤 적용 가능).
- 다크 모드 지원 → UI 요소가 다크 모드에서도 가독성이 유지되도록 디자인됨.
Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=342-23801&p=f&t=7cJmheFKujClXLSb-0