머리말

기업의 사원들과 협업 커뮤니티에 있는 외부 비즈니스 파트너들을 연결하는 가상 기업 International Business Council (IBC)를 예를 들어 설명하겠다. IBC는 기존 웹 사이트를 재 디자인 해야 하고 문서 스토리지, 디스커션 그룹, 특화된 작업 그룹, 컨퍼런스 스케줄링, 스케줄 세션 디스크립션, 세션 종료, 기타 기능이 필요하다.

우리의 프로세스에는 비즈니스 목표, 사용자 목표를 분석하고 기존 웹 사이트를 평가하는 것이 포함된다. 이러한 분석을 통해 대안 솔루션을 디자인 하고, 사용자 피드백을 통해 조정하고, 최종 디자인 솔루션에 도달했다.

그림 1은 이 프로세스의 개요도이다. 다음과 같은 네 단계로 구성된다:

• 분석
• 디자인
• 프로토타이핑
• 개발

이 프로세스는 사용자의 목표, 태스크, 관심 분야에 초점을 맞춘다. 그림 1은 선형 시퀀스이지만 프로세스는 그렇지 않다. 각 단계는 앞뒤로 다른 단계에 정보를 준다. 이 프로세스를 통해서, 피드백은 중요한 정보를 이전 단계에 제공하고 향상된 솔루션으로 진화하도록 한다. 피드백은 값진 정보를 제공하여 프로젝트 트랙을 유지시키며 전체적인 목표에 계속적으로 초점을 맞추게 한다. 이 글에서는 이 프로세스의 첫 세 단계에 초점을 맞추겠다.

그림 크게 보기

이 프로세스는 클라이언트에게서 피드백을 모으고 수락을 얻어낼 수 있는 문서를 만든다. 각 단계의 문서화를 통해 프로젝트가 어떻게 진행되는지를 이해할 수 있고 네 단계에 걸쳐 어떻게 구현이 이루어지는지도 파악할 수 있다. 빠른 보폭의 공격적인 스케줄에서는 디자인을 통해 만들어지는 것 외에는 어떤 것도 만들어지지 않는다. IBC의 기존 웹 사이트는 알려진 문제를 갖고 있었고 유용한 기능들도 갖고 있었다. 이전 프레임웍을 사용하여 분석을 했고, 그 결과 보다 클라이언트와 보다 생산적인 논의를 할 수 있었다.

프로젝트에 대한 더 많은 정보들이 모아지면서 프로세스를 알려주고 디자인 목표를 지원하는 대안의 수는 줄어든다. 디자인 결정은 디자인 이슈에 대한 더 많은 지식들을 구체화 함으로서 향상된다. 시간이 흐르면서 대안들은 줄어들고 디자인 영역에 정보는 증가한다.

이 글에서는 분석 단계를 상세히 설명한다. 디자인 대안들을 설계, 프로토타이핑, 평가하는 반복적인 프로세스로서 디자인 단계를 검토한다. 사용자를 파악하여 유용하고 바람직한 웹 사이트를 만들 수 있다.

분석 단계

분석 단계는 프로젝트를 이해하는데 도움이 되는 정보를 모으는데 초점을 맞춘다. 비즈니스와 사용자 목표에 대한 정보를 모은다. 우리의 문제는 기존 웹 사이트를 분석하는 것으로 시작되었다. 프로세스는 네 가지 핵심 컴포넌트의 관점에서 웹 사이트를 평가한다:

• 콘텐트
• 네비게이션과 계층
• 인터랙션
• 비주얼 언어

이 방법은 TSDesign의 User Experience Audit(참고자료)에 기반하고 있다. 이러한 분석 목록들은 평가, 권고, 디자인 논의를 구성하는 방법으로서 프로세스 동안 사용된다. 분석과 권고안에서 정보를 통합했다. 비즈니스와 사용자 목표, 그리고 각 분석 영역을 간단히 설명하겠다.

비즈니스 목표

프로젝트의 초기에 비즈니스 목표를 이해하는 것이 중요하다. 미션, 비즈니스 목표, 프로젝트 목표를 분명히 표현하는 것이 클라이언트와 디자이너간 상호 이해의 기초가 된다. 연속적인 디자인 결정들은 이러한 목표를 지원할 수 있다. 목표는 명확하게 만들어져서 후속 디자인 결정들이 이에 따라 정렬되고 프로세스 동안 목표를 지원해야 한다. 우리의 목표는 기업이 고객들을 위해 외부 웹 사이트를 제공하게끔 하는 것이다. 우리의 비즈니스 목표는 다음과 같다:

• 기업의 솔루션과 전략에 맞게 고객과 더욱 협업한다.
• 고객들로부터 피드백을 모은다.
• 기업과 향수 이벤트에 대한 정보를 유포한다.
• 고객을 끌어들인다.

사용자 목표

사용자의 목표와 바람을 규명하는 것도 중요하다. 이 정보를 모으는 많은 기술들이 있다. 일반적으로 사용자 인터뷰와 설문 조사를 통해 역할과 태스크를 이해할 수 있다. 기존 디자인도 디자인의 평가와 권고에 좋은 수단이 된다.

사용자 목표에는 다음 내용이 포함된다:

• 세 번 미만의 클릭으로 콘텐트에 액세스 하는 것 같은 콘텐트로의 쉬운 액세스
• 단순하고 통합된 웹 사이트 검색
• 콘텐트를 편집하고 파일 첨부를 제출할 수 있는 멤버를 선택할 수 있는 기능
• 사용자 커뮤니티에서 디스커션과 코멘트 실행하기
• 시의 절절한 정보를 커뮤니티에 제공하기

사용자는 사이트에 오는 모든 사용자들이다. 규명된 사용자 유형들은 메인 역할들로 정리된다. 각 범주에 있는 사용자들은 Cooper (참고자료)가 정의한 대로 구분된다. Cooper의 GOAL-DIRECTED® 방식은 제품, 서비스, 시스템에 의존하는 특정 (가상의) 사람들의 취향을 나타내는 Persona에 기반한다.

이 모델들 중 가장 중요한 것은 사용자 Persona 세트이다. 이들은 알파벳 순으로 정렬된다. 사용자 Persona는 작동 패턴과 목표를 구별한다. -- Cooper.

그림 2처럼, 사용자를 Persona로 정리하여, 사용자는 많은 사용자들을 만족시키지 않고도 디자인의 가용성과 유용성을 평가할 수 있다. 이러한 Persona들이 디자인 프로세스에서 만족된다면 대부분의 사용자 커뮤니티에도 부합될 것이다. 우리 디자인에서 세 가지 Persona를 정의했다. 일반 고객, 그룹 리더, 관리자. 이들 각 사용자들의 요구 사항은 달랐다. 각 범주의 많은 사용자들에게 기존 웹 사이트를 사용하는 방법을 결정하도록 했다. 디자인이 진행되면서 우리 프로토타입에서 이들이 태스크를 수행하여 피드백을 얻고 이들이 실제로 사이트를 사용하는 방법을 이해할 수 있다.

콘텐트

콘텐트는 사용자를 사이트로 불러들인다. 일관성이 있어야 하고, 최신의 내용이어야 하며 각 사용자 유형의 목표를 다뤄야 한다. 다시 디자인을 하는 동안, 여러 가지 문제들을 고려해야 했다:

콘텐트는 내용이 일관되어야 한다.

사용자가 메시지에 대해 혼란을 겪지 않도록 콘텐트는 일관되어야 한다. 일관성 없는 콘텐트는 사용자를 혼란에 빠트리고 이해하기 어렵게 만든다.

일관성 없는 콘텐트의 전형적인 예는 사이트 전반에 걸친 용어 사용이다. 특정 어휘를 사용하기로 결정하면 이것을 계속 사용해야 한다. 예를 들어, 그림 4는 여러 가지 혼란스러운 용어를 보다 일관된 세트로 정리한 모습이다. 이러한 용어의 상세한 구분은 사이트의 검색과 계층을 조사하는 동안 이루어졌다. (몇 가지 용어는 부차적인 문제이고 다른 용어들은 링크로 연결된다.)

기능은 전체적인 목표를 지원해야 한다.

각 기능은 애플리케이션의 전체적인 목표를 지원해야 한다. 그렇지 않으면, 분산되고 관련성도 없어진다. 콘텐트가 일관성 없으면 사용자도 마찬가지이다.

콘텐트의 양은 적절해야 한다.

