Navigation Menu+

WEEK2

WEEK2  콘텐츠 기획의 이해:
비주얼 컨셉 비주얼 가이드, 칼라시스템의 적용

 

웹기획자라는 직무: 한 배의 선장

  • 배가 목적지까지 안전하고 그리고 정확한 날짜에 도착할 수 있도록 관리하는 역할
  • 배의 운항 그리고 웹프로젝트, 이 모든 프로젝트의 생명은 시간
  • 진행되는 작업에서 발생할 수 있는 문제를 사전에 최대한 방지해야하는 역할도 기획자의 중요한 역할
  • 프로그램 전체 일정을 파악할 수 있는 일정표를 수시로 점검하며 프로젝트 진행에 차질은 없는지 확인해야하며 문제 발생 시, 인력, 비용, 시간 손실을 최소한으로 줄여야 함

홈페이지를 제작할 때, 디자이너와 개발자가 모든 프로젝트를 맡는다고 생각한다. 홈페이지 제작 과정에서 디자이너와 개발자는 무엇보다 중요하고 이들이 없다면 홈페이지는 만들어질 수 없다. 하지만 이들이 프로젝트의 모든 부분을 맡는다면 기간도 오래걸리고 작업 효율도 떨어지기에 기술자들이 오로지 개발과 디자인에만 집중할 수 있도록 프로젝트의 일정, 콘텐츠, 디자인 기획 등을 담당하는 일을 하는것이 웹기획자의 직무이다.

웹기획자는 고객과 디자이너/개발자 사이의 다리 역할!

설계된 내용을 디자이너와 개발자에게 전달하면 디자이너와 개발자는 그에 맞게 작업을 진행.

설계 과정에서 기획자는 초기 디자인 컨셉, 홈페이지 기능, 클라이언트가 원하는 방향 등을 디자이너와 개발자에게 끊임없이 인식시켜주는 역할.

프로젝트 중간중간 클라이언트의 요구사항이 달라지는 경우가 발생하면 그 변경사항을 디자이너와 개발자에게 전달하고 관리하는 역할

기획자의 역할: 디자이너와 개발자는 그들의 기술적 작업에만 몰두할 수 있도록 도와주고 리드하는 것

 

웹기획? 그게 뭐지?

웹프로젝트 진행 순서

 

프로젝트 전체를 아우르는 웹기획

웹기획이 하는일:분석 설계

화살표: 프로그램의 진행

웹기획은 분석, 설계와 더불어 프로그램의 전반적인 일정과 진행사항을 꼼꼼히 체크해야 한다.

  1. 분석은 웹기획의 힘: 클라이언트의 니즈 파악

분석 과정에서는 제작할 사이트가 어떤 용도인지, 클라이언트가 원하는 방향은 무엇인지, 경쟁 사이트 벤치 마킹후 유사한 사이트의 사이트 구성, 디자인, 기능, 소비자 트렌드, 홈페이지 유입 경로 등을 상세하게 조사하고 분석하여 클라이언트가 원하는 방향에 보다 가까워질 수 있도록 분석

 

  1. 설계

대부분의 방문자들은 홈페이지의 디자인에 먼저 관심을 보이지만 홈페이지에 있는 메뉴, 이미지 배치 등은 그저 예쁘게만 꾸며진게 아니다. 웹기획자는 메뉴 구성은 어떻게 할것이며, 메인페이지에는 무엇이 들어가고, 무엇을 강조할 것인지, 어떻게 방문자를 해당 메뉴로 이동하게 유도할지 그리고 홈페이지에 담길 콘텐츠 제작 등의 분석을 통해 홈페이지 설계한다.

 

 – 실제 예제 파일 : 동산한의원_HMS_ㅡmokeup design, 동산한의원 요구사항정의서

 

웹에이전시에서 사용하는 웹기획서와 웹콘텐츠의 예시를 통해 웹콘텐츠를 이해한다.

*기획안 예시자료_1. 환경부 웹사이트의 화면설계(웹기획서) 

