설계을 함에 있어서 가장 중요한것은 Communication 이다.
클라이언트와의 Communication, 작업자들과의 Communication 설계는 그런 모든 대화를 문서로(프로그램) 진행하는것이다.
기획자에게 항상 얘기하는것 중에 하나가 당신이 만든 그 문서 하나면 다른얘기 안나올 수 있도록 해야 한다.

이런 설계에 있어 역동성 있는 툴들이야 말로 기획하는데 많은 도움이 되고 중요한 Communication에 도움이 된다.

이전에 Balsamiq Mockups For Desktop 에 대한 안내를 진행 한적이 있었는데 최대의 단점(?)이 한글지원이 안되는거였다. 하지만 MockFlow는 동일한 기능구현에 한글지원까지 된다는 장점이 있다.

사이트 : http://www.mockflow.com/
회원가입 : http://www.mockflow.com/signup/
다운로드 : http://www.mockflow.com/desktop/
예시 : http://app.mockflow.com/ 

Basic 과 Premium 두가지 버전이 있는데 각 기능이 다르며 Premium 은 1년에 69$이다.

- Basic 

Free, no time limit

1 Mockup with 4 pages

2 Collaborators / mockup

10 MB Image storage

5 Revision Hist./mockup

Export with Watermark

HTML Preview

MockStore access

Generate Specs in Word

- Premium

$69/Year  

Unlimited Mockups

Unlimited Collaborators

5 GB Image storage

50 Revision Hist./mockup

To PDF/PPT/Image

Download to HTML

Real-Time Collaboration

Team Chat
UX Addons pro-pack



전체 화면은 다음과 같다.



모바일(아이폰, 아이패드, 삼성폰)에 대한 이미지 지원이 가능하다는점이 장점이다.




프로그램은 웹버전과 Desktop 버전이 있으며 메뉴가 조금 다른며 작업물을 저장하면 데스트탑이던 웹버전인던 모두 같은 파일을 불러와서 작업을 진행할 수 있다. 한마디로 웹에 저장이 된다는 얘기다.


안드로이드, 아이폰 등의 특화된 템를릿과 컨포넌트를 사용할 수 있다는것이 장점이다.


그리고 우리의 삼성폰도 들어가 있다.

 

- 장점
1. Mobile, App 개발에 대한 화면설계가 쉽다
2. 한글 지원이 가능하다.
3. 작업에 대한 공유가 가능하다 (팀별 작업 진행, 채팅도 가능)
4. 무료버전도 쓸만하다.
5. Mobile 버전이 있다.
6. MockStore 에서 설계 작품들을 구매할 수 있다.

- 단점
1. 위의 장점들은 모두 69$ 인 Premium 에서나 가능 (Basic 은 맛보기)

 
Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요

  1. 2012.06.27 10:58 신고

    잘봤습니다

    마지막 단점에서 정신이.확~ 드는데요? ㅋㅋㅋㅋ

    기획전문가라면 몰라도
    1인 기획 1인 구현일때는
    연간 라이센스 구입방식은 좀 부담이 될 수도 있겠어요^^

  2. 2012.06.27 11:00 신고

    잘봤습니다

    마지막 단점에서 정신이.확~ 드는데요? ㅋㅋㅋㅋ

    기획전문가라면 몰라도
    1인 기획 1인 구현일때는
    연간 라이센스 구입방식은 좀 부담이 될 수도 있겠어요^^

  3. 2013.01.10 16:54 신고

    좋은 정보 감사드려요

  4. 2016.06.18 20:43 신고

    알찬 정보 좋네요~

일년전쯤 기획팀 세미나에서 툴 소개를 하면서 알게된 기획을 도와주는 툴 중에 눈에 띄였던 툴을 소개 하겠다.
특히 이 툴은 Air로 개발하여 모든 OS에서 사용가능하다.

사이트 : http://balsamiq.com/
동영상 : http://balsamiq.com/products/mockups
다운로드 : http://balsamiq.com/products/mockups/desktop
웹데모 : http://builds.balsamiq.com/b/mockups-web-demo/

사이트에서 전반적인 내용을 이해 하시고 동영상과 웹데모로 참고 하시고 다운받으셔서 사용하시면 되는데 유료(79$) 입니다.
물론 데모버전도 있습니다.



기획을 하다가 보면 작업자들과의 커뮤니케이션에도 힘듬을 느낄때가 있습니다.
이때 필요한 문서들이 SB(스토리보드) 인데 이에 대한 대안이 될 수 있는듯 합니다.
프로세스의 이해와 작업자들 끼리의 공유해야할 사항들을 이해 하기 쉽게 SB를 만들 수 있는 툴입니다.



Full Screen Presentation 화면




요즘은 앱 개발이 모든 프로젝트의 기본인듯 한데 그에 대한 해답도 이 툴에서 찾을 수 있다.




Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요

웹기획자들은 항상 고민한다.
기능에 대해서 콘텐츠에 대해서....
하지만 무엇보다 사용자들에 대한 고민은 하지 않는듯 하다.
솔찍히 힘들다 에이전시를 예를 든다면 한명에서 두명정도의 기획자가 프로젝트의 기획파트 인력으로 잡히면 큰 프로젝트로 인식될 정도이다.

