728x90


이 책을 본지는 좀 되었는데,
얼마전 페북과 트위터 관련 책을 좀 사러 서점에 갔더니, 버젓이 베스트 셀러 자리에 있기에 리뷰쓴다.
 

회사에서 하는 독서통신에서 선택해서 본 책인데...
(그 덕분에 문제를 풀기 위해 눈물나는 정독을...)


결론은...

1. 번역이 최악이다. 구글 번역기로 돌려도 이 정도는 나올 듯 하다.
      (아마도 필자도 쇼셜 미디어를 이해하지 못한 상황에서 번역한 듯)
이놈의 번역 때문에 한줄 한줄이 이해가 가지 않는다.          
          2. 출판사 신뢰도가 완전히... 이후 '페이스북 이펙트'라는 책을 살까말까    
순전히 출판사 때문에...                                                
 3. 책을 사려면, 온라인 상의 서평을 꼭 보고 구입해야 한다는 교훈도



   
    * 소셜미디어 마케팅: 기업 마케터를 위한 단계별 소셜미디어 마스터 전략


    * 저   자 : 데이브 에반스 저/최윤석 역
    * 출판사 : 에이콘 출판사 
    * 출판일 : 20010-04-28
    * 페이지 : 468면 
    * 정   가 : 25,000원  -> 22,500원
    * 규   격 : 188*250mm
    * 무   게 : 943g 
    * 관   련 : 국내도서 > 비즈니스와 경제 > 마케팅/세일즈 > 마케팅/브랜드
    * ISBN   : 9788960771314













[Yes24 리뷰]

http://www.yes24.com/24/goods/3787239?scode=032&OzSrank=7

[목차]

[1부] 소셜미디어의 탄생

1장. 반작용
초창기의 소셜 네트워크
반격의 시작
생각지도 않던 곳에서 비롯된 엄청난 성장
이 사실이 의미 있는 이유
측정과 공식화가 가능한 반작용
신뢰
요점

2장. 마케터의 딜레마
기피의 근원
초기의 온라인 입소문
소셜 웹의 개화
닐슨이 제시하는 길
요점

3장. 그렇다면 소셜미디어는 '무엇'인가?
소셜미디어의 정의
소셜미디어는 정확한가?
소셜미디어와 마케팅
안내판으로서의 소셜미디어
구매 퍼널에서 소셜미디어의 영향
소셜 피드백 주기
소셜미디어의 요소
요점

[2부] 첫째 달: 소셜 마케팅 준비

4장. 첫째 주. 웹 2.0: 소셜 웹
소셜 네트워크: 집단성의 힘
사노프의 법칙
멧캘프의 법칙
리드의 법칙
소셜미디어는 여기서 시작한다
첫째 주: 소셜미디어 참여
월요일: 이미 쓴 말
블로그와 위키 사용
소셜 컨텐츠 찾기
화요일: 웹은 멀티미디어와 함께 살아난다
화요일의 한 시간 연습
수요일: 마이크로블로그와 태깅
목요일: RSS
금요일: 소셜 네트워크
금요일의 한 시간 연습
요점

5장. 둘째 주. 소셜 피드백 주기
마케팅에서의 소셜미디어
고려와 구매 단계
소비자가 생성한 미디어
소셜 피드백 주기 만들기
소셜 피드백 주기
인지 단계
구매 시점
게임을 시작하라
소셜 피드백 주기
요점

6장. 셋째 주. 접점 분석
접점과 소셜 웹
접점의 확인
접점의 정량화
접점 데이터 수집
데이터 정리
데이터 평가와 순위 매기기
데이터 분석
다음 단계 계획
요점

7장. 넷째 주. 영향력과 측정
영향력과 소셜 웹
대화의 정량화
영향력과 메트릭스
영향력의 적용: 소셜미디어
요점

[3부] 둘째 달: 소셜미디어 채널

8장. 첫째 주. 소셜미디어 캠페인 구축
소셜미디어는 어떻게 다른가?
소셜 피드백 주기의 정량화
접점과 피드백의 결합
소셜미디어 메트릭스 적용
소셜미디어 채널
채널의 이해
소셜미디어와 구매 퍼널
구매 시점과 그 이후
계획의 상세화
프레임워크 조합
요점

9장. 둘째 주. 소셜 플랫폼
소셜 네트워크
개인용 소셜 네트워크
사업용 소셜 네트워크
참여가 전부
화이트레이블 플랫폼
고객 지원, 게시판, 커뮤니티
고객 커뮤니티
소셜 플랫폼을 이용한 작업
요점

