egjs 2023년 4분기 릴리즈 소식을 전해드립니다
안녕하세요, 네이버의 FE 오픈소스 컴포넌트 그룹인 egjs의 23년 4분기 릴리즈 소식을 전해드립니다.
이번 정기 릴리즈에서는 egjs 컴포넌트들의 연간 사용량 통계와 함께 사내/사외에서 egjs 컴포넌트를 사용하며 자주 발생하는 이슈들에 대응하기 위한 가이드를 제공하고자 합니다.
📈 2023년, 100만을 넘어 더 높은 곳을 바라봅니다.
egjs 팀의 대표적인 컴포넌트 @egjs/flicking의 연간 다운로드 수가 2023년에 처음으로 100만을 넘어 130만을 기록했습니다.
캐러셀 형태의 UI를 쉽게 구현할 수 있는 @egjs/flicking 외에도 다양한 컴포넌트들에 대한 관심 또한 지속적으로 늘어가고 있습니다.
- 무한 스크롤이 가능한 카드형 UI를 제공하는 @egjs/infinitegrid의 다운로드 수는 9만에서 26만으로 가장 눈에 띄는 상승세를 보였습니다.
- 네이티브 스크롤에 드래그 제스쳐를 추가하는 @egjs/conveyer의 다운로드 수는 6천에서 2만 8천으로 상승했습니다.
- 웹 3D 모델 뷰어 @egjs/view3d의 다운로드 수는 1만 3천에서 2만 9천으로 상승했습니다.
- 360도 이미지 및 동영상 뷰어 @egjs/view360 의 다운로드 수는 10만에서 19만으로 상승했습니다.
사내 및 사외의 개발자분들께서 저희 컴포넌트에 지속적인 관심을 가져주신 덕분에 각 컴포넌트들을 더욱 개선해나갈 수 있었습니다.
2023년에도 저희가 개발한 컴포넌트들을 향한 변함없는 사랑에 감사드립니다.
그 외에도 2022년과 2023년에 걸쳐 프레임워크별 egjs 컴포넌트 다운로드 수를 통해서도 사용자들이 선호하는 프레임워크에 대해 알 수 있었습니다.
특히 2023년 12월 31일을 기점으로 Vue2의 지원이 종료됨에 따라 2023년에 걸쳐 Vue3 패키지들의 다운로드 비중이 점차 높아지는 현상을 눈여겨볼 수 있습니다.
🔧 사용자 경험을 개선하기 위한 방법들을 소개합니다.
얼마 전 네이버의 새로운 스트리밍 서비스 치지직의 베타 테스트를 진행하며 곳곳에서 Flicking이 적용된 사례들을 확인하고, 개선 방향을 전달드리기도 했습니다.
그 외에도 네이버 서비스의 곳곳에서 egjs 컴포넌트들이 사용되고 있으며, 마찬가지로 사용자 경험이 개선될 수 있는 부분들이 존재할 수 있습니다.
이번 정기 릴리즈에서는 저희가 개발한 컴포넌트를 사용하며 원하는 기능을 구현하거나 이슈에 대응할 때 어떤 옵션이나 메서드를 사용할 수 있는지에 대해 egjs 팀의 노하우를 공유드립니다.
— -
@egjs/flicking
패널 안에 이미지나 링크가 있다면 preventDefaultOnDrag 옵션을 사용해보세요.
[preventDefaultOnDrag 옵션 값에 따른 동작을 비교해볼 수 있는 데모]
패널 안에 img 태그의 이미지 또는 a 태그의 링크를 포함하고 있다면 스와이프 동작 도중에 이미지나 링크의 드래그 동작이 발생하며 Flicking의 움직임이 멈출 수 있습니다.
패널 내부에 기본 드래그 동작이 존재하는 자식 엘리먼트가 포함되어 있을 때, Flicking 인스턴스의 preventDefaultOnDrag 옵션을 true로 설정하면 이 현상을 방지할 수 있습니다.
또한 스와이프 동작을 마칠 때 패널 내부의 엘리먼트가 클릭되는 것을 원하지 않는다면 preventClickOnDrag 옵션을 사용해보는 것을 권장드립니다.
패널 내부에 플리킹의 동작을 막고 싶은 영역에는 event.stop()을 사용해보세요.
[holdStart 이벤트에서 Flicking의 동작을 제어하는 데모]
패널 안에 동영상을 넣은 뒤 사용자가 동영상의 재생 시간이나 볼륨 슬라이더를 움직이는 경우처럼 Flicking 내부를 드래그하더라도 Flicking이 움직이기를 원하지 않는 경우가 있습니다.
이러한 구현을 위해서는 Flicking에 holdStart 이벤트가 발생할 때 stop 메서드를 호출해서 사용자의 드래그를 중단시킬 수 있습니다.
작은 동작으로도 패널이 움직이게 하고 싶다면 threshold 옵션을 조정해보세요.
[threshold 옵션 값에 따른 동작을 비교해볼 수 있는 데모]
사용자가 짧은 거리를 스와이프했을 때 다음 패널로 넘어가지 않는 것은 Flicking의 threshold 옵션에 의한 동작입니다.
해당 옵션으로 다음 패널로 이동하기 위한 최소 거리를 설정할 수 있으며, 기본 값은 40픽셀로 사용자가 40픽셀 이상 드래그하지 않는다면 드래그를 마쳤을 때 다음 패널로 이동하지 않습니다.
만약 짧은 드래그에도 다음 패널로 넘어가게 하고 싶거나 일정 거리 이상 드래그하지 않으면 다음 패널로 넘어가지 않도록 조정하려는 경우 해당 옵션의 값을 조정해볼 수 있습니다.
한 번의 제스쳐로 움직이는 최대 패널 갯수를 설정하고 싶다면 movetype: “strict” 를 사용해보세요.
[moveType: “strict” 를 사용하는 이미지 갤러리 데모]
Flicking을 사용해서 이미지 갤러리 형태의 UI를 만들 때 사용자의 스와이프를 통해 지나치게 많은 패널이 넘어가는 동작을 방지해야 할 때가 있습니다.
Flicking 인스턴스의 movetype 옵션을 “strict” 로 설정하면 한 번의 스와이프로 넘길 수 있는 최대 패널 갯수를 제한할 수 있습니다.
오른쪽에서 왼쪽 방향으로 쓰는 문자를 사용할 때에는 최신 버전의 패키지를 사용해보세요.
[direction: rtl을 적용한 Flicking 데모]
4.11.1 버전의 패키지부터 Flicking의 viewport 엘리먼트에 direction: rtl 을 적용하는 경우 반대 방향으로의 동작을 지원하게 되었습니다.
아랍어로 된 페이지를 만드는 경우처럼 오른쪽에서 왼쪽으로 읽는 페이지를 만들게 된다면 최신 버전의 패키지를 사용해보세요.
— -
@egjs/conveyer
Conveyer 내부 엘리먼트의 크기가 소수점 단위를 포함하고 있다면 boundaryMargin 옵션을 설정해보세요.
[소수점 크기 자식 엘리먼트를 가진 Conveyer 데모]
Conveyer 내부 엘리먼트의 크기는 element.offsetWidth 로 계산되고 있습니다.
그러나 엘리먼트의 크기에 소수점 단위가 설정되어 있더라도 크롬을 포함한 브라우저들에서 offsetWidth를 늘 정수 값으로 제공합니다.
이 오차가 생긴다면 가장 첫 번째 엘리먼트나 가장 마지막 엘리먼트로 스크롤되는 메서드를 호출했을 때 Conveyer 인스턴스의 reachStart, reachEnd 이벤트가 발생하지 않을 수 있습니다.
이 현상을 해결하기 위해 저희는 최소/최대 스크롤 위치를 판단할 때 허용하는 오차 값 boundaryMargin 옵션을 제공합니다.
해당 옵션을 1로 설정한다면 reachStart, reachEnd 이벤트가 호출되기 위한 스크롤 위치에 1픽셀까지의 오차를 허용하며 소수점 크기 엘리먼트로 인한 이슈를 방지할 수 있습니다.
scrollIntoView 메서드를 사용할 때 도착 지점을 확인해보세요.
[scrollIntoView의 target “end” 와 “next” 를 비교해볼 수 있는 데모]
Conveyer를 사용해서 만들 수 있는 대표적인 UI의 예시로 이전/다음 화살표 버튼을 가진 리스트가 있습니다.
그러나 동일한 “다음” 버튼이라도 서비스 영역에 따라 옵션이 미세하게 달라지는 부분들이 있습니다.
이전/다음 버튼을 구현할 때 서비스에서 요구하는 동작에 맞게 Conveyer를 사용하기 위해서는 scrollIntoView 메서드의 옵션에 대한 이해가 필요합니다.
“다음” 버튼을 눌렀을 때 이전 목록의 마지막 항목이 여전히 표시되며 첫 항목으로 위치하게 하고 싶다면 target 옵션을 “end” 로,
“다음” 버튼을 눌렀을 때 전부 새로운 항목들만 나오게 만들고 싶다면 target 옵션을 “next” 로 설정해주세요.
scrollIntoView 메서드에 대해서는 데모를 통해 각 옵션들의 동작을 더욱 자세히 알아볼 수 있도록 준비되어 있습니다.
— -
이번 정기 릴리즈에서는 사용자분들께서 겪는 어려움이나 자주 묻는 질문들을 정리해보았습니다.
그 외에도 egjs 컴포넌트들을 사용하며 지원이 필요한 부분이나 안내가 필요한 부분들이 있다면 자유롭게 남겨주세요!
🔖 egjs 릴리즈 내역
@egjs/flicking 4.11.2 (2023–12–12)
- Flicking이 적용된 엘리먼트에
direction: rtlstyle이 적용되었을 때 패널이 움직이지 않는 현상을 수정했습니다. - Flicking의 viewport 엘리먼트가 없을 때 size 값이 NaN으로 계산되던 현상을 수정했습니다.
moveType: "strict"와circular: true옵션을 동시에 사용할 때 패널이 잘못된 위치로 이동하는 현상을 수정했습니다.
— -