과중된 업무에 사용자를 신경 쓸 겨를이 없다... 하지만 가장 중요한것이 버려지고 있음을 모른다.
사이트를 만드는데는 사용자의, 사용자에 의한, 사용자을 위한 기획이 되어야 한다.
가장 큰것을 잃어 버리고 기획을 한다는것이다.

그렇다면 사용자가 사이트를 접했을때 가장 처음 접하게 되는 기획요소는 무엇인가?
IA(information architecture) 정보구조 이다.

사용자는 사이트를 접했을때 가장 빨리 자신이 원하는 무엇(정보)을 가지고 나가기를 바란다.
3초 동안 결과나 나타나지 않을때 답답함은 익히 알려진 사용성의 문제이다.
그렇다면 그것을 원활하게 가져갈 수 있도록 하는것이 바로 IA 설계이다.

사용성을 높이기 위한 방법론 중 하나인 Card Sorting 방법론에 대해서 알아보도록 하겠다.

사용성을 체크 하는 척도 중에 가장 간단한 방법 중에 하나고 믿을 수 있는 근거 제시가 될 수도 있는 방법이 되겠다.

카드소팅은 카드소팅을 사용하기 이전의 작업과 이후의 작업이 있다.

카드소팅 이전의 작업들



1. 컨텐츠의 분석
- 컨텐츠의 특성을 분석 하여 분류 한다.

2. 컨텐츠의 그룹핑
- 컨텐츠의 분류에 따른 그룹핑

3. 그룹핑의 레이블링
- 컨텐츠의 그룹핑에 대한 레이블링을 지정한다.


모든 컨텐츠에 대해서 분류를 나누고 그룹핑을 하고 그룹핑에 대한 레이블링을 진행 해야 한다.
이 작업들은 한번에 끝날것이 아니고 레이블링이 똑같은 것(비슷한것)들은 다시 분류 하고 그룹핑하여 다시 레이블링을 잡는 형식으로 그룹핑이 최소화할 수 있도록 한다.

카드소팅 이전의 작업들은 기획자의 몫이다. 컨텐츠를 분석하는 능력도 있어야 하고 같은 분류로 그룹핑 하고 레이블링하는 기술력을 끌어내야 한다. 이때 타 관련사이트도 참고하여 컨텐츠의 레이블링을 데이터화 하여 레이블링 규칙에 대한 레퍼런스로 제시 하여야 한다.

카드소팅 작업들

card sorting



1. 최종 레이블링된 메뉴들을 카드에 명시한다.
- 카드이 색을 다르게 해서는 안된다
- 카드의 갯수가 100개를 넘어가서는 안된다. (참석자의 집중도가 떨어질 수 있다. 미국의 US Department of Health & Human Services 에서는 50개를 좋은 카드 숫자로 명시하고 있다.)

2. 참석자의 섭외
- 연령별, 사이트 사용자 및 미사용자, 성별 등으로 분류 하여 섭외한다.
- 이때 기획자나 프로젝트의 이해당사자들은 제외하는것이 좋다.

3. 카드소팅 진행
- 카드소팅 방법은 원론적인 카드로 진행하는 방법과 툴을 이용한 방법이 있다.

4. 결과 분석 및 보고서 작성
- 전체 결과를 통계화 하여 보고서를 작성하고 컨설팅을 한다.


카드소팅 관련 툴

국내의 카드소팅 툴로는  다음의 D-sort가 사용하기 편리하다. (Air로 개발되어 OS를 타지 않아서 좋았다... )

D-sort : http://uxtlab.tistory.com/entry/D-sort


Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요


http://riemann.tistory.com/102

회원 가입 과정을 정리한 맵으로 전체 프로세스를 한 장으로 요약 정리함 (클릭하면 크게 나옴)


회원 가입은 대부분의 사이트가 기본적으로 진행하는 기초 프로세스이다보니, 이미 정형화된 기본틀을 수용하는 경우가 대부분이다. 그러나 해당 사이트의 특성이나 마케팅적 관점을 고려한다면 전략적 차이를 고려해야 한다.

회원가입에 성공했을 경우, 메인페이지로 이동시키는 것이 좋은지, 회원가입 성공을 알리는 페이지를 한 번 보여주고 메인으로 가게 하는 것이 좋은지를 판단해보자. 만약 회원 가입자에게 쿠폰을 지급하거나 별도의 이벤트를 통해 상품구매를 유발하는 것이 중요한 쇼핑몰이라면 무엇이 좋을까? 혹은 빨리 로그인하여 상품을 구매할 수 있도록 불필요한 과정을 없애고 클릭 수를 줄이는 것이 중요한 전략이라면 프로세스를 어느 지점에서 단축하는 것이 좋을까? 자동 로그인을 해주어서 메인 페이지를 보여주는 것과 메인에서 다시 로그인을 하도록 한 번 더 걸러주는 것은 어떤 차이가 있을까?