10장. 셋째 주. 소셜 컨텐츠: 멀티미디어
광고와 소셜 웹
멀티미디어 채널
블로그
기업 블로그
마이크로블로그
사진과 동영상 공유
오디오와 비디오 팟캐스트
실전 소셜미디어 마케팅 기획
소재의 종합
요점

11장. 넷째주. 소셜 컨텐츠: 리뷰, 평점, 추천
합의의 도달
합의와 마케팅
평점
리뷰
추천
모두 한 데 모으기
인기 투표에서 이기기
투표 과정
추천 적용
지름길
계획 수립
요점

12장. 다섯째 주. 소셜 인터랙션
점 연결
소셜 웹 정보 관리
행사와 일정
SMS와 모바일 커뮤니케이션
상태 알림과 베이컨
소셜 웹 정보와 마케팅3
요점

[4부] 셋째 달: 계획 완성

13장. 첫째 주. 목표, 메트릭스, ROI
소셜미디어 메트릭스의 기준
목표와 청중의 정의
메트릭스를 주도하는 행동
무엇을 어디서 측정하는가
소셜미디어 메트릭스 선택
실제 메트릭스
컨텐츠 메트릭스
관련성 메트릭스
영향력 메트릭스
현실세계와의 연결
청중
영향력
참여
충성도
행동
측정 계획
월요일: 사업 목표
화요일: 회사의 청중
수요일: 컨텐츠 메트릭스
목요일: 관련성 메트릭스
금요일: 영향력 메트릭스
요점

14장. 둘째 주. 소셜미디어 계획 발표
경로 선택
사업 목표 확인
청중 정의
사례 선택
월요일: 토대 구축
기회 정의
소셜 피드백 주기
접점 지도
순수 추천고객 지수
화요일: 방법 선택
채널 선택
경청
확산
수요일: 채널 선택
메트릭스 선택
시장 지위
브랜드 건전성
성장과 수익
목요일: 메트릭스 확인
계획의 작성과 발표
금요일: 정리
요점

부록 A. 워크시트
워크시트: 2부
워크시트: 3부
워크시트: 4부

부록 B. 추가적인 소셜미디어 메트릭스



[출판사 리뷰]

틀에 박힌 기존 방식에 익숙한 전통적인 기업 마케터들이 꼭 읽어야 할
소셜미디어 마케팅 필독서
성공적인 통합 소셜 미디어 전략 개발을 마스터하는 단계별 완벽 가이드

회사에 대해 효과적인 입소문을 유발하라. 포괄적이고 완벽한 지침을 통해 브랜드, 제품, 서비스, 회사에 대한 고객 대화의 경쟁력을 높일 수 있도록 소셜 미디어를 마케팅 계획의 중요한 부분으로 만드는 방법을 배운다. 측정 가능한 결과를 유도하는 대화에 귀기울이고 참여함으로써 어떻게 현재의 마케팅 노력을 확장하고 소셜 웹을 타진할 수 있는지 살펴보자.

이 책의 포인트

성공적인 소셜 미디어 캠페인을 사내에서 개발해 효과적으로 발표하라
순수한 소셜 웹 참여자가 되는 방법을 배워 보라
회사와 고객 사이의 모든 접점을 평가하면서 핵심적인 대화를 시작하는 사람의 지도를 그려라
소셜 미디어 마케팅이 가장 효과적인, 구매 퍼널의 고려 단계까지 접근하라
블로그, RSS 피드, 팟캐스트, 동영상 및 사진 공유 등 쓸 수 있는 도구는 모두 활용하라
순수추천고객지수 등 소셜 미디어 측정 도구를 이용하고 바자보이스, 블로그펄스, 사임포니 등의 플랫폼에서 얻은 메트릭스를 적용하라
소셜 미디어 프로그램을 런칭하고 결과를 측정할 때 모범 사례를 학습하라
마이스페이스, 페이스북, 링트인, 트위터 외에 유튜브, 시스믹, 이벤트풀, 프렌드피드 등 소셜 사이트, 숙련된 마케터의 관점에서 얻은 서비스의 포괄적인 조망
소셜 미디어를 현재의 마케팅 프로그램에 직접 통합할 수 있는 도구
배워야 할 성과와 피해야 할 실수를 예증하는 실제 사례

이 책의 활용법

이 책은 다양한 방식으로 사람마다 다양하게 활용할 수 있게 고안했다. 독자 중에는 이미 소셜미디어를 경험해 본 사람도 있지만 전혀 모르는 사람도 꽤 있을 것이다. 바로 뛰어들고자 하는 독자도 있는 반면 소셜미디어를 기존에 작동하고 있는 마케팅 프로그램에 통합하는 계획에 이름을 올리기 전에 소셜미디어가 도대체 무엇인지 이해하고 싶은 독자도 있을 것이다. 이 책은 그 모든 이를 위한 책이다.

