블로그 Show 요즘 웹디자인을 공부하는 분들은 안드로이드 UI 디자인에도 관심이 많으실 텐데요. 그만큼 안드로이드 UI 디자인이 대세인 것 같습니다. 그래서 오늘은 이 UI/UX디자인을 조금 더 수월하게 해주는 프로토타이핑 툴을 하나 추천 드리려고 합니다.
1부: 프로토타이핑 뜻?프로토타이핑이란, 개발 초기에 시스템의 모형(프로토타입)을 간단히 만들어 사용자에게 보여주고, 직접 사용해보게 한 다음, 사용자가 경험을 통해 기능을 추가하거나 변경 및 삭제를 요구할 경우 이를 즉각 반영하여 시스템을 재설계, 프로토타입을 재구축하는 과정을 통해 시스템을 개선시켜 나가는 방식을 말합니다. 그렇다면 프로토타이핑 툴이란? 바로 이 프로토타이핑을 위한 프로토타입 제작과정을 도와주는 소프트웨어를 의미하는데요. 이러한 소프트웨어를 사용하면 프로토타이핑까지의 준비 과정이 조금 더 수월해집니다. 2부: 프로토타이핑/ui 디자인 툴?저는 WonderShare사의 이드로우 맥스(EdrawMax)라는 소프트웨어를 추천하는데요. 내장 템플릿과 기호, 아이콘 라이브러리의 양이 방대하기 때문에 직접 그리거나 이미지를 찾는 수고를 줄일 수 있으면서도 높은 퀄리티의 완성품을 만들어 낼 수 있기 때문입니다. 또한 사용방법도 단순한 드래그앤 드롭 기반으로 어렵지 않기 때문에, 프로그램을 처음 접하는 사람도 금방 적응하여 사용할 수 있는 것이 큰 장점입니다. 이드로우맥스는 공식 홈페이지에서 다운받으실 수 있습니다. 다운받은 이드로우맥스를 설치 후 실행하면 다음과 같은 화면이 나타납니다. 화면에서 ‘신규’->’디자인’->’UI/UX’->’Android UI’를 선택 후, ‘새로 그리기’를 선택하여 빈 캔버스를 열거나, 제공되는 프레임 중에서 마음에 드는 것을 선택한 뒤 내용을 수정할 수 있습니다. 제공되는 프레임 중 하나를 선택해 보았습니다. 어떤가요? 군더더기 없이 깔끔하면서도 베이직한 디자인이 마음에 들었습니다. ‘파일’-‘템플릿’ 메뉴에서 다른 사람들이 만든 템플릿을 구경하거나 가져와서 사용할 수도 있습니다. 다양한 디자인의 UI들이 보이시나요? 이드로우맥스의 라이브러리에서 다양한 기호를 가져와서 안드로이드 UI 디자인에 활용할 수 있습니다. 다양한 카테고리로 정리된 라이브러리에서 필요한 기호를 찾아보세요. 기존의 템플릿을 수정하는 방법은 매우 간단합니다. 색상을 변경하고 싶다면 변경하려는 부분을 마우스 클릭 후 화면 하단의 팔레트에서 원하는 색상을 선택해주면 됩니다. 라이브러리의 양이 엄청나기 때문에 이미지를 찾는데 어려움을 겪을 수 있습니다. 이 경우에는 라이브러리 검색 기능을 이용하면 편리합니다. 화면 우측 상단의 라이브러리 아이콘 옆의 검색창에 찾고자 하는 이미지를 입력하여 검색할 수 있습니다. 텍스트 박스는 화면 상단에서 추가할 수 있으며, 텍스트 속성 역시 화면 상단의 텍스트 속성 아이콘을 클릭하여 변경 가능합니다. 색상 변경 후 우측의 ‘스타일’ 탭에서 선 색상 역시 변경하는 것 잊지 마세요! 제공되는 프레임에서 색상이나 폰트, 텍스트 및 이미지를 변경하는 것만으로도 훌륭한 안드로이드 UI 디자인이 됩니다. 위의 프레임에서 위에서 언급했던 몇 가지 기본 사항만 변경해도 굉장히 새로운 느낌의 디자인이 탄생하기도 합니다. 이것 저것 시도해보며 마음에 드는 디자인을 창조해 보세요. 이드로우맥스는 당신의 창의력과 미적감각을 마음껏 펼칠 수 있도록 도와줍니다. 지금까지 안드로이드 UI 디자인을 할 수 있는 프로토타이핑 툴 사용법에 대하여 간단히 알아보았습니다. 이드로우맥스를 활용하면 안드로이드 UI 디자인 외에도, 아이폰, 윈도우, 아이패드 및 웹 사이트의 UI/UX 디자인이 가능하기 때문에, 웹 디자이너분들 뿐만 아니라 1인 개발자분들에게도 큰 도움이 될 것 같습니다. 이드로우 맥스올인원 다이어그램 소프트웨어순서도, 평면도, 회로도, 조직도 등 280가지 이상의 다이어그램 유형 지원 2만6천개 이상의 기호 리소스와 수 천개 무료 템플릿 지원
관련 글 2020년, 오늘날의 시장은 UI 설계 도구로 가득 차 있다. Sketch가 사용자 인터페이스를 정교하고 단순하게 제작할 수 있도록 효율적인 툴을 출시한 이후, 많은 회사들이 디자인 툴 시장 점유율의 일부를 차지하기 위해 노력해왔다. UXtools에서 실시한 '2019년 디자인 툴 설문조사'를 살펴보면, 지난해 Sketch가 선두를 달렸던 것과 비교해서 꽤 많은 툴이 Sketch를 따라잡은 것을 볼 수 있다. 2019년 가장 인기 있는 UI 디자인 도구 설문조사 결과2018년 가장 인기 있는 UI 디자인 도구 설문조사 결과내가 관찰한 '툴의 성장, 툴을 사용한 나 자신의 경험, 그리고 이러한 툴들에 대한 다른 디자이너들의 경험'에 따르면, 1~2년 안에 Sketch, Figma, Adobe XD가 주목받을 것으로 예상된다.
시스템 요구사항툴의 핵심 요구 사항부터 시작하자. 이 툴은 실행중인 운영 체제이다. 많은 사람들이 Sketch가 Macintosh 전용 앱이라는 것을 인식하지 못한다. 따라서 Windows 또는 Linux 시스템을 실행중인 경우에는 사용할 수 있는 툴이 Figma 또는 Adobe XD로 제한된다. Mac 사용자의 경우 거의 모든 툴을 사용할 수 있다. 가격많은 사람들의 또 다른 중요한 결정 요인은 가격이다. 아래는 각 툴에 대한 개인/개인 가격 모델을 요약한 것이다.
한 번에 99달러 지불, 1년 무료 업데이트, 새로운 기능의 혜택을 얻기 위해 매년 79달러의 갱신 가격을 지불. 3개의
프로젝트 제한, 한 프로젝트 내에서 무제한 파일 수, 그리고 2명의 편집자까지 무료. 2020년 10월까지 프로젝트/파일 무제한으로 무료로 공유 가능. 이후 공유 프로젝트 1개, 편집자 2명으로 제한된다.
레이아웃 편집레이아웃 관리에 상당한 설계 시간이 소요된다. 레이아웃 기능이 잘 설계된 툴을 선택하는 것은 생산성에 매우 중요하다. Sketch의 경우 콘텐츠의 길이/크기 변경 시 컨테이너 자동 크기 조정 등의 작업을 수행할 수 있는 스마트 레이아웃 기능이 있다. 예를 들어 버튼 배경은 텍스트 길이에 맞게 조정된다. Figma는 Sketch와 비슷하게 드래그 앤 드롭으로 콘텐츠를 재조정하는 것과 같은 자동 레이아웃 기능을 제공한다. Adobe XD는 콘텐츠 크기 조정 시 계층 그룹의 패딩을 강제 적용할 수 있는 컨텐츠 인식 레이아웃 기능을 가지고 있다. 다른 툴의 레이아웃 기능에 비해 Adobe XD의 패딩 기능 실행은 상당히 독특하다고 생각한다. 콘텐츠 높이를 변경할 때 레이어의 수직 위치를 자동으로 조정하는 기능은 시간 절약에 매우 도움이 된다. Figma는 이 부위에 약간 유리한 부분이 있다. 협업다른 디자이너와 함께 작업하는 경우, 세 가지 툴 모두 다른 사용자와 파일을 공유할 수 있는 방법을 제공하고 플러그인의 가용성을 계산할 수 있게한다. 각 툴과 함께 제공되는 기본 협업 관련 기능에 초점을 맞추어 논의해보자.
Figma는 여러 사람이 동시에 같은 파일을 보고 편집할 수 있는 라이브 협업 능력을 가지고 있다. 이것은 최근 UI 디자인 툴 시장에서 가장 독특한 특징 중 하나이다. 이 기능에 대해 이야기 해보자면, 같은 프로젝트에서 동시에 실제로 협업하는 디자인 팀에게만 유익하다. 라이브 편집/미리보기 기능은 디자인 파일을 검토하면 누구나 항상 최신 변경사항을 볼 수 있다는 점에서 편리하다. 라이브 협업 외에도, Figma는 버전 관리, 설계 시스템 및 다른 툴과 동등한 검사 기능을 가지고 있다.
현재 베타 버전에서의 XD를 봤을 때, Figma는 라이브 협업을 진행하는 디자이너들에게 특히 첫번째로 선택받을 것이다. 퍼포먼스하드웨어 사양이 적절한 대부분의 사람들에게, 세 가지 설계 툴 사이에 성능 차이가 크지 않을 것이다. 대량의 아트보드/프레임, 외부 플러그인, 이미지 에셋을 파일 내에서 작업할 때 성능 문제가 더욱 두드러질 것이다.
프로토타이핑 특징프로토타이핑 툴은 시중에 앞선 세 가지 툴에 비해, 더 전문화된 툴이 있기 때문에 더욱 논의할 것이 많다. 그러나 지금은 세 가지 툴을 사용하여 프로토타이핑 기능을 요약하는 것이 좋을듯하다.
Figma는 Sketch와 거의 동일한 프로토타이핑 제작 특징을 가지고 있다. 가장 큰 차이점은 전환 효과인데, 여기서 Figma는 두 프레임 사이의 상태를 자동으로 애니메이션화하는 스마트 애니메이트 기능을 가지고 있다. 스마트 애니메이트를 사용하면 더 복잡해 보이는 프로토타입을 만들 수 있다. Adobe XD는 프로토타이핑 제작 부분에서 더 많은 기능을 가지고 있다. Figma와 Sketch가 제공하는 것 외에도 키보드, 게임패드, 음성 기반 트리거 등 보다 전문적인 프로토타입 경험을 지원할 수 있는 기능이 더 많다. 프로토타이핑과 관련된 기본 제공 기능의 경우, Adobe XD가 좀 더 많은 입력 옵션을 제공하는 선두 주자이다. 플러그인세 가지 툴 모두 플러그인 시스템이 함께 제공된다. 오랜 기간동안 축적된 Sketch에는 크고 다양한 플러그인 라이브러리가 있다. 설계 워크플로우의 속도를 높이거나 Sketch의 기능을 확장하는 유용한 플러그인을 많이 찾을 수 있다. Figma는 2019년 플러그인 설치를 지원하기 시작했다. 많은 플러그인이 추가되기 시작했지만, 다른 툴들에 비교해서 부족하다. Adobe XD는 2018년 플러그인 제공을 시작했다. 아직 Sketch와 같은 수준은 아닐지 몰라도 엄청나게 빠른 속도로 따라잡고 있다. 세 가지 툴 중, 더 좋은 검색 및 플러그인 관리 환경을 갖추고 있다고 생각한다.
개발속도시간을 투자해서 배울 툴을 선택할 때, 툴 업데이트가 얼마나 빨리 진행되는지가 큰 고려 사항이다.
그래서 어떤 툴을 사용해야 하는가?Sketch, Figma, Adobe XD는 모두 훌륭한 UI 디자인 툴들이다. 이제 막 어떤 툴로 뛰어들어야 할지 고민하고 있다면, 나는 Figma를 출발점으로 추천한다. 좀 더 복잡한 프로토타입(예: 음성 입력 트리거)을 생성할 수 있는 설계 도구를 찾고 있다면 Adobe XD로 옮겨라. 궁극적으로, 고용주/디자인 팀은 결국 여러분을 위한 툴을 선택하게 될 수도 있지만, 좋은 소식은 세 가지 툴이 매우 유사하다는 것이다. 만약 당신이 하나의 툴에 시간을 투자해 왔다면, 대부분 다른 툴로 옮겨갔을 때도 충분히 적응을 잘할 수 있다는 것이다. - 저자 : Poyi Chen |