콘텐트의 양은 사용하기에 알맞아야 한다. 일반적으로 사용자들은 웹 페이지를 읽지 않는다. 관련 정보만 훑어볼 뿐이다. 정보의 양을 최소로 유지하면서 필요한 계층만 제공한다. 그렇게 해서 사용자들이 페이지를 쉽게 검색할 수 있도록 한다. 알맞은 곳에 전체 내용을 두도록 한다.

이미지, 그래픽, 애니메이션은 사용상 편의를 제공해야 한다.

그래픽 요소들은 사용상의 편의를 제공해야 하고 전달되는 스토리를 지원해야 한다. 어떤 애플리케이션에서 이미지는 유용하기 보다는 산만하다. 이러한 상황을 피하라.

콘텐트는 정확하고 현재의 것이어야 한다.

시간에 민감한 데이터의 경우 모든 콘텐트와 코드는 정확하고 최신의 것을 유지해야 한다. 보안 또는 내용 변경으로 인한 소프트웨어 업그레이드가 이에 포함된다.

그림 3은 기존 사이트와 재 디자인된 웹 사이트의 콘텐트 용어에 대한 네비게이션 바 모습이다. 사이트 전반에 걸친 일관성 있는 용어들은 정확성에 기여하고 혼란을 줄인다.

네비게이션과 계층

네비게이션과 계층은 사용자 태스크를 쉽게 만드는데 사용된다. 자연스럽고 사용하기 쉬운 인터페이스를 만드는데 도움이 된다. 단순하고 간단하며 예견 가능해야 한다. 아이템을 클릭할 때 사용자가 어디에서 끝낼 것인지가 명확해야 한다. Krug은 실제 네비게이션과 웹 사이트 네비게이션을 비교했다. (참고자료) 그는 온라인이 스케일, 방향, 위치의 개념이 없다고 지적한다. 이 문제를 해결하기 위해 웹 사이트에는 여러 가지 기술과 규약들이 도입된다:

알맞은 이름

용도에 알맞은 아이템 레이블을 제공하여 사용자가 링크를 클릭할 때 자신들이 어디에 있고 어디로 향하는지를 이해할 수 있도록 한다. 링크가 어디로 가는지를 정확히 예견할 수 있는 기능은 중요하다. 결과 페이지의 “흔적”을 제공하면 가능하다.

알맞은 경로

계층 내 아이템에 알맞은 경로를 제공하여, 사용자가 웹 사이트의 모델을 구축하고 이들이 사이트 내에 어디에 위치해 있는지 이해할 수 있도록 한다.

위치 감각

좋은 애플리케이션은 언제나 위치 감각을 제공하여 사용자가 자신들이 어떤 위치에 있는지를 알 수 있도록 한다. 또한 다음에는 어디로 가는지도 알 수 있다. 시각적 엘리먼트(브랜딩)과 사이트의 계층 내의 페이지 위치를 통해 이루어질 수 있다.

네비게이션과 계층 트래버스

웹 사이트 콘텐트는 하이퍼링크가 되어야 한다. 어떤 인스턴스의 경우, Breadcrumb로 사용자가 어디에 있는지를 알 수 있고 계층을 트래버스 하는 빠른 방법을 제공한다. 예를 들어, 웹 사이트의 다른 부분들에 대한 참조는 액티브 링크가 되어야 한다. 사람들의 이름은 그 사람의 프로파일로 링크되어야 한다.

결국 웹 사이트는 작업 그룹, 컨퍼런스, 멤버로 구성된 세 개의 주요 영역들로 나뉘었다. 시각적 언어의 색상을 사용하여 위치 감지 기능이 만들어져서 각 주요 섹션들을 나타냈다. 그림 4는 각 영역에서의 색상 사용에 대한 비교표이다.

인터랙션

인터랙션은 가능한 투명하여 사용자 태스크를 수월하게 해야 한다. 전형적인 인터랙션 시나리오는 디자인과 프로토타이핑 단계에서 규명 및 문서화 된다. 인터랙션은 용이성에 큰 영향을 미치는 주요 디자인 요소이다. 인터랙션은:

명확한 인터랙션

사용자에게 단순하고 간단한 지침을 제공한다. 이 경우, 간단한 지침을 제공하면 사용자가 이것을 읽고 따를 수 있다. 대부분의 액션들은 운영 팀에게만 유용한 것들이었는데, 사이트 전반에 걸쳐 일관성 있게 디스플레이 된 단순한 단어들이다.

명확한 피드백

