서비스 개발에 필요한 로딩 UI 제작기

오늘은 로딩 화면에 중요하게 작용하는 스켈레톤 UI에 대해서 공부해보았다. 서비스 개발 중에 로딩 화면이 필요하다고 하셔서, 저번에 한번봤었던 좋은 내용의 포스팅을 다시 한 번 정독해보았다.

 

상황에 맞는 로딩 애니메이션 적용하기

 

스켈레톤 로딩, 언제 사용해야 할까? — 헤이딜러 UX 스터디

 

 

로딩 애니메이션까지 생각해야할줄 초반에는 몰랐는데.. 공부를 시작하고나니 이렇게 디테일한 요소도 빠짐없이 신경써야하는 게 프로덕트 디자이너의 또 하나의 역량이라는 생각이 들었다🫠 그래도 누군가와 함께 서비스를 개발하면서 이렇게 하나씩 배워보는 게 재밌다!

 

글을 읽어보면, 다양한 로딩 UI의 종류가 있다는 것을 알 수 있다.

• 스켈레톤 UI (Skeleton UI)
• 루프 애니메이션 (Loop Animation)
• 텍스트&이미지
• 스피너 (Spinner)
• 프로그래스 바 (Progress Bar)

...

 

이렇게 많은 종류가 있지만, 무턱대고 이러한 UI를 다 사용해버리면 자칫 '중구난방 서비스'가 될 수도 있다. 그래서 이러한 다양한 로딩 애니메이션도 명확한 규칙을 세우고, 그 규칙 아래 사용되어야한다고 한다.

 

 

1. 스켈레톤 UI

스켈레톤 UI는 각 화면에 맞는 레이아웃을 기반으로 제작해야 하므로, 꼭 필요하거나 핵심적인 기능일 때 로딩이 짧게 느껴지게 하기 위해 사용한다고 한다. 

- 로딩이 짧게 느껴지게 해야하는가?

- 이전 화면 없이 새로 그려지는 화면인가?

- 화면의 변동이 잦지 않은가?

 

위 포스팅의 디자이너분께서는, 마이리얼트립 서비스 유저들의 핵심 플로우인 '홈 -> 상품탐색 -> 구매'로 이어지는 화면을 모두 스켈레톤 UI로 처리하셨다고 한다. 이렇게 핵심 플로우의 로딩 UI도 기준을 설정하고, 그 기준에 맞추어 진행된다는 점이 인상 깊었다.

 

이러한 기준으로 나도 서비스에 맞게, 위 세 가지 조건에 부합하는 화면의 스켈레톤 UI를 그려보았다.

이 화면은 서비스에서 핵심적으로 밀고있는 기능이기도 하여, 스켈레톤 UI로 로딩 화면을 제작해보았다. 도형만 제작해놓은 화면에 맞게 그리기만 하면 될 줄 알았는데, 작업을 다 마치고 보니 라이트모드 컬러가 배경 컬러와 애매하게 조화롭지 않은듯한 느낌이 든다.. 배경이 살짝 파란끼가 돌아서 그런가..? (컬러를 조금 더 조정해보아야겠다)

 

 

2. 루프 애니메이션

루프 애니메이션은 전체 로딩과 부분 로딩 모두에 활용할 수 있다고 한다. 내가 루프 애니메이션을 사용할 곳은 유저가 이미지를 업로드 하는데에 시간이 다소 소요되는 부분이 있어, 이를 부분 로딩에 사용 가능한 스피너로 액션 피드백을 주기로 했다. 특히 버튼을 누르는 동작은 사용자에게 크게 느껴지는 행동이라고 한다. 그러므로 로딩 애니메이션을 통해 즉각적인 피드백을 주는 것이 좋다고 한다.

 

스피너

- 부분적인 로딩이 일어나는가?

- 사용자 액션에 대한 피드백이 강해야 하는가? (로딩이 일어나고 있음을 명확하게 인지시켜야 하는가?)

 

위의 화면은 현재 개발 중인 서비스에서, 친구와의 소통 기능을 제공하는 대화창이다. 원래는 조금 더 직관적으로 보여주기 위해서 이미지가 dimmed되고 상단에 로딩이 일어나는 UI로 제안 드렸는데, 더 빠른 개발을 위해서 우선 보류하고 기존의 리소스를 더 사용하기로 했다. 인풋필드 영역에 send 버튼에 사이즈를 맞추어, 이미지가 업로드 되고 있다는 것을 표현했다.

 

 

상단의 블로그에서 잘 정리해주신 내용을 다시 한 번 가져와보았다. 작업할 때, 중간 중간에 한 번씩 확인하면서 과연 이 UI가 적용되는 것이 맞을지 계속 고민해 나가보아야겠다.

출처 : https://medium.com/myrealtrip-product/%EC%83%81%ED%99%A9%EC%97%90-%EB%A7%9E%EB%8A%94-%EB%A1%9C%EB%94%A9-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-2018af51c197