웹 페이지 계획하기

어떻게 비어있는 웹페이지를 원하는 모양의 웹 페이지로 바꿀 수 있을까요? HTML과 CSS를 쓰기 시작하고—쓰면서 마음에 들지 않는 것은 지워버리고, 생각난 것은 추가해보고, 페이지의 구성요소를 재배치해보는 방법이 있습니다.

그러나 그것은 나중에 버리게 될 HTML과 CSS 코드를 작성하는데 많은 시간을 낭비할 수도 있기 때문에 항상 최선의 전략은 아닙니다. 대신에, 실제로 웹 페이지를 만들기 전에 계획해야 합니다. 웹 페이지에 들어갈 콘텐츠, 레이아웃에 대해 생각해보고 웹 페이지가 어떻게 보이고 어떠한 느낌을 주는지 알 수 있습니다.

무언가를 계획하는 것의 첫 번째 단계는 브레인스토밍입니다—하고 싶은 모든 것을 생각해보는 것입니다. 종이에 마인드맵을 그리거나 문서에 메모를 하거나 보드에 포스트잇을 붙이는 것으로 해 볼 수 있습니다.

브레인스토밍은 혼자 할 수 있습니다. 만약 더 다양한 아이디어를 생각해보고 싶다면, 같이 브레인스토밍할 사람을 구하는 것도 좋습니다. 함께 브레인스토밍을 할 때는 상대방의 아이디어의 단점보다는 장점에 초점을 두고 생각해보세요.

많은 아이디어를 만들어낸 후에, 실제로 구현할 아이디어를 선택해야 합니다. 가장 마음에 드는 것에 대해서 (별점을 매기거나 목록에 만드는 방식 등으로)—우선순위를 매기고—나머지는 버리거나 나중을 위해서 보관하세요.

다음 단계는 "페이퍼 프로토타입"을 만드는 것입니다—페이퍼 프로토타입은 웹 페이지를 종이에 그리는 것으로, 박스들과 컨텐츠에 대한 간단한 낙서를 포함한 웹 페이지의 구성 요소에 대한 스케치를 말합니다.

키슈(quiche) 를 찾아주는 웹 앱 SF quiche 의 페이퍼 프로토타입입니다:

페이퍼 프로토타입을 만드는 데에 많은 시간이 걸리지 않기 때문에, 빠르게 반복할 수 있고 기존 디자인에 너무 얽매이지 않을 수 있습니다. 또한, 조금씩 다른 프로토타입을 한 번에 만들 수도 있으며, 사이트 내 여러 페이지의 프로토타입을 만들 수도 있습니다.

프로토타입을 만들었다면, 이번에는 사용자 테스트를 진행하고 싶을 것입니다. 친구에게 프로토타입을 보여주고, 친구들이 무엇을 먼저 클릭하고 싶어하는지 또는 시선의 흐름이 어떻게 흘러가는지 물어보세요. 다른 피드백이 더 있는지도 확인하세요.

페이퍼 프로토타입이 만족스럽다면, 와이어 프레임으로 바꾸고 싶을 것입니다. 와이어 프레임은 프로토타입과 유사하지만, 일반적으로 디지털 작업으로 그려지며 더 정확합니다. 와이어 프레임은 페이지의 각 부분을 나타내는 박스들로 구성되며, 필요하다면 약간의 텍스트와 아이콘도 추가됩니다. 예시로, SF quiche 앱의 와이어 프레임을 보여드리겠습니다:

이 와이어프레임은 유명한 온라인 프로토타이핑 도구인 Balsamiq로 만들어진 것입니다. 파워포인트, 키노트같은 오피스 프로그램 내의 모양 도구를 이용하거나, Photoshop, Gimp, InDesignYou와 같은 디자인 앱을 사용하여 만들 수도 있습니다. 온라인에서 더 많은 프로토타이핑 도구를 찾을 수 있습니다. 와어프레이밍 앱을 사용하기에 앞서 이러한 응용프로그램은 유료라는 사실을 잊지마세요.

와이어프레임을 만들었으면, 사용자 테스트의 또다른 단계를 수행하고 싶을겁니다. 몇 와이어프레이밍 도구는 여러분의 와이어프레임을 다른 사람들에게 공유하고 코멘트를 받을 수 있도록 해줍니다. InvisionApp과 같이 클릭 가능한 영역을 이용해서 새로운 화면을 띄우는, 인터랙티브한 와이어프레임을 만들 수 있도록 해주는 도구도 있습니다.