웹 2.0 기획과 디자인

태그 클라우드(Tag Cloud)는 웹 사이트 내에서 사용된 태그를 시각적으로 표현한 태그리스트이다. 태그는 인기도, 빈도수, 최신성 등 중요도 산정 기준에 의해 시각적 비중이 높아지며, 이는 서체 크기로 표현된다. 그래서 그 크기 차이를 인식시켜 얼마나 인기 있는 태그(popular tags)인지 또는 얼마나 최근에 등장한 태그(recent tags)인지 시각적으로 판단할 수 있게 한다.
태그 클라우드는 좁은 영역에 많은 단어들이 밀집되어 있기 때문에 인식하기 쉽고 읽기 편한 구성이 요구된다. 이를 위해 서체는 한 가지 색상으로 사용하고 돌기가 없는 산세리프체를 사용하는 것이 좋다. 그리고 일정한 태그 간격을 유지하고 최소 2개 이상의 정렬 옵션(알파벳순, 가나다순, 중요도순, 빈도순, 최신성순 등)을 제공할 필요가 있다.
-p26, 태그 클라우드(Tag Cloud)

대시보드(Dashboard)는 명료한 커뮤니케이션(clear communication)을 위한 특별하면서도 강력한 정보 전달 도구다.
대시보드 디자인은 자동차 내부의 대시보드처럼 열악한 사용 환경 하에서도 특정 정보를 효과적으로 전달할 수 있는 강점을 가지고 있다. 이 점을 웹 디자인에서 벤치마킹할 필요가 있다....태그 클라우드(Tag Cloud)는 웹 사이트 내에서 사용된 태그를 시각적으로 표현한 태그리스트이다. 태그는 인기도, 빈도수, 최신성 등 중요도 산정 기준에 의해 시각적 비중이 높아지며, 이는 서체 크기로 표현된다. 그래서 그 크기 차이를 인식시켜 얼마나 인기 있는 태그(popular tags)인지 또는 얼마나 최근에 등장한 태그(recent tags)인지 시각적으로 판단할 수 있게 한다.
태그 클라우드는 좁은 영역에 많은 단어들이 밀집되어 있기 때문에 인식하기 쉽고 읽기 편한 구성이 요구된다. 이를 위해 서체는 한 가지 색상으로 사용하고 돌기가 없는 산세리프체를 사용하는 것이 좋다. 그리고 일정한 태그 간격을 유지하고 최소 2개 이상의 정렬 옵션(알파벳순, 가나다순, 중요도순, 빈도순, 최신성순 등)을 제공할 필요가 있다.
-p26, 태그 클라우드(Tag Cloud)

대시보드(Dashboard)는 명료한 커뮤니케이션(clear communication)을 위한 특별하면서도 강력한 정보 전달 도구다.
대시보드 디자인은 자동차 내부의 대시보드처럼 열악한 사용 환경 하에서도 특정 정보를 효과적으로 전달할 수 있는 강점을 가지고 있다. 이 점을 웹 디자인에서 벤치마킹할 필요가 있다.
- p46, 대시보드 디자인

웨블리케이션(Weblication)은 웹(Web)과 어플리케이션(Application)이 결합된 신조어로써 웹의 어플리케이션화 또는 어플리케이션의 웹화를 의미한다. 웹 기반의 서비스를 제공하고 있는 구글은 구글 OS, 구글 워드프로세서 & 스프레드쉬트 등 웹 기반의 운영체제 및 어플리케이션을 내세워 웹의 어플리케이션화를 시도하고 있다. 이와 반대로 마이크로소프트는 윈도우 비스타 가젯(garget)등 대시보드 위젯을 통해 어플리케이션의 웹화를 시도하고 있다.
이렇듯 다소 배타적이었던 영역이 상호 융합되고 있는 이유는 강력한 비즈니스 모델을 갖기 위함이다. 비즈니스 측면은 차치하고 디자인 측면만 고려해 보면, 웹과 어플리케이션의 강약점이 보완된다는 점에 웨블리케이션은 사용 환경을 크게 변화 시킬 것이다.
-p64, 웨브리케이션(Weblication)

위젯(widget)은 특정 정보만을 보여주거나 특정 기능만을 수행하는 작은 어플리케이션으로써 RSS처럼 웹 사이트를 방문하지 않고서도 필요한 정보 또는 기능을 제공받을 수 있다. 위젯의 종류는 크게 윈도우 비스타 가젯(Gadget)처럼 PC에 설치되는 데스크톱 위젯(desktop widget)과 제휴된 웹 사이트에 설치되는 웹톱 위젯(webtop widget)으로 구분할 수 있다. 위젯은 HTML, CSS, Javascript에 의해 제작되는데 사용자 컴퓨팅 환경을 고려해 가벼운 프로그래밍 모델(lightweight programming model)을 지향한다. 위젯은 설치 기반의 어플리케이션이기 때문에 무거운 위젯은 사용자에게 외면 당하기 쉽다.
- p66, 웹의 위젯화(Widgetization of The Web)