아무 장이나 펼쳐 이 책을 읽기 시작해도 좋지만, 여기 몇 가지 출발점과 팁을 제안한다.

소셜미디어에 이미 편안함을 느끼기에 바로 뛰어들 생각인가? 사회적인 평판을 잘 처리하는 수준에 올라있다면 3부 '소셜미디어 채널'로 시작해라. 주요 소셜미디어 옵션을 재빨리 검토한 다음 바로 메트릭스와 계획 수립으로 들어갈 것이다. 이미 알고 있는 바를 지원하는 유용한 통찰력과 모범 사례를 담고 있기 때문에 필요한 시점에 다시 돌아와 1부와 2부를 읽어라.

시작할 준비는 됐지만 일단 현재 하고 있는 일이 소셜 웹에서 발견할 대화를 어떻게 유도하고 있는지 이해하고 싶다면 2부 '소셜미디어 캠페인 준비'로 시작해라. 소셜미디어가 왜 출현하게 됐는지 궁금하다면 1부도 재빨리 살펴보라.

숙련된 마케터라면 1부 '소셜미디어의 탄생'으로 시작하기를 제안한다. 처음 세 장은 그 이후 장의 길이의 절반 정도로 짧다. 하지만 소셜미디어의 '사업 상 활용'에 대한 기본적인 규칙을 설정하고 소셜미디어에서 새로운 스킬을 구축하고자 하는 전통적인 마케팅 전문가의 탄탄한 이행을 돕는다. 기차칸이나 비행기 안에서 읽어도 좋지만 운전 중에는 절대 읽지 말아라.

마케팅에 정말 처음이라면? 소셜미디어를 이해해 스스로 사례를 개발하려는 초심자일 뿐이라면? 이 책은 분명히 초심자를 위한 책이다. 현재 기본적인 마케팅 계획만 있다고 가정하겠다. 그렇지 않다면 마케팅 전문가 샤마 하이더Shama Hyder가 작성한 온라인 기획 가이드를 이용해 일단 계획이라도 하나 만들고자 할 수도 있다. http://www.afterthelaunch.com/에서 가이드를 참조하길 바란다.

어디서 시작하든 간에 2부로 시작하면 각 장에는 일주일 분의 연습문제가 포함돼 있으며, 하루 한 시간 정도면 완료할 수 있다. 연습문제에 접근하는 방식에 따라 결과는 실제 소셜미디어 기획일 수도 있고 기획이나 RFP에 대한 프레임워크일 수도 있다. 이 연습문제를 건너뛰고 싶다면, 즉 어쩌면 '이론과 이해' 때문에 책을 읽고 있거나 아마도 단지 소셜미디어의 개요와 마케팅에 대한 적용을 원한다면 건너뛰어도 상관없다. 제시된 문제, 개념, 기술은 여전히 논리적으로 흘러갈 것이다. 그래도 실수는 하지 말라. 연습문제를 풀지 않는다면 기획서가 나오지는 않을 것이다. 그럼에도 불구하고 소셜미디어에 대한 탄탄한 이해와 현대 마케팅에서 왜 중요한 일부인지에 대한 이유를 얻게 될 것이다.

마지막으로 소셜미디어 초심자에게 한 마디 하겠다. 소셜미디어처럼 동적이고 광범위한 주제에 대해 글을 쓸 때에는 언제나 위험요소가 도사린다. 정의를 하는 데 도움을 주는 초기의 선구자가 있는 반면 현재 출현하는 원칙에 접근하는 방식은 여러 가지가 있다. 개인적인 희망은 고객이 참여, 투명성, 정량 측정이라는 중요한 문제에 대한 충고의 중요성을 이해하도록 돕는 가이드일 뿐일지라도 이 책이 유용하다고 생각하기를 바란다는 점이다. 이 세 가지가 제대로면 나머지 부분은 제자리를 찾기 마련이다.

저자 서문

웹이 텔레비전 채널이라기보다는 오히려 지식 공유의 상호적인 바다가 되는 꿈을 꿨고 (여전히) 그 꿈을 꾸고 있다. 우리가 친구와 직접 보고 듣고 믿고 알아낸 것들로 만들어진 따스하고 친근한 환경에 동화되는 상상을 해본다. 웹의 정보를 공유하고 협업해서 우리의 친구와 동료를 더 잘 이해함으로써 서로를 더 가까운 사이로 만들어주면 좋겠다.
- 1995년 팀 버너스 리

