Wireframe(이하 와이어프레임)이란, 쉽게 말해 화면 설계도이다. 어떤 페이지에 어떤 내용이, 어떤 레이아웃으로 배치되는가에 대한 대략적인 구조도로 디자이너가 디자인 작업을 시작하기 위한 초석이라고 할 수 있다. 먼저 홈페이지 제작 과정을 개괄적으로 살펴보자.
■ 홈페이지 제작 과정
대략적인 홈페이지 제작 과정을 다시 짚어보자면, 기획 > 디자인 > 퍼블리싱 > 개발 > 테스트 및 오픈 순으로 진행된다. 나(광고주)의 경우는, 기본적으로 실제 개발자나 디자이너와 소통하지 않기 때문에 이 단계에서 에이전시의 PM과 잘 소통해두어야 훗날의 파국을 방지할 수 있다. 일정의 경우, WBS(Work Breakdown Structure)라는 상세한 태스크와 일정을 기재하는 일정표로 관리하기도 한다.
■ 우리들의 연결 고리, 의사소통의 매개체: UI 와이어프레임
외부에 있는 업체와 일을 하는 것은 한 마디로 ‘말 전달하기 게임’이라고 생각하면 된다. 처음 시작할 때의 포부에 찬 말은 전달에 전달을 거듭하며 이빨이 빠지거나, 처음 의도와는 너무도 다른 방향으로 커지는…. 기획자 입장에서는 장탄식을 불러일으키는- 아주 무시무시한 괴물이 되어 어느 날 눈앞에 나타난다. “아.. 그때 말씀해주신 게 이거 아닌가요…?”
광고주(나) <—> 웹 에이전시 PM <—> 웹 에이전시 디자이너/개발자
이 사이의 간극을 메워주는 것이 바로, 와이어프레임이다. 찾아보니 와이어프레임을 그리는 도구는 매우 많다. 하지만 우리들의 나무위키가 말했다. 지구에서 인간만큼 템빨(장비발) 받는 동물은 없다고. 그러나 인간은 도구를 스스로 제작하고 잘 사용하기 위해 고도의 숙련을 필요로 하므로 단.순.템.빨은 없다고!
여러 툴을 익히는 기회가 되었을지는 모르지만, 내가 그림 그리기 가장 좋은 툴은 PPT였기 때문에 다른 옵션은 쳐다보지 않고 PPT를 사용했다.
■ PPT로도 할 수 있다! 더 예쁜 그림을 위한 PPT 도구 – 파워목업(PowerMockup)
파워목업은 파워포인트에 연동되어 여러 UI 도구를 쓸 수 있게 해주는 서비스다. 물론 파워포인트도 기본적으로 제공하는 도구가 있고, 잘 사용한다면 꽤 그럴듯한 그림을 그릴 수 있다. 하지만 화면 설계에 자주 쓰이는 아이콘이나 버튼, 화살표가 추가된다면?! 능력치 +10 이 단숨에 올라가는 것을 경험할 것이다.
사용 방법은 직관적이다. 쓰고 싶은 도구를 선택해서 왼쪽의 빈 화면에 끌어다 놓기만 하면 된다. 실제로 작업할 때는 트라이얼 기간이 끝나는 바람에 쓰진 않았지만, ‘향후에 비슷한 기획을 하게 된다면 적극적으로 회사에 어필하여 구매하고 말 테다…!’ 라는 마음이 들 정도로 만족했다. 더 자세한 설명을 보고 싶다면, 파워목업 사이트에서 확인하세요.
■ 기본적인 UI Wireframe 구성 (예시 제공)
막상 PPT의 빈 페이지를 보면 막막할 수 있다. 그러나 쫄지 말고, 지난 시간에 그린 IA를 보며 화면을 다음과 같이 3 부분으로 나눈다.
상단 빨간색 1번 영역은 이 페이지의 위치를 알려주는 칸으로, IA 상 페이지 경로를 정확히 명시해줄 필요가 있다. 예를 들어 홍보센터라는 메뉴 밑에 있는 공지사항에 대한 경로는 ‘홍보센터 > 공지사항’ 이라고 표기를 하면 된다. 화면 ID는 내부 관리용이니 지금은 무시하도록 하자.
중앙의 화면 영역의 대부분을 차지하는 파란색 2번 영역은, 페이지의 구성을 보여주는 스토리보드 칸이다. 어떤 위치에 어떤 크기로, 텍스트/이미지/영상 따위의 요소를 대략 잡아준다. 이때 각 요소의 넘버링을 붙이도록 하자. GNB와 Footer 등 한 페이지에서 보일 수 있는 모든 내용을 적어두는 것이 좋다.
우측의 긴 초록색 3번 영역은, 2번에서 레이아웃을 잡은 요소에 대한 상세 설명을 적는 칸이다. 배너 이미지를 클릭할 경우 이동할 링크의 주소나 특정 이미지를 사용하기 원하면 그 이미지에 대한 다운로드 링크 등 디자인할 때 참고했으면 하는 내용을 적는다.
이렇게 영역을 잡아두었다면 이제 페이지별로 내용을 채우면 된다. 차아암, 쉽죠? 다음 글부터는 주요 페이지 레이아웃에 관해 이야기해볼까 한다.