가. UI(user interface ) 설계

나. 레이아웃 설계

다. 칼라시스템 설계

라. 타이포시스템 설계

마. 디자인 시안 제작

*웹 스타일 가이드라인: 

Web Style Guide(이하 WSG)는  홈페이지 구축에 있어, 프로젝트의 마무리 단계에서 UI Designer들이 제작한 UI디자인 작업의 최종 산출물로서, WI(Web Identity)를 위한 구체적인 전략을 명시한 리포트 개념의 자료이다.

WSG는 UI Guide의 이해를 돕기 위해 운영 담당자에게 첨부되는 것이며, 향후 유지보수 및 신규 구축 시 통일되고 일관성 있는 UI를 유지하기 위한 시스템의 규칙이 서술되어 있는 가이드라인(매뉴얼)이라 할 수 있다.

*기획안 예시자료_ 네비게이션 흐름도와 스토리보드 페이지 설계

*콘텐츠 예시자료

_지하철투어 플래시 애니메이션_국문_course 01.swf

_지하철투어 애니메이션을 위한 자료_지하철역명,

_추가 개통역 외국어표시 (엑셀파일)

_수도권 노선도, 1호선 노선도(일러스트레이터 파일)

_사이버스테이션 수정사항

_사이버스테이션 포토샾 파일

_심벌마크 기본형 (5678행복미소_디자인 및 컬러 설명)

_그래픽모티프 A,B,C,D,E  그래픽모티프는 심벌마크의 이미지를 각종 응용매체에 활용할 수 있도록 확장한 디자인 요소로서 제시된 예시를 기준으로 다양한 활용이 가능하다.

_전용색상  컬러시스템은 공사의 차별화된 아이덴티티를 표현하는 중요한 디자인 요소로 정확한 표준 색상 재현을 통해 공사의 개성을 유지해야 한다.

_캐릭터는 심벌마크나 로고타입과는 달리 대중에게 공사의 친근감과 우호성을 높이기 위해 개발된 디자인 요소로 다양한 응용아이템에 활용된다.

_픽토그램

_balsamiq mockup design을 이용한 웹사이트를 모크업디자인

https://balsamiq.com/download/

 

 커뮤니티를 컨텐츠로 하는 웹상의 서비스 : 페이스북, 인스타그램, 웹콘텐츠로서 웹서비스 기반의 구체적인 목적을 가진 켜뮤니티!

 매머드급 웹사이트나 애플리케이션들은 처음부터 잘 나갔던 사이트가 아니라 작고 구체적인 커뮤니티에서 시작해 지금의 수준까지 성장해왔다. 웹상의 콘텐츠로서 영상, 이미지 뿐만아니라 아래와 같은 커뮤니티를 컨텐츠로 하는 웹상의 서비스들이 있다.

페이스북(www.facebook.com) : 페이스북은 하버드 대학이라는 특정 공간에서 시작되어 다른 캠퍼스로 확장되었다.

아마존(www.amazone.com) :태양 아래 모든것을 판다는 아마존도 처음에는 줄 책을 파는 인터넷 서점이었다.