사용자가 시작한 어떤 액션에 대해 일관성 있고 명확한 피드백을 제공하는 것이 중요하다. 사용자에게 가는 메시지들은 일관된 언어와 용어를 사용했는지 검토되어야 한다. 피드백은 사용자를 비난해서는 안된다.

효율적인 완성

시스템은 태스크를 효율적으로 완성해야 한다. 완성된(또는 그렇지 않은) 특정 태스크에 대해 사용자에게 대안 방식을 제공한다. 태스크 완성을 표시하는 알맞은 피드백을 제공한다.

에러 핸들링

가능하다면, 에러가 일어나지 않도록 한다. 에러가 발생하면 핸들링은 단순하고 간단해야 한다. 사용자에게 가는 메시지는 비난하는 어투여서는 안된다.

예상

가능한 사용자 액션의 파생물들을 제공하는 것 같은 예상 관리를 의미한다. 메커니즘을 사용하여 사용자들에게 액션의 파생물들에 대해 알려준다.

막다른 곳(dead-end) 피하기

인터페이스는 사용자가 무엇을 해야 할지, 어디로 가야 할지 모르는 상황 속에 남겨두는 막다른 곳을 피해야 한다.

진행 상황

애플리케이션과의 인터랙션을 통해 사용자에게 태스크의 진행 상황을 알려줘야 한다.

협업

협업은 디자인의 목표는 아니지만, 네트워크로 연결된 세계에서 점점 더 중요해지고 있다. 사용자들간 협업을 지원하여 커뮤니티 개념을 일깨워라. 커뮤니티는 사용자가 시작한 코멘트와 리뷰를 통해서 서로서로 지원한다.

에러가 표시된 404 페이지 대신, 그림 5는 사용자가 관련 정보를 쉽게 찾을 수 있는 맵 페이지를 보여주고 있다.

비주얼 언어

비주얼 언어는 그래픽 기술로서 사이트를 하나로 묶고 사용자에게 일관된 경험을 제공한다. 비주얼 언어는 컬러, 그리드, 활자체, 위젯 사용, 이미지 같은 다양한 요소들을 갖고 있다. 비주얼 언어는 일관성이 있어야 하고 디자인의 전체 목적에 부합해야 한다. 애플리케이션 계층의 검색에 사용되어야 한다. 시각적 언어는 강력하고 일관된 브랜드를 만드는 가장 효과적인 방법이다. 디자인의 공통 브랜딩 엘리먼트들을 통해 위치 인식 기능을 만들 수 있다.

일관된 시각적 스타일

시각적 스타일은 일관성이 있어야 하며 전체 디자인 전략에 맞아야 한다. 일관된 엘리먼트를 사용하여 사용자들이 같은 페이지에 있다는 인식을 심어줘야 한다.

효과적인 개념

효과적인 시각적 개념은 전체 디자인의 모든 측면을 지원한다. 비즈니스와 사용자 목표를 시각적으로 표현한다.

네비게이션과 계층 지원

시각적 언어는 계층 개념을 지원하고 사용자의 위치와 태스크를 보강해야 한다. 사용자가 다음에는 어디로 가야 할지 명확해야 한다. 웹 사이트 구조는 쉽게 이해할 수 있어야 한다.

뚜렷한 브랜드 규명

뚜렷한 브랜드 규명은 사용자가 웹 사이트에서 편안함을 느끼고, 안정되고 일관성 있다고 생각할 수 있도록 하는데 중요한 요소이다.

컬러를 사용하면 브랜드와 시각적 언어를 정의하는데 도움이 된다. 그림 6은 웹 사이트 내에서 위치 인식 기능을 만들 때 색상이 어떻게 사용되는지를 보여준다.

다음 단계는 반복 프로세스에서 살아남을 수 있는 개념과 기술에 초점을 맞춰 설명하겠다. 디자인, 프로토타이핑, 분석을 반복하여 디자인 결정을 내리고 유용하고 바람직한 솔루션을 만든다. 결과는 시나리오를 만들거나 정의된 Persona의 활동을 강조한 웹 사이트를 만드는 것이다. 방법의 효과는 사용자 피드백과, 네비게이션, 계층, 인터랙션, 비주얼 언어의 목록을 분석하여 결정된다.

위로

디자인 단계