위키(Wiki) 모델은 '참여, 공유, 개방'을 표방한 웹 2.0 철학에 가장 근접한 서비스 모델이다. 위키 모델이 보편화된다면 지식 문화의 패러다임을 바꿀 수 있을 정도로 강력한 위력을 가지고 있다.
위키 타입 인터페이스(Wiki-like interface)는 위키피디어를 차용한 인터페이스를 의미한다. 최근 들어 정보 기반의 웹 사이트를 많이 채택하고 있는데, 이것은 다음과 같은 인터페이스 특징을 갖는다
-p76, 위키 타입 인터페이스(Wiki-tupe Interface)

--- 본문 중에서

- 웹2.0의 개념과 전략은 해외 주요 사이트들에서 어떤 모습으로 구현되고 있는가?
- 2천 개가 넘는 사이트를 기획과 설계, 디자인 관점에서 분석 정리한 '웹2.0의 77가지 키워드와 디자인 패턴'

웹은 진화하고 있다. 자신만 변화하는 것이 아니라 모든 산업 근간을 뒤흔들며 빠른 속도로 진화하고 있다. 그 소용돌이의 중심에 '웹2.0'이 있다. 웹은 이제 더 이상 IT 업계만의 이슈가 아니다. 선거, 미디어, TV, 마케팅, 경영 등 모든 삶의 영역의 기본 질서를 파괴하며 새로운 기회를 만들어 내고 있다. '참여'와 '개방'이란 거스를 수 없는 조류는 공급자 중심에서 소비자 중심으로 '파워 쉬프트'를 서서히 진행시키고 있다. 이런 변화의 본질을 꿰뚫고 미래를 준비하는 기업과 사람들에게는 지금의 이런 변화가 새로운 '파워'를 획득할 수 있는 좋은 기회이다.

그렇다면 이런 변화의 중심에서 소비자의 마음을 사로 잡고 새로운 비즈니스 기회를 포착하려는 사람들이 관심을 갖고 주목해야 할 웹 업계의 핵심 키워드는 무엇인가? 사소한 디자인 요소 하나로 '웹 사이트의 성공'이 판가름 날 수 있는 시대를 살아가는 우리가 관심 갖고 집중해야 할 '웹 설계 전략'은 무엇인가?

수 많은 기업에서 사용자 경험 프로젝트 컨설팅을 진행했고, 사용자 인터페이스 및 인터랙션 디자인 분야에서 국내 최고 전문가로 손꼽히는 이 책의 저자는 변화하고 있는 웹의 전략과 트렌드를 분석하기 위해 전 세계에서 새롭게 주목 받고 있는 웹 사이트를 2,000개 넘게 분석하였다. 그리고 그 사이트 중 기획과 설계 관점에서 77가지 키워드와 디자인 패턴을 추출하였다.

이 책은 이렇게 추출한 77가지 핵심 키워드를 기획과 설계 관점에서 크게 5가지로 분류하였다. 이런 분류는 웹2.0 비즈니스에 관심 있는 경영자, 기획자, 디자이너들이 해외에서 주목 받고 있는 사이트들의 '핵심 설계 패턴'을 빠른 시간 안에 습득할 수 있도록 도와준다. 각 키워드 별로 핵심 내용과 함께 참고 사이트가 정리 되어 있다. 매 페이지마다 키워드의 핵심 사상을 잘 표현한 스크린 캡쳐를 함께 제공하기 때문에 200개가 넘는 스크린 캡쳐만 훑어 봐도 빠른 시간 안에 새로운 트렌드를 파악하고 집중적으로 연구해야 할 키워드 및 디자인 패턴이 무엇인지 알 수 있게 구성되어 있다. 각 키워드 별로 제공하는 이론적 근거와 관련 자료는 더 깊은 학습을 원...- 웹2.0의 개념과 전략은 해외 주요 사이트들에서 어떤 모습으로 구현되고 있는가?
- 2천 개가 넘는 사이트를 기획과 설계, 디자인 관점에서 분석 정리한 '웹2.0의 77가지 키워드와 디자인 패턴'

웹은 진화하고 있다. 자신만 변화하는 것이 아니라 모든 산업 근간을 뒤흔들며 빠른 속도로 진화하고 있다. 그 소용돌이의 중심에 '웹2.0'이 있다. 웹은 이제 더 이상 IT 업계만의 이슈가 아니다. 선거, 미디어, TV, 마케팅, 경영 등 모든 삶의 영역의 기본 질서를 파괴하며 새로운 기회를 만들어 내고 있다. '참여'와 '개방'이란 거스를 수 없는 조류는 공급자 중심에서 소비자 중심으로 '파워 쉬프트'를 서서히 진행시키고 있다. 이런 변화의 본질을 꿰뚫고 미래를 준비하는 기업과 사람들에게는 지금의 이런 변화가 새로운 '파워'를 획득할 수 있는 좋은 기회이다.

그렇다면 이런 변화의 중심에서 소비자의 마음을 사로 잡고 새로운 비즈니스 기회를 포착하려는 사람들이 관심을 갖고 주목해야 할 웹 업계의 핵심 키워드는 무엇인가? 사소한 디자인 요소 하나로 '웹 사이트의 성공'이 판가름 날 수 있는 시대를 살아가는 우리가 관심 갖고 집중해야 할 '웹 설계 전략'은 무엇인가?

