스태거

정의

스태거는 여러 요소를 한꺼번에 나타나게 하지 않고, 항목마다 아주 짧은 시차를 두어 차례차례 등장시키는 기법입니다. 목록이나 카드 묶음이 화면에 들어올 때 전부 동시에 뿅 하고 뜨는 대신, 첫 번째가 나타나고 아주 잠깐 뒤에 두 번째, 또 잠깐 뒤에 세 번째가 이어지는 식입니다. 각 항목의 지연 시간은 몇십 밀리초 정도로 눈에 거슬리지 않을 만큼 짧지만, 이 작은 시간차가 쌓이면 요소들이 물결처럼 순서대로 흘러 들어오는 리듬이 생깁니다. 그래서 시선이 자연스럽게 위에서 아래로, 앞에서 뒤로 따라 흐르게 됩니다.

왜 중요한가

여러 항목이 완전히 똑같은 순간에 나타나면 화면이 한꺼번에 확 바뀌어, 눈이 어디를 먼저 봐야 할지 갈피를 잡기 어렵습니다. 스태거는 등장에 순서를 부여해 이 부담을 덜어 줍니다. 항목이 차례로 들어오면 시선이 자연스럽게 그 순서를 따라가고, 콘텐츠의 흐름과 구조가 은근하게 드러납니다. 또한 순차적인 움직임은 화면에 생동감과 완성도를 더해, 같은 목록이라도 한결 세련되고 정성스럽게 만들어진 인상을 줍니다. 다만 이 효과의 목적은 어디까지나 시선을 부드럽게 안내하는 데 있습니다. 화려함을 과시하려고 시차를 크게 벌리면 오히려 콘텐츠가 늦게 나타나 답답해지므로, 사용자를 기다리게 하지 않는 선을 지키는 것이 중요합니다. 즉 스태거는 화려함을 위한 효과가 아니라, 여러 항목이 한꺼번에 쏟아질 때의 부담을 덜어 주는 안내에 가깝습니다.

흔한 실수

• 항목당 시차를 너무 크게 잡는 것입니다. 하나하나가 뚜렷하게 늦게 나타나면 순차적인 리듬이 아니라 그저 느린 지연으로 느껴져, 목록 전체가 다 뜰 때까지 사용자가 하염없이 기다리게 됩니다.
• 항목이 수십 개인데 전부에 시차를 거는 것입니다. 뒤쪽 항목까지 하나씩 순서대로 등장하다 보면 마지막이 나타날 때쯤엔 첫 항목을 본 지 한참 지나, 화면이 다 채워지기까지 움직임이 지루하게 늘어집니다.
• 스크롤할 때마다 같은 목록에 스태거를 매번 다시 재생하는 것입니다. 처음 등장할 때는 좋아도, 화면을 오갈 때마다 항목들이 계속 다시 흘러 들어오면 오히려 눈이 피로하고 성가시게 느껴집니다.

실무 팁

• 항목당 지연은 30~80ms 정도가 대체로 편안합니다. 이 범위 안에서는 순차적인 리듬이 살아나면서도, 전체가 나타나는 데 걸리는 시간이 답답하지 않게 유지됩니다.
• 항목이 아주 많을 때는 처음 몇 개에만 스태거를 적용하고 나머지는 함께 보이게 하세요. 화면에 처음 들어오는 몇 개만으로도 리듬은 충분히 전달되고, 뒤쪽은 기다림 없이 채워집니다.
• 스태거는 개별 항목의 등장 방식을 트랜스폼과 트랜지션으로 정한 뒤, 그 시작 시점만 조금씩 미루는 것입니다. 각 항목의 움직임 자체가 자연스러워야 순차 효과도 매끄럽게 이어지므로, 먼저 항목 하나의 등장을 다듬은 다음 시차를 얹는 순서로 작업하면 좋습니다.

관련 개념