기획자는 화면 설계(Story Board, U.I., WireFrame)로 말한다.

웹 기획자들은 무엇으로 이야기하고, 무엇으로 소통하는가?

나는 단언컨데, 화면설계라고 생각한다. [화면설계는 다양한 이름을 가지고 있다. 스토리보드, Story Board, User Interface, U.I. 외국 에이전시들은 Wire-Frame이라고도 한다.]

IT 분야에서 밥을 먹는 우리들는 종종 그런 이야기를 한다. 웹 디자이너들은 Art를 한다고... 혹은 개발자들은 그들만의 언어로 소통한다고도 한다. 그러나 웹 기획자라면, 설령 말을 할 수 없을지라도 화면설계만으로도 디자이너/개발자와 의사 소통이 되어야 하고, 철저하게 화면설계의 논리적 연결로 검증받아야 하며, 최종적으로 검수할때도 S/B가 검수의 잣대가 되어야 한다. 

이제 그 이야기들을 풀어보자.

1. 화면설계? Story Board? User Interface? U.I? 대체 이게 뭔가요?

웹 기획자의 역할(Role, R&R)은 별도의 포스트에서 다룰 예정이지만 여기서 간략히 짚어본다면

웹기획자란, 고객의 형이상학적 요구를 디자이너/퍼블리셔/개발자가 형상화할 수 있도록 형이하학적 언어(혹은 표현 수단)으로 그려내는 사람이다.

이 문장의 point는 세 가지이다.

* 형이상학적 요구 > 형체가 없는 관념의 세계에 있는 막연한 고객의 Needs (관련 포스트 [형이상학과 형이하학] 보기)

* 형상화  > 우리가 오감을 사용하여 보고, 만지고, 느낄 수 있는 형태로 만드는 작업 (디자인이든, 구동되는 프로그램이든)

* 형이하학적 언어 > 위의 포스트에서 설명

웹/IT 프로젝트에는 다양하고 복잡한 프로세스가 있지만, 화면설계 관련해서는 그 중 간략하게 다음과 같은 것들만 살펴보겠다. 

위에서 정의한대로 고객의 다양하고, 다양하게 해석가능하며, 형.이.상.학.적인 요구사항과 최종 검수 사이에는 우리가 지난번에 다룬 I.A.(메뉴구조도, 바로가기)와 이번 포스트에서 다룰 화면설계,즉 스토리보드가 존재한다. 그리고 프로젝트에 합류한 많은 디자이너, 퍼블리셔, 개발자들은 오로지 이 화면설계에 의지해 작업을 진행하게 된다. 

즉, 최종적으로 세상에 배포될 결과물의 (PC, Mobile, App... 무엇이든) 청사진이자, 설계도이자, 등대요 목적지인것이다. 

텍스트로만 이해가 어렵다면 아래 이미지 두 개를 보자. 

좌측은 실제 세상에 나온 최종 결과물(형상화의 결과물)이다. 그리고 우측은 저 결과물을 만들어낸 화면 설계이다. (대부분의 경우 U.I.는 PPT를 이용한다) 저 화면설계를 보고 디자이너는 디자인을, 퍼블리셔는 퍼블리싱을... 그리고 개발자는 기능 구현을 한 것이다. 

여러 호칭들 중에 "Wire-Frame"는 정말 "화면 구성" 이란 뉘앙스가 좀 더 강하고, "User Interface" "U.I."는 "사용자 접점"이란 뜻으로, 특히나 web 시대로 넘어오면 많이 사용된 용어이다. Story Board는 가장 역사가 깊은 단어로 90년대 Multi-Media CD Title 이란 것이 일반적으로 사용될 때 이전부터 사용되던 용어로 단어에서 느껴지듯 'Story의 흐름'이란 뉘앙스가 좀 더 강하다. 광고나 영화 현장에서 '콘티'라는 용어가 쓰이듯이 일종의 스토리 라인을 가지고 있는 경우가 많다.

  그러나 지금 Web 에서는 모두 특정한 구분 없이 "최종적으로 사용자에게 어떤 화면과 어떤 인터랙션(Interaction)을 제공할 것인가"란 의미로 구분 없이 사용된다. 

