IT 콘텐츠를 스크랩하고 관리해 보세요!
성장에 도움이 되는 IT 콘텐츠를 스크랩하고 관리해 보세요!
스크랩북 시작하기
다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

모바일 앱은 이제 쓰이지 않는 곳이 있을까? 싶을 정도로 우리의 일상 속 다양한 영역에서 밀접한 영향을 주고 있습니다. 수많은 앱이 기획, 디자인, 개발 등의 과정을 거쳐 계속해서 공개되고 있고, 모바일 앱을 만드는 툴 역시 빠르게 발전을 거듭하고 있습니다. 오늘 소개할 Aaply는 누구나 쉽게 앱을 디자인할 수 있도록 도와주는 서비스로 현재 무료 베타서비스를 제공하고 있습니다. 이번 글에서 자세히 살펴보겠습니다.

회원가입을 하면 원하는 문장을
저장 할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

모바일 앱 누구나 쉽게 디자인할 수 있는 ‘Aaply’

 

모바일 앱은 이제 쓰이지 않는 곳이 있을까? 싶을 정도로 우리의 일상 속 다양한 영역에서 밀접한 영향을 주고 있습니다. 수많은 앱이 기획, 디자인, 개발 등의 과정을 거쳐 계속해서 공개되고 있고, 모바일 앱을 만드는 툴 역시 빠르게 발전을 거듭하고 있습니다. 오늘 소개할 Aaply는 누구나 쉽게 앱을 디자인할 수 있도록 도와주는 서비스로 현재 무료 베타서비스를 제공하고 있습니다. 이번 글에서 자세히 살펴보겠습니다.

 

앱 만들기는 여전히 어렵다?

Aaply 첫 화면
<출처: Aaply>

 

오늘 소개하는 ‘Aaply’는 노코드, 로우코드에 해당하는 서비스는 아닙니다. 대신 기본 화면을 구성하고, 앱 제작에 필요한 디자인 과정에 초점이 맞춰져 있습니다. 눈에 띄는 건 헨리 포드가 모든 사람이 자동차를 갖길 바라는 마음으로 생산을 시작한 것처럼, 이들 역시 모두가 자신만의 앱을 갖길 바라는 마음으로 ‘Aaply’를 시작했다는 점입니다.

 

호주의 한 스타트업에서 만든 ‘Aaply’는 앱을 만드는 과정이 여전히 많은 사람들에게 어렵다는 것을 깨닫고, 모든 사람이 좀 더 쉽게 모바일 앱을 제작할 수 있길 바라는 마음으로 베타서비스를 공개했습니다.

 

Aaply 리뷰
<출처: Aaply>

 

저는 베타서비스가 시작되기 전 사전 신청을 통해 서비스에 대한 소식을 확인할 수 있었고, 지금은 사이드 프로젝트를 위해 ‘Aaply’를 사용하고 있습니다. 서비스를 본격적으로 소개하기 전, 저와 같이 ‘Aaply’를 미리 사용해 본 한 디자이너의 리뷰가 인상 깊어 공유합니다. 누구나 쉽게 그래픽 디자인을 할 수 있도록 도와주는 서비스로 ‘Canva’의 모바일 앱 버전 같고, 디자이너가 아니어도 누구나 사용할 수 있다는 내용이 눈에 띕니다. 

 

다음은 ‘Aaply’가 제공하는 주요 기능입니다.

  • 여러 명이 함께 작업할 수 있는 협업 기능 지원
  • 빈 화면에서 시작하는 것이 아니라 기본 기능에 해당하는 다양한 앱 화면 지원
  • 온보딩에서 결제까지 모바일 앱 여정을 시각적으로 제작 가능
  • 프로젝트 수, 화면 수, 화면 카테고리, 다양한 컴포넌트 등을 무료로 사용 가능

 

 

직관적인 설계와 편리한 모바일 앱 디자인

Aaply 로그인 화면
<출처: Aaply>

 

