번역: 러시아어

얼마 전 Wayland에 대해 읽다가 이 문장이 기억에 남았다:

Wayland의 명시된 목표 중 하나는 “모든 프레임은 완벽하다”이다.

나는 이것이 우리 모두가 지향해야 할 목표라고 생각한다. Wayland는 기술적인 측면을 이야기하는 것이지만(현대 GPU 스택은 매우 복잡하고 Wayland는 그 제어권을 되찾으려 한다), 이 원칙은 UI에도 적용할 수 있다.

경험칙은 이렇다:

당신의 앱을 어떤 순간에 스크린샷으로 찍더라도, 거기서 보이는 것을 설명할 수 있어야 한다

수정: 원래는 “..., 말이 되어야 한다”고 썼지만, 스미어 프레임 같은 고급 애니메이션 기법을 고려하지 않은 표현이었다.

왜 모든 프레임에 신경 써야 할까? 신뢰를 만들기 때문이다. 사용자는 코드를 볼 수 없으므로 UI는 앱의 품질을 판단할 수 있는 유일한 방법이다. UI가 좋아 보인다면 개발자가 다듬는 데 시간을 쏟았다는 뜻이고, 이는 아마 코드도 다듬는 데 그에 준하는 시간을 썼을 것이라는 의미다. 휴리스틱이긴 하지만 합리적인 휴리스틱이다.

그렇다면 실제로는 무엇을 의미할까? 몇 가지를 생각해 볼 수 있다:

• 화면 사이에 흰색 깜빡임이 없을 것.
• 부분적으로 로드된 콘텐츠가 없을 것.
• 콘텐츠가 로드되는 동안 레이아웃이 바뀌지 않을 것.
• 내부적으로 일관될 것. UI의 한 부분이 “1 update available”이라고 표시한다면, 다른 부분에서는 “Checking for updates...”라고 표시해서는 안 된다.
• 정교한 애니메이션.

애니메이션은 종종 잊히곤 한다. UI는 시작 상태와 종료 상태에서는 멋져 보일 수 있지만, 그 사이는 매우 들쭉날쭉할 수 있다. 예를 들면 이렇다:

뭔가 이상하다고 느껴진다면, 실제로 이상하다! 느리게 재생한 버전을 보자:

이제 우리의 규칙을 적용해 애니메이션 중간에 스크린샷을 찍어 보자. 이건 뭔가 잘못됐다:

이것도 마찬가지다:

이 두 프레임 모두 완벽하지 않다.

다른 예시를 보자. Safari다:

여기서 플레이스홀더 텍스트는 중앙에서 움직이지만 커서는 왼쪽 위치에서 애니메이션된다:

세상이 무너질 일은 아니지만, 이 두 요소가 서로 동기화되어 있지 않다는 느낌을 준다. 그러면 이런 생각이 든다: 함께 설계된 게 아닐 수도 있겠는데? 그렇다면 제대로 함께 작동하지 않을 수도 있겠다. 그렇게 신뢰가 무너진다.

이런 비동기화는 큰 혼란을 초래할 수 있다. 예를 들어 Photos에서 자르기 모드와 조정 모드를 전환할 때, 사진은 즉시 제자리로 달라붙지만 자르기 테두리는 애니메이션으로 움직인다:

이 때문에 모드를 전환할 때 무언가 미묘하게 변하는 듯한 잘못된 느낌이 생긴다. 그런데 나는 내 UI가 잘못된 느낌을 주길 원하지 않는다. 애니메이션 장난감이 아니라 정밀한 도구가 되길 바란다.

때로는 애니메이션이 전환을 이해하도록 도와줘야 하는데, 오히려 이해를 더 어렵게 만들 때면 두 배로 아쉽다. 돋보기를 따라가 보자:

Youtube도 마찬가지다. 세상에서 가장 단순한 과제를 맡았다: 사각형을 한 위치에서 다른 위치로 옮기는 것! 그런데도 그들은 매우 이상한 방식을 택했다:

이걸 설명할 수 있을까? 말이 되는가?

아마 이전에 결정한 DOM 아키텍처의 기술적 한계 때문일 것이다. 나는 이런 상황을 “기술이 프로그래머를 압도해 버린” 상황이라고 부른다. 이유가 무엇이든 결과는 불완전한 프레임이다.

때로는 애니메이션이 나중에 덧붙인 생각처럼 남겨지기도 한다. 어떻게 되든 그냥 두는 식이다. 그러면 이런 결과가 나온다:

세부 사항을 자세히 보면 흥미롭다:

그러니까. 시작 상태와 종료 상태뿐만 아니라 그 사이의 모든 것에도 신경 써 달라. 모든 프레임이 중요하다.

마지막으로 Preview 앱의 느닷없는 확대 애니메이션을 남기며 글을 마친다. 잘 지내시길!