플리커(https://www.flickr.com): 플리커는 게임 네어랜딩(Game Neverending)이라는 온라인 게임 상에서 사진을 공유하는 기능에서 시작되었다.

유투브(www.youtub.com): 유투브는 친구들과 비디오를 공유하는 아주 단순한 툴(tool)에서 시작 되었다.

크레이그리스트(https://seoul.craigslist.co.kr)는 창업자인 크레이그리스트가 지금처럼 진화한것은 고객들의 목소리를 들은 덕분이라고 말한다.

“크레이그리스트는 원래 내 친구들을 위해 샌프란시스코의 미술/기술 이벤트에 대해 만든 아주 단순한 메일 리스트였다. 이것을 받은 사람들이 아파트나 직업 같은 더 많은 것을 가지고 해보자고 제안했고, 나는 그 제안을 받아들였다. 시간이 지날수록 더 많은 피드백이 왔고 나는 더 많은 항목을 구성하게 되었다. 오늘날 크레이그리스트는 매이같이 24개 나라, 100개 이상의 도시에  사는 사람들에게 도움을 주고 있다.  사람들은 살 집과 일자리를 찾거나 가구를 팔때 이 서비스를 이용한다. ( http://www.techreview.com/infotech/14678)”

링크드인(https://www.linkedin.com)은 전문 직업인들을 위한  SNS이다. 링크드인의 프로필은 직장인들끼리 상호작용 할 수 있게끔 일하는 곳, 받은 교육, 다녔던 학교나 다니는 학교, 전문적인 능력 등의 정보를 담고 있다. 여기에서 종교 교파, 성적 선호도나 건강상태등 직업과 관계없는 정보들은 찾아 볼 수 없다.

페이션트라이크미(https://www.patientslikeme.com)의 프로필은 링크드인과 또 많이 다르다. 예를 들어 동맥경화증을 앓는 사람의 프로필을 보면, 언제 처음으로 병의 징조가 보였는지, 언제 진단 받았는지 등 중요한 날짜들이 있다. ‘나에 대해(about me)’라는 섹션은 병력에 맞춰져 있는데, 몇몇 그래프를 통해 치료가 어떻게 진행되는지 알 수 있다. 링크드인과 다르게 병의 징조가 보였는지, 언제 진단 받았는지 등 중요한 날짜들이 나타나 있다. ‘나에 대해(about me)’라는 섹션은 병력에 맞춰서 있는데 몇몇 그래프를 통해 치료가 어떻게 진행되는지 알 수 있다. 링크드인과 다르게 누군가의 병에 이야기 할때 직업과 관련된 정보는 거의 무의미하다.

넷플릭스(http://www.netflix.com) 이메일로 영화를 빌려볼 수 있는 사이트인 넷플릭스는 사이트를 이용하면서 사용자들이 자신의 개성을 발견할 수 있는 훌륭한 공간이다. 넷플릭스의 목표는 사용자의 손에 최고의 영화를 건네주는 것이다. 따라서 그들의 전략 중의 일부는, 사용자들이 영화에 평점을 남기는데 좀 더 많은 시간과 에너지를 쓰도록 유도하는 내용들이다. 사람들이 영화에 평점을 많이 매기면 매길수록 영화 추천을 더 정확하게 할 수 있기 때문이다. 넷플릭스는 당신이 리뷰를 했던 내역을 기반으로 영화를 추천한다. 따라서 매번 당신이 더 많은 평점을 주도록 유도하며, 이를 통해 추천은 점점 더 정교해진다. 이는 모든 사용자가 자신만의 개성에 맞춘 콘텐츠를 볼 수 있다는 점에서 최고의 개인화라 할 수 있다.

가능하다면 스스로 만들어라    

성공한 웹사이트들에서 공통적으로 발견되는 재미있는 경향이 있다. 대부분의 성공하는 서비스들은 구축한 사람이 곧 사용자의 입장이라는 것이다. 즉, 기획자, 디자이너와 개발자들이 그들 스스로를 위해 만든 서비스들이 대체로 성공했다.

“프로젝트에서 파트다임으로 고용된 사람과 오너십을 가지고 일을 하는 사람은 열정에서 부터 다르다. 단기 파트타임 프리랜서 기획자나 개발자들은 상당히 빈약한 솔루션을 제공하는 서비스를 구축한다. 언젠가 계약이 종료되고 실제 사람들이 이용하기 시작하면 끝이기 때문이다.”

UX (User Experience) :외부환경을 구축하라.

사이트를 구축했다면 다음 단계로 넘어가야한다. 바로 친구들이 그것을 시험삼아 사용해 보도록 하는 일이다. 그러나 그것은 단순히 재미삼아 하는 것이 아니라,  웹콘텐츠에 대한 소문을 퍼트리는 시작점이라 하겠다.

최고의 기획자는 기획 자체뿐만아니라 변화에 대응하여 사용자에게 변화에 대해 저항 할 방법을 극복하고, 서비스를 이용하는 데 불편이 없도록 방안(migration path)을 제시하고, 각각의 개선으로 얻을 수 있는 이익을 명확하게 해야 한다.

Gmail 구축

“어느날 내가  Gmail 의 첫번째 버전을 개발해 내었을 때,  Gmail은 그리 인상적인 서비스가 아니었다. 내가 한 일은 구글 그룹(유스넷)의 인덱싱 엔진에 내 고유 메일을 입력한 것이 전부였다. 나는 피드백을 받기 위해 몇몇 사람에게 그것을 보냈다. 받은 사람들은 대부분 긍정적이었고, 내 메일 계정이 아니라 자신들의 메일 계정을 찾을 수 있다면 더 유용할거라는 피드백을 주었다. 이를 반영한 두번째 버전을 보여주자 사람들은 메일에 쉽게 회신할 수 있는 기능을 원했다. 그래서 세번째 버전이 나왔다. Gmail을 전 세계에 발표하기 직전까지 이런 과정들이 구글 안에서 몇 년 동안 반복되었다.

*웹에 회원가입 유도를 위한 기획 : 사람들이 나의 사이트에 가입하도록 유도하는 방법

배를 만들고 싶다면, 사람들을 불러 모다 목재를 가져오게 하고 일을 지시하고 일감을 나누어 주는 대신, 저 넓고 끝없는 바다에 대한 동경심을 키워주라 –생텍쥐페리”

­웹사이트를 런칭 후 그 사이트에 가입하고 회원가입드을 하기까지 걸리는 시간은 겨우8초가 걸린다. 사람들은 ‘왜 이 컨텐츠를 사용해야 하는가’를 결정짓는 중요한 선택에 아주 짧은 시간만 쓸 뿐이다. 그것은 사람들이 당신과 관계를 맺고자 마음먹는 시작점이기 때문이기 때문에 모든 상호작용의 단계 중에서 가장 중요한 순간이라고도 할 수 있다. 누군가 ‘내가 시간을 쏟을 만큼 이 서비스가 정말 가치 있는가?”라는 질문을 떠올리고 거기에 답을 하는 과정이야말로 가장 중요한 선택의 순간이 것이다.

사람들이 내가 만든 사이트 나의 웹컨텐츠에 흥미를 가지고 있으면 좋겠다고 생각하지만, 아마 현실은 그렇치 않을 것이다. 따라서 우리 서비스에 이미 흥미를 느낀 사람이라고 해도 계속 납득시키고 설득시키는 과정이 필요하다.

사이트에 자주 접근하게 하는 또는 가입까지의 장애물

사람들이 서비스에 관심을 가졌다면, 다음 과제는 그 사람들이 실제로 서비스를 사용하게끔 가입을 유도하는 것이다. 그 사이트에 시간을 들여 접근 하고 머무는 시간을 투자함으로써 얻는 이득에 대해 명확하게 설명함으로써 이루어진다.

  • 첫인상과 마찬가지로 웹사이트의 첫대면에서 사용자를 매료시키지 못한다면, 당신의 서비스가 쓸모없다고 여기고 다시는 돌아오지 않을 것이다.
  • 가입은 사람들이 서비스를 실제로 이용하기 위해 하는 첫번째 활동이다. 즉 이 단계는 사이트에 컨텐츠에 대한 관심이라는 ‘잠재성’이 실제 참여하는 ‘활동성’으로 바뀌는 변화의 전환점이다.
  • 당신이 웹기획을 통해 제작한 웹사이트가 생계를 꾸려 나간다면, 당신이 기획한 웹사이트의 서비스가 타인에게는 관계를 맺는 수단이 될 수도 있다. 이는 분명 당신의 미래에 커다란 여향을 주는 문제이기 때문에 중요하다.

사이트의 컨텐츠 기능이 명확하게 전달될 것

유용한 컨텐츠라는 확신을 줄 것.

왜 사람들이 웹컨텐츠를 제작하는가?

웹을 기획하는 것은 경제적인 문제가 아니라 사회 자본( social capital)에 관한 문제이다. 아래의 다음과 같은 것들은 모두 사회 자본과 관련된 것들이다.

정체정( identity)  사람들은 자신이 속한 사회 조직안에서 스스로의 정체성을 관리하기 위해 웹사이트를 제작한다.

평판( reputation)  평판을 쌓거나 다른 사람과의 관계를 증진시키기 위해 웹을 제작한다.

커뮤니티에 대한 애정 (attachment to a group) 사람들은 같은 가치나 행동을 공유할, 마음이 있는 사람들을 찾으므로 웹사이트를 제작한다.

정체성의 표현

모든 사람은 정체성( identity)을 가지고 있다. 정체성은 내가 나에게 해주는 그 ‘무엇’이며, 눈 색깔, 키, 개성, 신체적 능력, 지성 등 다른 사람이 느끼는 나의 특징을 모두 합한 개념이다. 우리의 정체성을 구성하는 것은 많다. 온라인에 스스로의 정체성을 보여줄 수 있는 도구(tool), 다른 사람과 커뮤니케이션 할 수 있는 도구들을 제공함으로써, 우리는 온라인에서 정체성을 형성 할 수 있다.

자신의 홍보용 프로필은 도메인과 밀접한 관련이 있다.

자기프로필에 들어가는 요소를 일관된 내용으로 구성하면 좋은 효과를 낼 수 있다.

개개인의 개성(uniqueness)을  강조하라

기획을 하거나 글을 쓸때에 어떻게 개개인의 행동을 특별해 보이게 할 것인지, 혹은 강조할 것인지 신경써야 한다. 다른 이들은 할 수 없고 그 사람만 할 수 있는 일은 무엇인가? 주어진 영역에서 사람들 사이의 개성(unique)을 구별 할 수 있도록 하는 요소는 무엇인가?

평판을 허용하라.

누군가의 ‘평판’이란, 다른 이들이 그 사람에 대해 가지고 있는 믿음이나 의견의 집합이다. 우리 모두는 아무리 작더라도 각자 평판을 가지고 있는데, 평판을 가지려면 다른 사람들로부터 높은 평판을 받아야 한다. 즉 평판은 다른 사람들의 의견으로 이루어지기 때문에 객관적인 힘을 가진다. 평판이 제대로 작동하면 사람들은 타인을 판단할 수 있게 되고, 그들과 정확히 어떤 상호작용을 해야 하는지도 알 수 있다.

평판을 위한 기획이란, 사용자들의 공동체 문화에서 어떤 것들이 긍정적인 평판을 이끌어내는가를 알아내는(혹은 결정하는)일이다.

평판 시스템

-친구의 수, 많은 소셜 웹 서비스들이 이를 평판의 절대적인 기준으로 삼고 있다.

-쓴 리뷰의 수. 사이트에서 주요 활동을 더 많이 한 사람이 더 높은 평가를 받는다.

사이트의 효용을 선전하라

사람들이 당신에 대해 이야기하는 것이 평판이라면, 효용은 당신에게 종속된 가치로 ‘어떤 이익을 얻을 수 있는지’에 대한 개념이다. 많은 경우 이 두가지는 동반된다. 평판이 높아질수록 더 많은 효용을 느끼게 되는 셈이다.

효용은 일이 잘 되어서 주변환경에 어떤 변화(효과)가 있을 때 느끼게 되는데, 사용자들이 서비스를 쓸지 말지를 결정하는 매우 중요한 조건이다. 사람들은 때로 뭔가 달라졌다고 느낄 수 있는 경우에만 그것을 사용하고자 결심하기도 한다.

 

다음주 준비물

내가 좋아하는 캐릭터 이미지  준비

과제 “두사람이 협력해서 만들기도 가능”

다음주 수업

특강(2시간): 김한재 ( 한국 만화애니메이션학회 이사, School of visual arts  만화학화 졸업)

일러스트의 패스(PATH)를 이용하여 일러스트의 펜기능