Carousel 톺아보기
Material Design 3의 가장 흥미로운 컴포넌트
Photo by Jhon Paul Dela Cruz on UnsplashM3
2023년 봄, 구글은 Material Design의 세번째 버전을 공개했다. 디자인 시스템의 개념이 여기저기 스며든 이후로 IT 업계발 디자인 소식은 예전만큼 흥미로운 것이 별로 없었던 터라, 왼손으로 턱을 괴고 타임라인을 스킵해가면서 무심하게 키노트를 훑었다.
어? 이게 뭐야?
순간 영상을 멈추게 만든 것은 carousel 비슷한 무언가였는데, 무척 익숙한 컴포넌트의 낯선 인터랙션이 펼쳐지고 있었다.
carousel
M3의 carousel은 여러모로 흥미로웠다. 기본형인 multi-browse를 비롯하여 uncontained, hero, fullscreen 등 다양한 변주가 있었는데, 인터랙션의 주된 컨셉은 스크롤에 따른 아이템의 크기 변화로 보였다.
https://m3.material.io/components/carousel/overview이 방식은 여러모로 장점이 있는데,
첫째. 정보의 시각적인 위계를 표현할 수 있다. large carousel item이라고 하는 가장 큰 아이템이 자연스럽게 주목도를 획득하게 되므로, 유저가 어떤 정보에 집중해야 하는지 또는 제공자가 어떤 정보를 강조하고자 하는지 쉽게 이해할 수 있다.
두번째. 어포던스를 강화할 수 있다. 기존 carousel의 경우 화면 크기에 따라 아이템의 길이가 화면 안에서 딱 맞게 떨어지는 경우가 있는데, 이 때 유저는 준비된 아이템이 더 있다는 사실을 눈치채기 어려워 추가적인 탐색을 하지 않을 수 있다. 하지만 M3의 carousel은 아이템의 크기와 이미지 크롭이 일정한 패턴으로 변화하는 상태를 처음부터 보여주고 있기 때문에 상대적으로 추가적인 아이템의 존재를 예상하기 쉽고, 탐색을 유도하기 용이하다.
세번째. 예쁘고 즐겁다. 이건 달리 다른 단어로 표현할 수 없다. 거기서 거기, 비슷 비슷한 디자인이 넘쳐나는 시절에 M3의 carousel은 인터랙션 디자인에 처음 입문했을 당시의 즐거움을 상기시켜주었다. 정교하게 설계된 인터랙션이 유저의 손길에 반응하여 만들어내는 다이나믹은 구글이 보내준 선물 같았다.
좋은데 이상해
흥미로운 인터랙션을 발견하면, 직접 만들어보고 싶은 게 인지상정. 오랜만에 오래된 도구를 다시 들고 작업을 시작했다. (Long live framer.js!!)
https://medium.com/hyuk/639def3d12fe
오랜만에 하려니 array, loop 등등 이게 맞나 저게 맞나 한동안 시행착오가 있었지만, 과정은 무척 즐거웠다.
그런데 만들고보니 이상한 부분이 있었다. 스크롤 위치에 따라 아이템이 커져야 하는데, 마지막 n번째와 n-1번째 아이템은 영영 large carousel item이 되지 못하는 것이다.
그래서인지 M3 가이드라인에서는 carousel의 마지막까지 스크롤하는 장면을 찾을 수 없었고, 그에 대한 언급도 딱히 나와있지 않았다. 단지 이미지를 알아볼 수 있도록 충분한 크기를 확보해야 한다는 설명이 있을 뿐이었다.
그럼 혹시 이렇게 해야 하는걸까? 하면서 수정해 본 인터랙션은 이랬다. 엉망이다.
그럼 그렇지
천하의 구글이, 미국의 빅테크가, 이런 실수를 하다니.
구글도 이걸 알고는 있겠지?
혹시 M3 발표 이후로 이걸 적용한 서비스를 만나지 못했던 이유가
이런 문제 때문이었을까?
아쉬운 마음에 좀 더 찾아보기로 하자마자 불경한 마음을 품었던 스스로를 반성하게 되었다. M3 carousel의 완전체 인터랙션은 이랬다.
1. 스크롤하면서 아이템이 화면의 앞쪽에 올수록 길이가 길어진다.
2. 길이가 충분히 길어져 large carousel item이 된 후, 계속 스크롤하면 해당 아이템은 다시 작아지며 화면을 벗어난다.
3. 2의 large carousel item이 작아지는 동안 그 다음 아이템이 다시 1~2를 반복한다.
4. 스크롤 하는 동안 1~3이 반복된다.
5. 마지막 n번째 아이템, n-1번째 아이템, n-2번째 아이템이 화면에 나타나고, n번째 아이템이 carousel 컴포넌트의 스크롤 영역 마지막 위치에 걸리면, n번째 아이템이 large carousel item이 되고, n-1번째 아이템이 medium carousel item, n-3번째 아이템이 small carousel item이 된다. (carousel의 마지막 구간에서는 아이템의 변화가 기존 방식의 역순)
https://material.io/blog/material-3-carousel-research-design스크롤 위치가 처음에 가까워질수록 아이템이 커지는 규칙을 일관되게 적용한다는 것은 고정관념이었다. 역시 악마는 디테일에 있는게 맞다.
*조금 더 찾아보니, 아이템의 개수에 따라 large carousel item으로 변하는 구간이 유연하게 변경되는 것으로 보인다. 역시 구글은 다 계획이 있었고…
https://www.reddit.com/r/androiddev/comments/131n3ec/just_noticed_that_material_3_carousel_made_its/그래서 수정해 본 프로토타입_최종.gif
https://www.threads.net/@jangjunhyuk/post/C8EoY7hvngI
그래도 이상해
하지만 이를 블로그에서만 보여주고, M3 가이드라인에서 언급하지 않은 것은 아쉽다. 아마 multi-browse에서의 설명은 쉬울 수 있겠으나, center-aligned-hero의 케이스는 설득력이 없을 것으로 예상한 것이 아닐까 하고 짐작만 할 뿐이다.
https://m3.material.io/components/carousel/guidelines저기 저 마지막 아이템을 한 번 더 스크롤하면?
스크롤이 안 된다. n-1번째 아이템이 large carousel item으로 유지된다.
스크롤이 된다. n번째 아이템이 large carousel item이 되고 가운데 위치한다.
스크롤이 안 된다(하지만 아이템은 변한다). n번째 아이템이 large carousel item이 되고 마지막에 위치한다.
내가 처음 오해했던대로 작동한다면 첫번째처럼 되었을테지만, material design 블로그에서 본 것처럼 작동한다면 세번째 결과가 나와야 한다. 하지만 그럴 경우 center-aligned라고 할 수 있을까?
역시 구글도 민망했던 것이 분명하다.
fin.
