화면설계,스토리보드,UI설계

1. 화면설계

보통 화면설계는 스토리보드와 동일 시 하는 경향이 있다.

그러나 그 기능은 분명히 다르다.

화면설계는, 화면을 설계 하는 사람(기획자건 프로그래머건 디자이너건)이 해당 사이트의 분석 결과를 화면으로 옮기는 결과물이다.

예를 들어보자.

가령 쇼핑몰일 경우

이벤트를 띄우는 경우, 특정상품군을 띄우는 경우 또는 여러 상품을 띄우는 경우와 같이 end user에게 가장 잘 어필해야 하는 컨텐츠군을 뽑아내어 정의 한다.

이 경우, 화면설계자는 쇼핑몰이 가지고 있는 컨텐츠(또는 DB)를 분석해야 한다.

더불어 어떠한 서비스를 할지 결정을 내려야 한다.

가장 많이 찾는 상품군은 어떠한 것이며, 회사차원에서 프로모션할 상품군은 무엇인지를 찾아내어 노출해야 한다.

때로는 회사가 가지고 있는 컨텐츠(또는 DB)중 사이트에는 노출되지 않고 있는 컨텐츠를 찾아내서 상품의 가치가 있는지 아니면, 사장시켜버려야 하는지를 판단해야 할 때도 있다.

ISP사업에서 특히나 이런 경우들이 많이 발생한다.

복잡다양한 카테고리를 구성하고, 그 안에 수많은 자료를 가지고 있다보면 정작 end user가 원하는 자료는 찾아보기 힘들거나 아예 노출이 안되는 경우도 발생한다.

따라서, end user에게 정확한 정보 전달의 실패가 일어나지 않도록 설계자는 분석에 의한 판단이 절실히 필요하다.

2. 스토리보드(Storyboard)

흔히 스토리보드는 화면에서 보여지는 그대로 그려진다고 생각을 한다.

50%짜리 정답이라고 생각한다.

스토리보드를 그리기 전에 설계자는 요건정의서, 기능정의서, 화면설계서 그리고 뒤에 얘기할 UI설계서를 파악해야 한다.

어느 화면에 어떠한 컨텐츠와 어떤 기능이 담겨야 하는지를 알고 있어야 한다.

하다못해, '글쓰기 버튼'이 늘상 리스트 하단에만 박혀 있어야 할 필요는 없다.

때로는 sorting기준에 따라 50줄이나 100줄이 나올수도있는 리스트 화면도 존재할 수 있다.

이럴 때는 스크롤 바가 이미 한 없이 내려가 있을 수도 있다.

만약, end user가 상단 1,2줄의 리스트만 확인하고 글쓰기를 원하다면 한없이 하단으로 스크롤바를 내려야만 할까?

리스트가 20줄, 30줄 이상일 때는 상단에도 '글쓰기 버튼'이 존재한다면 end user로써는 스크롤바를 열심히 내려야 하는 불편함이 사라지기에 감사함을 느낄 수도 있다.

바로 이와 같은 고민이 병행되어야 할 문서가 스토리보드라 생각된다.

그러나 많은 설계자들이 너무 쉽게 스토리보드를 그려내고 있다. copy & paste...

3. UI기획(설계)

자아, 이 부분이 참으로 애매하다.

UI는 User Interface라는 걸 누구나 다 안다.

결국 같은거 아닌가??? 맞다. 의미상 분명히 같다.

그러나 UI설계는 화면설계를 기초하여 설계되어져야 한다.

예를 들어보자. 위에서 쇼핑몰을 예로 들었으니 이어서...

화면설계에서 이벤트, 특정상품군, 여러상품 또는 프로모션 상품을 메인에서 노출시켜야 한다고 정의를 내렸다고 치자.

센터 상단에 대한 UI설계를 할 경우, 이벤트가 들어가는 웹사이트와 특정상품군을 띄우는 경우 또는 여러 상품을 띄우는 경우와 같이 end user에게 가장 잘 어필해야 하는 컨텐츠군을 배치한다.

컨텐츠의 배치 결정을 내려야 하는 것이 UI설계단에서 이뤄져야 하는 가장 중요한 부분이다.

센터는 몇 단으로 쪼갤 것인가...

어필하고자 하는 상품은 센터의 상, 중, 하단 어느 곳에 배치할 것인가...


마지막으로 GUI

원래 GUI는 텍스트위주의 DOS체제 화면을 그래픽으로 전환하면서 나타났다.

이후, 서비스의 다양성으로 웹사이트 서비스에서의 GUI로 확대되기 시작했다.

결국 용어에서도 말했듯이 그래픽을 통한 end user의 시선과 마우스 움직임을 사로 잡을 수 있도록 하는 것이다.

가령 상품 A와 B를 센터 상, 하단에 배치 하였다고 치자.

실제 중요도는 A상품인데 B상품의 그래픽이 더 화려하게 시선을 잡아 끈다면

A상품의 노출 전략은 실패한 것이 되어 버린다.

따라서, GUI는 컨텐츠의 중요도를 파악하여 어떠한 그래픽 요소(색상, 이미지, 아이콘 때로는 소리, 영상 등)를 통해 노출을 할 것인가를 결정 지어야 한다.

출처 : http://www.nterplan.com/36