2014. 2. 18.

BalsamicMockup에서 Html생성


Balsamiq Mockup(이하 발사믹)과 Napkee(이하 냅키)를 이용하여 html을 만들어 내는 방법을 간단히 설명합니다.
* 발사믹은 매우 직관적이고 사용이 쉽지만 html생성이 안됩니다. 다만, xml형식으로 내보낼수 있게해서 재변환의 가능성만 열어 놓았지요.  그러나, 프로젝타임에 그것을 할수는 없으므로..
냅키를 사용하면 html로 변환이 가능합니다. 생성된 파일에는 css도 포함이 되어 있어, 원하는 스타일을 줄 수도 있습니다.

사용버전:
Balsamiq Mockups for Desktop
  Version: 2.2.18 - 12/12/2013 08:19  /   Adobe AIR Player Version: WIN 12,0,0,38
Napkee
  version 2.0.alpah3  / flash player version: win12,0,0,38
 


1. 발사믹에서 컴포넌트를 이용하여 화면을 구성합니다.



2. 파일을 저장합니다. (파일당 하나의 화면을 구성합니다. 여러화면이라면 디렉토리를 만드시고  그 아래에 저장을 하시면 되겠습니다.)

 3. 냅키에서 메뉴>File>"Import Balsamiq Mockup Files" 를 선택하여 이전단계에서 저장한 파일을 로드합니다.
  이 때 혹시 에러가 난다면. 발사믹이 expire 되었을 가능성이 있습니다. 새로 설치하여 보시면 될 것 같습니다. (좀전에 저는 새로 설치하였습니다.)
에러없이 로드 되었다면, 왼쪽에 리스트가 보이고, 이를 클릭하시면 PREVIEW에서 실제 HTML화면을 보실수 있습니다.



프로젝트 저장후(저는 에러가 나서 SAVE SA  로 했습니다.)  Export Project 하시면  하위디렉토리가 생기고, html, js, css 가 생성됩니다.



댓글 없음:

댓글 쓰기