Aaply - 디자이너가 없어도 되는 디자인툴?

  가지각색의 앱이 만들어지고 있는 요즘, 그에 맞춰 앱디자인을 위한 많은 툴과 플러그인 또한 쏟아져 나오고 있습니다.  그래픽 하나하나, 1px 한땀 한땀씩 디자이너가 장인정신으로 만들 필요 없이 뚝딱 작업을 도와주는 서비스들이 많이 생겼지요. 아이디어와 무관한 노가다 작업은 플러그인으로 상당한 시간을 절약할 수 있습니다. 오늘은 그런 맥락의 새로운 서비스를 하나 발견해 들고왔습니다. '디자이너가 없어도 되는 앱디자인 툴' 이라고 하는데요. 어디 한 번 정말 그런가 써봤습니다.

이름은 'Aaply'.

호주의 한 스타트업에서 제작된 베타버전 디자인 툴입니다. '디자이너가 아닌 사람도 누구나 쉽게 앱을 디자인할 수 있고 자기만의 앱을 가질 수 있다'라는 마음으로 만들어진 서비스라고 합니다. Aaply에서 제공하는 UI 템플릿과 규격화된 컴포넌트들을 가져다가 레고처럼 조립하여 쉽게 UI를 제작할 수 있다는 것이죠. '망고보드','Canva','카카오 오븐' 같은 서비스들과 유사하지만 사용법은 그보다 더 단순합니다. 단순한 만큼, 컴포넌트를 변형할 수 있는 자유도는 낮습니다.

그럼 긴 말 할 것 없이 한 번 사용해보겠습니다. 사이트에 접속합니다.

(아직 유명하지 않아서 그런지, 구글에 Aaply라고 검색하면 나오지 않습니다. 친절하게도 'apply'로 교정해서 검색해주더군요.ㅠ -https://aaply.app/-로 접속하셔야 합니다.)

대문에 커다랗게 피그마 아이콘이 있어서 그런지 피그마같은 느낌도 드네요. 앱 설치 없이 피그마처럼 브라우저 내에서 사용 가능합니다. 가입을 하면 무료로 사용이 가능하고, [Try demo project]를 통해 가입 전에 예제를 통해 체험도 가능합니다. (무조건적으로 회원가입을 강요하지 않고 체험을 충분히 제공한다는 점이 마음에 들었습니다.)

일단 데모 프로젝트를 실행해보면, 예시로 만들어진 쇼핑앱 프로젝트가 실행됩니다.

피그잼 생각이 나는 화면입니다.

좌측 메뉴의 기능을 하나씩 살펴 보겠습니다.

'Cursor' : 스크린 선택과 이동, 편집이 가능한 기본 커서 기능

'Templete' : Aaply에서 제공하는 UI 템플릿 추가

'add Screen' : 템플릿이 적용되지 않은 빈 화면 추가

'add link' : 플로우를 나타내기 위한 화살표 추가 및 수정

'add group' :여러 화면을 하나의 성격으로 묶기 위한 그룹 추가 및 수정

'cursor'는 설명이 필요없을테니 넘어가고, 'Templete'기능 사용법부터 보겠습니다.

Templete

템플릿 아이콘을 클릭하면 카테고리 별로 기본 UI를 제공합니다. 원하는 템플릿을 하나 선택해서 대지의 빈 공간을 클릭하면 해당 템플릿이 적용된 스크린이 생성됩니다. 템플릿을 가져온 뒤 에디터로 수정해서 사용할 수도 있습니다.

생성된 프레임을 더블클릭하면 디테일을 수정할 수 있는 모달이 생성됩니다. 형태 변경, 텍스트 변경, 디바이더 또는 새 컴포넌트 추가, 컴포넌트 위치 이동 정도만 가능한 것 같습니다. 컬러 변경이나 컴포넌트를 px기준으로 섬세하게 변경하는 등의 디자인은 불가합니다. 

Add Screen

아무런 컴포넌트가 올라가있지 않은 빈 스크린을 생성하는 기능입니다.

'add screen' 버튼 클릭 후 허용 가능한 빈 영역에 커서를 클릭하면 빈 프레임이 생성됩니다. 프레임 우측 상단에 있는 수정 아이콘을 통해 원하는 컴포넌트를 추가할 수 있습니다.

Add link

플로우 차트를 생성할 수 있는 기능입니다. 화면 간의 경로와 인터렉션 조건을 표기할 수 있습니다. 선에 마우스호버를 하면 뜨는 네 가지 아이콘 중 상단 3개는 선의 디자인을 변경할 수 있는 기능이고, 마지막 아이콘이 인터렉션 디테일을 표시하는 기능입니다. (개인적으로 저는 저 손가락 아이콘이 무슨 기능인지 바로 알기 어려웠습니다. 마우스로 선을 스크롤 해보라는 줄 알고 한참 헛 드래그를 했네요.;)

생성된 link 라인은 스크린이 이동할 때 마다 따라다니기 때문에 링크를 다시 만들어줄 필요가 없어 편리합니다.

Add Group

프레임을 그룹화할 수 있는 기능입니다. 한 페이지에 모든 화면을 담아야 할 때 시각적으로 조직화하여 가시성을 높이는 데 도움이 되겠네요. 피그잼의 그룹화와 비슷한 기능입니다. 그룹 이동 시 포함된 화면도 함께 이동됩니다.

총평

'디자이너가 없어도 되는 디자인 툴' 이라고 현직 디자이너를 자극시켰지만, 막상 사용해보니 이 서비스는 디자이너가 와이어프레임을 빠르게 만들 때 유용하게 쓰일 툴인 것 같습니다. 컬러 변경이나 브랜드 로고 삽입같은 기능이 지원되지 않기 때문에, 나올 수 있는 아웃풋은 와이어프레임까지가 한계입니다.

와이어프레임 제작 시 잠깐 정신을 놓으면 간격과 정렬에 집착해 시간을 버리는 나 자신을 발견하게 되는데, 기획단계에서 빠르게 화면 구성을 정할 때 사용하면 도움이 되겠네요.

저도 이 서비스를 하루 이틀 사용해 본 게 전부이기 때문에, 많은 분들이 사용해보시고 좋은 활용법을 함께 공유하면 좋을 것 같습니다.