협찬사절 ★ 솔직리뷰 ~ 여행 맛집 전시 공연

1. 뉴미디어디자인의 개념

     1) 뉴미디어 정의

        전통적인 개념의 디자인 은 크게 인쇄매체(신문, 잡지, 책 등)와 전자매체(TV, 라디오 등) 디자인으로 정의되었다. 불과 몇 년 전 까지는 위에서 언급한 매체를 제외한 다른 device상에서 구현되는 서비스를 뉴미디어 (인터넷 등)로 정의하였으나, 최근 스마트폰, 태블릿 등의 새로운 device가 등장하면서 뉴 미디어에 대한 정의가 다시 이루어지고 있다.

       이번 단원에서 정의하는 뉴 미디어는 최근 2~3년 사이에 새로 출시되었거나 각광받고 있는 device를 기반으로 기존매체와의 디자인적인 특징과 차이점을 정의 하고자 한다. 또한 학습할 부분도, 스마트폰, 태블릿PC 등을 중심으로 언급하고자 한다.

     2) 뉴미디어 디자인의 특징

          (1) 쌍방향성/상호작용성 

             뉴미디어 디자인의 가장 큰 특징은 쌍방향성을 지원한다는 것이다.

             기존 미디어의 경우 디자인된 제품(신문, 잡지 등)을 이용자가 선택하고 이를 이용(신물을 읽기, TV 보기 등)하는 것으로 모든 과정이 완료된다. 이에 디자이너는 주어진 정보(기사, 정보, 이미지 등)를 한정된 공간(신문 xx면, 잡지 xx쪽, TV xx분...)에 최대한의 정보를 효율적으로 배치하고 이용자가 읽기 쉽도록 정리하는 역할에 중점을 두었다.

             그러나 뉴 미디어의 경우에는 사실상 정보를 제공하는 공간의 제약이 많이 완화되었으며, 또한 주어진 정보에 대한 이용자의 반응이나 양방향성에 대한 지원을 고려해야 한다. 즉 내용을 잘 보여지도록 디자인하는 것도 중요하지만, 해당 내용을 보고 이용자의 액션을 유도하는 것 또한 디자인에 반영되어야 한다.

중앙일보 인쇄와 인터넷, 모바일 페이지의 구성

             기존의 미디어(인쇄)의 경우 한정된 지면에 일방적인 내용 고지 중심으로 디자인 되었다. 좀더 발전한 인터넷의 경우 해당 기사는 물론 관련기사, 키워드 등의 상호 연동 기능을 제공함은 물론, 댓글등의 매치로 커뮤니케이션 기능을 제공하고 있다. 나아가 해당 기사에 대하여 기자와 독자간의 커뮤니케이션도 가능하게 되었다.(메일, 기자 블로그 등) 또한 스마트 폰의 경우 이용자가 즉시 기사를 제보할 수 있는 기능을 제공하여, 이용자 또한 기사 생산자의 역할을 유도하고 있다. 이렇듯 올드미디어와 뉴 미디어의 차이는 내용의 차이가 아니라, 콘텐츠를 중심으로 이를 보여주는 미디어/디바이스의 특성을 이해하고 이를 최적화 하도록 만드는 데에 중심이 있다.

             뛰어난 디자이너라면 이러한 매체의 특성을 이해하고 각각의 기능을 효율적으로 배치하며, 기능별로 구현이 필요한 요소들을 적절한 위치에 배치하는 등의 작업을 진행해야 한다.



          (2) 원소스 멀티유스

            최근 여러 다양한 매체가 등장하면서 하나의 콘텐츠를 다양한 매체(기기)에서 구현하는 일이 일상화 되었다. 이러한 경우에는 기존의 고전적인 방식에서 벗어나 각각의 매체에 최적화된 GUI를 구성해야 한다.
