egjs 2022년 4분기 릴리즈 소식을 전해드립니다

네이버의 FE 오픈소스 컴포넌트 그룹인 egjs의 22년 4분기 릴리즈 소식을 전해드립니다.

📈 2022년, 100만을 넘어 150만까지 향하며

egjs 팀의 대표적인 컴포넌트 @egjs/flicking의 2022년 다운로드 수가 작년의 약 2배인 93만 회까지 가파른 상승세를 기록했습니다.

이에 따른 총 다운로드 수도 2022년에 150만회를 넘기는 뚜렷한 성장세를 보이며 늘어가는 사용자들을 바탕으로 세계적인 인지도를 쌓아나가고 있습니다.

또한 저희가 개발하는 컴포넌트들은 React, Vue, Angular와 같은 여러 프레임워크를 적은 비용으로 지원할 수 있는 기반을 갖추고 있습니다.

그 결과로, Flicking 컴포넌트를 각 프레임워크 전용 컴포넌트들과 동일한 사용성을 가진 형태로 제공하는 @egjs/react-flicking, @egjs/vue-flicking 등의 패키지들의 사용 빈도 역시 월간 1만 회 이상의 다운로드를 기록하며 바닐라 컴포넌트 못지 않게 함께 상승해나갔습니다.

2022년을 마무리하는 릴리즈 노트와 함께, 저희 컴포넌트를 향한 관심과 기여를 남겨주신 사내 및 사외 개발자분들께 감사의 말씀을 드립니다.

egjs는 오픈소스화를 통해 폭넓은 테스트 환경을 갖추고 수많은 외부 사용자들과 소통하며 컴포넌트를 개선해나가고 있습니다.

이러한 활동의 하나로 저희는 2023년의 DEVIEW에서 하나의 소스 코드로 여러 프레임워크를 동시에 지원하기 위해 개발한 모듈 CFC (Cross Framework Component) 에 대한 세션을 준비했습니다.

앞으로도 egjs 팀이 유용한 컴포넌트를 개발해나가며 보완과 발전을 거듭해나가는 동시에 오픈소스 생태계에 더욱 기여할 수 있도록 많은 관심과 사랑을 부탁드립니다.

— -

💡 어떤 컴포넌트들을 이용하고 계신가요?

egjs에서 제공하는 컴포넌트들은 네이버의 각종 서비스에서 활용되며 사용 영역이 점차 넓어지고 있습니다.

2022년 4분기의 정기 릴리즈에서는 2023년에 주로 개발될 컴포넌트들에 대한 예고 외에도 새로운 기능들이 더해지고 있는 컴포넌트들 각각의 기능을 짧게 소개하고자 합니다.

egjs 주요 컴포넌트들의 실 사용 사례들로부터 각 컴포넌트를 통해 편리하게 구현할 수 있는 UI의 예시들을 공유드립니다.

@egjs/flicking

Flicking은 캐로셀 형태를 가진 UI를 손쉽게 설계할 수 있는 컴포넌트입니다. 이에 더해 각종 플러그인과의 조합으로 자동 재생이나 페이지네이션과 같은 기능들을 덧붙일 수 있습니다.

Flicking은 네이버 메인, 샵윈도우, 쇼핑 검색, 스포츠 등 네이버 서비스 전반에 걸쳐 가장 활발하게 이용되고 있는 컴포넌트입니다.

Flicking 사용 예시 — 네이버 게임

Flicking으로 만들 수 있는 대표적인 UI로는 네이버 게임 페이지의 예시와 같이 패널을 움직이는 사용자 제스쳐에 대해 자연스러운 동작을 제공하는 UI가 있습니다.

사용자의 제스쳐에 따른 패널 이동을 지원하는 UI가 아니라도 버튼을 통해 패널을 넘기거나 일정한 시간마다 자동으로 패널이 넘어가는 UI 또한 Flicking으로 만들어집니다.

