슬로워크 프리뷰 제작기

디자인 에이전시는 늘 고객과 함께 소통해야 합니다. 그 소통의 중심에는 늘 디자인 시안이 있습니다. 만들어진 시안을 전달하고 그에 대한 의견을 듣고, 수정하고 완성하는 작업이 디자인 작업의 전반인데요. 웹디자인도 다르지 않습니다. 실제 화면에서 보이는 것과 같은 크기(픽셀)로 제작된 시안을 고객에게 전달하는 과정은 매우 중요합니다. 그래서 만들어진 슬로워크 프리뷰. 그 제작 과정을 알아봅니다. 

프리뷰, 왜 필요할까요?

웹디자인 의뢰를 받습니다. 기획, 정보설계가 확정되고 와이어프레임 단계를 거쳐 디자인 시안이 제작됩니다. 보통 2~3종의 다른 안을 준비하고, 메인페이지, 서브페이지를 나눠서 제작하는 경우도 있습니다. 화면에서 보이는 것과 똑같은 픽셀로 제작됩니다. 이런 이미지 파일을 고객에게 어떻게 전달할까요? 

이메일에 첨부 파일로 보냅니다. 고객이 다운로드 받아 열어보는데, 고객 PC의 이미지 보기 설정이 ‘화면 최대화’로 되어있네요. 그럼 우리가 정성 들여 만든 시안이 너무 크고 이상해 보일 겁니다. 어떤 고객은 정확한 배율로 열어 봤지만 가로 폭이나 좌우 여백이 마음에 들지 않습니다. 아무래도 이미지 뷰어와 브라우저에서 직접 보는 것은 큰 차이가 있기 때문입니다. 

이런 소통의 문제를 해결하기 위해 프리뷰 페이지를 만들게 되었습니다. 

프리뷰 페이지의 시작

이런 구성으로 초기 프리뷰 페이지를 제작했습니다. 간단한 html로 제작되었고, 몇 개의 이미지를 브라우저에서 실제와 같은 배율로 확인할 수 있도록 한 것이죠. 고객들에게 정확하게 시안을 전달할 수 있어 소통의 실수도 사라지고, 만족도도 높았습니다. 

첫 시안을 프리뷰에 올려 확인할 수 있는 URL을 고객에게 전달합니다. 이후 수정되는 시안을 디자인 팀에서 업데이트하면 같은 URL에서 확인하면 되니 고객 입장에서도 편리하다는 의견을 받았습니다. 

필요하긴 한데, 불편해요

그런데 프로젝트가 늘어나면서 계속 프리뷰 페이지를 만들다 보니 html 페이지를 만들고, 이미지에 링크를 걸고, FTP를 통해 서버에 업로드하는 반복 작업을 계속해야 했습니다. 여러 번 업데이트되는 시안은 계속 페이지가 늘어나게 되었고, 디자인에 더 집중해야 할 시간에 프리뷰 페이지 html 작업을 해야만 했습니다. 그리고 프로젝트마다 조금씩 다른 설정은 혼란스러웠고 코드를 다루다 실수라도 하게 되면 그 스트레스는 고스란히 디자이너의 몫이었습니다. 이런 반복된 작업과 실수를 막는 방법은 없을까? 고민을 하게 됩니다.

몇 가지 조건 

프리뷰 페이지는 프로젝트 진행에 꼭 필요하지만, 생성과 수정이 불편했습니다. 그리고 그간의 프로젝트들을 함께 모아보기도 어려운 구조였고, 이미지 파일도 서버의 여기저기에 흩어져 있었지요. 새로운 프리뷰 페이지의 몇 가지 조건을 만들었습니다. 

- 누구나 코드를 몰라도 페이지를 생성할 수 있어야 한다.

- 만들어진 프리뷰에 새로운 시안을 업데이트할 수 있어야 한다.

- 생성된 URL(주소)는 고객에게 전달하기 쉬워야 한다.

- 그간의 프로젝트 목록을 볼 수 있어야 한다. 단, 프로젝트 목록은 내부에서만 열람하도록 한다. 

- 모바일에서 잘 보여야 한다.

어떻게 쓰나요?

디자이너의 편의를 위한 html 작성이나 FTP 업로드 과정없이 브라우저에서 직접 올릴 수 있는 등록 페이지를 만들었습니다. 제목과 업로드 되는 이미지, 화면 구성은 최대한 결과물과 같도록 구성했습니다. 슬로워크 프리뷰의 주소 체계는 슬래시(‘/’)로 각 페이지를 구분하는데, 이 주소도 직접 설정할 수 있도록 했습니다. 

등록된 페이지는 언제든 수정할 수 있습니다. 올려진 시안을 삭제할 수 있고, 새로운 시안을 배치하고 업로드하기 편리하도록 했습니다.

고객에 보는 화면은 목록과 상세화면으로 이루어 지는데요. 목록에서 시안 제목과 이미지를 확인하고, 이를 클릭하면 브라우저에 100%로 확대된 이미지가 배치됩니다. 아직 움직이지 않는 시안이지만 앞으로 만들어질 웹사이트 화면을 확인할 수 있습니다. 

마무리

“고객과 소통하기 위한 장치를 우리 손으로 만들자”는 기획 아래 탄생한 슬로워크 프리뷰. 고객에게 정확하고, 보기 편한 시안을 전달해야 하는 것은 옳지만,  이를 위해서 들어가는 노력과 시간은 꽤 컸습니다.  “누군가의 편안함은 다른 누군가의 불편”이 될 수 밖에 없을까요? 슬로워크의 생각은 조금 다릅니다. 조금만 더 고민하면 좋은 것, 편안한 것은 함께 누릴 수 있고, 그렇게 절약된 시간과 노력은 더 좋은 일에 사용되어야 합니다. 그리고 무엇보다 슬로워크 프리뷰를 제작하면서 불편한 것을 직접 개선하기 위해 고민하는 소중한 시간을 가졌습니다. 

언젠가 슬로워크의 고객이 되신다면 만나실 겁니다. 슬로워크 프리뷰를 환영해 주세요.

by 북극곰 발자국