이 책은 소셜미디어 스킬과 기존의 확립된 역량에 대한 전문성을 결합하고자 하는 마케터를 위해 쓰여졌다. 이 책의 상당 부분은 '직접 통제할 수 있는 범위 밖에 있는' 다른 사람들이 자신을 어떻게 생각하는지에 따라 대체로 성공이 결정되는 직책인 마케터이자 제품 관리자로서 쌓아온 개인적인 경험을 근거로 한다. 소셜 웹은 그런 식으로 돌아간다.

소셜미디어를 탐구해 '사업 목적으로' 활용하려는 동기는 광고와 마케팅의 변화율에 압도된 동시에 고객이 생성한 정보가 인터넷을 떠나 내게 흘러오던 그 순수한 쇄도에 깜짝 놀랐던 어느 날 찾아왔다. 다음 세대가 충분한 정보를 확보한 채 선택을 할 수 있을 만한 양의 정보를 이미 구할 수 있는, 방해 받지 않는 세상에서 성장하는 모습을 보고 싶다고 그 날 생각을 굳혔다. 내 아들은 당시 2살 정도였으며 이제 막 첫 아이맥을 제대로 사용하기 시작했다.

우리들 대부분이 하루 종일 하고 있는 마케팅이란 일은 지난 몇 천 년 간 구매자와 판매자를 연결시키는 입소문 사이의 대화에 그 근원을 두고 있다. 평판은 경험을 기반으로 구축된다. 매스컴과 현대적인 광고, PR의 등장과 함께 한 때 영업 주기를 지배했던 개별적인 의견은 서서히 사장됐다. 전문적으로 제작한 광고, 태그라인, 파워포인트 연단은 저마다 아주 일부는 메시지에 대한 통제권을 장악하며 어느 샌가 지배적인 위치에 올랐다.

이제 추는 다시 균형을 되찾고 있다. '개인'의 의견이 다시 근본적인 가치를 주장하는데, 이번에는 온라인에서 이뤄지는 '집단적인' 대화를 구축하면서 그 역할을 통해 표현되고 있다. 소셜 네트워크, 사진과 동영상 공유, 블로그, 트위터와 시스믹(Seesmic) 같은 초기의 대화 커뮤니티 등 소셜 웹은 고객의 의견을 거대한 방식으로 전면에 내세운다.

수많은 CMO가 결과적으로 어려운 입장에 처하게 됐다. 모든 단계에서 마케터는 전통적인 채널의 복잡한 세분화에 대처할 뿐 아니라, 이제 소비자가 생각나는 대로 자체적인 버전의 브랜드를 리믹스하고 고쳐서 말한 다음 다시 공개함에 따라 브랜드 커뮤니케이션을 직접 장악하게 되는 현실에 직면했다. 메시지에 동의하고 메시지를 확장할 때는 아주 좋다. 그렇지 않을 때는 순식간에 엉망이 된다.

인터넷이 제공하는 개인적인 권력과 자유를 근거로 소비자는 적극적으로 서로 연결돼 자동차와 건강부터 스크랩 기술과 풀장의 화학물까지 모든 정보를 공유한다. 이 과정에서 마케팅 노력을 강화하거나 스스로의 경험과 생각을 서로 직접 공유하면서 마케터는 스스로의 게임에 희생되고 있다. 소비자는 광고보다 서로 간의 대화를 신뢰하는 경향이 있기 때문에 마케터는 이제 마케터, 광고 대행사, PR 업체가 거의 통제할 수 없는 포럼에서 정기적으로 자신들의 메시지가 사실 확인을 위해 대기 상태로 있다는 사실을 발견하게 된다. 이런 산업에서 이전에는 대부분 통제하는 데 이용됐던 것이 이제는 게임을 바꿔놓는 요인이 됐다.

이 책은 소셜 웹을 '사업 상의 이익'에 맞게 '적절히' 이용하는 방법을 학습하자는 목적이며 소셜 웹에 힘을 부여하는 숨은 행동을 수용해 사업과 마케팅 계획의 근간이 되게 함으로써 '마케터로서 효과적으로 참여하는' 방법에 관한 문제를 다룬다. 스스로의 대화가 아닌 대화를 통제할 수는 없다는 점에서 '통제권을 포기하는 일'과 동시에 자신에게 중요한 커뮤니티에서 존중 받는 일원이 됨으로써 '영향력을 얻는 일' 사이의 근본적인 역설에 관한 책이다. 참여와 영향력 사이의 긴밀한 관계를 사업 상으로 이해해 활용하고, 궁극적으로 그 이후에 있을 일에 대비하고 그 일을 포용하자는 것이 이 책의 핵심이다.

