[UI 디자인] 발사믹 목업

오늘 제가 소개할 프로그램은 UI디자인을 스케치한 것 처럼 표현해주며, 파워포인트 작업을 하는 것 처럼 편하게 만들 수 있도록 도와주는 도구입니다.

발사믹 목업

우선 더 많은 정보를 얻고 어떤 프로그램인지 간단한 느낌을 보고 싶으시면 아래의 링크를 통해 공식 홈페이지로 이동을 해서 확인할 수 있습니다.

공식 홈페이지로 이동(새창) , 공식 홈페이지로 이동(현재창)

오늘 보여드릴 도구는 그 중에도 응용프로그램(윈도우 프로그램)용 도구인 Balsamiq Mockups 3 for Desktop입니다.

<사진 1> 설치

이전에는 설치 과정을 상세하게 보여드리는 경우가 많았지만 크게 어렵지 않고 다음으로 계속 넘기면 되는 과정이라 생략하였습니다.

<사진 2> 설치 후 실행

설치 후 실행을 하면 어도비 에어 사용약관을 보여줍니다.

<사진 3> 실행 화면

 Balsamiq Mockups 3 for Desktop의 실행화면입니다.

위쪽으로는 사용할 수 있는 이미지 ( 프로그램의 컨트롤)가 있습니다. 더블클릭을 하면 간단하게 화면 중앙에 나타나며, PPT 작업을 하듯 드레그 엔드롭으로 위치를, 끝부분 커서가 생기면 드레그로 크기조절도 할 수 있습니다.

<사진 4> Adobe Air Update

실행 후 위의 업데이트 창이 떠서 저는 업데이트를 한번 진행을 했습니다. 아마 위의 프로그램이 설치되어있지 않다면 설치를 하도록 할 것 같습니다.

업데이트까지 마치면 정상적으로 사용을 할 수 있는 모습입니다.

<사진 5> 사용 모습1

우측 상단에 있는 Window라는 버튼을 더블클릭하여 중앙에 보시는 것과 같은 uFTP라고 이름이 붙인 윈도우 그림을 그려보았습니다.

<사진 6> 사용 모습 2

사용 모습 2의 이미지와 같이 원하는 컨트롤을 선택한 후 드레그 & 드롭으로 위치도 조절할 수 있습니다.

그 외의 Text수정은 더블클릭이나 엔터를 통해서 가능하며, 사용법은 간단히 내려놓고 그려보고 수정하고 지우고 반복하다보면 크게 어렵지 않게 사용할 수 있습니다.

물론 전문적인 UI 디자이너라면 사용법 숙달을 위해 연습과 사용법을 찾아볼 필요는 있겠습니다.

아래는 제가 FTP프로그램 UI를 설계한 작업 결과물입니다.

<사진 7> 결과물

위의 이미지를 보시면서 어디서 많이 보던건데? 하시는 분들도 계실 수 있겠습니다. 위 결과물은 바로 아래에 붙여둔 이미지의 프로그램인 FTP클라이언트 프로그램, 파일질라의 UI를 모방한 것입니다.

FTP 클라이언트 프로그램을 개발 해 보면서, 가장 좋은 평을 받고있는 프로그램의 간략하고 깔끔한 UI를 구현 해 보는것을 목표로 하여 작업을 진행하고 있습니다.

<사진 8> 비교대상 (파일질라)

위와 유사한 프로그램을 구현하는 것이 목표인데 30여일 안에 할 수 있을지 걱정이 됩니다.

 오늘 소개한 프로그램은  Balsamiq Mockups 3 for Desktop입니다.