기본적으로 모바일 앱에 해당하는 프로젝트를 생성하고, 첫 번째 모바일 화면을 추가한 뒤 다양한 종류의 블록(컴포넌트)을 활용해 와이어 프레임을 제작할 수 있는데요. 각 화면은 회원가입 및 로그인 등 하나의 그룹으로 묶어 관리할 수 있습니다. 이렇게 만들어진 여러 화면은 사용자 여정에 따라 이동 경로 등을 만들 수 있고, 앱 버전에 따라 관리할 수 있다는 장점이 있습니다. 물론 팀원을 초대해 각 화면이나 이동 경로 등을 커뮤니케이션할 수 있는 환경도 제공합니다.

 

프로젝트 생성
<출처: Aaply>

 

가입 후, 가장 먼저 할 수 있는 행동은 프로젝트 생성인데요. 프로젝트는 하나의 앱을 기준으로 할 수도 있고, 버전에 따라 구분하는 역할을 할 수도 있습니다. 먼저 생성된 프로젝트에 주요 화면과 흐름 등을 정리한 뒤 이를 복사해 버전별로 관리하는 것도 가능합니다. 위 화면은 샘플로 제공되는 프로젝트로 전반적인 구성을 미리 가늠해볼 수 있습니다.

 

그다음 왼쪽에는 다섯 가지 주요 기능이 자리 잡고 있습니다. 1) 첫 번째는 이미 만들어진 화면이나 설정된 이동 경로 등을 선택해 편집하거나 확인하는 용도로 활용할 수 있으며, 2) 두 번째로 로그인 및 회원가입, 이메일 인증, 아티클, 결제, 영상 및 오디오 리스트 등 기본 제공되는 화면 템플릿을 확인할 수 있는 기능입니다. 처음부터 화면을 제작하지 않고, 대략적인 구성이나 흐름 등을 확인하려고 할 때 유용하게 쓸 수 있습니다. 

 

3) 세 번째는 빈 화면을 추가하는 기능으로, 추가한 뒤 블록 라이브러리를 통해 버튼, 갤러리, 카드, 플레이스 홀더, 인풋, 아이콘, 텍스트 등을 화면에 적용할 수 있습니다. 4) 네 번째로 화살표는 화면에서 화면으로의 이동 경로를 편집할 수 있도록 도와줍니다. 5) 마지막으로 다섯 번째는 화면 여러 개를 하나의 그룹으로 만들 수 있는 역할을 합니다.

 

템플릿 생성
<출처: Aaply>

 

제가 이 서비스를 처음 이용할 때 가장 많이 사용한 도구는 바로 ‘템플릿'인데요. 모바일 앱에서 자주 사용하는 기본 화면을 와이어 프레임 형태로 제작하고, 쉽게 활용할 수 있도록 제공하고 있기 때문입니다.

 

  • 회원가입 및 로그인
  • 온보딩
  • 홈, 콘텐츠 영역
  • 결제 
  • 오디오 및 영상 리스트
  • 소셜
  • 프로필 및 설정
  • 이커머스
  • 기타 (알림, 필터, 로딩, 팝업, 지도, 카드 등록 든)

 

등 9개 카테고리에 해당하는 다양한 화면이 등록되어 있으며, 원하는 화면을 하나씩 선택 후 등록하면 대략적인 흐름을 확인할 수 있습니다. 

 

블록 라이브러리
<출처: Aaply>

 

만약 템플릿에 원하는 화면이 없다면, 우선 빈 화면을 등록한 뒤 블록에서 원하는 대상을 적용하는 것도 가능합니다. 아무래도 템플릿은 공통 화면에 초점이 맞춰져 있어 나만의 화면을 표현하기 어려운 경우가 있는데, 이런 상황에서 유용하게 활용할 수 있습니다. 블록 종류는 아래와 같습니다.

 

  • 텍스트 블록
  • 버튼
  • 갤러리
  • 구분선 
  • 카드 UI
  • 컨트롤러
  • 플레이스 홀더
  • 인풋
  • 아이콘

 

또한 빈 화면에 버튼 등을 직접 그리거나 만들지 않고, 다양한 블록을 조합해 특정 화면을 빠르게 제작할 수 있어 유용합니다. 

 

화면 상태
<출처: Aaply>

 

다음으로 템플릿 또는 직접 구성한 화면을 개별 ‘상태'로 지정할 수 있습니다. ‘상태 없음’을 기본으로 완성, 진행 중, 완료까지 세 가지 상태를 지정해 현재 작업 현황을 확인할 수 있습니다. 이는 팀원들과 함께 작업하는 환경을 고려해 서로 진행 상황을 빠르게 확인할 수 있는 역할을 합니다.

 