옮긴이의 말

이 책은 두 가지 장점을 지니고 있다.

하나는 실무적인 측면에서 회사의 마케팅 담당자가 3개월이라는 한정된 기간 내에 단계적으로 소셜미디어를 활용한 마케팅 업무를 수행하는 데 도움이 된다는 점이다. 모호하고도 포괄적으로 소셜미디어를 정의하는 책은 많지만, 현실적으로 현업에서 활용할 만한 프로세스나 프레임워크를 제공하려는 책은 드물다. 이제 막 소셜미디어 마케팅이 제도화되슴 시점에서, 기본 틀을 제공하는 이 책을 다소 과감한 시도라고 생각할지도 모른다.

둘째는 오랜 기간 마케팅 실무에 길들여진 종사자에게 소셜 마케팅이라는 떠오르는 분야에 입문할 수 있는 기회를 제공한다는 점이다. 전통적인 사고체계에 맞춰 경험을 쌓은 마케터들에게 소셜미디어는 낯선 개념일 수 있으며 기존의 매체에서 통하던 방식이 더 이상 유효하지 않다는 사실이 매우 어렵게 다가올지도 모른다. 따라서 저자가 겪고 있는 새로운 현상에 대한 반응은 급변하는 환경에 마주쳐 당황하고 있는 기존의 마케터들에게도 많은 시사점을 남긴다. 과거의 경험에 비춰 고객과의 커뮤니케이션 과정에 과도하게 개입한다든지, 소셜미디어의 특성을 이해하지 못한 채, 매체만 남용해서 스패머로 오인받는 문제 등 이 책의 도움을 얻어서 피할 수 있는 함정은 많다. 그러면서도 한편으로는 퍼널, 순수 추천고객 지수, 접점 등 기존 마케터에게 친숙한 개념으로 소셜미디어라는 새로운 현상을 설명함으로써 경험과 현상 사이의 괴리도 메워준다.

원저를 집필한 시점으로 인해 트위터 등 소셜 웹에서도 좀 더 최근에 나타난 현상은 다소 깊이 면에서 한계가 있을 수 있지만, 소셜미디어 전체를 조망해 실무에 활용하기에는 무리가 없으리라 생각한다. 그리고 시기 문제와 관련해 업데이트 부분은 최근 관련된 좋은 책들이 많이 나오고 있으니 참고할 수 있을 것이다.

결론적으로 이 책은 기존 마케터에게 소셜미디어를 학습해서 정해진 기간 내에 단계적으로 실무에 반영할 수 있는 좋은 지침이 될 것이다.

728x90
728x90

















 

 

 

 

728x90

728x90

해당 내용은 웹 및 모바일 기획 및 디자인에 처음 입문하는 학생 및 초보 기획자를 대상으로 작성된 내용입니다.


이에 일부 용어는 한글화 또는 쉽게 풀어 사용되었습니다.
또한 일부 서비스의 경우 기획 의도와는 다르게 설명을 위한 목적으로 분석된 내용들도 있습니다.


이점 고려하여 내용을 이해해 주시기 바랍니다.
728x90
728x90





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), 방송을 시청하다가 중간에 시청을 중단한 후 이후 다시 접속하여 이어보기 등을 할 수 있는 특성이 있다. 뉴 미디어 디자인 에서는 이러한 비 동시성을 고려하여 이용자가 이러한 특징을 최대한 활용할 수 있도록 구성하는 것이 중요한 목표중의 하나가 되었다.

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

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