아래의 경우 기존 신문과 인터넷 신문을 비교해 보았다.
 
           오프라인 신문의 경우 각 면별로 구성을 취하고 특히 1면에서는 주요 기사를 배치하면서 공간(면)의 제약으로 인하여, 주요기사의 헤드라인과 주요 내용만(요약, 기사의 앞부분)을 배치하였다. 이러한 공간적인 제약을 극복하기 위하여 각 기사의 끝부분에 해당기사의 전문이 위치한 면을 표시(이미지의 ‘5면으로 이어짐)하였다. 구독자는 이러한 링크표시를 통하여 상세한 기사를 보기 위해서는 해당 면을 찾고, 해당 면에서 원하는 기사를 다시 찾아보는, 원시적인 방식의 링크를 제공한다.



             다음 이미지는 인터넷과 모바일에서 구현되는 화면이다. 온라인 상에서는 사실상 오프라인과 다르게 페이지(면)의 제약이 없으며, 또한 하이퍼 링크를 통하여 어느 페이지에서도 한번에 원하는 콘텐츠로 직접적인 연동이 가능하다. 온라인의 경우 메인페이지는 오프라인 신문과 유사한 구성을 제공하여 오프라인 신문을 구독하던 이용자들도 별다른 불편없이 이용이 가능하도록 구성되어 있다. 또한 하이퍼링크를 이용하여 이용자가 해당 기사의 본문 접속도 클릭 한번으로 가능하도록 제작되어 있다. 또한 메뉴를 이용하여 섹션별(정치, 경제, 사회...)쉽게 이동이 가능하게 되어 있다. 모바일의 경우에는 한정된 화면의 크기로 인하여 기사의 제목과 한줄 정도의 내용, 이미지를 제공하고 있다.

       

          (3) 비 동시성

          기존 미디어에서는 일방적인 정보제공만이 이루어져 왔다. 또한 불특정 다수를 대상으로 정해진 시간에 일방적으로 정보가 제동되는 방식을 취하고 있다. TV를 예로 들자면 정해진 몇 개의 채널과 시간대에 정해진 방송을 송출하고 시청자는 이를 시청하게 된다. 즉 해당 시간에 TV를 시청하지 못하면 해당 방송을 사실상 볼 수 없거나, 방송시간 중간에 접속하게 되면 방송의 중간부터 시청하는 제약을 가지고 있다.
 
         그러나 IP-TV, 온라인상의 VOD 서비스에서는 이러한 제약을 쉽게 극복하게 해준다. 예를 들어 이용자가 원하는 시간대에 접속하여 처음부터 방송을 보거나 (VOD), 방송을 시청하다가 중간에 시청을 중단한 후 이후 다시 접속하여 이어보기 등을 할 수 있는 특성이 있다. 뉴 미디어 디자인 에서는 이러한 비 동시성을 고려하여 이용자가 이러한 특징을 최대한 활용할 수 있도록 구성하는 것이 중요한 목표중의 하나가 되었다.

          아래 이미지는 이용자가 방송을 시청하다가, 중간에 시청을 중단 한 후 다시 접속하였을 경우 보여주는 화면이다. 이용자에게 기존에 보던 장면 이후부터 시청할 것인지? 아니면 처음부터 다시 시청할 것인지에 대한 선택을 물어보고 있다. 
 

             또 다른 시각에서는 시청도중 이용자의 실수 또는 기기의 오작동으로 시청이 중단되었을 경우 재시청시 화면을 돌려가면서 기존에 시청했던 부분을 돌려가면서 찾아야 하는 불편을 덜어주는 방어적인 설계의 차원으로 볼 수 있다.

          (4) 개인화 

            불특정 다수를 대상으로 배포되는 기존의 미디어와 다르게 뉴미디어의 경우에는 이용자 개개인에 맞추어 페이지가 구성되거나 서비스가 제공된다. 뉴미디어 디자인의 경우 이와 같은 특장점을 고려하여 디자인에 반영하여야 한다.
