아달로는 노코드로 웹이나 앱을 제작할 수 있는 툴입니다. UI도 굉장히 잘되어있어서, Bubble 보다 초보자들이 사용하기에 더 추천합니다.
1. 앱 생성 시작하기
기존에는 앱개발만 지원했었는데, 최근 업데이트되어, 하나의 프로젝트로 모바일, 태블릿, 데스크탑 웹사이트 모두 한번에 반응형 앱으로 개발할 수 있습니다.
프로젝트 처음 시작시 몇가지 기본적인 템플릿을 제공합니다 (물론 빈화면에서 시작도 가능합니다.) 특히 이중에 Learn Adalo 라는 템플릿이 있는데, 튜토리얼처럼 잘 되어잇으니 저 템플릿을 선택하여 이것저것 만져보세요. 저는 chatbot을 만들기 위해, Chat 템플릿을 선택하였습니다.
그리고 advanced options 에서 다른 프로젝트에 있는 디비나, 외부의 디비도 연결할 수 있습니다. 지금 저는 새로운 디비로 시작하겠습니다.
마지막 3단계, 앱의 이름과 색을 지정해줍니다. 저 파랑노랑은 아달로 기본 색이고, 저는 제가 좋아하는 초록색과 주황색으로 설정하고 생성했습니다. (프로젝트 생성 후에도 언제든지 변경이 가능합니다.)
프로젝트 화면입니다. 구성은 피그마처럼 여러 스크린이 펼쳐져 있고 서로를 연결하는 화살표들도 보입니다.
반응형 앱을 지원하기때문에, 여러 뷰를 확인하며 제작 할 수 있습니다.
보통 Shared Layout 설정을 통해 자동으로 커지고 작아지게 하고, 특별히 따로 손봐주고싶을때는 Mobile Layout만 혼자 내맘대로 설정할 수도 있습니다. 저는 웹, 탭은 동일하게 앱은 제맘대로 설정했습니다. (템플릿으로 시작하면 디폴트 세팅으로 대부분 잘 맞춰져있습니다.)
2. 기본 기능 소개
프로젝트 화면 왼쪽에는 여러 기능 탭이 있는데, 먼저 + 를 통해 새로운 스크린이나 컴포넌트를 추가할 수 있습니다. 기본적으로 제공하는 컴포넌트들도 훌륭하지만 마켓플레이스에서 다른 유저들이 제작한 컴포넌트 또한 활용 할 수 있습니다. 물론 다 아니다싶으면 혼자 만들어도 되구요!
파레트 모양의 탭에서는 내가 원하는 컬러와 폰트를 지정해 줄 수 있습니다.
세번째 탭에서는 스크린들을 관리할 수 있습니다.
가장 많이 들여다보게될 데이터베이스 탭 입니다. 이 채팅 템플릿에서는 기본적으로 User, Message, Conversation 세개의 컬렉션이 있습니다. 그리고 몇개의 샘플데이터도 있어서, 프리뷰 실행시 어떻게 연결되어있는지 확인하기가 쉽습니다.
세팅에서는 말그대로 앱의 설정값을 조절합니다.
퍼블리쉬 하기 위해서는 유료플랜 결제가 필요합니다 하하
분석 기능도 제공하고있습니다.
버전관리기능도 있습니다. 여기까지가 왼쪽 탭에 대한 간단한 설명이고, 이젠 이 채팅앱이 어떻게 구현되었는지 살펴보겠습니다.
3. 화면 디자인
캔버스에서 원하는 화면이나 컴포넌트를 클릭하면 해당 상세페이지가 좌측에 나타납니다. 지금은 List라는 컴포넌트이고, 데이터베이스 Messages 데이터와 연결하였습니다. 다양한 조건을 통해 원하는 Messages 데이터들만 선택하여, 지정한 순서대로 나오게 합니다.
이미 만들어놓은 데이터베이스가 있다면, 여기서 바로 선택이 가능합니다. 조건이나 순서도 미리 준비되어있는 선택지에서 선택할 수 있습니다.
4. Action 추가
껍데기 디자인이 완성 되었다면, 앱을 살아 움직이게 할 액션을 만들어주어야합니다. 간단하게는 화면 전환, 그리고 더 가자면 데이터를 불러오거나 쓰는 액션이 있습니다.
첫화면에서 Sign up 버튼을 누르면 회원가입 화면으로 넘어가게끔 액션을 설정해 줄 수 있습니다. 버튼 컴포넌트를 클릭해서 해당 설정탭을 열면 맨 아래에 액션을 추가할 수 있습니다.
그러면, 할수 있는 다양한 액션 목록들이 뜨게되고, 화면전환을 위해서는 Link를 선택하면 됩니다. Link 액션에서는 어떤화면으로 이동할지 선택지가 뜹니다.
이번에는, 챗을 입력하고 발송버튼을 누를때, 채팅 메세지를 디비에 저장하는 액션을 만들어봅니다.
인풋값으로 들어온 텍스트, 그리고 보기에 미리 세팅된 선택지들로 편하게 액션을 만들 수 있습니다.
여기까지, Adalo 에 대한 기초 설명과 템플릿을 이용한 간단한 튜토리얼이었습니다.
다음편에서는 Adalo 에서 OpenAI 와 연결하여, AI Chatbot 을 만들어 보겠습니다.
😎