egjs 2023년 3분기 릴리즈 소식을 전해드립니다
안녕하세요, 네이버의 FE 오픈소스 컴포넌트 그룹인 egjs의 23년 3분기 릴리즈 소식을 전해드립니다.
📣 네이버의 새로워진 통합검색과 egjs
이번 릴리즈에서는 2023년 9월부터 네이버 통합검색의 서비스 개편 과정에서 egjs 컴포넌트들이 활용되고 있는 예시들을 소개합니다.
네이버 검색에서는 사용자의 검색어를 기반으로 사용자가 관심을 가질 만한 콘텐츠를 모은 “스마트 블록” 을 제공해왔습니다.
2021년에 취미, 인테리어, 레시피 등의 검색어들을 시작으로 여행, 쇼핑, 맛집, 패션 등 더 많은 검색어들에 대응하는 스마트 블록이 만들어지고 있습니다.
기존 스마트 블록의 사용성을 개선하기 위한 이번 통합검색 개편 과정에서 egjs 컴포넌트들은 어떻게 사용되고 있을까요?
✨ Native Scroll 완전히 활용하기, @egjs/conveyer
Conveyer는 네이티브 스크롤에 드래그 제스쳐를 추가하고 여러 이벤트와 메서드들을 지원하는 컴포넌트입니다.
앞으로 “로컬 맛집” 및 “UGC(User Generated Contents)” 를 다루는 스마트 블록 내부에서는 가로로 나열된 항목들이 만든 스크롤 영역에 Conveyer가 적용된 모습을 찾아볼 수 있습니다.
데모 링크를 통해 스마트블록에서의 활용과 유사한 Conveyer의 구현 예시를 확인해보세요.
여기서는 Conveyer의 주요 기능 중 스크롤 위치와 관련된 이벤트 reachStart 와 reachEnd로 양 사이드 버튼의 상태를 갱신하며, 양 사이드의 버튼은 Conveyer의 메서드 scrollIntoView 를 사용해서 화면에 표시되지 않은 항목들이 위치한 다음/이전 페이지로 움직이는 역할을 가졌습니다.
이처럼 브라우저의 네이티브 스크롤을 보조하는 기능들을 쉽고 빠르게 덧붙이고자 한다면 Conveyer를 사용해보세요.
✨ Virtual Scroll로 더 화려하게, @egjs/flicking
Flicking은 css transform을 통해 캐러셀 형태의 UI를 만들고 커스터마이징할 수 있는 컴포넌트입니다.
개편된 스마트 블록들 중 여러 이미지를 하나의 항목 안에서 표시하는 갤러리 형태의 UI에는 Flicking이 적용되어 있습니다.
이미지 갤러리에서는 Flicking의 기능들 중 여러 항목이 순환하는 구조를 가지게끔 하는 circular 옵션과 일정 시간마다 표시되는 항목을 전환하는 Autoplay 플러그인이 사용됩니다.
데모 링크를 통해 Autoplay의 시간에 따라 상태가 변하는 Pagination을 가진 Flicking의 구현 예시를 확인해보세요.
Autoplay 외에도 Flicking 영역에 다양한 효과를 추가하기 위한 플러그인들이 존재하며, 쉬운 사용을 위한 문서가 마련되어 있습니다.
위와 같이 주어진 영역을 자유롭게 드래그하며 넘기는 것보다 더욱 많은 기능이나 요소들을 덧붙이고 싶다면 Flicking을 사용해 보세요.
💡 그렇다면, 언제 무엇을 사용해야 할까요?
비슷하면서도 다른 Conveyer와 Flicking, 각각 언제 어떻게 사용해야 할까요?
두 컴포넌트 모두 드래그를 이용한 UI가 필요할 때 사용하게 되는데 네이버 검색에서는 주로 다음과 같은 기준으로 두 컴포넌트를 구분해서 사용하고 있습니다.
이럴 때 Conveyer를 사용합니다.
- 스크롤 조작이 자유로운 프리 스크롤 형태의 UI를 만들고 싶을 때
- 브라우저의 네이티브 스크롤이 가지는 장점들을 유지하고자 할 때 (iScroll 대체 가능)
- 네이티브 스크롤을 움직이는 메서드 사용이 필요할 때
이럴 때 Flicking을 사용합니다.
- 항목 하나하나를 스냅 하는 형태의 UI를 만들고 싶을 때
- 첫 항목과 마지막 항목이 순환하는 구조를 가진 가상 스크롤 영역을 만들고 싶을 때
- 자동 재생이나 페이지네이션, 페이드 효과 등 플러그인에서 지원하는 기능들을 쉽게 덧붙이고 싶을 때
- 드래그 영역 내부 항목과 관련된 이벤트들을 사용하는 구현이 필요할 때
통합검색 개편과 함께하는 네이버의 오픈 소스 라이브러리, egjs에 앞으로도 많은 관심을 부탁드립니다.
🔖 egjs 릴리즈 내역
@egjs/flicking 4.11.0 (2023–08–02)
- 드래그 제스쳐에 대해 preventDefault를 활성화하는
preventDefaultOnDrag옵션이 추가되었습니다. - 마우스 입력과 터치 입력을 동시에 사용할 수 있을 때 마우스 입력이 작동하지 않던 현상을 수정했습니다.
@egjs/conveyer 1.7.1 (2023–09–27)
scrollIntoView메서드에서 item을 탐색할 때 양 사이드에 걸친 item의 포함 여부를 결정하는intersection옵션을 추가했습니다.- Conveyer가 적용된 엘리먼트에 ResizeObserver를 통해 상태를 갱신하도록 할 수 있는
useResizeObserver옵션을 추가했습니다. - 브라우저의 줌 단계가 100%가 아닐 때 스크롤과 관련된 메서드들이 정상적인 목적지로 스크롤 하지 않던 현상을 수정했습니다.
@egjs/axes 3.9.0 (2023–07–26)
- PanInput에서 드래그 제스쳐에 대해 preventDefault를 활성화하는
preventDefaultOnDrag옵션이 추가되었습니다. setOptions메서드가 애니메이션의 재생 시간을 수정하지 못하던 현상을 수정했습니다.
@egjs/infinitegrid 4.10.1 (2023–08–04)
- React에서 엘리먼트가 다시 렌더링 될 때 부적절하게 렌더링 되던 현상을 수정했습니다.
📣 view360의 사용 사례를 소개합니다
글을 마무리하며, egjs의 360° 이미지/동영상 뷰어 @egjs/view360이 사용되는 예시로 아마존의 현대 자동차 인테리어 뷰 페이지를 소개합니다.
아마존의 사용 사례에서는 View360을 사용해서 차량 인테리어를 모든 각도로 살펴볼 수 있도록 하여 소비자들이 손쉽게 상품 내부 모습을 파악할 수 있습니다.
만약 사용자들이 컨텐츠를 더욱 깊이 있게 살펴볼 수 있게끔 할 방법을 고민하고 있다면, View360을 사용해서 페이지에 생동감을 더해보세요!
네이버의 스마트 스토어에서도 상품에 대한 정보를 제공할 때 View360을 활용하고 있습니다.
View360의 설치 및 자세한 사용 방법은 View360 공식 문서에서 확인해 볼 수 있습니다.
— -