아래 네이버어세 제공하는 ‘네이버 me’서비스의 경우 개인화된 서비스를 중심으로 페이지를 구성하여 제공한다.이를 통하여 초기페이지에서 개인화된 서비스에 대한 접근성을 높이고 이용자의 만족도를 극대화 할 수 있다.




            아래 이미지는 IP-TV에서 개인화 기능에 대한 예시이다.이용자가 방송을 시청하면서 자주보는 채널이나 콘텐츠를 등록할 수 있으며, 초기 화면에서 해당 목록에 바로 접속이 가능하게 구성되어 있다. 이러한 특징은 기존의 올드 미디어에서는 구현할 수 없는 기능이며, 많이 사용되지는 않지만 뉴 미디어에 대한 접근성이 높아지고, 이용자가 증가하고 있는 상황에서 이러한 기능들을 이용자에게 어떻게 보여주는가에 대한 고민은 디자이너의 중요한 역할이 되고 있다.




            또한 디바이스에 따라 단순하게 제공되는 화면을 넘어 다양한 입력도구를 통한 통합적인 UI를 제공하기도 한다.아래의 이미지는 방송 청취중에 리모컨을 통하여 해당 방송을 북마크(즐겨찾기)하는 기능을 설명하고 있다.해당 기능의 구현에 있어서도 이용자에게 보여주는 화면과 입력도구(리모컨)와의 모양 및 색상(원형/녹색)의 통일화로 이용자가 학습이 가능하게 구성되어 있다.




          (5) 다양한 고정 해상도

            최근 다양한 LCD사이즈와 해상도의 단말기가 출시되면서 각각의 단말기에 최적화된 서비스 개발이 필요하게 되었다. 또한 기존 PC 기반 서비스와 다르게 이용자는 단말의 해상도 조정이 불가능하다.이 경우 디자이너의 입장에서는 각 단말별로 최적화된 해상도를 고려하여 디자인 설계를 하여야 하며, 또한 범용적으로 이용이 가능하도록 설계를 하여야 한다.

            아래의 이미지는 과거부터 최근 출시된 단말기의 해상도를 정의하고 있다. 800x480의 경우에는 가로 800개 세로 480개의 pixel이 지원되며 총 384,000개의 pixel로 구성되어 있음을 의미한다. 만약 해당 해상도로 개발된 작업물의 경우 이보다 높거나 낮은 해상도에서 구현 될 경우 선명한 서비스를 제공하지 못하거나, 심지어 서비스 제공이 불가능 할 수 있다.




             이번에는 액정크기에 대하여 정의해 보도록 하자, 아래 3개의 단말기는 오른쪽부터 HTC의 디자이어HD, 삼성 갤럭시S, 구글 넥서스원 단말기 이미지다. 각각 4.3 / 4.0 / 3.7인치의 다양한 크기의 액정을 탑제 하였으나, 모두 공히 800x480의 해상도를 지원하고 있다. 이 경우에는 동일한 해상도로 개발된 서비스는 액정의 크기와 상관없이 서비스 제공이 가능하다는 것을 의미한다. 반대로 액정의 크기가 같아도 해상도가 다르다면, 서비스 제공에 문제가 발생할 수 있다는 것을 의미하기도 한다.




 

오른쪽의 이미지는 아이패드(1024x768)에서 구현된 네이버 웹툰 어플리케이션의 구동 화면이다. 이 경우 해당 해상도에 최적화된 별도의 어플리케이션을 제공하는 것이 아니라, 기존 HVGA(480x320)에 최적화된 어플리케이션을 확대하여 제공하고 있다.

이에 저해상도에 최적화된 이미지나 글씨들이 좋은 해상도로 출력되지 못하고 있는 것을 볼 수 있다. 

 

 

 

 

 

 

 

 

  

다음에서 보는 이미지는 아이폰(480x320)와 아이패드(1024x768)에서 구현된 SNS게임 We Rule의 화면이다.해당 게임의 경우 저 해상도용 어플리케이션과 고해상도용 어플리케이션을 구분하여 개발하여, 각각의 단말에 최적화된 어플리케이션을 이용자가 다운로드 받아 이용할 수 있도록 제작하였다. 또한 각각의 해상도에 맞도록 GUI를 수정하여 각 단말에서 이용자가 최적화된 경험을 할 수 있도록 지원하고 있다.



          (6) 모든 방향의 지원

             스마트폰 및 태블릿 PC의 경우 기존의 디바이스와는 다르게 가로-세로화면을 모두 지원한다. 이는 디자이너의 입장에서 이용자의 선택에 따라 다양한 화면을 제공해야 함을 의미한다. 1)가로와 세로화면을 동일하게 구성할 것인가-폭만을 조절하여-아니면 2) 가로와 세로화면을 다르게 구성할 것인지. 그렇다면 이 경우에도 단순하게 나열되는 콘텐츠의 개수 또는 기본요소의 가감으로 변화를 줄 지, 스플릿 뷰를 이용하여 추가적인 기능을 노출 할지 등에 대한 UI적인 결정이 필요하다. 

           아래 이메일 본문기능의 경우 세로화면에서는 이메일의 본문만을 보여주지만, 가로화면에서는 스플릿 뷰를 통하여 화면 왼쪽에 메일 리스트가 제공되는 UI를 취하고 있다.


 해당 내용은 ‘3. User Interface의 디자인 사례’에서 상세하게 다루도록 한다.

 

 

 

1. 개요

        최근 각광받고 있는 스마트폰의 경우에는 통상적으로 두가지 방법으로 서비스 이용이 가능하다. 하나는 기존 PC기반의 인터넷 이용과 유사한 ‘브라우져’를 통한 접속과 다른 하나는 ‘어플리케이션’을 다운로드 받아 스마트폰에 설치 한 후 접속시 이를 구동하여 이용하는 ‘어플리케이션’ 방식의 서비스로 나누어 진다.

        이 장에서는 브라우져를 통하여 인터넷을 이용하는 ‘모바일 웹’방식에 대하여 디바이스별로 공부하도록 한다.
        특히 기존 PC기반의 브라우져 서비스와 저해상도의 스마트폰 브라우져서비스 그리고 고해상도의 태블릿PC의 브라우져서비스 비교를 통하여,이종 단말간 UI의 차이점을 이해하고. 동일한 서비스가 다양한 해상도의 디바이스에서 구현될 때 UI의 통합이 우선인지, 각 단말별 최적화가 우선되어야 하는지에 대하여 서비를 사용해 보고 이에 대하여 토론해 보도록 한다.




