egjs 2024년 상반기 릴리즈 소식을 전해드립니다

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

이번 정기 릴리즈에서는 페이지 내 요소를 그리드 구성으로 정렬해서 보여주는 Grid 컴포넌트와 InfiniteGrid 컴포넌트에 추가된 새로운 기능과 이 기능을 사용하는 예시를 소개합니다.

@egjs/grid 와 @egjs/infinitegrid 에서는 MasonryGrid, JustifiedGrid, FrameGrid, PackingGrid의 총 4가지 정렬 방식을 제공합니다.

이번에 추가된 기능은 한 줄에 높이가 균등한 여러 요소들을 표시하는 JustifiedGrid에 추가된 `stretch` 기능입니다.

— -

🚀 JustifiedGrid에 새로운 기능 `stretch`가 이미지 검색에 들어갑니다.

JustifiedGrid의 특징이라면 화면에 꽉차면서 1줄의 아이템들은 높이가 균등하고 모든 아이템들을 여러 줄로 배치하는 방식입니다.

또한 dijkstra 알고리즘을 통해 아이템들의 비율을 유지하면서 너비를 채웠을 때 나오는 높이(cost)를 가장 최소화하여 배치하고 있으며 이미지 검색에서 주로 쓰일 수 있습니다.

하지만 기존 방식은 모든 아이템이 비율에 맞춰 배치하다 보면 극단적인 비율(3:1, 1:3)을 가진 아이템들이 존재하는 경우 1줄의 높이가 예상 범위 외로 커지거나 작아질 수 있습니다.

그렇기에 비율 왜곡, 최대사이즈, 최소사이즈 기능을 추가함으로써 문제점을 해결하고자 했습니다.

요구사항

1. 아이템의 높이가 228px로 고정 (이미지의 높이: 184px 고정)

2. 아이템 너비의 경우 가변 (최소 144px ~ 최대 320px)

3. 일부 아이템의 너비의 경우 첫 렌더링 됐을 때의 너비에 대해 +-10% 만큼 가변

4. 애매하게 남는 마지막 라인의 아이템들은 화면에 꽉 채우지 않아도 된다.

신규 옵션 `stretch`?

`stretch`기능은 JustifiedGrid의 확장 옵션으로 높이를 먼저 주어지며 아이템의 비율을 왜곡하여 너비 값을 조절할 수 있습니다.

그래서 높이가 정해졌을 때 왜곡된 아이템 사이즈(cost)를 최소화하여 배치하고 있습니다.

위 사진처럼 아이템의 사이즈는 왜곡되서 보여질 수 있지만 이미지의 사이즈는 왜곡되서 보여지면 굉장히 이상하게 보일 수 있습니다.

그래서 이미지에 `object-fit: contain;` 같은 속성을 추가함으로써 이미지의 비율을 유지할 수 있게 가능합니다.

대신 margin이 생기지만 회색 배경 및 별도의 이미지 crop 또는 scale을 통해 이미지 처리가 들어갈 수 있습니다.

동작 원리

1. JustifiedGrid의 기본적인 동작으로 아이템의 비율을 유지하고 `inlineOffset`, `contentOffset`을 통해 이미지만 비율을 유지할 수 있습니다.

2. `stretch` 기능 활성화를 통해 높이를 고정했을 때 화면 너비보다 부족한/넘치는 만큼의 scale을 통해 아이템 너비를 변경합니다.

3. 너비 범위는 `stretchRange` 옵션 또는 개별 data attribute(`data-grid-min-stretch`, `data-grid-max-stretch`)를 통해 설정할 수 있습니다.

4. 너비가 min/max 도달하면 해당 아이템을 제외하고 다시 scale을 함으로써 화면을 꽉 채웁니다.

5. cost가 계산되지 않은 마지막 라인은 `passUnstretchRow`를 통해 stretch를 하지 않을 수 있습니다.

6. 모든 줄의 cost를 합하여 가장 적은 cost의 배치가 최종 배치가 됩니다.

비교

어떻게 사용하나요?

JustifiedInfiniteGrid에 옵션들을 추가하면 됩니다. `stretchRange` 경우 개별적으로 옵션을 적용하고 싶다면 data attribute(`data-grid-min-stretch`, `data-grid-max-stretch`)를 통해 설정할 수 있습니다.

다음 주소에서 데모와 자세한 코드를 확인할 수 있습니다.

JustifiedGrid stretch 데모

— -

그 외에도 컴포넌트들을 사용하며 지원이 필요한 부분이나 안내가 필요한 부분들이 있다면 자유롭게 남겨주세요!

🔖 egjs 릴리즈 내역

@egjs/flicking 4.11.3 (2024–05–31)

• `circular` 옵션이 활성화되어 있을 때 이벤트들이 잘못된 `direction`을 가지던 현상을 수정했습니다.
• `bound` 옵션과 `align` 옵션을 함께 사용할 때 에러가 발생하던 경우를 수정했습니다.
• `threshold` 옵션이 `movetype: snap`에 적용되지 않던 현상을 수정했습니다.
• `destroy()`가 호출된 직후에 `resize()`를 호출했을 때 에러가 발생하던 현상을 수정했습니다.

@egjs/grid 1.16.0 (2023–07–02)

• 아이템들의 content 방향 정렬을 설정할 수 있는 `contentAlign` 옵션이 추가되었습니다.
• 가로 방향과 세로 방향의 gap을 다르게 설정할 수 있도록 gap의 type이 변경되었습니다.
• 아이템의 비율을 왜곡하여 너비 값을 조절하는 `stretch` 옵션이 추가되었습니다.

@egjs/infinitegrid 4.12.0 (2024–07–02)

• 리액트 환경에서 observer가 올바르게 작동하지 않던 현상을 수정했습니다.
• 아이템의 비율을 왜곡하여 너비 값을 조절하는 `stretch` 옵션이 추가되었습니다.

— -