일례로, 네이버 메인 페이지의 증시 및 날씨 UI는 각각 가로와 세로 방향의 Flicking을 배치해서 설계되어 있습니다.

@egjs/infinitegrid

InfiniteGrid는 카드형 UI를 배치하기 위한 다채로운 레이아웃을 제공하며 스크롤을 통해 새로운 카드들을 무한히 추가할 수 있는 컴포넌트입니다.

InfiniteGrid는 네이버 쇼핑 페이지에서 상품들의 목록을 표시할 때 이용되고 있습니다.

InfiniteGrid 사용 예시 — 네이버 쇼핑 푸드윈도

InfiniteGrid는 카드의 갯수가 끊임없이 증가하더라도 화면에 보이는 영역을 중심으로 DOM 갯수를 일정하게 유지하여 성능 저하 없이 충분한 양의 컨텐츠를 표시합니다.

만약 사용자에게 카드형 UI를 가진 컨텐츠를 계속하여 새롭게 노출시키는 UI를 구현하는 과정에서 성능 문제가 예상된다면 InfiniteGrid 컴포넌트를 이용해보세요.

@egjs/conveyer

Conveyer는 네이티브 스크롤에 드래그 제스쳐를 추가하고 이를 보조하는 메서드와 이벤트들을 제공하는 컴포넌트입니다.

Conveyer 컴포넌트는 주로 네이버 검색 서비스에서 키워드에 맞는 결과들을 제공할 때 사용자의 드래그 제스쳐에 반응하는 네이티브 스크롤 UI를 제공하는 용도로 사용됩니다.

Conveyer 사용 예시 — 네이버 검색 서비스

Conveyer는 네이티브 스크롤에 드래그 제스쳐를 추가하는 것 외에도 네이티브 스크롤의 위치를 특정 아이템의 위치로 변경하는 메서드를 지원하거나, 스크롤 위치의 최대 스크롤 위치까지 도달 여부 및 현재 스크롤의 위치를 인스턴스의 속성으로 제공합니다.

위 예시와 같이 스크롤이 끝에 닿지 않았을 때만 이전 아이템 / 다음 아이템으로 이동하는 버튼을 표시하는 구현 또한 Conveyer를 이용하면 어렵지 않게 가능합니다.

@egjs/view3d

View3D는 커스터마이징 가능한 3D 모델 뷰어를 제공하는 컴포넌트입니다.

네이버의 통합검색 페이지와 지식 인터랙티브 서비스에서는 다양한 3D 컨텐츠를 제공하기 위해 View3D 컴포넌트를 이용하고 있습니다.

View3D 사용 예시 — 공룡 3D & 골프 3D

View3D는 웹 3D에 익숙하지 않더라도 사용하기 간편한 인터페이스를 제공하며 Annotation 기능처럼 사용자가 직접 구현하기 어려운 부분들을 옵션으로 지원합니다.

이에 덧붙여 실 사용 시 성능 개선을 위한 egjs 팀의 노하우가 담긴 웹 3D 모델 최적화 기법 소개 아티클 또한 참고할 수 있도록 준비되어 있습니다.

3D 뷰어가 포함된 컨텐츠를 제공하는 서비스를 개발하고자 한다면 View3D 컴포넌트를 이용해보시는 것을 권장드립니다.

@egjs/view360

View360은 360도 회전이 가능한 컨텐츠 뷰어를 제공하는 컴포넌트입니다.

View360은 360도 이미지나 동영상을 회전시키는 PanoViewer와 물체 주위를 회전하며 촬영한 이미지들을 모은 스프라이트 이미지를 전방위로 회전시키는 SpinViewer로 구성되어 있습니다.

View360은 네이버 부동산, 네이버 블로그, 네이버 TV나 네이버 쇼핑 등 360도 회전이 가능한 컨텐츠를 제공하는 서비스에서 사용되고 있습니다.

View360 사용 예시 — 네이버 쇼핑 플레이윈도

