Ⅴ. web site 전략모색

>> Ⅴ. Web Site 전략 모색

Ⅴ. Web Site 전략모색

• Web Design Process

• Project Team

• Communication! Communication! Communication!

• 디자이너 중심적인 세계관


> table of Contents

Ⅴ. Web Site 전략모색Web Design Process


DocumentsDocumentsDocumentsDocumentsDocumentsProduction GuideDelivery Data Sheet

Creative BriefGraphic TemplateDesign GuidelineHTML Template2nd Usability Test 보고서Test Checklist

IA SheetWireframe templateStoryboard

Analysis 보고서1st Usability Test 보고서Project Brief

Launch & BeyondDesignPre DesignAnalysisInitiation

Start

1.Business Concept 이해2.Project Issue & Goal 설정3.Requirement

Discovery

4.Team Plan

5.Process Plan

6.Staging Setup

Process Planning

7.User Test Plan

8.Contents Analysis

10.Structure Analysis

12.Log Analysis

11.Marketing Analysis

13.1st Usability Test ( 旣存 사이트 )

9.Visual Analysis

Site Analysis14.Information Architecture

16.StoryBoard

15.Wireframing

17.Concept Design

18.Design Refinements

19.Graphic Template

20.Design Guideline

22.HTML Protosite

23.2nd Usability Test (Functionality Test)

21.HTML Template

24.Tuning

Building

Creating

Testing

24.Fixing Bugs

25.Production Guide

26.Data Archive

Delivery

27.Search Engine 등록 28.Lanching

Launch

29.Maintenance Plan

30.Regular Reports

Maintenance

Web Design Process

기획 (Planning) 이란 홈페이지 구축에서 가장 중요한 부분

인터넷 상에는 수많은 홈페이지가 존재하고 있습니다 . - 그러나 사용자 (User) 들은 이 모든 홈페이지를 방문하지는 않는다 .

사용자 (User) 들의 사이트 방문목적 - 자신들에게 필요한 정보가 있는지 혹은 , 게임을 즐기기 위해 , 단지 홈페이지가 시각적으로 너무 마음에 들어서 등등

각각 홈페이지를 찾는 방문 목적이 있다 . 이렇듯 포털사이트 (Portal Site) 가 아닌 이상 모든 네티즌 (Natizen) 들을 자신의 홈페이지로 이끌 수는 없다는 것이다 .

이런 점에서 볼 때 자신이 홈페이지를 제작하는 구체적인 목적은 반드시 가지고 있어야 합니다 . 바로 이런 홈페이지 제작 목적을 가지는 것이 홈페이지를 구축하기 전에 반드시 거쳐야하는 기획단계이다 .

주로 방문하는 사용자가 어떠한 계층이며 , 왜 방문하는지 분석하여야 하며 무엇을 , 어떤 정보를 , 어떤 방식으로 제공할 것인지에 대해서 분명히 규정 지어 두어야 한다 .이 단계에서 자료의 수집 및 분석 , 아이디어 도출 , 디자인 컨셉 , 제작일정 등을 수립하여야 한다 .

이렇듯 홈페이지는 처음 기획 단계부터 홈페이지 운영방안 및 활용용도를 결정해서 제작에 들어가는 것이 바람직하다 .

Ⅴ. Web Site 전략모색기획 (Planning) - 나의 사이트 방문객은 누구인가 ?

어떤 정보를 어떻게 제공할 것인가 ?

기획에 의해 홈페이지 전반에 관한 컨셉과 주제가 정해졌다면 제공할 컨텐츠에 대한 설계단계에 들어가게 된다 .

웹 상에서의 컨텐츠 설계 (Information Architecture) 란 홈페이지에서 제공할 컨텐츠를 효과적이고 체계 있게 분류하여 조직화 하는 것을 말한다 . 바로 이러한 효과적인 컨테츠의 분류를 통해 사용자로 하여금 원하는 정보로의 이동을 용이하게 해주고 또한 개발자가 새로운 컨텐츠를 업데이트 하고자 할 때에 어디에 , 어느 곳에 배치하여야 할 것인지를 분명하게 해준다 .