디자인 단계는 새로운 애플리케이션이나 웹 사이트용 디자인을 만드는 단계이다. 이 단계는 웹 사이트의 기술 스팩을 조정한다. 디자인 결정은 독단적으로 이루어지지 않고, 웹 사이트의 사용자와 비즈니스 목적을 지원해야 한다. 첫 번째 단계에서 분석과 권고안을 취한다:

• 콘텐트 (페이지 개요)
• 네비게이션과 계층 (정보 아키텍처)
• 인터랙션 (시나리오 분석)
• 비주얼 언어 (비주얼 스타일 가이드)

콘텐트

콘텐트와 구조는 일관되어야 한다. 여기에서, 규명된 주요 엘리먼트로 일반적인 페이지 디스크립션을 만들고 페이지 상에서 서로에 대한 관계를 규명해야 한다. 최종 레이아웃은 다를 수 있지만 규명된 컴포넌트 엘리먼트는 모든 페이지에 나타날 것이다. 예를 들어, 레벨 1 검색 엘리먼트는 페이지 상단에 나타나고, 레벨 2 링크는 오른쪽 칼럼에 나타날 것이다. 기존 페이지와 관련된 정보는 현재 사용자에 맞게 커스터마이징 되어 나타난다. 그림 7은 콘텐트 레이아웃과 다른 엘리먼트와의 관계를 보여준다.

네비게이션과 계층

네비게이션과 계층은 웹 사이트의 중추이며, 이 곳에서 정보와 애트리뷰트의 주요 카테고리들을 구성한다. 이들은 웹 사이트의 맵과 메뉴, 버튼, 관련 링크로 구성된다. 세 가지 레벨의 네비게이션이 있는데, 이들은 사이트 맵으로 반영된다. (그림 8)

그림 크게 보기

인터랙션

인터랙션은 가장 일반적인 액티비티에 대한 (정적/동적) 시퀀스를 만들어서 부분적으로 분석된다. 목표는 클릭 수를 줄여서 웹 사이트의 정보에 액세스 하는 것이다. 느린 로드를 줄이고 가용성을 향상한다.

전형적인 인터랙션 시퀀스가 그림 9에 나타나 있다. 스크린 시퀀스는 홈 페이지에서 컨퍼런스 페이지, 그리고 특정 컨퍼런스 세션의 원하는 정보까지 간단한 태스크 인터랙션 시퀀스를 보여준다. 각 페이지는 이전 페이지의 사용자 선택 (클릭)을 통해 당도한 새로운 페이지를 나타낸다. 이 짧은 시퀀스는 홈 페이지에서 시작하여 특정 컨퍼런스의 세션에 대한 정보까지 간다. 우리는 오래된 웹 사이트의 매우 어려웠던 태스크들을 변형하여 단 두 개의 클릭으로 가능한 시퀀스로 만들었다. 중요한 것은, 같은 태스크를 위해 각 Persona에 맞는 시나리오도 만들었다. 다른 Persona가 새로운 디자인에서 자신들의 태스크를 얼마나 효율적으로 수행할 수 있는지를 보여줄 수 있었다. 이 태스크들은 가용성 연구, 인터뷰, 기타 기술들을 통해 얻을 수 있다. 일반적으로 한 태스크를 수행하는데 여러 방법들이 있다. 대안들은 디자인 문서에 기록된다.

시각적 언어

우리는 일관된 시각적 언어를 사용하여 비즈니스와 사용자 목표를 보강하기 원했다. 간단하고 깔끔하면서도 사용하기 쉬운 룩앤필을 만드는 것이 목표이다. 시각적 언어는 디자인 방식을 반영하고 단순함과 용이성에 큰 도움이 된다. 시각적 언어에는 메뉴 같은 많은 그래픽 기술들이 포함된다:

컬러

컬러는 웹 사이트의 정체성과 모양을 만들기에 좋은 시각적 툴이다. 디자인의 단순함을 보강하기 위해서, 흰색의 백그라운드에 회색이 사용되어 단순하고 깔끔한 모양을 연출한다. 독자가 콘텐트와 이것의 인터랙션에 집중할 수 있도록 하기 위함이다.

활자체

활자체는 웹 사이트의 스타일을 정의하는 또 다른 툴이다. 마찬가지로 단순하고 깔끔하게 표현되어야 한다. 사용된 활자는 다양한 플랫폼에서도 작동되어야 하고, 아니면 최소한 일반 대체 활자로 강등될 수 있다. (그림 10). 예를 들면,