수 많은 기업에서 사용자 경험 프로젝트 컨설팅을 진행했고, 사용자 인터페이스 및 인터랙션 디자인 분야에서 국내 최고 전문가로 손꼽히는 이 책의 저자는 변화하고 있는 웹의 전략과 트렌드를 분석하기 위해 전 세계에서 새롭게 주목 받고 있는 웹 사이트를 2,000개 넘게 분석하였다. 그리고 그 사이트 중 기획과 설계 관점에서 77가지 키워드와 디자인 패턴을 추출하였다.

이 책은 이렇게 추출한 77가지 핵심 키워드를 기획과 설계 관점에서 크게 5가지로 분류하였다. 이런 분류는 웹2.0 비즈니스에 관심 있는 경영자, 기획자, 디자이너들이 해외에서 주목 받고 있는 사이트들의 '핵심 설계 패턴'을 빠른 시간 안에 습득할 수 있도록 도와준다. 각 키워드 별로 핵심 내용과 함께 참고 사이트가 정리 되어 있다. 매 페이지마다 키워드의 핵심 사상을 잘 표현한 스크린 캡쳐를 함께 제공하기 때문에 200개가 넘는 스크린 캡쳐만 훑어 봐도 빠른 시간 안에 새로운 트렌드를 파악하고 집중적으로 연구해야 할 키워드 및 디자인 패턴이 무엇인지 알 수 있게 구성되어 있다. 각 키워드 별로 제공하는 이론적 근거와 관련 자료는 더 깊은 학습을 원하는 사람들에게 좋은 길잡이가 될 것이다.

이 책은 크게 5개 장으로 구성되어 있다. 제1장은 인포메이션 디자인에 관한 얘기이다. '인포메이션 디자인'은 복잡하고 어려운 정보를 쉽게 이해할 수 있게 만드는 방법 또는 기술이다. 이 관점에서 새롭게 주목 받고 있는 '대시보드 디자인', 태그 클라우드', '비주얼 서치', '마이크로링크', '블로그 타입의 초기 화면', '검색과 브라우징의 결합', '드릴다운 네비게이션' 등 21가지의 디자인 패턴을 소개하고 있다.

제2장은 인터페이스 디자인을 다룬다. '인터페이스 디자인'은 편의성과 효율성을 높이기 위한 과정이다. 이 장에서 다룬 '제약이론(TOC)', '강력한 그룹핑', '큰 입력필드', '클릭단서' 등은 인터페이스 디자인의 기본으로 돌아가기 위한 개념이며, '웨블리케이션', '웹의 위젯화', '카토그래피 인터페이스', '멀티 아이프레임' 등은 창의적인 발상을 적용시킨 사례이다.

제3장은 인터랙션 디자인을 설명한다. 웹 인터페이스는 인쇄물과는 달리 사용자와의 인터랙션이 매우 중요하므로 이 장에서 다루는 '로딩표시기', '미리보기 팝업', '지동 완성', '빠른 검색', '북마크릿과 파비콘' 등의 12가지 디자인 패턴은 인터랙션 디자인에 대한 새로운 통찰을 제공할 것이다.

제4장은 그래픽 디자인에 대한 분석이다. 그래픽 디자인은 화면의 인상 즉 'Look & Feel'을 구축하며, 시각적 효과를 통해 정보전달을 돕는 역할을 수행한다. 웹2.0 시대의 트렌드를 이루는 '단순한 레이아웃', '단순한 네비게이션', '리퀴드 디자인', '투명한 컨트롤 패널', '본문 중심의 레이아웃', '코멘트 디자인' 등의 18가지 디자인 패턴을 조명하고 있다.

제5장은 마케팅 디자인에 대한 얘기이다. 웹2.0 환경은 새로운 서비스를 사용자에게 이해시켜야 하고 새로운 경쟁환경을 극복해야 하기 때문에 정교하고 체계적인 마케팅 구현을 위한 마케팅 디자인의 개념이 더욱 중요해지고 있다. 이 장에서 다루는 '버즈 마케팅', '만화 마케팅', '서비스 모델 전달하기', '디자인 요소로서의 광고 요소', '웹 배지' 등이 그런 개념이다.

저자는 "웹을 기반으로 비즈니스 전략을 수립하고, 사이트 설계와 기획을 하고, 디자인 전략을 수립하는 사람이라면 훌륭한 개념과 전략을 수립하는 것도 중요하지만 그에 못지 않게 그런 개념과 전략을 어떻게 구조화하고 어떤 기법으로 전달할 것인지를 아는 것이 중요하다"며 "2천 개가 넘는 해외 사이트 분석을 통해 77가지 디자인 패턴으로 정리한 이 책이 웹2.0 방식의 기획과 디자인에 대해 고민하는 사람들에게 새로운 웹 트렌드를 빨리 습득하게 하고, 더 깊은 학습을 위한 작은 단서가 되길 바란다"고 말했다