별이 춤춘다

지난 글에서 별이 자라는 이야기를 했습니다. 태스크에 정성을 들인 만큼 옆의 별 주변이 더 풍성해진다는 설계입니다. 깊이 쓴 사람의 흔적을 조용히 인정하는 장치였습니다.

이번엔 한 단계 더 나아가서, 그 별에 움직임을 더했습니다.

두 가지 움직임

별에 동작을 입히는 방법은 여러 가지가 있습니다. 항상 빙글빙글 도는 방식도 있고, 마우스를 올렸을 때만 반응하는 방식도 있고, 특정 사건에만 한 번 튀는 방식도 있습니다.

처음엔 hover에 반응하게 만들었다가 지웠습니다. 마우스를 올렸을 때만 살아나는 별은 그 순간엔 재밌지만, 평소에 비어 있는 화면을 만듭니다. 별의 존재감이 약했습니다.

그래서 두 가지 움직임을 분리하기로 했습니다.

• 반짝임 (sparkle) — 항상, 은은하게. 별이 살아 있다는 느낌만 주는 정도.
• 춤 (dance) — 태스크가 완료된 직후 한 번. 작업이 끝났음을 축하하는 짧은 흔들림.

이 둘은 표현하는 의미가 다릅니다. 하나는 “지금 여기 있어”라는 존재감, 다른 하나는 “방금 일이 일어났어”라는 사건. 같은 별에 두 동작이 겹치되, 동시에 작동하지 않도록 설계했습니다.

반짝임 — 배경의 호흡

반짝임은 화면이 가만히 있어도 계속 일어납니다. 정지한 정보 대신 살아 있는 화면을 만드는 게 목적입니다.

세기를 어떻게 잡을지 한참 고민했습니다. 너무 강하면 어지럽고, 너무 약하면 안 보입니다. 결국 “화면을 똑바로 바라봤을 땐 거의 인식하지 못하지만, 곁눈으로 봤을 때 살짝 느껴지는” 정도로 맞췄습니다. 광고처럼 시선을 빼앗지 않으면서, 화면이 죽어 있지 않다는 신호가 됩니다.

주기는 별마다 약간씩 다르게 두었습니다. 모든 별이 동시에 반짝이면 합창처럼 보여서 부자연스럽습니다. 각자 다른 박자로 반짝이니, 화면 전체가 잔잔한 노이즈처럼 호흡합니다.

춤 — 사건의 순간

완료 시점의 춤은 다릅니다. 사건성이 있어야 합니다.

태스크의 체크박스를 눌러 완료 상태로 만들면, 옆의 별이 한 번 짧게 흔들립니다. 좌우로 살짝 기울었다 돌아오는 정도. 0.5초가 안 됩니다. 곧 끝나지만, 분명히 보입니다.

이걸 구현하려면 “방금 완료된 태스크가 어떤 거였는지”를 별 컴포넌트가 알아야 했습니다. 일반적인 상태로는 표현이 어렵습니다. 별 컴포넌트는 자기 태스크가 완료된 상태인지 알 수 있어도, 그게 “방금” 됐는지는 알 수 없으니까요.

그래서 작은 신호를 따로 두었습니다. 태스크가 완료되는 순간 “방금 이 태스크가 완료됐다”는 정보를 잠깐 켰다가, 1초 남짓 후에 끕니다. 그 사이에 해당 별만 춤추고, 그 외의 별들은 평소대로 반짝일 뿐입니다.

이런 사건 신호는 화면 전체의 다른 부분에서도 활용할 수 있습니다. 토스트, 사운드, 다음 태스크로의 자동 포커스 같은 것들이 같은 신호를 듣고 있다가 반응합니다. 별의 춤은 그 청중 중 하나일 뿐이고, 가장 작고 조용한 청중입니다.

둘 다 있는 이유

반짝임 하나만 있어도 됐을 겁니다. 춤 하나만 있어도 됐을 겁니다. 둘 다 둔 이유는 둘이 표현하는 게 다르기 때문입니다.

반짝임은 상태입니다. 별은 항상 거기에 있고, 태스크는 항상 살아 있습니다. 화면을 보면 늘 그 사실이 약하게 보입니다.

춤은 변화입니다. 가만히 있던 것에 사건이 일어났고, 별이 그 순간을 반응합니다. 사용자의 행동에 화면이 답합니다.

상태와 변화는 같은 인터페이스 안에서도 다른 채널로 표현되는 게 자연스럽습니다. 둘을 한 채널에 합치면 어느 쪽도 분명하지 않게 됩니다. 별의 색이 정체성을 표현하고, 형태가 fidelity를 표현하고, 움직임이 상태와 변화를 표현합니다. 하나의 별에 네 종류의 정보가 자연스럽게 겹쳐 있습니다.

별 하나에 점점 많은 의미가 쌓이는데, 어지럽지 않습니다. 각 정보가 다른 시각 속성을 통해 들어오고, 서로 충돌하지 않으니까요. 디자인이 잘 풀리는 순간은 보통 이런 모양입니다. 새 정보를 추가했는데, 화면이 더 복잡해지지 않는 순간.