이미지, 아이콘, 로고

아이콘은 디자인에 독특한 브랜드와 위치 인식 감각을 제공한다.

레이아웃과 그리드

레이아웃은 모든 컴포넌트들을 하나로 모은다. 그리드를 사용하여 질서를 잡는 것도 좋은 방법이다.

기술과 적용을 요약한 스타일 가이드를 만들 수 있다. 사실, 이들은 예제로 가득 찬 웹 페이지로서, 전체 시각적 언어에 대해 대한 참고 자료가 된다.

위로

프로토타입 단계

프로토타입 단계는 이전 단계에서 모은 정보들이 디자인 대안들을 만드는데 사용되는 단계이다. 이 대안들은 빨리 만들 수 있는 대강의 프로토타입(그림 11)부터, 사용자 인터랙션이 포함된 정밀한 프로토타입까지 많은 형태를 취한다. Berger가 설명했듯이, 추상 프로토타입에서 구체적인 프로토타입까지(참고자료) 다양한 유형의 프로토타입이 있다. 다양한 프로토타이핑 기술에는 다음과 같은 것이 있다:

• 인터랙티브 카드 정렬
• 페이퍼 프로토타입
• 와이어 프레임
• Excel Spreadsheets 모형
• 프로토타입 모형
• 플래시 데모
• 코드-기반 구현

프로토타입은 콘텐트 정확성, 인터랙티브 정확성, 시각적 정확성으로 구분된다. 이 기술은 그림 11에 묘사되어 있다. 정보 정확성, 시각적 정확성, 인터랙션 정확성을 축으로 프로토타이핑 기술을 묘사하고 있다. 기원은 정적인 프로토타입을 나타내고, 우측 상단 코너는 높은 정확성을 가진 실행 애플리케이션에 접근한 프로토타입 모습이다.

프로토타입을 구현할 때, 주어진 시간 안에 더 많은 대안들을 연구하는 것과 높은 정확성을 기하는 것 중의 선택이 있다. 두 가지 유형의 프로토타입 모두 중요하다. 하지만, 디자인 프로세스 초기에는 너무 상세하게 나타난 프로토타입은 프로토타입의 본분에 어긋나고 디자인의 그릇된 측면에 초점을 맞출 수 있다. Yin Yin Wong은 그의 글에서 빠른 프로토타이핑(참고자료)에 대해 설명했는데, 인터페이스 디자이너들이 사용할 수 있는 그래픽 디자인 기술 범위들이 나타나 있다. 예를 들어, 레이아웃에 관심이 있다면, 상세하게 하는 대신, 정보 구조를 재현하는 텍스트 블록과 관련한 프로토타입을 만들 수 있다. (그림 12)

Marc Rettig (참고자료)는 정확도가 낮은 프로토타입을 사용하는 이유를 다음과 같이 설명한다:

• 정확성이 높은 프로토타입은 시간이 오래 걸린다.
• 검토자들이 프로토타입의 상세에 코멘트를 하느라 중요한 기능을 놓치게 된다.
• 정확성이 높은 프로토타입의 코드는 바꾸기 어렵기 때문에 개발자들이 수정하기를 주저한다.
• 프로토타입은 변경하기 어렵다는 관념을 고정시킨다.
• 정확도가 높은 프로토타입에 생긴 버그 때문에 테스트가 중지될 수 있다.

정확도가 낮은 프로토타입을 사용함으로써 디자인을 보다 효과적으로 검토할 수 있다.

피드백은 이 프로세스에서 중요한 요소이다. 프로토타입 단계는 디자인 단계와 밀접하게 통합되어 있고, 각각 추구하고 개발하는 방향을 알려준다.

우리는 두 개의 프로토타입 기술을 사용하기로 했다. 처음에는, 정확도가 낮은 와이어 프레임을 사용하여 콘텐트와 정보 아키텍처에 초점을 맞추었다. 우리는 웹 사이트의 주요 부분에 이러한 와이어 프레임을 설명했다. 그림 7과 그림 9는 전형적인 와이어 프레임이다.

페이지 요구 사항들이 정확도가 낮은 모형에서 취해진 후에 정확도가 높은 프로토타입 방식을 사용했다. 이러한 프로토타입은 정적이고, 해상도가 높으며, 고급 시각 언어가 포함된다. 그림 13은 전형적인 컨퍼런스 페이지의 고해상 프로토타입 샘플이다.

