블로그

안드로이드 ui/ux 디자인 프로토타이핑 툴



요즘 웹디자인을 공부하는 분들은 안드로이드 UI 디자인에도 관심이 많으실 텐데요. 그만큼 안드로이드 UI 디자인이 대세인 것 같습니다. 그래서 오늘은 이 UI/UX디자인을 조금 더 수월하게 해주는 프로토타이핑 툴을 하나 추천 드리려고 합니다

1부: 프로토타이핑 뜻?

프로토타이핑이란, 개발 초기에 시스템의 모형(프로토타입)을 간단히 만들어 사용자에게 보여주고, 직접 사용해보게 한 다음, 사용자가 경험을 통해 기능을 추가하거나 변경 및 삭제를 요구할 경우 이를 즉각 반영하여 시스템을 재설계, 프로토타입을 재구축하는 과정을 통해 시스템을 개선시켜 나가는 방식을 말합니다.

그렇다면 프로토타이핑 툴이란? 바로 이 프로토타이핑을 위한 프로토타입 제작과정을 도와주는 소프트웨어를 의미하는데요. 이러한 소프트웨어를 사용하면 프로토타이핑까지의 준비 과정이 조금 더 수월해집니다.

2부: 프로토타이핑/ui 디자인 툴?

저는 WonderShare사의 이드로우 맥스(EdrawMax)라는 소프트웨어를 추천하는데요. 내장 템플릿과 기호, 아이콘 라이브러리의 양이 방대하기 때문에 직접 그리거나 이미지를 찾는 수고를 줄일 수 있으면서도 높은 퀄리티의 완성품을 만들어 낼 수 있기 때문입니다. 또한 사용방법도 단순한 드래그앤 드롭 기반으로 어렵지 않기 때문에, 프로그램을 처음 접하는 사람도 금방 적응하여 사용할 수 있는 것이 큰 장점입니다.

ui디자인

이드로우맥스는 공식 홈페이지에서 다운받으실 수 있습니다. 다운받은 이드로우맥스를 설치 후 실행하면 다음과 같은 화면이 나타납니다.

ui디자인

화면에서 ‘신규’->’디자인’->’UI/UX’->’Android UI’를 선택 후, ‘새로 그리기’를 선택하여 빈 캔버스를 열거나, 제공되는 프레임 중에서 마음에 드는 것을 선택한 뒤 내용을 수정할 수 있습니다.

ui디자인

ui디자인

ui디자인

ui디자인

ux디자인

제공되는 프레임 중 하나를 선택해 보았습니다. 어떤가요? 군더더기 없이 깔끔하면서도 베이직한 디자인이 마음에 들었습니다.

프로토타이핑

 ‘파일’-‘템플릿’ 메뉴에서 다른 사람들이 만든 템플릿을 구경하거나 가져와서 사용할 수도 있습니다. 다양한 디자인의 UI들이 보이시나요?

프로토타이핑

이드로우맥스의 라이브러리에서 다양한 기호를 가져와서 안드로이드 UI 디자인에 활용할 수 있습니다. 다양한 카테고리로 정리된 라이브러리에서 필요한 기호를 찾아보세요.

프로토타이핑

기존의 템플릿을 수정하는 방법은 매우 간단합니다. 색상을 변경하고 싶다면 변경하려는 부분을 마우스 클릭 후 화면 하단의 팔레트에서 원하는 색상을 선택해주면 됩니다. 라이브러리의 양이 엄청나기 때문에 이미지를 찾는데 어려움을 겪을 수 있습니다.

이 경우에는 라이브러리 검색 기능을 이용하면 편리합니다. 화면 우측 상단의 라이브러리 아이콘 옆의 검색창에 찾고자 하는 이미지를 입력하여 검색할 수 있습니다. 텍스트 박스는 화면 상단에서 추가할 수 있으며, 텍스트 속성 역시 화면 상단의 텍스트 속성 아이콘을 클릭하여 변경 가능합니다. 색상 변경 후 우측의 ‘스타일’ 탭에서 선 색상 역시 변경하는 것 잊지 마세요!

제공되는 프레임에서 색상이나 폰트, 텍스트 및 이미지를 변경하는 것만으로도 훌륭한 안드로이드 UI 디자인이 됩니다. 위의 프레임에서 위에서 언급했던 몇 가지 기본 사항만 변경해도 굉장히 새로운 느낌의 디자인이 탄생하기도 합니다. 이것 저것 시도해보며 마음에 드는 디자인을 창조해 보세요. 이드로우맥스는 당신의 창의력과 미적감각을 마음껏 펼칠 수 있도록 도와줍니다.

지금까지 안드로이드 UI 디자인을 할 수 있는 프로토타이핑 툴 사용법에 대하여 간단히 알아보았습니다. 이드로우맥스를 활용하면 안드로이드 UI 디자인 외에도, 아이폰, 윈도우, 아이패드 및 웹 사이트의 UI/UX 디자인이 가능하기 때문에, 웹 디자이너분들 뿐만 아니라 1인 개발자분들에게도 큰 도움이 될 것 같습니다.

이드로우 맥스

올인원 다이어그램 소프트웨어
순서도, 평면도, 회로도 등 280가지 이상의 다이어그램 유형 지원
2만6천개 이상의 기호 리소스와 수 천개 무료 템플릿 지원
  • 강력한 호환성: Visio,MS office 등 파일 호환 가능
  • 다양한 운영체제: (윈도우,맥,리눅스)

관련 글