각각의 경로마다 이러한 질문들을 던져보는 것이 중요하다.

고객의 입장에서, 사이트의 입장에서, DB 구축의 안정성의 측면에서.. 여러 각도에서 재검토해보면 당연해보이던 회원가입 과정에도 많은 변수가 있음을 알 수 있다.

Posted by 늙은소
Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요




기획자들이 설계단계에서 가장 많이 실수 하는것이 화면설계서 하나로 커뮤니케이션을 하는데 있다. 
분명한것은 설계 이전에 제안이 있어야 한다. 
제안으로 각 담당자들의 의중과 담당자들이 원하는 건설팅을 해야 한다. 
모든 클라이언트는 이전과 다른, 경쟁업체와 다른 사이트 시스템을 원한다. 이런 충족이 없을때 그들은 설계서를 이해하지도 못할 뿐 아니라 믿음도 줄어들게 된다. 
적어도 중요한 시스템 기능에 대해서는 설계이전에 기획안을 PT 하고 그리고 화면흐름도와 같은 UML을 이용한 추가적인 설 계안으로 기본적인 초기설계를 완료해야 한다. 뒤에 화면설계서를 통해 클라이언트와 작업자들간의 커뮤니 케이션을 진행 하는것이다. 

기획자들이여 설계는 제안 이후에 진행하라.


Posted by 김상환

Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요

개인적으로 웹기획에 있어서 메뉴 구조를 정리하는데 가장 심혈을 기울이는 부분중에 하나이다. 그만큼 시간도 많이걸린다.

기존사용자에게는 기존의메뉴구조에 익숙해 있는 인식을 깨지 않도록해야하며 잠재고객들에게는 컨텐츠별로 의미전달이 쉽도록 그리고 시선을 흐틀어지지 않도록 해야한다.



다음의 사항들을 주의하여 진행한다면 조금 편한 메뉴구조를 만들 수 있다.

1. 컨텐츠 분석
모든 컨텐츠의 성격과 내용을 100% 이해해야한다.

2. 컨텐츠 마다 레이블링 붙이기
모든 컨텐츠에 사용자가 이해 하기 쉽도록 메뉴명을 붙인다. (내용을 메뉴명만으로도 이햐하기 쉽도록 붙여야 한다)

3. 레이블링의 완성도 높이기
매뉴명이 올바르게 되었는지 확인을 한다. 기존사이트로도 확인해야하며 경쟁사의 사이트 들도 비교 분석한다. 이때 비교분석할 레퍼런스를 많이 한다면 더 좋은 기준 값을 찾을 수 있다.

4. 각 레이블링된 컨텐츠에 그룹핑하기
의미전달하기 쉬운 레이블로 각 컨텐츠에 그룹을 잡는다. 한번에 다 진행하기는 어려우니 여러번 반복해서 진행하면 10개 내외로 메뉴명을 그룹으로 잡을 수 있다.

5. 그룹의 수를 줄여라.
사이트의 성격에 따라서 달라지나 보통 4~7개 정도의 메인 메뉴를 잡는것이 좋다. 그렇게 나올 수 있도록 그룹을 다시 그룹핑한다.

6. 메뉴를 나열하고 전체적로 수정한다.


Tip : 카드소팅 기법
컨 텐츠별 레이블링이 완료 되면 카드에 레이블링된 메뉴를 모두 적은뒤 5~10명 가량의 사용자(현사이트의 회원, 비회원, 성별 다양한 분류의 사용자)를 대상으로 카드를 정렬하는것 사용자에게 메뉴의 그룹핑을 물어 더 자연스러운 메뉴 구조를 만들 수 있다.


Posted by 김상환

Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요

기획자들이 가장 신경많이쓰는 문서가 화면설계서이다.
SI 업체에선 화면설계란 이름을 쓰고 웹에이전시에선 스토리보드(SB)란 이름을 많이쓴다.
두 문서의 차이를 많이 물어 보는데 개인적으로 화면설계서가 더 맞지 않나 싶다.
스토리보드는 광고쪽에서 넘어온 듯하여 화면설계서라는 문서를 개인적으로 사용했다.



화면설계서는 화면상의 기능과 디자인을 작업자와 현업들과 대화하는 문서이다.
설계서에서 가장 중요한부분은 discription이다.
기능에대한설명 그리고 기획의도, 요구사항 등을 문서에 남기고 작업자들과 문서 리뷰를하여 기획의 의도를 분명하게 전달해야 한다.

개인적으로 화면설계서에 이미지나 컬러톤을 넣지 않도록 권하고 싶다.
혹시라도 디자이너의 몫을 침범하는것 같아서이다.
그러나 개발자를 위해서는 많운 내용을 보여주는것이 좋다.

요구사항ID도 표시하여 감리에도 대비하여야한다.
요구사항의 이행에대한 표시를 해주어야 요구사항 추적표에 남길수 있다.
실제 감리에서 가장 많이 보는 문서가 요구사항 추적표이다.


Posted by 김상환

Posted by 기획에 대한 짧은 생각 웹디맨
Facebook 댓글

댓글을 달아 주세요

이전버튼 1 이전버튼