모든 프레임을 완벽하게

• UI는 사용자가 앱 품질을 판단하는 거의 유일한 표면이며, 어느 순간 스크린샷을 찍어도 화면 상태가 말이 되어야 신뢰가 쌓임
• 완성도 높은 UI는 개발자가 다듬는 시간을 들였다는 신호가 되고, 코드 품질도 비슷하게 다듬었을 것이라는 합리적 휴리스틱이 됨
• 실제 기준은 화면 전환 사이 흰색 깜빡임, 부분 로딩, 로딩 중 재배치, 상태 문구 불일치, 부정확한 애니메이션을 없애는 것임
• 시작과 끝 상태가 좋아도 중간 프레임이 어긋나면 구성요소가 동기화되지 않은 느낌을 만들고, Photos 사례처럼 실제 변화가 없는 전환에서도 거짓 감각을 만들 수 있음
• 애니메이션은 전환 이해를 도와야 하며, 시작·끝뿐 아니라 그 사이 모든 프레임까지 관리해야 정밀한 도구 같은 UI가 됨

핵심 원칙

• Wayland의 명시 목표인 “every frame is perfect”는 현대 GPU 스택의 복잡성 속에서 제어권을 되찾으려는 기술적 목표임
• 같은 원칙은 UI에도 적용되며, 앱의 어느 순간을 스크린샷으로 찍어도 화면이 자연스럽고 일관되어야 함
• 사용자는 코드를 볼 수 없기 때문에 UI가 앱 품질을 판단하는 유일한 표면이 됨
• UI가 잘 다듬어져 있으면 개발자가 폴리싱 시간을 들였다는 신호가 되고, 코드도 비슷한 수준으로 다듬었을 것이라는 판단으로 이어짐

실제 기준과 사례

• 완벽한 프레임을 위해서는 화면 사이 흰색 깜빡임이 없어야 하고, 콘텐츠가 부분적으로 로딩된 상태나 로딩 중 레이아웃 재배치가 없어야 함
• UI 내부 상태는 일관되어야 하며, 한 부분이 “1 update available”이라고 말할 때 다른 부분이 “Checking for updates...”라고 말하면 안 됨
• 애니메이션은 자주 잊히며, 시작 상태와 끝 상태가 좋아도 그 사이가 어색하면 중간 스크린샷이 말이 안 되는 프레임이 됨
• Safari 사례에서는 플레이스홀더 텍스트가 가운데에서 움직이지만 커서는 왼쪽 위치에서 애니메이션되어 두 구성요소가 서로 동기화되지 않은 느낌을 만듦
• Photos 사례에서는 Crop과 Adjust 모드를 전환할 때 사진은 즉시 제자리로 이동하지만 크롭 테두리는 애니메이션되어, 모드 전환 중 무언가 미묘하게 바뀌는 거짓 느낌을 만듦
• 검색 UI 사례에서는 전환 이해를 도와야 할 애니메이션이 오히려 돋보기 움직임을 따라가기 어렵게 만듦
• Youtube 사례에서는 직사각형을 한 위치에서 다른 위치로 옮기는 단순한 작업에서도 이상한 움직임이 생기며, 이유와 관계없이 결과는 완벽하지 않은 프레임이 됨
• Preview 앱의 확대 애니메이션까지 포함해 핵심은 시작과 끝 상태뿐 아니라 그 사이 모든 순간에도 주의를 기울여야 한다는 점임