웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 1
04. 웹사이트분석 04. Web Site Analysis - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 2
웹사이트기획전고려사항 유저 ( 또는사용자 ) 는누구인가? 그들의유형 / 형태 / 속성은어떠한가? 유저의일상생활은어떠한가? 이것은우리의비즈니스와어떻게연관되는가? 유저는온라인에서어떤가치를중요하게생각하는가? 예 : 속도, 가격, 편리함, 다양성, 심도깊은정보 유저들은정보를어떻게이용하나? 유저가진정으로원하는것이무엇인가? 어떤서비스, 콘텐츠, 기능이필요한가? 유저는이러한서비스나콘텐츠, 기능이어떠한방식으로제공되기를바라는가? 이로인한유저의만족이비즈니스의성공에어떻게기여하는가? - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 3
타겟층의정의 1 대표적인분류 연령별구분, 성별구분, 지역별구분, 직업별구분, 기업별구분 사이트의특성에따라매우구체적이고복합적 웹사이트의타깃 기본신상명세 (demography) 에서출발하여행동패턴이나특징까지복합적으로정의하여구분 유저세그멘테이션 (User Segmentation) : 비슷한성격을가진타깃집단을구분 사이트의레이아웃이나사용하는언어의톤, 레이블링, 텍스트사이즈, 색상, 콘텐츠등사이트의전반적인성격이나방향을규정하는가이드라인 타깃을정의하는이유 특정타깃의기호와행동패턴에맞는사이트를만들기위해서임 타깃유저로정의한핵심유저층이다른유저층과어떤차이가있는지파악 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 4
타겟층의정의 2 타깃사용자의연령을고려하여기획된웹사이트 사용자의연령은사이트의시각적인표현에가장큰영향을미치는요소 흥미있는애니메이션이가득한웹사이트 [ 그림 4-1] 삼성어린이박물관 1 [ 그림 4-2] 삼성어린이박물관 2 [ 그림 4-3] 삼성어린이박물관 3 [ 그림 4-4] 삼성어린이박물관 4 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 5
타겟층의정의 3 타깃사용자의연령을고려하여기획된웹사이트 하나의사이트에여러타겟층이존재하는웹사이트 [ 그림 4-5] 재미나라 1 [ 그림 4-6] 재미나라재미유치원 2 [ 그림 4-7] 재미나라탐구나라 3 [ 그림 4-8] 재미나라동요나라 4 [ 그림 4-9] 재미나라의부모방 5 [ 그림 4-10] 재미나라의부모방 6 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 6
타겟층의정의 4 타깃사용자의연령을고려하여기획된웹사이트 포털사이트에서는많은양의정보를제공하기위해디자인적인이미지는절제해서사용 연령에따른포털사이트인터페이스 [ 그림 4-11] 성인을타깃으로한메인페이지 [ 그림 4-12] 어린이를타깃으로한쥬니버의메인페이지 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 7
타겟층의정의 5 타깃사용자의성별을고려하여기획한웹사이트 타깃설정은사이트의방향성을더욱분명하게만들고, 사이트의기준을정해주는중요한작업 성별에있어여성이남성보다색감과시각적요소에민감한편이므로정확한성향을파악하여적합한화면을제공해야함 남성과여성은사고방식및근본적인성향이다르므로이를고려하여디자인해야함 감성적인측면에만족할수있도록친근한요소를사용하여화면을제공 여성을위한웹사이트 [ 그림 4-15] 캐시캣 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 8
타겟층의정의 6 타깃사용자의성별을고려하여기획한웹사이트 여성을위한핸드폰서비스사이트 [ 그림 4-16] Drama [ 그림 4-17] CARA - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 9
타겟층의정의 7 타깃사용자의성별을고려하여기획한웹사이트 남성의특징을잘살리기위해절제된비주얼이나직관적인레이블링의네비게이션및레이아웃이적합함 재미보다는원하는정보를제공받으며현실적이고실속있는정보를원함남성을위한핸드폰서비스사이트 [ 그림 4-19] UTO 사이트의절제된네비게이션 [ 그림 4-18] UTO 의메인페이지 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 10
타겟층의정의 8 타깃사용자의예상사용시간을고려하여기획된웹사이트 사용자가어떤목적을가지고사이트를방문하는지빠르게판단해서작업해야함 장시간즐기기위한사이트의경우, 다양한멀티미디어적요소를첨가하여재미있게구현 정보를얻기위한사이트의경우, 사이트가로딩 (lading) 되는속도를감안하여그래픽적요소를제거한텍스트위주로정보설계 포털사이트 빠른정보검색과다양한정보를어떻게보여주느냐가주목적인사이트 빠른정보검색을위해이미지보다로딩시간을줄이기위한텍스트로구성 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 11
타겟층의정의 9 타깃사용자의예상사용시간을고려하여기획된웹사이트 쇼핑몰사이트 방문목적은크게두가지로구분 - 원하는제품의쇼핑정보를어느정도파악한소비자가가격을비교하거나더정확한정보를얻기위해서방문하는경우 - 오프라인의쇼핑과마찬가지로쇼핑의즐거움을온라인쇼핑몰에서도누리기위해방문하는경우 온라인카탈로그 : 쇼핑을위해접속한방문자를위한대표적인콘텐츠 검색창또는가격비교 : 원하는제품의정보를빠르고신속하게제공하기위한기능 가격비교및정보전달이목적인쇼핑몰사이트 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 12
타겟층의정의 10 타깃사용자의예상사용시간을고려하여기획된웹사이트 쇼핑몰사이트 쇼핑의즐거움전달이목적인온라인쇼핑몰사이트 [ 그림 4-22] Cjmall [ 그림 4-23] Cjmall e 카달로그 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 13
타겟층의정의 11 타깃사용자의예상사용시간을고려하여기획된웹사이트 커뮤니티사이트 (Community Site) 다른사용자와커뮤니케이션하기위해장시간머무르게되며, 개인공간을꾸밀수있는여러가지요소를제공 자신만의미니홈페이지를만들수있음커뮤니케이션이목적인커뮤니티사이트의설계 [ 그림 4-24] 싸이월드에서제공하는개인공간인미니홈피 [ 그림 4-25] 미니홈피의미니룸관리기능 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 14
유저프로파일 (User Profile) 유저프로파일의정의 사이트의기능이나서비스, 인터페이스, 네비게이션, 디자인등에관한결정을도와주는유저의표본 표본유저의요구 (needs) 와행동패턴을이해함으로써, 그표본이대표하는유저층전체를만족시킬수있는방법을찾을수있음 유저프로파일의구성 이름, 성별, 사는곳, 직업등간단한신상정보 사진 인터넷사용패턴과숙련도 해당분야에대한능숙도 ( 초보자또는중급자 ) 해당분야에대한요구 웹사이트를방문하는목적 웹사이트에서의행동패턴 유저프로파일의주의사항 사이트의관련분야에집중, 지나치게개인적인내용을방대하게인터뷰하지않아야함 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 15
유저시나리오 (User Scenario) 1 유저시나리오의정의 사용자의경험을기술하는것이며, 이를통해사용자의경험을디자인할수있음 시나리오작성후기획초기단계에서작성한시나리오를활용하여사이트전체의윤곽을그릴수있음 모든단계마다일어나는상호작용을상세히기술함으로써웹에서발생할수있는모든과정을체계적으로정리할수있음 포함항목 유저프로파일 네비게이션경로 선호하거나필요로하는메뉴, 기능 이메뉴와기능을사용하는서비스흐름 사이트에서좌절했거나만족했던점 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 16
유저시나리오 (User Scenario) 2 유저시나리오작성시주의사항 시나리오를작성할때는육하원칙에최대한충실하게서술 적절한시나리오를작성하려면콘텐츠로할수있는일을이해해야하며사용자의정황도이해해야함 시나리오를서술하는용어로지나치게기술적이거나어려운단어들은사용하지않음 프로그래밍용어, UI 관련전문용어 현재기술로가능한것에만한정하지말고, 가능한모든일을기술하는것이좋음 현재기술에만초점을맞추다보면발전할수있는가능성을놓치는경우가많음 유저시나리오포맷 다양하게응용가능하나맵 (map) 이나플로우 (flow) 는너무자세히그리지않는것이좋음 프로젝트초기에너무구체적으로사이트의스펙 (spec) 을제한하기때문 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 17
유저시나리오 (User Scenario) 3 유저시나리오 유저시나리오샘플 [ 그림 4-30] 유저시나리오 1 [ 그림 4-31] 유저시나리오 2 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 18
웹사이트평가 1 웹사이트평가의사전적정의 평가 ( 評價 ) 를 사람이나사물의가치를판단함 이라고정의하고있으며, 웹사이트를 웹서비스를제공하는것 이라고정의하고있음 이를재해석하면 웹서비스를제공하는가치를판단함 이라정의할수있음 웹사이트평가 현재시점을기준으로웹사이트를진단, 그에따른웹사이트의구체적인문제점진단과개선을위해꼭필요한가정 가치를측정하기위해객관적인측정기준이필요함 웹사이트평가체크리스트 를활용할수있음 웹사이트에대해전반적인느낌, 콘텐츠, 네비게이션, 기능, 상호작용성, 디자인, 시스템, 거래프로세스, 정보구조등 권위있는웹사이트평가기관에서는기간별해당분야의웹사이트를평가하고이에대한가치를성적표로공개 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 19
웹사이트평가 2 웹사이트평가체크리스트 12 개의대분류로구성한평가체크리스트로사이트의목적과특성에따라변형하여사용가능 전반적인느낌 메인페이지 웹사이트의목적설정 사용자분석 콘텐츠 네비게이션시스템 레이블 페이지구성 검색시스템, 통계 BBS 그래픽 운영및관리 마케팅 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 20
벤치마킹 (Benchmarking) 1 벤치마킹의정의 내가가지고있는것을토대로다른것의일류요소를접목시켜새로운구성을만들어내는것 남의것을모방하는것이아니라다른사람의것을보고내것을새롭게창조해내는작업 벤치마킹의주요요건 평가기준이명확해야함 객관적인데이터를수집할수있어야함 어떻게벤치마킹해야한다는구체적인방안이제시되어야함 철저하게외부적인관점에서진행해야함 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 21
벤치마킹 (Benchmarking) 2 벤치마킹을위해다양한사이트를분석 검색포털야후사이트메인화면분석 A. 사이트의기본분석 [ 그림 4-34] 콘텐츠편집화면 [ 그림 4-35] 화면컬러선택옵션중블루를선택한화면 [ 그림 4-32] 좌측전체메뉴가펼쳐지도록화면을좁게사용하는옵션을선택하는경우 [ 그림 4-33] 좌측전체메뉴를접고화면을넓게사용하는옵션을선택한경우 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 22
벤치마킹 (Benchmarking) 3 벤치마킹을위해다양한사이트를분석 검색포털야후사이트메인화면분석 A. 사이트의기본분석 [ 그림 4-36] 화면컬러선택옵션중핑크를선택한화면 [ 그림 4-37] 화면컬러선택옵션중그린를선택한화면 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 23
벤치마킹 (Benchmarking) 4 벤치마킹을위해다양한사이트를분석 검색포털야후사이트메인화면분석 A. 사이트의기본분석 [ 그림 4-38] 캐나다의야후로컬사이트 [ 그림 4-39] 독일의야후로컬사이트 [ 그림 4-40] 야후코리아의메인페이지콘텐츠구성 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 24
벤치마킹 (Benchmarking) 5 벤치마킹을위해다양한사이트를분석 검색포털야후사이트메인화면분석 B. 메인페이지분석 [ 그림 4-41] 야후코리아사이트의메인페이지 [ 그림 4-42] 야후코리아사이트의메인페이지레이아웃구성 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 25
벤치마킹 (Benchmarking) 6 벤치마킹의절차와요소 기업홈페이지벤치마킹 대상사이트 [ 그림 4-44] 삼성그룹 [ 그림 4-45] LG 그룹 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 26
벤치마킹 (Benchmarking) 7 벤치마킹의절차와요소 기업홈페이지벤치마킹 네비게이션 메인네비게이션 메인네비게이션 보조네비게이션 [ 그림 4-46] 삼성홈페이지의네비게이션구성 [ 그림 4-48] LG 홈페이지의네비게이션구성 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 27
벤치마킹 (Benchmarking) 8 벤치마킹의절차와요소 기업홈페이지벤치마킹 콘텐츠 [ 그림 4-47] 삼성홈페이지의콘텐츠구성 [ 그림 4-49] LG 홈페이지의콘텐츠구성 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 28
벤치마킹 (Benchmarking) 9 벤치마킹의절차와요소 기업홈페이지벤치마킹 요약분석및시사점 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 29
벤치마킹 (Benchmarking) 10 벤치마킹의절차와요소 온라인교육사이트벤치마킹 [ 그림 4-51] 사이트선정기준 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 30
벤치마킹 (Benchmarking) 11 벤치마킹의절차와요소 온라인교육사이트벤치마킹 [ 그림 4-52] 사이트평가항목 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 31
벤치마킹 (Benchmarking) 12 벤치마킹의절차와요소 온라인교육사이트벤치마킹 [ 표 4-3] 국매외온라인교육사이트의구축특징 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 32
벤치마킹 (Benchmarking) 13 벤치마킹의절차와요소 온라인교육사이트벤치마킹 [ 표 4-4] 비전과사업모델, 교육시스템 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 33
벤치마킹 (Benchmarking) 14 벤치마킹의절차와요소 온라인교육사이트벤치마킹 [ 표 4-5] 교육서비스이용비교 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 34
벤치마킹 (Benchmarking) 15 벤치마킹의절차와요소 온라인교육사이트벤치마킹 [ 표 4-6] 사이트별특징, 단점, 적용해볼만한아이템 - 웹과인터넷활용및실습 (Web & Internet) - 04. 웹사이트분석 35