콘텐츠로 건너뛰기

홈페이지를 만들자 (5) 페이지 레이아웃 잡기(UI Wireframe 설계)

Wireframe(이하 와이어프레임)이란, 쉽게 말해 화면 설계도이다. 어떤 페이지에 어떤 내용이, 어떤 레이아웃으로 배치되는가에 대한 대략적인 구조도로 디자이너가 디자인 작업을 시작하기 위한 초석이라고 할 수 있다. 먼저 홈페이지 제작 과정을 개괄적으로 살펴보자.

홈페이지 제작 과정

홈페이지 제작 과정에 따른 일정을 보여주는 이미지입니다. 프로젝트 관리는 전 일정 필요하며, 기획, 디자인&퍼블리싱, 개발, 테시트&오픈 순으로 이뤄집니다.
< 홈페이지 제작 과정 및 일정 >

대략적인 홈페이지 제작 과정을 다시 짚어보자면, 기획 > 디자인 > 퍼블리싱 > 개발 > 테스트 및 오픈 순으로 진행된다. 나(광고주)의 경우는, 기본적으로 실제 개발자나 디자이너와 소통하지 않기 때문에 이 단계에서 에이전시의 PM과 잘 소통해두어야 훗날의 파국을 방지할 수 있다. 일정의 경우, WBS(Work Breakdown Structure)라는 상세한 태스크와 일정을 기재하는 일정표로 관리하기도 한다.

우리들의 연결 고리, 의사소통의 매개체: UI 와이어프레임

외부에 있는 업체와 일을 하는 것은 한 마디로 ‘말 전달하기 게임’이라고 생각하면 된다. 처음 시작할 때의 포부에 찬 말은 전달에 전달을 거듭하며 이빨이 빠지거나, 처음 의도와는 너무도 다른 방향으로 커지는…. 기획자 입장에서는 장탄식을 불러일으키는- 아주 무시무시한 괴물이 되어 어느 날 눈앞에 나타난다. “아.. 그때 말씀해주신 게 이거 아닌가요…?”

광고주(나) <—> 웹 에이전시 PM <—> 웹 에이전시 디자이너/개발자

이 사이의 간극을 메워주는 것이 바로, 와이어프레임이다. 찾아보니 와이어프레임을 그리는 도구는 매우 많다. 하지만 우리들의 나무위키가 말했다. 지구에서 인간만큼 템빨(장비발) 받는 동물은 없다고. 그러나 인간은 도구를 스스로 제작하고 잘 사용하기 위해 고도의 숙련을 필요로 하므로 단.순.템.빨은 없다고!

여러 툴을 익히는 기회가 되었을지는 모르지만, 내가 그림 그리기 가장 좋은 툴은 PPT였기 때문에 다른 옵션은 쳐다보지 않고 PPT를 사용했다.

PPT로도 할 수 있다! 더 예쁜 그림을 위한 PPT 도구 – 파워목업(PowerMockup)

파워목업은 파워포인트에 연동되어 여러 UI 도구를 쓸 수 있게 해주는 서비스다. 물론 파워포인트도 기본적으로 제공하는 도구가 있고, 잘 사용한다면 꽤 그럴듯한 그림을 그릴 수 있다. 하지만 화면 설계에 자주 쓰이는 아이콘이나 버튼, 화살표가 추가된다면?! 능력치 +10 이 단숨에 올라가는 것을 경험할 것이다.

파워목업이 제공하는 UI 도구를 볼 수 있는 화면 스크린샷
파워목업을 설치하면 우측의 사용할 수 있는 도구들이 활성화된다.

사용 방법은 직관적이다. 쓰고 싶은 도구를 선택해서 왼쪽의 빈 화면에 끌어다 놓기만 하면 된다. 실제로 작업할 때는 트라이얼 기간이 끝나는 바람에 쓰진 않았지만, ‘향후에 비슷한 기획을 하게 된다면 적극적으로 회사에 어필하여 구매하고 말 테다…!’ 라는 마음이 들 정도로 만족했다. 더 자세한 설명을 보고 싶다면, 파워목업 사이트에서 확인하세요.

■ 기본적인 UI Wireframe 구성 (예시 제공)

막상 PPT의 빈 페이지를 보면 막막할 수 있다. 그러나 쫄지 말고, 지난 시간에 그린 IA를 보며 화면을 다음과 같이 3 부분으로 나눈다.

와이어프레임의 기본 구조를 보여주는 이미지로, 화면을 3개의 영역으로 분할합니다.
와이어프레임의 기본 구조도

상단 빨간색 1번 영역은 이 페이지의 위치를 알려주는 칸으로, IA 상 페이지 경로를 정확히 명시해줄 필요가 있다. 예를 들어 홍보센터라는 메뉴 밑에 있는 공지사항에 대한 경로는 ‘홍보센터 > 공지사항’ 이라고 표기를 하면 된다. 화면 ID는 내부 관리용이니 지금은 무시하도록 하자.

중앙의 화면 영역의 대부분을 차지하는 파란색 2번 영역은, 페이지의 구성을 보여주는 스토리보드 칸이다. 어떤 위치에 어떤 크기로, 텍스트/이미지/영상 따위의 요소를 대략 잡아준다. 이때 각 요소의 넘버링을 붙이도록 하자. GNB와 Footer 등 한 페이지에서 보일 수 있는 모든 내용을 적어두는 것이 좋다.

우측의 긴 초록색 3번 영역은, 2번에서 레이아웃을 잡은 요소에 대한 상세 설명을 적는 칸이다. 배너 이미지를 클릭할 경우 이동할 링크의 주소나 특정 이미지를 사용하기 원하면 그 이미지에 대한 다운로드 링크 등 디자인할 때 참고했으면 하는 내용을 적는다.

이렇게 영역을 잡아두었다면 이제 페이지별로 내용을 채우면 된다. 차아암, 쉽죠? 다음 글부터는 주요 페이지 레이아웃에 관해 이야기해볼까 한다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다