728x90
728x90



          (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의 디자인 사례’에서 상세하게 다루도록 한다.


 

 

 

728x90
728x90





1. 개요

     최근 스마트폰과 태블릿 PC의 보급이 급속화 되면서, 해당 디바이스에 대한 UI의 중요성이 대두되고 있다. 해당 디바이스의 경우 기존 PC에서 사용하는 방식과 큰 차이를 느끼지 못하지만, 해당 기기에 최적화된 차별화된 UI 요소들이 지원되고 있다.
여기에서는 스마트폰과과 태블릿PC에서 구현되는 주요한 UI구성에 대하여 학습하고, 해당 요소들이 어떠한 개념을 가지고 서비스에 적용되는지를 학습하도록 한다.



2. Bar

     1) The Status Bar

       상태바는 해당기기의의 중요한 정보 및 상태를 보여주는 바이다. 아래와 같이 전화 및 무선접속 상태, 베터리 잔량, 현재 시간 등 해당 기기를 사용하면서 이용자가 꼭 알아야 하는 중요한 정보를 제공하는 부분이다.
       아래 이미지는 아이패드와 아이폰, 옵티머스의 상태바를 보여준다. 안드로이드 개열의 경우에는 기본정보 이외에서 이용자가 항상 호출을 필요료 하는 어플리케이션 등을 보여주어 어느 화면에서도 즉시 호출이 가능하도록 지원하고 있다. 또한 GUI 적으로는 상당에 작게 위치하여 공간을 크게 차지하지 않으며, 시각적으로도 돋보이지 않게 처리하여 다른 어플리케이션을 구동할 때 사용자의 주의를 끌지 않게 디자인 되었다.

        아래 단말기별 상태바를 보자, 공통적으로는 단말기의 통신상태와 시간 그리고 베터리의 전여량이 제공되고 있다. 추가적으로 아이패드의 경우 가로세로 전환에 대한 잠금장치 설정여부가 제공되고 있으며, 아이폰의 경우에는 접속한 통산사표시 및 알람 설정여부가 추가적을 제공되고 있다. 또한 안드로이드 계열의 경우 추가적으로 현재 구동되고 있는 주요 어플리케이션에 대한 표시가 이루어지고 있다. (바 좌측) 화면에 나오는 3가지는 구동중인 어플리케이션 제어, 진동전환, 데이터 사용량 알림 어플리케이션인데, 이용자의 입장에서는 상시 구동되고 지속적으로 이용이 필요한 어플리케이션 들이다.


      이러한 주요한 목적을 가지고 제공되는 만큼 어플리케이션 또는 브라우져 구동시 상태바는 가능하면 숨기지 않고 제공하는 것이 원칙이다. 만약 어플리케이션 구동시 상태바가 숨겨진다면, 사용중 베터리의 잔여량이 얼마남지(충전을 필요로 한다는 사실) 않았다거나, 전화 수신에 문제가 발생한 상황(전화를 받을 수 없거나)이에서 이용자가 해당 상황을 알지 못한다는 것은 치명적인 문제를 발생시킬 수 있다. 다만 게임과 같이 풀스크린 화면 제공이 필요한 경우에는 예외로 한다.

      상태바를 제공하지 않고 있는 두 가지 예시를 보자, 해당 어플리케이션을 구동하는 동안 이용자에게 어떠한 불편을 제공하는지 이해할 수 있을 것이다. 그러나 통상적으로 전체화면을 사용하는 게임의 경우에는 예외로 처리한다.




     2) Navigation Bar

     네비게이션 바는 보통 현재 구현하고 있는 어플리케이션 등의 화면 제목출력과 콘트롤 할 수 있는 주요 버튼을 보여준다.오른쪽 2개의 바를 보면 UI상의 공통점을 찾을 수 있다.

     해당 바의 위치는 상태바 하단, 응용 프로그램 상단에 위치한다. 또한 상태바 중심에는 해당 어플리케이션의 현재 메뉴명을 표시한다. 또한 제목의 왼쪽에는 뒤로가기(back button)버튼을 제공한다. 해당 버튼에는 이전페이지의 제목을 표시한다. 위 두가지 기능의 경우에는 이용자가 새로운 페이지로 이동할 때마다, 새로운 페이지의 제목과 이동전 페이지의 제목으로 변경되어야 한다.
