스플래시 이미지

Bing 앱으로 보는 디자인 트렌드의 진화

지금 이 글을 읽기 전, 스마트폰에서든 PC에서의 브라우저에서든 지금 이 문장을 읽기 위해 스크롤링을 했을 것이다. 화면을 꽉 채운 이미지와 "스플래시 이미지"라는 제목. 바로 이 글을 통해 전하고자 하는 항목이다.

좌측의 이미지는 "Ermenegildo Zegna"라는 이탈리아 패션 브랜드 공식 홈페이지이며, 우측 이미지는 "ART DECO IMPERIAL HOTEL" 호텔의 홈페이지이다.

두 이미지가 갖고 있는 공통점은 첫눈에 관심을 끌 하나의 고품질 이미지가 화면을 가득 채우고 있다는 점이다.

지난 몇 년 전부터 인터넷이 빨라지고 컴퓨터의 성능이 높아짐에 따라 대세 컨텐츠의 타입이 변화하고 있다. 텍스트로 시작된 웹 미디어 컨텐츠는 텍스트와 사진, 그리고 사진에서 짧은 비디오들로 변화를 거치고 있다. 웹 화면에서 사진이라는 컨텐츠 타입이 차지하는 비율과 해상도가 높아지고 있고, 화면을 가득 채워 이목을 집중시키는 "스플래시 이미지"가 폭넓게 활용되고 있다.

이런 트렌드는 매년 조금씩 바뀌고 또 업그레이드되고 있는데, 이는 Google 등의 검색엔진에 "Modern Web Design Trend" 등의 검색어를 입력하면 관련 블로그 글들을 쉽게 찾아볼 수 있다.

스플래시 이미지는 화면의 좌우를 고해상도 이미지로 가득 채워 이목을 집중시킬 수 있다는 장점은 있지만, 정보 제공량이 매우 한정적이라는 한계점도 존재한다.

Windows 8: Bing News Application (초기 버전)

위 이미지는 놀랍게도(...) 마이크로소프트가 Windows 8에서 빌트인 앱으로 제공했던 Bing 뉴스 앱이다.

마이크로소프트는 중앙일보와 Joins MSN 포털을 함께 운영하는 계약기간이 끝나고, 글로벌 MSN과 한국 로컬 MSN 포털을 같은 관리 시스템 아래 새로 론칭했고, 그보다 약 한 달 전에 Bing 앱 또한 (제대로) 론칭했다.

Windows 8: Bing News Application (업무용 Template)

그리고 2013년 5월쯤 새로 론칭한 Windows 8 빙 뉴스 앱. 가장 눈길을 사로잡는 부분이 첫 화면의 큰 이미지를 배경으로 한 메인 뉴스와 그 위 큰 헤드라인.

안타깝게도 한국에서는 Bing 트래픽이 크게 피크를 찍지는 못했지만, Windows 8 이상의 운영체제에 기본 탑재되고 있는 Bing News(Finance, Sports 포함) 앱을 처음 켜면 "Hero Image"라고 하는 큰 스플래시 이미지를 배경으로 하는 메인 뉴스가 보인다.

대략 전체 화면의 80~90% 정도의 면적을 메인 뉴스 하나가 차지하고 있다.

Windows 8.1: Bing News Application

Windows 8.1로 운영체제가 업데이트되면서 빌트인 Bing 관련 앱들의 UI 업데이트가 있었다.

Windows 8.1 운영체제 업데이트 이전부터 전 세계에 있는 Bing & MSN 사업부의 직원들 의견들을 모으고 대륙별, 국가별 유저들의 특성을 반영하여 위 이미지와 같이 디자인이 변경되었다.

이 시기가 대략 2013년 8월 안팎.

변경된 점은 한눈에 보인다. 전체 화면에서 "Hero"라고 하는 메인 뉴스가 차지하는 비율이 줄어들었다. 4년 정도 된 오래된 일이라 정확히 기억은 나지 않지만, 유럽이나 아메리카 대륙에서는 대형 메인 뉴스가 효과가 있었지만 아시아 대륙에서는 한 화면에 많은 기사를 보는 것에 니즈가 있다고 신뢰도 높은 리서치 결과를 받았던 기억이 있다.

보수적으로 접근해 생각해보면, 네이버나 다음도 메인 화면에서 한 번에 많은 뉴스를 보여주는 것에 집중을 하고 있지 하나의 기사 이미지가 전체 화면을 꽉 채운 적은 없다.

위 이미지는 현재 Windows 10 운영체제의 Bing News / Finance 앱의 첫 화면이다.

한국에서 사용 빈도는 굉장히 낮은 것으로 알고 있지만, 나는 매일 접속한다.

무엇이 바뀌었을까?

---

첫 화면을 꽉 채우던 큰 이미지의 메인 기사 대신, 비율을 많이 줄인 메인 기사들이 선택되어 보이고 있다.

안타깝게도 디자인이 여전히(?) 썩 마음에 들지는 않지만, 컨텐츠 소비와 제공 면에서 접근을 하면 이는 더욱 많은 정보를 소비자에게 한 눈에 볼 수 있도록 한 번에 제공하려고 한다는 것을 알 수 있다.

Peugeot Official Web

다시 '스플래시 이미지'로 돌아와, 디자인과 컨텐츠 제공 수 제약에서 벗어난 디자인 예를 한 가지 보자.

위 이미지는 2017년 상반기 기준, 푸조라는 프랑스 자동차 회사의 공식 홈페이지의 첫 화면이다.

스플래시 이미지로 인덱스 페이지를 꽉 채웠지만 동시에 2개의 내용을 보여주고 있다. 이목을 집중시키는 동시에 컨텐츠 노출 제약을 어느 정도 해결할 수 있는 부분.

이를 Split Screen, Split Layout, Divided Layout, Split Splash 등으로 부른다.

더러 5개 등 다수 이미지로 화면을 분할해 이목을 집중시키는 페이지도 보이는데, 와이드 모니터가 아니라면 레이아웃을 변형시키는 스타일 구성을 하기도 한다.