90년대 초부터 컴퓨터를 사용하신 분이라면 친숙한 화면들이 있습니다. 바로 윈도우 OS 시리즈의 시동화면일 텐데요. 컴퓨터를 사용하는 사람들에게 반드시 거쳐가야 하는 화면으로 기억에 남으셨을 겁니다.

<Windows OS 시리즈의 시동 화면>


이 화면들은 스플래시 화면으로 불리는데요, 프로그램 시작 시 타이틀 화면을 보여줌으로써 어떤 프로그램이 구동되고 있는 지 알려주는 역할을 했습니다. 때로는 프로그램의 구동 상황, 예를 들어 데이터 읽기나 프로그램 설치 상황을 보여주기도 해 로딩(Loading) 화면으로 부르는 경우도 있는데요. 아직까지도 논쟁이 진행중인 관계로, 본 포스팅에서는 '프로그램 구동과 로딩 기능'을 수행하는 중에 보여지는 프로그램 고유의 화면을 스플래시 화면으로 부르겠습니다.

오늘의 포스팅은 기다림의 시간, 바로 스플래시 화면에 관한 글입니다. 



사용자를 괴롭게 하는 인고의 시간

사실 컴퓨터 하드웨어가 발달하기 전, 스플래시 화면은 사용자에게 있어 유쾌하게 볼 수 있는 화면은 아니었습니다. 초기 컴퓨터에서 OS를 비롯한 소프트웨어 구동에는 상당한 시간이 필요했고, 기다리는 시간이 길어질수록 스플래시 화면을 오랫동안 바라봐야 했었습니다.


<컴퓨터 부팅을 기다리는 전 세계 사용자의 공통된 심정(?)되겠습니다>


특히 긴 기다림 끝에 실행된 소프트웨어가 에러라도 일으키면, 분노는 극에 달하기도 했었죠. 기다림, 분노와 맞물려, 스플래시 화면은 사용자에게 좋게 볼 수만은 없는 화면이었습니다.


하지만 하드웨어가 점점 발전하면서 소프트웨어 구동화면은 점점 짧아졌습니다. 또, 모바일 환경의 중요성이 커지면서 모바일 어플리케이션의 스플래시 화면에 대한 중요도도 함께 높아지게 되었죠. 

그럼, 이 기다림의 시간을 어떻게 유용하게 활용할 수 있을까요?



지루한 진행 바(Progress Bar)를 보다 재미있게

스플래시 화면의 기능 중 하나로, 사용자가 얼마나 기다려야 하는지 알려주는 진행 바(Progress bar)의 형태가 자주 등장했습니다윈도우의 예를 들자면, 작업 진행 상황을 차오르는 바 형태로 전달하고 있습니다. 밋밋할 수 있는 바를 재미있는 형태로 바꾸는 시도가 이루어지고 있습니다.


<밋밋할 수 있는 상태 바에 애니메이션 효과를 더할 수 있습니다>


현재 상태를 알려주는 스플래시 화면 역시 다양한 시도들이 행해질 수 있는데요. 몇 가지 재미있는 화면들을 살펴볼까요?


※ 인터넷 익스플로어에서는 제대로 작동하지 않을 수 있습니다. 
    크롬브라우저를 통해 움직이는 애니메이션을 확인 하실 수 있습니다.






사용자가 반드시 거쳐가는 화면, 어떻게 활용할 수 있을까요?

스플래시 화면은 사용자에게 어떤 프로그램이 구동 중인지, 어떤 상태인지 알려주는 중요한 역할을 하고 있습니다. 대부분의 프로그램과 어플리케이션이 스플래시 화면을 가지고 있고, 사용자들은 이 화면을 접하면서 익숙해져 왔습니다. 단적인 예로, 대부분의 스마트폰 사용자들은 카카오톡과 같은 이미 친숙한 스플래시 화면이 몇 개쯤은 있을 것입니다. 


<캐치프레이즈를 보여주는 위메프(좌), 전속 모델을 보여주는 쿠팡(우)의 스플래시 화면>


스플래시 화면을 사용자라면 누구나 거쳐가야 하는 통로로 인지한다면, 어떻게 활용할 수 있을까요? 단순히 기다린다는 불쾌감을 줄이는 것에 그치지 않고, 필요한 메시지를 전달하거나 브랜드 이미지를 강화하는 전략으로 적극적으로 활용해야 하지 않을까요?

종종 놀라운 제품이나 디자인을 접하게 될 때면, 아주 사소한 것들이 제품과 디자인의 완성도를 결정하는 일들에 놀라곤 합니다. 스플래시 화면의 기다림을 놀랍고 재미있는 경험으로 바꾸는 것만으로도 사용자에게 훨씬 좋은 경험을 줄 수 있을 것입니다. 앞으로도 스플래시 화면이 얼마나 우리를 즐겁게 해줄 지, 기대됩니다.




참고자료:

http://codepen.io/Zeneraith/pen/bdEmA

http://codepen.io/olliex/pen/moyjI 

http://codepen.io/lixquid/pen/ybjmr 

http://tobiasahlin.com/spinkit/ 





신고
Posted by UXD-Trend

댓글을 달아 주세요