꽤 유명한 UI mockup 툴인 Balsamiq 에서 Ecipse 관련 UI 를 구성할 때, 처음부터 그리는 방법도 있지만, 기존 Eclipse 에서 쓰던 Dialog 나 Preference 등을 차용해서 수정하고 싶은 경우가 있다.


Eclipse 의 Widget 이나 Winodw 들의 mockup 을 그대로 Balsamiq 으로 옮겨올 수 있는 방법을 소개한다.


1. Eclipse 설정

  1. 먼저 Eclipse 에서 balsamiq 으로 mockup 을 export 할 수 있도록 Eclipse 에 Balsamiq plugin 을 설치해야한다.
  2. Eclipse > Help > Install New Software...
    1. Update site: http://update.xam.dk
    2. Github: https://github.com/maxandersen/update.xam.dk
  3. Eclipse 재시작


2. Ecipse 에서 원하는 Window, Dialog, Widget 등을 클릭한후 Alt + Shift + F4 를 누르면, Balsamiq  Mockup 스타일의 xml 로 클립보드에 저장된다.




3. 가끔 Alt + Shift + F4 를 눌러도 동작하지 않는경우도 있는데, 이는 Eclipse 에 단축키가 충돌이 난경우 이므로 다음과 같이 조치한다.

  1. Eclipse > Window > Preference > General > Keys
  2. balsamiq 으로 검색
  3. Copy SWT/Balsamiq to Clipboard 선택
  4. Binding: 옵션을 수정



4. Balsamiq 에서 Eclipse 에서 선택한 mockup 불러오기

  1. Balsamiq > Menu > Project > Import Mockup XML...(CTRL+SHIEF+E) 선택 후 ctrl + v 로 클립보드에 저장된 mockup 을 붙여넣기한다.




5. 다음과 같이 Eclipse 의 UI 를 그대로 Balsamiq Mockup 으로 옮겨와 진다.



6. Video tutorial


Posted by leechwin