Pencil Project - 다이어그램, GUI 프로토타입, 홈페이지나 앱의 화면설계 등을 제작할수 있는 무료 추천 툴

 
반응형

컴퓨터로 PC용 프로그램이나 아이폰, 아이패드, 안드로이드폰용 앱을 개발하기 전에 기획을 하고, 프로토타입을 만들기도 하며, 예전에는 순서도 같은 다이어그램을 그리기도 했는데, 그런 기능을 지원해주는 무료 오픈 소스 프로젝트입니다

페이퍼 프로토타입(Paper Prototype) & Balsamiq Mockups,모바일 앱 기획단계에서 아이디어를 종이에 손이나 프로그램으로 그려서 검증하는 방식

뭐 가장 좋은 방법중에 하나는 손으로 직접 그려보시는것이 좋기는한데, 자료를 공유하거나, 다른 사람들에게 이해를 시키거나 설명을 하기 위해서 이런 툴을 이용해서 깔끔하게 정리를 하시는것이 좋은데, 그럴때 유용하게 사용할수 있는 프로그램으로 프로젝트 제목처럼 연필이나 펜으로 해야 할일을 컴퓨터로 도와주는 프로그램입니다.

잭 도시 트위터 메모

 트위터와 같은 경우는 위와 같이 종이에 메모를 해서 아이디어를 구체화 시켰다고 하던데, 요즘은 1인개발자들이 많이 스마트폰용 앱을 많이 개발을 하는데, 개발자들은 보통 아이디어에서 기획을 넘어띄고 바로 개발로 들어가고는 하는데, 코딩을 하기전에 내가 정확히 무엇을 어떻게 할지를 기획서나 프로토타입을 제작하고 시작을 하시는것이 시간이나 비용적인 측면에서 상당히 유리합니다.

앱스토어 골드러시, AppStore에서 누구나 하루에 3천만 원 벌 수 있다! (모바일 앱 기획 제작에 관련된 추천 도서)


펜슬 프로젝트 홈페이지 - http://pencil.evolus.vn

홈페이지에 들어가면 메인화면에 파이어폭스(firefox 4+) 확장기능을 이용한 xpi 파일을 제공하는데, 다운로드 받아서 파이어폭스로 드래그인을 시키면 설치가 가능합니다.

설치후에 우측하단의 상태표시줄에 연필을 누르시면 프로그램이 실행이 되는데, 브라우저상에서 돌아가는 방식입니다.

다운로드 사이트 - http://pencil.evolus.vn/en-US/Downloads/Application.aspx

위 사이트에 들어가시면 리눅스, 윈도우, 맥킨토시에서 돌아가는 설치파일도 있습니다

Mozilla Firefox(모질라 파이어폭스), PC와의 동기화가 뛰어난 안드로이드용 모바일 브라우저

Mozilla Firefox(모질라 파이어폭스), 4.0 한국어 정식버전 출시 (Firefox Sync 동기화 기능 추가)

파이어폭스를 집과 사무실, 스마트폰 등에서 사용하시고, 동기화 기능을 사용하신다면 여러군데 PC에 설치하지 않으셔도 됩니다.

파이어폭스 애드온 기능으로 실행을 하면 브라우저 내에서 작동을 하지만, 거의 하나의 프로그램같은 방식이고, Windows용(xp, vista, windows7지원)과 화면도 거의 유사합니다.

위와 같은 화면에서 왼쪽의 네비게이션의 항목을 끌어다가 원하시는 작업을 하시면 됩니다.

현재 나와있는것이 1.3.4 버전인데, 위의 다운로드 페이지에 들어가시면 설치파일외에 Widgets, Templates 등도 다운로드 받아서 추가할수 있네요.

부가기능으로 돌아가지만, 거의 PC용 프로그램 같은데, 잘만 활용하면 visio같은 프로그램 못지 않게 사용할수 있을듯합니다


홈페이지 보시면 다양한 샘플 스크린샷이 제공되는데, 순서도, 다이어그램, 목업툴, 화면스케치, 프로토타입 등 다양한 부분에서 활용할수 있다는것을 잘보여줍니다.

이 제품을 활요해서 Balsamiq Mockups과 같이 스마트폰용 앱의 화면을 기획, 설계하는데도 이용할수 있는데,

왼쪽 화면을 보면 iphone sketching이라고 아이폰의 다양한 컨트롤 객체들을 지원해주네요~

웹 홈페이지를 기획하고, 샘플로 만들어보는 식의 방법도 제공을 하는데, 기획자가 이렇게 잘 만들어 둔다면, 프로그래머와 디자이너가 협업하기에도 좋을듯 합니다.

지원해주는 속성들이 손글씨처럼 되어있는것들도 있어서 꼭 손으로 그려놓은듯한 익숙한 느낌이 들기도 합니다.

기능도 상당히 다양하고, 따로 사용방법이나 메뉴얼없이도 직관적으로 제작이 가능한듯한데, 기획자, 개발자, 웹, 그래픽디자이너 등 PC 나 smartphone용 프로그램을 개발하는 사람들에게도 많은 도움이 될듯하고, 대학생이나 마케팅, 기획 등의 업무에 활용을 해보셔도 좋을듯합니다.


다양한 샘플 더보기 - http://www.evolus.vn/Pencil/Screenshots.html

Apple iPhone 5 Vectorized Mockup, 아이폰5 목업 psd 이미지 파일 (디자이너, 개발자, 기획자용)

http://code.google.com/p/evoluspencil/downloads/detail?name=iOSWireframe.zip

아이폰용은 위 사이트를 참고하세요~

반응형