위 예시는 네이버 쇼핑에 SpinViewer를 적용해서 이미지를 회전시키는 기능을 지원하는 사용 사례입니다.

회전시키고자 하는 컨텐츠가 특정 물체가 아닌 카메라인 경우에는 네이버 블로그에서 업로드된 360도 이미지에 PanoViewer를 이용하는 경우처럼 회전 가능한 카메라를 제공할 수 있습니다.

표시하려는 컨텐츠의 유형에 맞게 View360에서 지원하는 뷰어를 활용해서 보다 생동감 있는 컨텐츠를 만들어보세요.

— -

✨ 컴포넌트들의 프레임워크 지원 상황

egjs의 주요 컴포넌트들에는 CFC가 적용되며 프레임워크들에 대한 지원 범위를 넓혀나가고 있습니다.

현재 egjs 컴포넌트들의 프레임워크 지원 상황은 다음과 같습니다.

저희는 각 컴포넌트에 대해 프레임워크에 적합한 인터페이스를 제공하는 방향으로 업데이트를 진행해왔습니다.

만약 바닐라 컴포넌트 대신 사용 중인 프레임워크 전용 컴포넌트를 이용하고자 한다면 각 컴포넌트의 문서 페이지에서 프레임워크 별 구현 예시를 참고할 수 있습니다.

기존에 존재하는 컴포넌트들 중 특정 프레임워크에 특화된 인터페이스로 사용을 희망하는 부분이 있다면 자유롭게 의견을 남겨주세요.

— -

🎉 2023년에 개발될 컴포넌트들을 소개합니다

2022년 4분기 릴리즈에서는 내년에 공개를 앞두고 있는 새 버전의 컴포넌트들이 가진 주요 개선점들을 공유드리고자 합니다.

@egjs/imready 업데이트 예고

• Github: https://github.com/naver/egjs-imready
• 데모: https://naver.github.io/egjs-imready/

ImReady는 컨테이너 내부의 이미지와 동영상들의 로드가 완료되었는지 여부를 확인하는 컴포넌트입니다.

ImReady는 다양한 형태의 레이아웃을 지원하는 Grid 컴포넌트와 캐로셀 UI를 만들 수 있는 Flicking 컴포넌트에서 주로 사용되고 있습니다.

이런 문제점들을 해결합니다.

• 사용하지 않는 속성들이 업데이트되어도 프레임워크들에서 재렌더링이 발생하는 현상을 개선합니다.

새로운 기능들을 추가합니다.

• 이미지 로드가 실패했을 때 fallback logic을 제공합니다.
• Lazy loading 기능을 자체적으로 지원할 예정입니다.

ImReady는 내년(2023년) 상반기 중에 지속적인 업데이트가 이루어질 예정입니다.

@egjs/view360 v4 예고

• Github: https://github.com/naver/egjs-view360
• 데모: https://naver.github.io/egjs-view360/

View360의 새로운 메이저 버젼, v4가 정식 공개를 앞두고 있습니다.
View360은 다음 2가지의 컴포넌트로 구성되어 있습니다.

• 파노라마 360 이미지/비디오 뷰어 PanoViewer
• 360 Product spinner SpinViewer

이런 문제점들을 해결합니다.

• 컴포넌트를 초기화하기 전까지 UI가 어떻게 변할지 예측할 수 없었던 문제를 수정합니다.
• 더 부드러운 컨트롤을 제공합니다.
• (SpinViewer) 단일 이미지 스프라이트뿐만 아니라 여러 장의 이미지도 사용할 수 있습니다.

새로운 기능들을 추가합니다.

• Hotspot(Annotation)을 이제 공식적으로 제공합니다.
• autoplay, scrollable, disableContextMenu 등 쉽게 적용 가능한 다양한 컨트롤 관련 옵션들을 추가했습니다.
• 컴포넌트 동작에 의해 트리거되는 다양한 이벤트들을 추가했습니다.

View360 v4는 내년(2023년) 1분기 내에 공개할 예정입니다.

— -

