NAVER Shopping - Style Window l Styling View

겨울데이트룩, 결혹하객코디 등 스타일 고민 때문에 검색을 해봤지만 만족할만한 스타일을 찾지 못하신 적이 있나요? 이제 네이버 쇼핑에서 원하는 코디 스타일을 참고할 수 있는 코디뷰 서비스를 제공합니다.

1. 스크롤 플리킹 인터렉션

스크롤시 해당 이미지가 화면에 중앙에 들어오면 가격태그가 활성화되는 애니메이션이 실행됩니다. 스크롤 흐름에 맞춰서 가격태그가 자연스럽게 사용자에게 포커스가 되는 인터랙션을 시도했습니다.

2. 좌우 스와이프 인터렉션

좌우 스와이프시 가격태그는 상하 플리킹과 동일한 인터랙션을 적용했습니다. 좌우 스와이프 인터랙션을 제작할 때 가장 주안점을 둔 것은 하단 텍스트 영역이였습니다. 페이지 영역이 화면을 걸쳐있었기 때문에 텍스트를 미리 노출시킬 수 없었습니다. 그래서 스와이프시 텍스트가 나오고 사라지는 형태의 다양한 테스를 진행했습니다. 그러한 테스트를 거쳐서 현재 개발 적용된 버전으로 자연스러운 인터랙션으로 서비스 배포할 수 있었습니다.