만약 어플리케이션의 특성상 많은 기능을 제공하여야 할 경우에는 해당 기능보다는 툴바(Tool Bar)을 사용하여야 한다.

     그러나 네비게이션  바는 아이패드 어플리케이션에서는 많이 사용되지 않는다. 이는 해당바의 주된 목적이 좁은 화면에서 이전 페이지와의 이동 및 위치한 페이지에서 제어를 용이하게 하기 위해 제공되는 이유이다. 즉 스마트폰에 비하여 상대적으로 해상도가 높은 태블릿 PC 계열에서는 스플릿 뷰 등을 통하여 한 화면에 제공이 가능하기 때문이다.




      위 화면은 아이폰의 메일어플리케이션이다. 좁은 화면으로 인하여 하위메뉴 이동시 페이지가 변경되고 있다. 또한 이에 맞추어 네비게이션 바도 변경되고 있는 것을 알 수 있다. 그러나 아래 아이패드의 경우 팝오버와 스플릿 뷰를 이용하여 페이지 변환 없이 서비스 제공이 가능하다.




     3) Tool Bar

      툴바는 현제페이지에서 개체와 관련된 작업을 수행하는데 필요한(자주 사용되어지는) 컨트롤이 포함되어 있는 바를 정의한다. 해당 툴바는 화면 하단 또는 상단에 모두 사용할 수 있다.


     툴바의 경우 좁은 공간에 많은 아이콘이 제공되는 경우가 많다. 이 경우 너무 많은 아이콘을 밀접하게 배열하였을 경우 오작동(옆의 다른 아이콘을 클릭하는 등)을 유발할 수 있다. 이에 각각의 아이콘간 터치 영역은 최소한 44x44pixel을 유지하도록 한다. 또한 툴바에서 제동되는 아이콘은 통일성을 유지하도록 한다.



     마지막으로 툴바는 현재의 페이지에서 이용할 수 있는 작업의 집합이다.(회전, 지우기, 검색, 이전페이지, 다음페이지, 상위이동 등) 만약 해당 페이지에서 다른 모드간의 전환이 필요하다면 ‘툴바’가 아닌 ‘탭바’를 사용하여야 한다.




     4) Tap Bar

      탭바의 경우 유선웹에서의 메뉴바를 생각하면 이해가 쉽다. 해당 어플리케이션이 지원하는 메인(주요)카테고리를 제공하며, 해당 카테고리간(또는 하위메뉴)의 이동을 한번에 지원하기 때문이다.

     왼쪽 시계에서 제공되는 탭바의 경우 하단에 위치하여 어플리케이션에서 제공하는 4가지 주요 기능(세계시간, 알람, 스톱워치, 타이머)간의 접근을 원활화게 지원한다. 

      공간의 활용도 차원에서는 아이폰을 기준으로 탭바 영역에 한번에 5개 이내의 버튼수를 권장(이유는 툴바에서 설명한 내용과 동일하다.)하고 있으며, 아이콘을 설명하는 텍스트를 삽입한다. 또한 선택된 아이콘(메뉴)의 경우에는 해당 아이콘의 배경 및 이미지를 밝게 처리한다.  




 





      오른족의 이미지와 같이 아이폰에서 5개 이상의 응용프로그램(메뉴)이 있을 경우에는 4개를 표시하고 마지막을 추가(more)아이콘으로 설정할 수 있다.
다만 아이패드의 경우 7개 이내로 개수를 제한하고 있으며, more기능은 사용하지 않는다.






      아래의 이미지는 지금까지 학습한 다양한 바(bar)들이 효율적으로 배치된 예시이다. 이러한 사례들을 찾아 논의해 보도록 한다.


728x90
728x90





    1) Popover

     팝오버는 사용자가 어플리케이션을 이용하는 과정에서 네비게이션 바의 컨트롤 버튼을 클릭하거나 화면에서 지정된 링크를 클릭 하였을 때 기존 화면위에 오버되어 출력되는 기능이다. 해당 기능은 아이패드 등 태블릿 PC에서만 지원되며, 기존 스마트 폰 사용시 반복적으로 화면을 오고가는 불편을 해결해 주는 기능이다.

     오른쪽 이미지는 일정을 입력하는 과정에서 반복기능을 호출하는 화면이다. 배경에 일정이 출력되어 있는 상태에서, 어떠한 주기로 일정을 반복할까에 대한 옵션을 팝오버로 출력해 주고 있다. 이러한 기능을 통하여 메인화면이 유지된 상태에서 각각의 옵션을 쉽게 호출하고 닫을 수 있는 UI를 제공한다. 또한 팝오버 화면에서는 아래와 같이 테이블, 이미지, 지도, 텍스트, 웹 등의 다양한 구성물을 출력해 준다. 또한 팝오버는 ‘닫기’ 버튼을 지원하지 않으며, 더 이상 필요가 없을 경우(위 일정예시의 경우 이용자가 반복옵션중 하나를 선택하면 자동으로 닫히게 된다.) 자동으로 닫을 수 있도록 설계되어야 한다.




     팝오버의 주요한 특징은 아래와 같다.

     분할된 화면으로 되어잇는 어플리케이션이 세로모드로 전환되었을 경우 가로모드의 왼쪽 부분을 팝오버로 처리해 준다. 아래 메일서비스와 같이 가로모드에서는 목록과 본문을 동시에 출력하나, 세로모드의 경우에는 목록을 팝오버 처리한다.

또한 팝오버는 화살표를 가지고 있으며, 해당 화살표가 팝오버를 출력시킨 요소(버튼, 아이콘 등)를 가리켜야 한다. 이를 통하여 사람들은 팝오버가 어디서 왔는지 그리고 어떤 작업 도는 어떤 객체와 연관되는지에 대한 도움을 제공한다.

