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

Daybrush (Younkue Choi)

Published in

NAVER FE Platform

7 min readMar 16, 2022

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

🔖 주요 릴리즈 내역

Conveyer 1.0 릴리즈

데모 바로가기

Conveyer는 Native Scroll에 Drag를 추가한 간단하고 심플한 모듈입니다.

배경

모바일에서 터치를 통해 스크롤 또는 스냅을 하는 UI(Flicking, Swiper, iScroll)를 많이 사용합니다. 그리고 이 UI를 PC에서는 마우스의 드래그를 통해 스크롤을 하고 있고 드래그도 가능하지만 휠을 더 사용하기 때문에 Wheel 이벤트를 추가하는 방식은 선택합니다.

하지만 Wheel 이벤트에는 큰 문제가 있습니다.

wheel 이벤트는 preventDefault로도 이전 / 다음 페이지로 넘어가는 제스쳐를 막을 수 없습니다.
CSS로 페이지 전체에 제스쳐를 막을 수 있지만 일부 UI 때문에 전체를 막는건 안 좋은 경험을 줄 수 있습니다.
항상 이전 / 다음 페이지가 없는 새 탭인 상태를 유지할 수 없습니다.

위와 같은 문제 때문에 Flicking, iScroll, Swiper과 같은 Virtual Scroll UI는 Wheel 문제를 피할 수 없습니다.

그래서 Drag에 Wheel을 추가하는 Virtual Scroll 대신 Native Scroll에 Drag를 추가한 Conveyer를 만들었습니다.

Native Scroll의 장점

스크롤이 가능한 상태(시작과 끝에 도달하지 않은 상태)면 이전 / 다음 페이지로 넘어가는 제스쳐를 막을 수 있습니다.
Virtual Scroll은 직접 스크롤 바를 만들어야 하지만 Native Scroll 자체에 스크롤 바가 있습니다.
CSS를 통해 커스텀을 할 수 있습니다.
Native Scroll의 API는 쉽게 element를 통해 접근할 수 있고 MDN에 잘 정리가 되어있습니다.

Conveyer의 장점

Native Scroll을 보조할 수 있는 다양한 메서드와 이벤트들을 제공합니다.
https://naver.github.io/egjs-conveyer/docs/api/Conveyer
scroll 관련 메서드(scrollTo, scrollBy, scrollIntoView)에 애니메이션 기능이 추가됩니다.
scrollIntoView를 통해 selector 대신 특정 위치에 있는 아이템을 찾을 수 있습니다.
scroll 이벤트를 확장하여 스크롤 시작(beginScroll), 스크롤 끝(finishScroll) 이벤트를 지원합니다.
Vanilla 뿐만 아니라 React, Angular, Vue(2, 3), Svelte 프레임워크를 지원합니다.
하나의 코드로 모든 프레임워크를 지원하는 CFCs Reactive 방법을 사용해서 만들었으며 추후 공개할 예정입니다.
그 외 프레임워크에서 사용하고 싶다면 언제든지 문의를 주시기를 바랍니다.

Conveyer로 만들 수 있는 기능

주로 끝에 닿았을 때 비활성화(또는 활성화)하는 UI를 만들 수 있습니다.

네이버 예금 검색 / 코드 & 데모 바로가기

prev 버튼을 누르면 가장 오른쪽에 온전히 보이는 아이템을 왼쪽으로 이동하는 동작을 만들 수 있습니다.

https://naver.github.io/egjs-conveyer/docs/examples/Methods/#example

Native Scroll을 사용하는 다른 컴포넌트와 조합을 쉽게 할 수 있으며 InfiniteGrid와 조합도 가능합니다.

https://naver.github.io/egjs-conveyer/docs/examples/InfiniteScroll

스크롤이 끝나는 이벤트를 제공하여 서버에 로그를 보낼 수 있습니다.
https://naver.github.io/egjs-conveyer/docs/api/Conveyer#event-finishScroll

Conveyer는 https://github.com/naver/egjs-conveyer 에서 확인할 수 있으며 자세한 글은 Medium 블로그을 참고해주시길 바랍니다.

🔖 !다음 릴리즈 예고!

@egjs/axes 3.0

Axes는 다양한 제스쳐 및 inputs (Pan, Pinch, RotatePan, Key 등)을 통해 정제된 좌표로 변환해서 제공하는 모듈입니다.

Axes 3.0의 변화

Axes의 사이즈 40% 감소 (hammer.js의 의존성을 제거).
Axes를 사용하고 있는 다른 모듈들(Flicking, Conveyer, View360 등)도 같이 사이즈 감소.
메서드를 통한 애니메이션 조작 (position, duration 변경 및 중단 가능).

🔖 그 외 릴리즈 내역

@egjs/view3d 2.3.0

(v1 -> v2) 사용성 강화
추가된 옵션들
skybox
disablePitch & disableYaw
skyboxBlur
poster
on
plugins
initialZoom
toneMapping
maxTimeDelta
maintainSize
기능
애니메이션 crossfade 추가
Contact Shadow 기반의 부드러운 그림자 타입으로 변경
플러그인 추가
ARButton
AROverlay
LoadingBar