쇼핑몰 UI 디자인: 상품 상세페이지 이미지 확대(Zoom) 인터랙션 구현 가이드

썸네일

 
안녕하세요? 제 프로토타입 시리즈는 지식이 떨어지기 전까지 끝나지 않을 것입니다...
저번 게시글에서는 포폴용? 으로 원형이 돌아가는 프로토타입을 구현했다면,
 
오늘은 상품 상세 페이지에서 클릭하면, 그 부분만 ZOOM 되어서 나타나고 다시 클릭하면 원래대로 돌아가는 모션을 소개해 드릴 텐데요~ 아무래도 e커머스에 재직 중이신 디자이너나 PM 분들이 보시면 조금 더 유용할 것 같습니다
 
ㅣ스핀 프로토타입 복습은 접은 글을 펴 주세요

https://2-zip.tistory.com/22

---

💡메인, 상세 프레임 준비

이미지 출처: 아크네 스튜디오 공식 홈페이지

 
 
상품의 상세 페이지에서 ZOOM이 되는 거다 보니까, 아무래도 확대하고 싶은 곳 각자의 프레임과 메인 화면 2개가 필요합니다
사실 드래그를하여 다른 이미지를 보여 주지 않을 거라면, 튜토리얼 1번째 사진의 맨 좌측(남자가 목도리 두르고 있는) 프레임은 필요없습니다!
 
하지만, 많은 상품 상세 페이지에서는 1장 이상의 포토를 보여 주고 있기 때문에, 저도 실무에 걸맞게 구현해 보도록 하겠습니다
 

🚩 신경 쓸 점
1. 메인 프레임 내 사진은 크기가 동일해야 합니다

 

---

💡버튼, 설명 말풍선 요소 제작

 
첫 번째 요소는 메인 화면에서 클릭을 유도할 수 있도록(CTA) 구현하는 버튼이고,
두 번째 엘리먼트는 확대된 곳에서 강조하고 싶은 제품의 강점을 넣으시면 됩니다
이 2가지의 요소만 준비되어 있다면, 오늘 소개해 드리는 프로토타입은 끝났다고 봐도 무방함... 개쉽죠?
 

🚩 신경 쓸 점
1. 첫 번쨰 요소는 눈에 잘 띄는 색상 또는 크기를 조금 키워 주세요 (대비감)
 ㄴ 그래야 CTA가 성공할 수 있습니다
2. 두 번째 요소에서 너무 많은 내용을 담으려고 하지 마세요! 간결하고 중요한 정보만 쏙.

---

💡프로토타입 연결

 
마지막으로 Smart animate를 이용해서 프로토타입을 연결해 주면 끝입니다 ㅋㅋ
 

🚩 신경 쓸 점
1. 각 Zoom 프레임은 메인 프레임으로 돌아오도록 연결해 주어야 합니다
 ㄴ 이때 프로토타입 옵션, 설정값은 모두 동일합니다

 
마침 설명이 여기에 또 나오네요 거꾸로 하나씩 메인 화면에 연결해 주면 됩니다
 

메인에서 출발하는 것은 각 zoom1, zoom2, zoom3으로 가지만,
zoom1-3은 모두 메인으로 간다는 점 꼭 기억해 주세요
 

---

💡센스 있는 마무리

 
프로토타입 1,2에서 겪은 프로토타입을 두 번째 메인에 적용해 주세요!
앞서 말했듯이 이 작업은 필요하지 않으면 하지 않아도 되지만,

당신은... 필요할 것입니다 ㅋ
 
센스 한 스푼 얹어 주는 거죠 ^^

---

💡프로토타입 확인

 

 
마지막으로 프로토타입이 잘 연결되었는지 확인해 주시면 됩니다
 
간혹 가다 pc에서만 프로토타입을 리뷰하고 휴대폰으로 미러링을 안 하시는 분이 계시는데,
유저들은 쇼핑할 때 모바일이 가장 익숙하니 색감, 연결, 속도 등을 고려하기에는 직접 내 폰으로 미러링 기능을 이용해서 하시는 게 좋습니다!
 
앱스토어나 구글 플레이스토어에서 Figma를 검색하신 후, 계정을 연결하여 내가 만든 작품을 확인해 보세요
각 링크를 클릭하시면 iOS, AOS에 맞는 다운로드 장소로 이동하실 수 있습니다 :)

---

 
마지막으로, 프로토타입은 사실 기능적으로 제공하는 게 많이 없기 때문에 같은 기능을 어떤 경로, 유형으로 활용하느냐에 따라서 미감과 센스가 많이 인정받는 것 같습니다! 저도 여러 프로덕트 디자이너의 작품을 보면서 이건 어떤 프로토타입을 활용했는지, 그리고 프로토타입을 연결하기 위해서는 몇 개의 요소, 몇 개의 프레임이 필요한지 뜯어 보곤 하는데요
 
이 작업이 힘들 뿐인 거지, 사실 프로토타입 연결 자체는... 쉬운 것 같습니다 ㅋ
프로토타입을 마스터하고 싶다면 여러 작품을 일단 보고, 따라 하고 싶은 프로토타입 영상 하나를 가져와서 프레임을 뜯어 보시는 것을 추천드립니다
 
오늘도 도움이 되셨다면... 앞으로도 자주 방문해 주세요.칷.!!