🔖 egjs 릴리즈 내역

@egjs/flicking 4.10.4 (2022–12–02)

• preventClickOnDrag 옵션을 사용할 때 1픽셀 미만의 움직임에 대해 클릭 이벤트가 발생하지 않던 현상을 수정했습니다.
• react-flicking, preact-flicking에서 렌더링이 이루어질 때 이전과 동일한 key값을 가진 자식 엘리먼트들의 갱신 여부를 설정하는 renderOnSamekey 옵션이 추가되었습니다.
• react-flicking, preact-flicking에서 렌더링이 연속적으로 발생하는 사이에 부적절한 update가 발생하던 현상을 수정했습니다.
• react-flicking에서 명시되어 있지 않은 패키지를 사용하던 유령 의존성 문제를 수정했습니다.
• 일부 setter들이 UI를 업데이트하지 않던 현상을 수정했습니다.
• 패널 내부 이미지에 Native Lazy Loading을 적용했을 때 resizeOnContentReady 옵션을 사용하면 오류가 발생하던 현상을 수정했습니다.
• AutoPlay 플러그인에 자동으로 패널이 넘어가는 애니메이션의 재생 시간을 설정하는 animationDuration 옵션을 추가했습니다.
• AutoPlay 플러그인에서 stopOnHover 옵션이 활성화되어있을 때 커서 호버 상태를 벗어난 뒤 애니메이션 재생까지 대기하는 시간을 설정하는 delayAfterHover 옵션을 추가했습니다.
• Internet Explorer에서 드래그를 마친 뒤에도 패널이 움직일 수 있는 현상을 수정했습니다.

@egjs/conveyer 1.4.6 (2022–12–02)

• 패키지들에 declaration 파일들이 누락되어 있던 문제를 수정했습니다.
• react-conveyer가 React 18 버전 이상의 strict mode에서 작동하지 않던 현상을 수정했습니다.
• svelte-conveyer에서 잘못된 entry point가 설정되어 있던 문제를 수정했습니다.
• Internet Explorer에서 드래그를 마친 뒤에도 스크롤이 움직일 수 있는 현상을 수정했습니다.

@egjs/axes 3.8.3 (2022–12–02)

• PanInput, RotatePanInput, WheelInput에 특정 키 혹은 키 조합이 눌린 상태에서만 동작하게끔 설정하는 inputKey 옵션을 추가했습니다.
• circluar 옵션이 한 방향으로만 활성화되어 있을 때 비정상적인 바운스 영역이 발생하던 현상을 수정했습니다.
• PanInput의 preventClickOnDrag 옵션을 변경할 때 변경된 결과가 동작에 반영되지 않던 현상을 수정했습니다.
• Internet Explorer에서 드래그를 마친 뒤에도 PanInput의 change 이벤트가 발생하는 현상을 수정했습니다.

@egjs/view3d 2.9.1 (2022–11–08)

• 키프레임 중간의 지점을 임의로 지정할 수 있도록 하는 subclip 함수를 추가했습니다.
• 카메라의 초기 위치를 설정하는 pivot 옵션을 추가했습니다.
• camera.fit을 사용할 때 center 옵션에 의한 bbox 확장을 무시하는 옵션 ignoreCenterOnFit 옵션을 추가했습니다.
• 모델의 material variant를 설정하는 variant 옵션을 추가했습니다.
• annotation이 WebXR 환경에서 정상적으로 작동하지 않던 현상을 수정했습니다.
• 인스턴스가 초기화되기 전에 렌더링이 발생하던 현상을 수정했습니다.

@egjs/view360 3.6.4 (2022–12–02)

• Internet Explorer에서 드래그를 마친 뒤에도 드래그 시 동작이 발생할 수 있는 현상을 수정했습니다.

@egjs/imready 1.3.1 (2022–11–25)

• 인스턴스를 destroy할 때 내부적으로 error 이벤트의 구독이 사라지지 않던 현상을 수정했습니다.

— -