팝오버는 한 화면에서 동시에 하나만 제공이 가능하다. 또한 팝오버의 사이즈는 최소 너비 320point, 최대 600point이내에서 구현되어야 한다. 다만 팝오버의 길이에는 제한이 없다.































      2) Split View

     스플릿 뷰(Split View)는 용어 그대로 화면을 좌우로 분할하려 두 개의 화면으로 구성한 것을 의미한다.
     통상적으로 왼쪽이 영역에는 1) 메뉴 2) 목록 등의 고정된 내용을 출력해 주고, 오른쪽에는 왼쪽영역에선 선택된 대용에 따라 세부내용 또는 하위 정보/메뉴를 보여준다. 또한 화면 분할 차원에서는 통상적으로 왼쪽영역이 오른쪽 영역보다는 폭이 좁으며 간략하고 정형화된 모양으로 구성된다. 그리고 왼쪽화면의 내용은 정보를 지속적으로 보여주며 해당 정보의 선택 여부에 따라 오른쪽 화면의 내용만을 변화시킨다. 또한 이용자는 각각의 패널 크기를 조정할 수 없다.




 

    3) Table View

      테이블 뷰는 단일 열 목록에서 여러 행으로 데이터를 제공하는 기능을 정의한다.

      테이블 뷰는 아래와 같이 다양한 조합으로 제공이 가능하며, 구분자를 포함한 그룹구성 또는 구분자 없는 그룹목록 등으로 구성이 가능하다. 또한 하나의 뷰 안에서도 그룹별 다양한 구성이 가능하다.


728x90
728x90




 

    4) Alert

      경고창은 어플리케이션이나 기타 서비스를 이용하는 과정에서 사용자 주의를 요하는 경우 또는 추가 옵션이나 기능을 제공하고 이용자가 이를 인지하거나 선택 할 수 있도록 하는 기능이다. 

      기능적으로 해당 창은 화면의 중앙에 위치하도록 배열하며, 이용자가 이를 확인(해지)하기 전에는 현재 실행중인 응용 프로그램을 사용할 수 없게 구성한다. 

      또한 경고창의 내용은 가능하면 짧고 간결하게 제공되어야 한다. 오른쪽 하단의 이미지와 같이 긴 문장의 경고문은 피해야 한다. 통상 한줄에서 두줄로 간결하게 내용이 제공되어야 한다.























     5) Action Sheet

     액션 시트는 사용자가 실행한 작업과 관련하여 기능을 선택할 수 있도록 구성한 세트를 정의한다. 엑션 시트의 경우 아이폰과 아이패드에서 구현되는 방식과 디자인이 다르게 되어있다.

     아이폰(왼쪽 이미지)의 경우에는 어플리케이션의 하단에서 출력된다. 아이패드의 경우(오른쪽 이미지)에는 항상 팝오버 내에 표시된다. 이러한 액션시트 목적은 사용자가 작업을 완료할 수 있도록 적어도 두 개 이상의 버튼을 제공하게 된다. 또한 이중 하나의 버튼을 선택하면 해당 시트는 사라지고 선택한 액션이 진행된다.


     또한 삭제등의 파괴적인(destructive) 행동을 요구하는 경우에는 빨간 버튼을 적용하여 이용자에게 주의를 요할 수 있다.










     6) Modal View

     모달뷰는 사용자의 입력이나 현재 작업하고 있는 과정에서 사용자의 입력등을 요구하는 자체 기능을 정의한다. 또한 모달 뷰는 각각의 어플리케이션의 디자인에 어울리는 스타일로 보여줄 수 있다.





3. Controls

       컨트롤은 사용자가 정보를 얻기 위하여 행동하거나 여러 가지 작업을 진행하는 과정에서 제공되는 UI 요소들이다.


- Page indicator : 전체 페이지의 분량과 현재 페이지의 위치를 표시
 





- Progress View : 작업 또는 진행상황을 안내
  




- Scope Bar : 사용자가 검색의 범위를 지정할 수 있으며, 검색창과 함께 사용할 수 있다. 아래 검색범위가 제외된 모양을 search bar이라고 한다.





- Slider





- Switch 
 




- Segmented Control :
각각의 다른 뷰를 보여주는 버튼들이 나열된 하나의 세트를 의미한다.

728x90
728x90




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와 서비스의 제공은 이용자의 입장에서 새로운 디바이스에서 접속할 때마다 새롭게 학습을 해야 한다는 부담감을 가지게 될 수 있다.

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


728x90

+ Recent posts