좀 뜬금없지만 Paper Prototyping 에 관한 이야기 입니다.
“Prototyping은 어떠한 구현이나 실제적인 개발 이전에 원형을 구축함으로써,설계뿐만 아니라, 사고과정 자체에 있어도 많은 도움을 주는 행위입니다.
이를 통해 코딩을 하지 않고도 테스트를 용이하게 진행할 수 있으며, 서식등을 통하지 않고,간단한 로우테크 툴(Low-tech Tool)을 이용해서, 상호이해와 의사소통을 증진시킵니다.”다음 글로벌 인턴쉽 사이트에 있는 프로토타이핑 소개 페이지에서…
실제로 개발하면서 코드상으로도 수많은 Prototype 을 만들어 보고 합니다만, 사용자와의 상호작용이 필요한 UI 같은 경우는 이런 빠른 프로토타입을 만들어서 실험해보고, 계속적으로 커뮤니케이션 하는 것이 매우 중요합니다. 그래서 UI 디자인시에 종종 사용되는 것이 종이와 펜만을 이용하는 Paper Prototyping 입니다.
아래 꽤 유명한 동영상인 Hanmail Paper Prototype 을 먼저 한번 봐주세요.
이런 식으로 일하면 꽤 재미있을 것 같죠 ?
페이퍼 프로토타이핑에 대한 좀 더 자세한 소개는 다음을 참고하세요.
Paper Prototyping – http://alistapart.com/articles/paperprototyping
위와 같이 웹 사이트 나 App UI 디자인을 위해 사용하는 방법입니다.
그런데.. 이렇게 로우테크적으로 일하는 방식을 다시 또 기술적으로 구현한 프로그램이 등장했습니다.
Balsamiq 이라는 툴입니다. 제가 아주 좋아하는.. Balsamic Vinegar 에서 이름을 따왔다고 하는군요.
위와 같이 다양한 오브젝트를 지원해서, 손으로 그리는 것처럼 빠르고 쉽게 페이퍼 프로토타이핑을 할 수 있도록 도와줍니다.
동영상을 한번 보시면 어떻게 사용하는지 딱 이해가 되실겁니다.
그럼.. 발사믹을 이용한 샘플 디자인 몇 개 보시죠..
동영상에서도 보이는 iTunes 를 똑같이 그려본 myTunez
검색사이트를 만들어 보실까요 ? Boogle 입니다.
이 툴의 장점은 Flash 기반의 프로그램이라서.. 기존의 웹 방식 협업프로그램과 연동이 된다는 것입니다.
Confluence , JIRA , XWiki 와 바로 연동이 된다고 하네요. 기존에 JIRA 나 Confluence 를 사용하시던 곳에서는 손쉽게 사용이 가능합니다.
그리고, Adobe AIR를 이용해서 데스크탑 Application 으로도 동작됩니다.
이 툴의 가격은 79$ 입니다만,
If you are a blogger / journalist / maven willing to write me up email Mariah a short blurb and she’ll send you a license, FREE of charge
라는 말이 써있길래.. 메일 보냈더니.. 바로 정식 등록키를 보내주더군요. 필요하신 분은 Mariah 언니( mariah@balsamiq.com ) 에게 메일한통 넣어주세요.
데모버전은 세이브가 안 되는 큰 단점이 있습니다.
UI 디자인이나 웹사이트 디자인시에 빠르게 결과를 볼 때 매우 유용하기도 하고..
여러명의 사람들이 UI 적인 내용을 이야기할 때 협업도구로 사용하면 아주 좋을 듯 합니다.
좋은 정보 감사합니다.
한가지 질문이 있는데 이 제품에 대해 자기 블로그에 글을 적은 다음에 마리아에게 메일을 보내야하는건가요?
먼저 보내도 상관없는것 같습니다. 전 3일전에 받았거든요 🙂
재밌고 유용한 정보 감사합니다. 저도 마리아 언니(응?)에게 메일을 보내봐야 겠네요. ^^
빨리 답변 주더군요 🙂
핑백: oldtype's me2DAY
유용한 글 감사합니다. 재미있는 툴이네요.
항상 목업때문에 힘들었는데 ㅎㅎ
저도 사실 그림솜씨가 꽝이라.. 손으로 그리는거에 부담있었는데 많이 편해질듯 합니다.
오우 굿…이네요. 정말 유용합니다.
근데 블로거도 아니고 전문가도 아니라서..뭐라고 메일을 보내야 할까요? ㅎㅎㅎ
전 그냥 블로거이면서 무료 소프트웨어 개발자라고 보냈습니다. 앞으로 개발할 무료소프트웨어 디자인하는데 사용하겠다구요 🙂
동영상에선 틀을 생성하는 것만 보여줬는데, 그것만이라면 프리젠테에션 툴, 이를테면 파워포인트와 비교해서 큰 차이가 없을 것 같은데요.
UI 오브젝트의 동작같은 것도 설정이 가능한가요?
음.. 파워포인트에 있는 개체는 진짜 UI 라기보다는 네모/세모/원 정도의 수준일꺼 같구요.
리스트박스,그리드,달력,메뉴,탭 같은 심플한 UI 개체들이 있어서 그리는 시간은 훨씬 빠르더군요.
아직 동작까지는 지원하지 못하는것 같습니다.
핑백: Pell's seer Blog
핑백: eek's me2DAY
좋은 프로그램 소개 감사드립니다.
프레젠테이션용 그림을 만드는 데에도 유용하게 사용할 수 있을 듯 합니다.
저도 간단히 UI 를 만들어서 보여줘야 할때 사용중입니다. ^^
답변감사합니다.
키 받으셨나 모르겠네요. 키요청 메일이 많아서 폭주하나 봅니다 ^^;
초딩 6학년때부터 노트에 웹사이트 모습을 그리기 시작했던 저로서는 참 재미있는 뉴스인 것 같습니다.
역시 아크몬드님 멋지십니다. 근데 왜 중국이라고 나오실까요 ㅡ.ㅡ?
며칠전 글보고, 담당장에게 메일을 보냈더니 깜깜 무소식이네요^^
영어공부 해야되는건가 싶어요..
키 요청 메일이 폭주하나 봅니다. 조금만 기다려 보세요 🙂
저도 보냈는데 .. ㅠㅜ
혹시 받으신 시리얼을 같이 사용할 수는 없을런지요? 혹, 가능하시다면 ‘hayoungtai@지메일’ 로 부탁드립니다.
이름으로 생성한 키라서 공유는 불가능합니다. 키 요청 메일이 많아서 늦어지는것 같으니 조금만 기다려보세요 🙂
핑백: 나를 찾는 아이
라이센스키를 받은사람이 아직 없나봅니다.
그래도 광고성글을 자신의 블로그에 넣었더라도.. 아무나 주진 않을거 같네요..ㅋㅋ
블로그 완성도나 방문자수 이런걸로 선별하지 않을까 하네요..
저도 꼭 라이센스 받고 싶은데…
블로그를 만들어야할지 말지 고민이네요..
전 이 글쓰기전에 메일보냈는데도 바로 답변주던데.. 이상하네요 🙂
핑백: funnyplan.com
안녕하세요, 샌프란에 같이 갔떤 ‘남’입니다. ^^ 반갑습니다. 예전에 제가 쓴 페이퍼스토리텔링 관련 글이 있길래 좀 봤습니다. 트랙백이 안걸려서 URL로 연결해 놨습니다. 아, 참고로 http://www.boogle.co.kr은 제가 도메인 가지고 있습니다. ㅋㅋ
오옷 멋진 도메인을 잡으셨군요 🙂
핑백: Smack`s Weaving The Framework
그런데 이거 한글 지원 안되는 거죠… 영어에 넘 약한 놈이라..ㅎㅎ
아쉽게도 메뉴는 모두 영어입니다만, 내부에서 한글 사용은 가능합니다.
마리아 언니에게 메일을 보냈더니..
Hi there, we reserve the free licenses for technical/software bloggers who write actual reviews of our software on their sites.
You can use the free version online or the free demo, and use export/import to save your work. I hope this helps,
라고 하네요~ 라이센스 달라고 하실 분들은 참고 하세요.. 전 퇴짜인듯..ㅠㅜ
간단히 리뷰글을 쓰겠다고 하심 될텐데요 ^^?
핑백: 언제나 상쾌한 기분