기술이 만드는 UI의 변화 - Daum 19대 총선 홈페이지

기술은 많은 것을 변화시킨다. 그리고 그런 변화는 우리가 알게 모르게 다가온다. 터치라는 기술은 마우스를 대신하는 새로운 조작 방법으로 사람들의 인정을 받았고 태블릿이라는 새로운 장르의 개척에 크게 기여를 했다. 터치와 태블릿은 이제 다시 우리가 보는 웹에 변화를 주고 있다. 그 변화의 가장 극적인 변화는 포털 Daum이 보여주고 있다. 

극적인 변화는 언제나 계기를 필요로 한다. 미국의 SNS가 폭발적인 파급력을 가지게 된 계기가 무엇일까? 난 오바마가 당선되던 미국 대선이라 생각한다. 아무리 페이스북이 편리하다고 하지만 끼리끼리 특정 인맥을 넘어서려면 전국적인 이슈가 필요하다. 누구나 관심을 두며 이야기의 주제가 될만하고 우리 생활에 밀접한 소재로 정치만 한 것이 있을까? 

한국에 던져진 총선이라는 이슈는 어떨까? 한국의 IT 기업은 터치와 태블릿, SNS라는 기술을 어떻게 흡수했을까? 오늘은 그에 관한 이야기다. 우선 이야기할 것은 터치에 관한 것이다. 

왼쪽이 기존의 웹이고 오른쪽이 격자무늬 또는 타일 형태의 UI다. 마우스의 움직임은 정교하다. 그리고 내가 선택하는 화면을 크게 가리지도 않는다. 하지만 터치는 다르다. 손가락을 사용하기 때문에 화면을 가릴 수밖에 없으며 마우스만큼 구석구석을 선택하기도 어렵다.

그 결과 위 화면과 같은 차이로 나타난다. 만약 왼쪽의 화면이라면 사용자는 터치를 할 때 반드시 문장을 누르려 할 것이다. 그런데 꼭 문장만 터치할 수 있을까? 사용하다 보면 문장이 아닌 붉은 영역을 누르게 될 것이다. 그러면 각 문장 사이 예를 들어 1번과 2번 사이의 붉은 영역 어디를 눌러야 자신이 원하는 곳으로 갈 수 있을까? 기존의 웹 UI는 이런 문제점을 해결하지 못한다. 문장을 누르면 좋겠지만, 그것은 그만큼 사용자가 정교하게 움직여야 한다는 전제가 필요하다. 그러나 오른쪽과 같이 격자무늬 또는 타일 형태의 UI가 되면 사용자는 명령을 이해하는 영역이 기존보다 커지고 명확해지면서 터치에 편리함을 느끼게 된다. 사각형의 공간 안을 선택한다면 자신이 원하는 명령을 할 수 있다는 직관적인 공식이 성립하기 때문이다. 

기존의 웹 UI에 사각형으로 구역에 대한 설정만 해줘도 다른 조작 시스템에 최적화된 구조로 바뀔 수 있다. 그리고 이러한 고민은 다음과 같은 구조로 반영된다.

< Daum 19대 국회의원 선거 화면 - 후보자 말말말(링크) >

이전의 텍스트 구조에서 벗어나 해드라인에 맞게 구역을 할당한 뒤 다시 사각형으로 어디를 터치해야 할지 명확한 구조를 만들었다. 

< Daum 19대 국회의원 선거 화면 - 이 시각 SNS 격전지(링크) >

여기에는 지도 서비스를 더해 지금 사람들의 관심사가 어디이며 어떤 상황인지 알 수 있게 해준다. 여기서도 터치에 편리하게 사각형으로 구역을 설정하여 어디를 터치해야 하는지 명확하게 알려준다.

터치를 조작 수단으로 하는 태블릿이라는 모바일 기기의 폭발적 성장은 웹의 이러한 변화를 이끌어낸다. 별도의 태블릿용 구조를 새로 만들지 않더라도 사용자가 명령을 내릴 구역의 명확한 확정이라는 핵심 개념을 중심으로 조그만 변화를 주더라도 마우스를 입력 기반으로 하는 웹 사용자와 터치를 입력 기반으로 하는 태블릿 사용자 모두를 만족하게 할 수 있다. 

< Daum 19대 국회의원 선거 화면 - SNS 맵(링크) >

Daum은 여기다 인포그래픽의 관점까지 더 했다. 인포그래픽은 정보를 시각화해서 표현하는 것이다. SNS 맵은 SNS 점유율을 바탕으로 지금 어떤 사람들의 이야기가 오고 가고 있는지 보여준다. 전체 할당된 면적을 100으로 계산하고 인물에게 할당된 면적을 백분율로 환산하여 그에 맞는 면적을 보여줌으로써 사용자로 하여금 현재 SNS의 상황을 직관적으로 알 수 있게 한다. SNS 맵에 따르면 현재 가장 많은 SNS 점유율을 보여주는 것은 김용민 민주통합당 후보다. 김 후보를 선택하면 아래와 같은 화면으로 이동한다.

김용민에 대한 프로필과 각종 SNS 그리고 통계까지 각종 정보가 일목요연하게 표현된다. 이러한 정보의 가공은 어떤 추세를 따르는 걸까? 바로 빅 데이터의 가공이다(관련 글 - 기업을 위한 마이너리티 리포트). 쏟아지는 정보를 어떻게 가공하여 보여줄 것인가? 이것에 대한 고민을 SNS 맵은 보여주고 있는 것이다.

이번 Daum 19대 총선 홈페이지는 터치 기반의 조작 방식, 태블릿이라는 미디어 도구의 확산, 인포그래픽, 빅 데이터 등 시대의 흐름에 부합하는 소재들을 UI에 충실히 반영하고자 노력한 흔적이 엿보인다. 그리고 이런 UI의 변화는 사용자 경험(UX)의 차별화를 가져다줄 것이다. 

총선이 끝난 뒤 12월에는 대선이 있다. 그때까지 Daum은 지금의 UI를 더 개선하여 멋진 UX를 선사할 것이다. UI, UX를 설계하고 서비스를 기획하는 사람으로서 Daum이 보여줄 개선된 환경이 무척 기다려진다. 

* 이미지는 각 서비스 화면 캡처입니다.

* 이 글은 아이에데이에 뉴스 스토리 / IT 칼럼에도 기고(링크)됩니다.

* 정말이지 너무너무 오랜만의 IT 관련 글입니다. 정말 눈물이 다 나네요... 으헝헝 ㅠㅠ

* 우리 모두 자신의 소중한 한 표를 행사합시다. 그 누구도 자신의 고민을 알아서 대신해주지 않습니다. 스스로 선택해야 왜 잘못하느냐고 욕이라도 할 권리가 생깁니다.

* 포털의 서비스는 더 적극적인 정보 제공과 참여를 이끌어냅니다. 그 결과 선거가 바뀌고 정치가 바뀌고 우리의 미래가 바뀌겠지요. 여러분은 지금 기술의 발전이 우리의 미래를 어떻게 바꾸는지를 직접 목격하고 계신겁니다.