다양한 디바이스에서 사용 가능한 스플릿 스크린
삼성의 옴니아 사태(?) 이후, 다시는 삼성의 스마트폰을 쓰지 않겠노라 다짐했던 마음을 뒤흔들었던 제품이 ‘갤럭시노트’시리즈였습니다. 옴니아를 쓰다 도저히 안되겠다 싶어 1년 만에 갈아탄 제품은 아이폰4였는데요! 아이폰4의 약정이 끝날때쯤 나온 제품이 갤럭시노트2였고, 이런 저런 메모를 즐겨하는 제게 ‘S펜’은 정말 매력적인 존재로 다가왔습니다. 그렇게 갤럭시노트2를 쓰며 작성한 S메모만 1,000개가 넘었고 이 메모는 많은 도움을 주기도 했습니다(물론 갤럭시노트7에서 다시 절망을 했지만…) ‘S펜’을 유용하게 만들어준 또 하나의 기능이 바로 ‘화면 분할‘이었는데, 한쪽에서 크롬을 띄워 놓고 한쪽에는 메모장을 띄워 메모를 할 수 있었기 때문입니다. 당시만 하더라도 스마트폰에서 화면 분할을 이렇게 활용할 수 있구나 싶었는데, 이제는 정말 많은 곳에서 접할 수 있는 기능이 되었습니다. 그래서 오늘은 스플릿 스크린 디자인을 위한 여러가지 활용 사례를 정리해볼까 합니다!
스플릿 스크린의 장점 : 하나의 화면, 두 가지 메시지
위의 이미지는 드롭박스의 비즈니스 계정에 대한 두 가지 가이드를 한 화면에서 보여주는 모습입니다. 왼쪽으로는 일반 유저들에 대한 가이드를, 오른쪽으로는 관리자들을 위한 가이드를 제공해주고 있죠. 스플릿 스크린을 활용할 경우, 위와 같이 중요한 두 가지 정보를 한 화면에서 보여줄 수 있으며 방문자 또는 사용자로 하여금 동일한 조건하에 원하는 정보를 선택할 수 있도록 유도할 수 있습니다. 또한 스플릿 스크린의 경우 웹은 물론 태블릿과 모바일에서도 동일하게 노출할 수 있다는 장점이 있죠. 무엇보다 디자인적으로 다양한 시도를 할 수 있다는 점에서 매력적인 방법!
1.컬러와 폰트의 적절한 활용
플랫과 메테리얼 디자인 덕분에 컬러와 폰트(타이포그래피)는 웹디자인의 주요 흐름 중 하나가 되었습니다. 생생한 컬러와 다이나믹한 폰트는 텍스트로만 이뤄진 콘텐츠를 더욱 돋보이게 만들어 주는데요! 이 두 가지를 스플릿 스크린 양쪽에 결합할 경우 시각적인 즐거움을 더해줄 수 있습니다. 위의 첫 번째 이미지는 밝은 색상과 타이포그래피를 활용했으며 두 번째 이미지는 다채로운 이미지와 컬러, 폰트의 조합으로 눈에 띄는 구성이 된 것처럼 말이죠!
2.행동 유도 버튼의 활용
행동유도 버튼은 스플릿 스크린이 아니어도 많이 사용되지만, 스플릿 스크린에서는 더욱 효과적으로 활용할 수 있습니다. 위의 이미지가 대표적인 사례라고 할 수 있는데요! 기본적으로 동일한 사이즈 두 개의 이미지로 구성되어 있는데, 가운데의 ↔아이콘을 좌,우로 끌어당기면 숨겨진 내용을 확인할 수 있습니다. 이와 동시에 행동유도 버튼 역시 정적인 상태에서 동적인 상태로 바뀌게 되고요. 이처럼 한 화면에서 두 가지 내용 인터랙티브하게 보여줄 수 있어 클릭 확률을 높일 수 있기 때문이죠.
3.카드로의 활용
스플릿 스크린을 두 개의 카드UI로 활용하는 것 역시 방법인데요! 시선의 흐름이 좌에서 우로 향한다는 일반적인 내용을 바탕으로 했을 때, 하나의 이야기 흐름을 보여주기에 적합한 방법입니다. 좌측 화면을 사용자를 위한 설명으로 활용하고, 우측 화면은 사용자가 직접 사용 가능한 공간으로 활용할 수도 있으며, 좌측 화면을 우측 화면에 담긴 내용을 대표하는 것으로 활용할 수도 있습니다. 스크롤을 활용할 경우 더 입체적인 내용을 전달할 수도 있을 것 같네요!
4.두 화면 사이의 시각적인 흐름을 활용
스플릿 스크린은 두 가지 화면을 하나의 화면처럼 활용할 수 있다는 점이 가장 큰 장점이지만, 이는 두 개의 화면이 자연스럽게 이어져야 충분히 발휘될 수 있습니다. 두 화면을 이어주는 가장 효과적인 방법은 ‘컬러’를 사용하는 것으로 하나의 화면에서 다른 화면으로의 시각적인 흐름을 만들기 위해 서로 대비되는 컬러를 활용하는 것이 좋습니다. 위의 이미지를 보면, 왼쪽으로는 아이콘에 대한 이름과 간략한 설명이 담겨 있고, 오른쪽으로는 실제 아이콘의 모습과 코드가 담겨 있는데요. 만약 같은 컬러나 비슷한 컬러를 배경으로 활용했다면 양쪽에 담긴 내용을 사람들이 제대로 확인하지 못했을 가능성이 큽니다. 색과 함께 활용할 수 있는 방법은 양쪽의 화면에 폰트와 같은 요소를 걸쳐놓는 것으로, 이 역시 좌측에서 우측으로의 자연스러운 연결을 유도할 수 있습니다.
5.애니메이션의 활용
위와 같이 한 화면에서 선택한 내용을 다른 한쪽에서 애니메이션을 활용해 입체적으로 보여주는 것 역시 스플릿 스크린에서만 사용 가능한 매력적인 방법 중 하나입니다.
스플릿 스크린에 대한 정리
스플릿 화면은 하나로 구성된 화면에 비해 더 기능적으로 활용할 수 있으며, 방문자 또는 사용자로 하여금 색다른 즐거움을 느끼게 해줄 수 있습니다. 하지만 구성하기가 까다로운만큼 스플릿 스크린을 고려한다면 아래의 질문을 먼저 확인하는 것이 좋을 것 같네요! (출처 : Best Practices for Split Screen Design)
- 스클릿 스크린이 우리 콘텐츠에 적합한가요?
- 레이아웃 작업을 수행하기에 충분한 공간이 있나요?
- 사용자로 하여금 호기심을 불러일으킬 수 있나요? 혼란스럽게 느끼지는 않을까요?
- 사용자의 관심이 분산되지는 않을까요? 자연스러운 흐름을 만들어낼 수 있나요?
지금 써보러 갑니다의 더 많은 ‘디자인’ 관련 이야기를 확인하고 싶으신가요? 여기를 클릭해주세요!