2. 이종 기기간의 UI가 통합된 경우


     1) 파란 : 웹과 태블릿PC의 UI 통합화

          파란닷컴(http://www.paran.com)의 경우 주된 Target을 PC가 아닌 새로운 디바이스 이용자로 잡고, 과감하게 웹상의 UI도 태블릿 PC에 최적화된 UI로 변경하였다. 아래의 이미지를 보면 스마트폰 상에서의 모바일 웹은 주요 서비스와 개인화 서비스 일부를 제외하고는 단순하게 메뉴 중심으로 UI를 구성하였다.

        좌로부터 파란의 스마트폰 모바일 웹, 아이패드 모바일웹, PC웹 화면

          그러나 태블릿PC에서 구현되는 화면과 PC웹상에서 구현되는 화면은 차이가 없는 것을 알 수 있다.
특히 파란의 PC웹 화면의 경우 다른 포털과는 다르게 이미지(thumbnail image)의 색상이나 크기, 각 서비스명의 위치, 행간등이 웹 전용이 아닌 태블렛 PC 사용자를 위하여 상당히 배려된 GUI를 볼 수 있다.
         이 경우 이용자의 입장에서는 PC웹에서 경험하고 학습한 내용을 그데로 태블렛 PC에서 사용할 수 있는 장점을 가지게 된다. 물론 반대의 경우에도 추가적인 학습 없이 사용할 수 있다. 그러나 이러할 경우 PC웹 시장에서는 경쟁사의 PC웹에 비하여 빈약한 구성을 보이게 되는 단점도 가지게 된다.

          이번 파란의 예시를 보면서 아래와 같은 부분에 대하여 분석하고 토론하도록 한다.

1. 마우스를 사용하는 PC웹과 손가락을 사용하는 태블릿 PC의 GUI구조는 상당이 상이하다. 파란의 사이트 디자인에서 태블릿PC 이용자를 고려한 부분을 찾아보자. (행간, 메뉴구성 등)
2. 1과 같은 고려는 그래픽 디자인 부분에서도 나타난다. 이러한 부분을 찾아보고 논의해 보자. (아이콘 색상 크기 배열 등, 썸네일(Thumb nail) 등..



     2) 네이버 : 웹의 화면을 모바일로사용

      네이버(http://www.naver.com)의 경우 모바일 디바이스를 위한 별도의 웹페이지를 구성하지는 않고 현재의 PC웹 페이지를 그대로 모바일에서도 제공하고 있다. 이러한 방식은 국내 대부분의 포털에서 운영하는 방식이기도 하다. (물론 태블릿 PC등 신종기기의 보급이 확대되면 별도의 UI가 적용된 사이트가 나올 것으로 예상된다.)
      이 경우 태블릿 PC를 이용하는 이용자의 입장에서는 웹상에서 경험하고 학습해 왔던 내용을 기반으로 추가적인 학습 없이도 뉴 디바이스에서도 사용할 수 있다는 장점을 가지고 있다. 또한 서비스 제공자의 입장에서도 추가적인 비용 없이 서비스를 유지할 수 있는 사업상의 장점도 존재한다.
      그러나 마우스 커서를 기반으로 설계된 화면을 태블릿 PC에서 이용하기에는 상황에 따라 불편이 따르게 된다.

 2. 기기별로 독자적인 UI를 구성하는 경우

     (1) 야후 : 각각의 디바이스에 최적화된 UI 구축

      야후닷컴(http://www.yahoo.com)의 경우 이종기기간 UI 통일보다는 각각의 device에 최적화된 화면을 구성하여 보여준다.

     이전 페이지의 이미지와 같이 야후 닷컴의 경우에는 스마트폰, PC 웹, 태블릿  PC에서 구현되는 화면의 UI가 모두 상이하게 구성되어 있다. 이 경우 디바이스별 이용행태를 반영하여 각각의 디바이스의 특성에 맞춘 최적화된 UI를 제공할 수 있게 된다. 다만 디바이스별 상이한 UI와 서비스의 제공은 이용자의 입장에서 새로운 디바이스에서 접속할 때마다 새롭게 학습을 해야 한다는 부담감을 가지게 될 수 있다.

     또한 운영의 입장에서는 각 디바이스별로 개발 및 유지보수가 필요하며 페이지 운영(편집)에서도 추가적인 인력이 투입되는 문제도 고려되어야 한다.