2. 화면 설계의 구성은 ? 

위에서 이야기한 것처럼 대부분의 경우 화면설계는 PowerPoint를 이용한다. 외국에 있을 때는 그 외 몇몇 다른 파일 포맷도 보았으나 ppt로 하는 것이 가장 무난할 것이다. 

실제 사용된 파일을 살펴 보자. 

첫 페이지는 보통 프로젝트 명을 담고 있으며, 프로젝트 규모가 커서 수백장 이상의 S/B가 필요할 경우 관리자/사용자 단을 구분하기도 한다. 위 화면은 "관리자 " 영역 화면 설계이다. 그리고 우측 하단에는 작성자와 개정 이력이 있는데, 나는 15년이 넘도록 화면 설계가 초안에서 끝나는 프로젝트를 본 적이 없다. 고치고 고치다 보면. version이 0.1 에서 시작해서 0.2, 0.3 ~~ 등 계속 올라가게 된다. 

이렇게 아래와 같이 말이다. ( 실제 사용된 아주 소규모 프로젝트였다. ) 이렇게 개정이력이 길어질 경우 두번째 페이지에 별도로 정리하기도 한다. 

I.A.는 별도의 엑셀 파일로 정리하는 것이 일반적이지만, 화면 설계서의 앞 부분에 이렇게 한 페이지 넣어주면 다른 작업자들이 좀 더 직관적으로 이해하게 될 것이다. 

본격적인 내용이 시작되기 전에 본 화면설계에서 사용할 일종의 규칙(범례)들을 정한다. 특별히 바뀌는 법은 없지만, 상황에 맞게 적용해서 사용하면 된다. 

아래 샘플은 실제 모 사이트 관리자의 "회원 상세 보기" 화면을 설계한 것이다. 주의할 점 한가지는 아래에서 보이듯이 가능하면 실제로 들어갈 데이터를 샘플로 넣어주는 것이 좋다. 그래야 디자이너나 퍼블리셔가 해당 영역에 얼마나 많은 텍스트가 들어가는지를 가늠할 수 있고, 그래야 적정한 디자인 및 퍼블리싱 된 파일이 나온다. 실제값을 불러 오는 것은 물론 개발에서 하지만 그렇다고 언제나 xxxxxxx 처럼만 데이터를 입력하면 다른 작업자들에게 혼돈을 주게 될 것이다. 

위 샘플에서 마일리지 부분 (붉은색 숫자 2)를 눌렀을 때 나오는 화면이다. 

뒷 부분을 어둡게 처리해서 레이어가 열렸음을 알려주고, 해당 내용을 작성하였다. 

전체적으로 보면 

 * 상단은 문서 관리를 위해 "제목" "Location" "작성자" "마지막 업데이트 날짜"등을 입력하고, (보통 마스터 슬라이드 활용)

 * 좌측은 본격적으로 U.I를 그리는 영역

 * 우측은 Description을 기입 (샘플과 같이 붉은색 숫자를 표시해줘서, 다른 작업자들이 어느 부분인지 알게 해준다)

 

3. 그 외 화면 설계시 주의점 

1) 스토리 보드 전체를 관통하는 컨셉의 정의.

   프로젝트의 성격과도 일맥 상통하는 이야기로, 만약 "웹 접근성" 때문에 리뉴얼하는 프로젝트와 "온라인 마케팅 강화"를 위해 진행하는 프로젝트는 성격이 다를 수 밖에 없으며, 그렇다면 그런 내용과 포인트들이 화면 구성의 구석구석에 묻어 있어야 한다. 가령 "접근성" 인증 마크 획득을 위해 진행하는 리뉴얼 프로젝트라면 컨텐츠나 메뉴의 탭 순서 등을 고려해야 할 것이다.