위로

개발 단계

마지막 단계는 웹 사이트를 개발하는 단계이다. 개발 단계에서 웹 사이트가 실제로 구축 및 테스트 된다. 처음 세 단계는 디자인 구현에 대한 가이드라인을 제공한다. 개발 단계는 구현에 초점을 맞추고 있다.

테스팅은 하나의 단계로서 취급되지 않는다. 개발이 진행되면서 테스팅은 지속적으로 구현의 유효성을 검사한다. 다양한 구현 단계에서, 클라이언트의 피드백이 결합되어 전체적인 디자인에 적용된다. 다음 글에서는 구현 문제를 보다 자세히 설명하겠다.

위로

요약

이 글에서 클라이언트 웹 사이트를 디자인 프로세스를 설명했다. 이 프로세스는 애플리케이션과 인터페이스 디자인에도 유용하다. 이 글이 프로세스를 구성하는데 인사이트를 주었기 바란다. 참고자료를 통해서 다른 디자인 프로세스도 검토해보기 바란다.

웹 사이트가 설계되면 구현 단계에 돌입한다. 다음 글에서는 Windows (Part 3)와 Linux (Part 4)에 개발 환경을 설치하는 방법을 설명하겠다. Drupal을 사용하여 웹 사이트를 만드는데 필요한 환경을 갖추게 될 것이다. Drupal 웹 사이트를 개발하는 방법을 다룰 다음 글을 기대해주기 바란다.

기사의 원문보기

• Using open source software to design, develop, and deploy a collaborative Web site, Part 2: Design for an effective user experience

참고자료

교육

• RSS feeds for this series. (Find out more about RSS.)
  
  
• • "Effective Prototyping: Cheap and Fast Tools for Creating Product Visualizations
  • Newsletter on Personas, by A. Cooper.
  • Don't Make Me Think! A Common Sense Approach to Web Usability: 2nd Edition, by Krug; (Peachpit Press, 2005).
  • Designing Visual Interfaces, by Mullet and Sano; (SunSoft Press, Mountain View, California, 1995).
  • "Prototyping for Tiny Fingers," by M. Rettig; (Communications of the ACM, Vol. 37, No. 4. April 1994).
  • "The Zen of CSS Design: Visual Enlightenment for the Web," by Shea and Holzschlag; (Peachpit Press, 2005).
  • "Designing Effective E-Business Systems: A Holistic Approach," by T. Swack; (Information Architecture 2000, La Jolla, Ca October 26-27, 2000).
  • Rough and Ready Prototypes: Lessons from Graphic Design, by Y. Wong; (ACM SIGCHI Short Talk, 1992).
  
  

제품 및 기술 얻기

• Drupal
  
  
• MySQL
  
  
• PHP
  
  
• PHPMyAdmin
  
  
• MySQL Query Browser
  
  
• MySQL Administrator
  
  
• Apache
  
  
• Eclipse
  
  
• CVS
  
  

토론

• 포럼에 참여하기.
  
  
• developerWorks blogs
  
  
• developerWorks technical events and webcasts.
  
  

필자소개

Alister Lewis-Bowen은 IBM Internet Technology Group의 소프트웨어 엔지니어이다. 1993년부터 IBM UK에서 인터넷 및 웹 기술과 관련 분야에서 일했다. 미국으로 건너와 IBM이 후원하는 스포츠 이벤트용 웹 사이트 작업을 했으며 ibm.com의 시니어 웹 마스터로서 활동하고 있다.

Stephen Evanchik은 IBM Internet Technology Group의 소프트웨어 엔지니어이다. 많은 오픈 소스 소프트웨어 프로젝트의 기여자이며, 그의 IBM TrackPoint 드라이버는 리눅스 커널에서

Louis Weitzman은 IBM Internet Technology Group의 소프트웨어 엔지니어이다. 30년 동안 디자인 및 전산 분야에서 일해왔다. ibm.com에서 사용중인 XML, 프라그먼트 기반 콘텐트 관리 시스템 개발을 도왔으며, 현재는 이머징 프로젝트의 디자인에 참여하고 있다.

아티클 순위

의견

위로

목차

• 머리말
• 분석 단계
• 디자인 단계
• 프로토타입 단계
• 개발 단계
• 요약
• 참고자료
• 필자소개
• 의견