화면 연결
<출처: Aaply>

 

이러한 과정을 거쳐 화면을 제작했다면 이제 연결해 줄 차례입니다. 화살표 버튼을 통해 화면 간 연결을 시각화할 수 있는데요. 연결 후에는 화살표 방향이나 스타일, 텍스트 추가, 어떤 행동에 의한 화면 이동인지 등을 입력할 수 있습니다. 정말 꼭 필요한 내용만 담아 구성했다고 생각하는데, 화살표 방향으로 이동 경로를 확인할 수 있고, 컬러와 텍스트를 통해 상황을 구체적으로 이해할 수 있기 때문입니다.

 

그룹 묶기
<출처: Aaply>

 

다음은 적용된 화면들을 그룹으로 묶는 기능입니다. 화면만 적용된 경우 각 화면의 구성요소를 자세히 살펴봐야 성격을 확인할 수 있는데 회원가입 및 로그인 등 그룹으로 연결해 타이틀을 지정해두면, 보다 빠르게 내용을 확인할 수 있습니다. 또한 하나의 모바일 앱을 구성하는데 필요한 화면 묶음이 무엇인지, 프로젝트를 열면 바로 따져볼 수 있다는 점에서도 편리합니다.

 

코멘트 기능
<출처: Aaply>

 

마지막으로 화면, 흐름 등을 기준으로 함께 의견을 나눌 수 있는 코멘트 기능을 지원하는데요. 코멘트 남길 공간을 클릭하면 바로 내용을 입력할 수 있습니다. 이 방법은 피그마 등 다른 서비스에서도 이미 제공하고 있어 어렵지 않게 사용할 수 있었습니다. 

 

 

한 번은 꼭 써봐야 하는 이유

Aaply 베타서비스
<출처: Aaply>

 

‘Aaply’는 현재 베타서비스 중으로 오늘 소개한 모든 기능을 무료로 사용할 수 있습니다. 또한 서비스의 무료 여부를 떠나 모바일 앱 디자인 초기에 꼭 필요한 핵심 기능이 잘 반영되어 있어, 아이디어를 구체화하거나 다음 버전에 대한 변화를 스케치하기에 더없이 좋은 환경을 제공합니다. 만약 피그마 같은 툴을 바로 사용하기 부담스럽거나, 떠오른 앱 디자인 아이디어를 화면 단위로 빠르게 정리하고 싶다면 좋은 선택지가 되어줄 것입니다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

좋아요

댓글

공유

공유

댓글 2
작성자가 삭제한 댓글입니다.
작성자가 삭제한 댓글입니다.

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

일반 공개된 AI 디자인 툴 '마이크로소프트 디자이너' 리뷰

디자인

몇 초 만에 다양한 UI 구성하는 ‘Shaper’

디자인

태그 기반 북마크 관리 서비스 ‘Bookmarkify’

프로덕트

실제 화면에서 피드백 주고받는 ‘ruttl’

디자인

프롬프트 한 줄로 다섯 가지 컬러 만드는 ‘AI Colors’

디자인

웹에서 바로 편집하는 무료 이미지 에디터 ‘Edit.photo’

디자인

한글 폰트도 쉽게 적용할 수 있는 폰트 프로토타이핑 툴 ‘TypeTrials’

디자인

"겨울은 무슨 색?" 단어 검색하면 컬러값 추천하는 Picular

디자인

브랜드 로고 1,000개 레퍼런스 창고 'LOGGGOS'

디자인

차트 생성 및 디자인 툴을 무료로 제공하는 ‘MagicPattern’

디자인

디자인 영감을 직관적으로 수집할 수 있는 'SAVEE'

디자인

캡처와 동시에 이미지를 편집할 수 있는 ‘Xnapper’

디자인

몇 번의 클릭으로 디자인 패턴을 만드는 ‘more.graphics’

디자인

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

이 글을 본 사람들이 함께 스크랩한 콘텐츠를 권해드려요.

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!
회원가입하고, 뉴스레터를 받아보세요!
회원가입하기