2) 논리 ! 논리! 논리!!!

  기획자들이여, 제발 논리력을 키우자.

회원 가입 부분의 화면 설계를 작성중이라고 가정하면, 기존 가입 여부 확인 > 약관 동의 > 본인 인증 방법 선택 ... 등의 Process 라는 것이 있고, 각각의 화면마다 인터랙션과 경우의 수를 생각해야 한다. 가입 여부를 확인하니 a) 기존 회원, b) 신규 회원으로 구분되고 각각 다음의 화면은 달라질 것이다. 본인 인증 방법 역시, 선택하는 옵션에 따라 다음 화면들이 달라질 것이다. 얼추 생각해도 이 3 개의 step만 가지고도 10개의 화면은 나올 것이다.

미안한 얘기지만, 제일 한심한 기획자는 퍼블리셔나 개발자에게 "여기서 이 버튼 누르면 어느 화면으로 가야해요? " 라는 소리를 들을 때다. 그만큼 Desc.를 성실하게 작성하지 않았거나, 아예 그 프로세스 자체를 깊게 고민하지 않은 것이다. !!!

3) 보기 좋은 음식이 먹기도 좋다.

  제발 화면설계를 깨끗하게 작성하자. 서두에서 말했듯이 기획자는 화면설계로 "대화"하는 것이다. 말투나 어휘 선택이 불경한 사람이 주변 사람들과 관계가 좋은 경우는 드물다. 아래 샘플을 보자. 하나는 PPT 파일이고 하나는 디자인팀에서 디자인을 해서 보낸 jpg 파일이다. 어느 것이 ppt인지 맞춰보기 바란다. 제발 부탁이니,  깨끗하고 보기 좋게 화면설계를 치자.

4) 자신만의 Library를 만들자.

  어느 정도 웹기획 일을 한 사람이라면 본인것, 남의것 등 화면설계 ppt 파일이 쌓이게 된다.

  프로젝트별로 정리해 놓지 말고  [ 메인 인덱스 / 서브 인덱스 / 게시판형 / 블로그형 / html 컨텐츠 형 ] 등 종류별로 Library를 만들어두면 매우 편리할 것이다.

** 참고 자료로 외국에서 구한 샘플을 두 개 제공한다. 

RafalTomal-WireframeKit.psd.zip

Wireframe-tools-Vol01-PIXEDEN.zip

마지막으로 해주고 싶은 말은...

고객은 귀신 같다. 우리가 화면 설계를 작업하며, "에이~ 이 부분은 대충해도 되겠지" 라고 생각하면 오픈 직전에 반드시 고객이 그 부분을 언급한다. "에이~ 개발자가 알아서 하겠지" 라고 생각하면... 반드시 개발자가 인상을 팍팍 쓰며, "여기서 어디로 넘어가요?" 라고 이야기 한다.

기획자는 화면설계로 평가 받아 마땅하다...

Philosophiren.

Web과 관련된 고민이 있다면, 지금 이 블로그의 운영자와 상의하세요.

* 웹 전략 컨설팅

  - 현재 운영중인 Web 혹은 온라인 관련 문제점 분석, Business Process 재정립, 시사점 도출

  - 경영 목표와 전략을 뒷받침하는 Online Business 전략, 중소/중견 기업을 위한 현실적인 BPR/ISP,

  - CRM, 전자결재, 신규 사업을 위한 시스템 통합/구축 방안

* 웹/모바일/App 구축 및 리뉴얼, 온라인 마케팅

  - Web, Mobile, App 신규 구축 및 리뉴얼

  - Web/Mobile 운영(Site Maintenance) 지원

  - Brand Strategy + Brand Architecture + Brand Maintenance를 통한 온라인 통합 브랜딩, 소셜 마케팅 전략

>> www.PhiloBiz.co.kr을 방문하여 Contact us 나 Project 문의 메일을 이용해 주세요.