아무리 좋은 양질의 Contents 라 하더라도 복잡한 구조와 원하는 정보에까지 도달하기까지의 경로가 까다로운 구성이면 사용자 (User) 는 금새 지치게 된다 .

이렇듯 좋은 컨텐츠 (Contents) 의 수집도 중요하지만 탄탄한 구조를 설계하는 것 또한 더 더욱 중요하다 . 전개 될 컨텐츠와 정보 이동경로를 미리 예측하기 위해 미리 UI(User Interface) Diagram 을 그려보게 되는데 그 방법은 다음의 예시와 같다 .

컨텐츠 설계 (Information Architecture) - 컨텐츠 구조 만들기


전개될 컨텐츠의 구성을 미리 그려두면 홈페이지 제작시 또는 제작후에 빠트린 부분이나 오류가 없는지에 대한 디버깅 (Debugging) 작업에 유리합니다 .

Diagram 의 예Ⅴ. Web Site 전략모색

컨텐츠 (Contents) 의 트리 (Tree) 즉 , 플로우챠트 (Flow Chart) 를 그려보는 것

플로우챠트란 정보의 전개 과정을 도표로 나타낸 것입니다 . 쉽게 말해서 영화의 시나리오처럼 홈페이지의 스토리보드를 짜는 것이다 .

인터넷을 정보의 바라다고 표현하듯이 , 홈페이지를 찾아오는 방문객에게 길을 잃지 않게 원하는 정보까지 잘 찾아갈 수 있도록 안내해 줘야 한다 .

이런 역할을 수행하는 것이 바로 바로 네비게이션 (Navigation) 이다 . 이런 의미에서 내비게이션 (Navigation) 을 항해라고 표현 한다 .

좀 더 쉽게 얘기하면 홈페이지에서 주로 윗 단에 위치하는 메인 메뉴이하 하부메뉴로까지의 페이지 전개 구성이라고 생각 하면 된다 .

플로우챠트를 만들 때는 전체의 흐름과 차별화를 생각해야 하며 사용자가 저지를 실수를 예상해서 누가 보아도 쉽고 체계적으로 접근해야 한다 .

플로우 챠트 (Flow Chart) 만들기


플로우 챠트 (Flow Chart) 의 예


철저한 기획과 컨텐츠 설계 , 플로우챠트 까지 나왔다면 이제부터 본격적으로 어떻게 보여 줄 것인가에 대해서 고민해야 한다 .

먼저 전적으로 Visual 위주의 홈페이지가 아닌 이상 정보의 효율적인 전달 이라는데 중점을 두어야 한다 .

시각적인 효과만을 위해 지나치게 화려하거나 , 멋진 모양만을 지향해서는 안 된다 .

페이지에 사용되는 이미지는 정보와의 연관성을 가진 의미를 지니고 있어야 하고 , 정보 전달에 도움이 되어야 한다 .

이를 위해서는 디자인의 일관성과 텍스트나 칼라에 의한 그룹핑이 이루어져야 하고 이에 단순하고 친근한 인터페이스에 바탕을 둔 레이아웃 (Layout) 이 나와야 한다 .

디자인 (Design) - 어떻게 보여질 것인가 ?


방문자의 주목을 끌 수 있는 주목성을 가진 인덱스(Index) 페이지 , 명확한 주제의 아이콘 , 문자의 타이포그라피 (Typograph) 화 등 디자인적인 요소들을 결합하여 사용자가 보기에 편안하게 느껴져야 한다 .

자칫 중간 중간 지루함을 줄 수도 있는 화면에 애니메이션이나 플래쉬의 역동적인 효과를 가미시켜 전체 화면과 구성요소간의 조화를 이루는 것이 좋은 디자인의 홈페이지라 할 수 있다 .

디자인 (Design) - 어떻게 보여질 것인가 ?


Design Process 및 방법론

Design 인식단계Recognition 현존하는 Site Design 의 문제와 Opportunity 분석

Design 분석단계Analysis 해결을 위한 전략으로 발전시키기 위하여 문제 분석

Design 정의단계Definition 문제를 해결하기 위하여 Site 가 가져야 할 특징 정의

Design 탐색단계Exploration 정의된 Design 구조를 달성하기 위하여 여러 가능한 해결의 대안 탐구

Design 선정단계Selection 해결된 디자인 대안들을 평가하고 추진해야 할 최선의 Design 선정

Design 정교화단계Refinement 모든 세부사항 들에 유의하여 선택된 Design 완벽화

Design 형식화단계Specification 세부사항들 의 최종적인 검증 및 형식화 작업

Design 적용단계Implementation Web 상에서의 Test

Design 소개단계Introduction Service

Ⅴ. Web Site 전략모색디자인 (Design) - 어떻게 보여질 것인가 ?

디자인 작업과 게시판 , 방명록등 프로그래밍 과정까지 끝났다면 이제 스스로 사이트에 대한 평가를 해보아야 한다 .

이 단계에서 너무 완벽한 결과를 기대한다면 그 만큼 실망도 크기 마련이다 .

어느 정도의 적정치를 세우고 그 기준치에 만족한다면 욕심을 버리고 다음 단계로 넘어가는 것이 좋은 방법이다 . 조금 부족한 점은 다음 업그레이드 작업으로 남겨 두는 것이 현명하다 .

다음은 전 세계 인터넷 홈페이지 가운데 부문별 우수한 사이트를 뽑아 시상하는 웨비어워드 (Webby Award)"에서 제공하는 홈페이지에 대한 평가 기준이다 .

◈ 웹사이트 평가 기준1) Contents - 정보

2) Structure & Navigation - 정보의 구조와 안내

3) Visual Design - 시각적인 요소

4) Interactivity - User 와의 상호작용

5) Functionality - 기능적인 요소

6) Overall Experience - 총체적 경험

평가 (Evalution)


◈ 철저한 사용자 평가가 이루어 져야 한다 . • 자신이 홈페이지 방문객의 입장으로 돌아가서 , 혹은 기존의 홈페이지 방문객이나 가까운

지인들을 통해 사이트를 평가해 보는 것입니다 . 이것을 사용성 테스트 (Usability Test) 라고 한다 .

• 최고의 사이트를 만들려면 테스트는 필수이다 .

• 한 사람의 테스터라도 있다면 , 없는 것보다 100배 낫다 .

• 프로젝트 초반에 한 사람이라도 테스트를 하는 것이 , 후반에 50명이 하는 것보다 낫다 .

◈ Usabillity Test Process • Pre Interview : 사용자의 기본정보 , 인터넷 사용빈도 , 인터넷 사용용도 , 평가대상 사이트

연관 경험 조사 , 자주 방문하는 사이트 조사

• Homepage 에 관한 반응조사 : 첫 메인 페이지를 통한 사이트에 대한 인상과 이미지 조사

• 자유서핑 : 낯선 사이트에 대하여 잠시 익숙해지며 아무런 정보 없이 자유로이 서핑 할 때 관심 있어

하는 부분을 관찰

• 시나리오 기법 : 사이트의 주요 목적에 적합한 테스크 시나리오에 대한 사용자 수행 과정 테스트

• 테스트 후 서문조사 : 사이트에 대한 만족도 평가 , 사이트의 장점과 단점 , Contents Quility 검증 ,

테스트 이후의 사이트 사용 의향 조사

사용성 테스트 (Usability Test)


Ⅴ. Web Site 전략모색사용성 테스트 (Usability Test)

Ⅴ. Web Site 전략모색Project Team 구성

• Project Manager (PM)

• Technical Director

• Creative Director

• Information Architector

• System Engineer

• Programmer

• Tester

Communication! Communication! Communication


◈ 팀 구성이 n 명이라면 , n(n-1)/2 개의 의사소통 경로가 존재한다 .

두 사람 , 1 개의 경로

다섯 사람 , 10 개의 경로

Communication! Communication! Communication

◈ 클라이언트 , 개발자 , 사용자간 관점의 차이를 이해한다 .

◈ 팀 원 각각의 작업 방식 5 차이를 이해한다 .

◈ 효율적인 커뮤니케이션 시스템의 구축 • 작업 가이드 • 커뮤니케이션의 문서화

◈ 갈등의 원인을 진단하고 해결한다 .
