개발자 없이 리툴(retool)로 어드민 시스템 만들기
창업 팀이 개발 의존성을 슬기롭게 벗어나는 방법
목차
1. 개발에 의존하지 말자!
2. 리툴을 알아봅시다.
3. 데이터 호출 기능 구현하기
4. 데이터 조회 기능 구현하기
5. 필터 기능 구현하기
개발에 의존하지 말자!
1. 빠른 속도를 위해
초기 창업팀에게 가장 중요한 건 "속도"다. 검증해야 할 것은 너무도 많지만, 시간은 우리를 기다려주지 않는다. 속도를 빠르게 내기 위해, 프로덕트의 개발 의존성을 줄이고 있다. 개발이 들어가면 높은 퀄리티의 프로덕트를 만들 수 있지만, 오랜 시간이 걸릴 수밖에 없다. 물론 개발자 인력이 빵빵한 곳이라면, 개발을 하면 된다. 하지만, 우리 같은 초기 창업 팀에게는 모든 프로덕트를 개발로 구현하는 방식이 적합하지 않다.
물론 이러면 안 된다. 빠르게 올바른 답을 찾는 게 중요하다!2. 개발 없이 어드민 페이지
우리 팀이 만드는 서비스의 이름은 "투두몰(todomall)"로 (1) 전문가가 투두 기반의 클래스를 만들고 (2) 유저는 클래스를 다운 받아서 (3) 제공받은 투두와 가이드를 보고, 차근차근 따라 하는 서비스다. 여기서 미션 기능이 있는데 한 번에 모든 투두를 제공하지 않고, 유저가 중간중간 미션을 완수하고 결과물을 인증해야 다음 투두를 확인할 수 있다.
앞서 말했듯, 초기 창업팀에게 속도가 중요하다. 최근에 운영을 시작한 클로즈 베타 앱도 최소 기능만을 담아낸 서비스였고, 다른 부분에 리소스를 쏟을 여유가 없었다. 그렇기에, 유저가 미션을 성공적으로 완수하고 있는지 파악할 수 있는 어드민 시스템을 만들지 못했다. 선견지명으로 개발자가 미션 인증 사진을 AWS의 S3에 업로드 되도록 만든 덕분에, 클래스별 미션 사진을 조회할 수 있었다. 다만, S3 링크를 하나하나 클릭해서 봐야 했기에 리소스가 어쩔 수 없이 들어갔다.
그렇다고 미션 어드민 시스템을 개발로 만들기엔 우선순위가 엄청 높은 것도 아니었다. 미션 어드민 시스템은 있으면 좋으나, 지금 집중해야 하는 부분은 클로즈 베타 앱을 통한 가설 검증이었다.
결론적으로, (1) 서비스의 유지 관점에서 미션 인증 사진을 계속 트래킹 가능한 시스템이 필요했고, (2) 개발자의 리소스를 투입해 시스템을 만드는 건 비효율적이다. 고민 끝에, 미션 사진을 조회할 수 있는 어드민 페이지를 혼자서 개발 없이 만들기로 했다. 나... 죽여줘...
물론 나 혼자서... ㅠ리툴을 알아봅시다.
1. 리툴을 선택한 이유
노코드 빌런으로 원래는 프로덕트를 만들 때, 버블(bubble)이란 툴을 사용했다. 버블 안에서 데이터베이스도 만들 수 있기에, 프론트와 백엔드 모두를 개발 없이 다룰 수 있었다. 다만, 이번에 만들 어드민 페이지는 케이스가 달랐는데 원본 데이터 자체가 S3에 저장되고 있었다. 즉, 데이터베이스를 구현할 필요가 없는 상태였다. 구현할 기능 범위도 산정해보니 크게 (1) S3 데이터를 어드민 페이지로 불러온 후, (2) 필터를 적용해 (3) 데이터를 조회하는 기능이 나왔고, 이 정도 기능 범위면 버블로 구현하는 게 무겁다는 생각이 들었다. 그래서 리툴(Retool)로 시선을 돌렸다. 버블이 나쁘다는 게 아니고, 목적에 덜 부합했을 뿐
2. 리툴이란?
리툴은 프론트를 모르는 백엔드를 위한 툴이라 보면 된다. (1) UI를 드래그 앤 드랍으로 쉽게 구현하고 (2) 서버와 연결해서 데이터를 불러와주기만 하면 된다. (2)의 요건 때문에, 리툴은 노코드 툴보다 로우 코드로 분류된다. 노 코드는 말 그대로 "개발이 전혀 필요 없는 툴"이고, 로우 코드는 "개발이 약간은 필요한 툴"로 정의할 수 있다. 버블은 코드를 입력 없이 프로덕트를 만들 수 있지만, 리툴은 데이터를 다루기 위해서 JavaScript와 SQL을 알아야 한다. JS와 SQL을 써본 적이 없어도 걱정하지 말자! 생각보다 엄청 복잡하고 어려운 코드가 사용되는 건 아니다. 이에 대한 부분은 계속 글을 읽어보면 납득할 수 있다.
참고로, 이전 회사에서 리툴이란 툴을 활용해 휴가 관리 시스템을 만들긴 했지만, 이 때는 직접 만든 게 아니라 서비스 기획만 진행했었다. 리툴로 직접 프로덕트를 만들어 보는 건 이번에 처음인데, 생각보다 기능이 직관적이고 관련 커뮤니티가 잘 돼있어서 큰 어려움은 없었다. 혹은 내가 러닝 커브가 빠르거나...? 아무튼, 생각보다 쉽게 배울 수 있으니, 이 글을 참고해서 찍먹을 해보면 좋을 듯하다.
찍먹 합시다!데이터 호출 기능 구현하기
1. 데이터 리소스 등록하기
리툴을 어떻게 쓰는지 차근차근 알아보자. 우선 데이터 리소스를 등록해야 한다. 앞서 말했듯 리툴은 데이터베이스를 별도로 지원하지 않고, 서버로부터 데이터를 호출해서 사용한다. 여기서 호출 서버가 데이터 리소스를 칭한다.
이런 느낌이랄까?개발이라면 호출 코드를 입력해야 하지만, 다행히 외부 서버와 연동이 잘 돼있어서 인증키만 설정하면 된다. 미션 어드민 페이지를 만들기 위해 S3의 데이터를 불러와야 하므로, 데이터 리소스로 S3를 등록했다. 리소스 설정 페이지에서 새로운 리소스를 추가하면, 어떤 서버와 연결할지 아래처럼 선택할 수 있다.
Amazon S3를 선택하면, 서버 접근 인증키를 입력하면 되는데 이건 AWS의 IAM에서 확인 가능하다. 접근하려는 S3 버킷(a.k.a 최상위 폴더)을 선택하고, 인증키를 누르면 S3 리소스 등록은 끝난다. 이제 S3에 저장된 데이터를 바로바로 불러올 수 있다.
2. 쿼리 등록하기
리소스를 등록했으니, 본격적으로 프로덕트를 만들 차례다. 리툴의 화면은 아래와 같다.
서버에서 데이터를 호출하고, 이를 컴포넌트에 집어넣는 방식데이터 설정 패널에서 등록한 리소스를 쿼리로 호출해서 사용할 수 있다. 데이터 설정 패널에서 (1) 리소스 쿼리를 새로 추가한 후, (2) [Resource] 선택란에서 리소스 대상을 선택하고, (3) [Action Type] 선택란에서 리소스를 어떻게 작동시킬지 고르면 된다. 아래 이미지를 보면 리소스 대상으로 앞서 설정한 S3의 리소스를 선택했고, 액션으로 모든 파일을 불러오는 걸 택했다. 그 결과, 하단처럼 데이터가 호출됐으며, Contents 안에 S3 데이터가 array 형식으로 모두 담겨있다.
Contents에 저장된 array 데이터를 클릭하면 아래처럼 나온다. 여기서 Key는 S3에 저장된 데이터 이름을 뜻한다. 우리 개발자는 유저가 미션을 인증할 때, S3에 {클래스 이름}/{세션 이름}/{유저 닉네임}/{시간}. png 이름으로 데이터가 저장되게 설정했기에, Key 값이 아래처럼 나왔다.
데이터 조회 기능 구현하기
1. 컴포넌트 생성하기
이제 불러온 데이터를 UI 컴포넌트에 집어넣으면 된다. 컴포넌트 관리 패널을 보면, 아래 이미지처럼 다양한 컴포넌트가 있는 걸 볼 수 있다. (1) 불러온 데이터를 보여주는 테이블 등의 output 컴포넌트 말고도 (2) 데이터 자체를 입력하는 input 컴포넌트도 생성할 수 있다.
컴포넌트 관리 패널에서 [Table] 컴포넌트를 드래그 앤 드랍하면, 빈 테이블이 만들어진다. 이제 빈 테이블을 클릭하면, 관리 패널에서 해당 테이블에 어떤 데이터를 불러올지 선택할 수 있다. [Data] 입력란에 앞서 생성한 쿼리를 입력하면 된다. 이때, {{변수값}}을 입력해서, 리툴에서 저장된 데이터 및 쿼리를 호출할 수 있다. 만약 {{}}를 입력하지 않으면, 문자(str) 타입의 데이터가 입력된다.
아래 [Data] 입력란에 {{get_assignment.data.Contents}}라고 적혀있는데, 이는 "get_assignment"라는 리소스 쿼리의 결과값에서 "data" 안에 있는 "Contents" 데이터를 불러오겠다는 의미다. 그 결과, Contents에 저장된 array 데이터가 호출됐고, [CULUMNS] 영역에서 해당 데이터 속성이 보이는 걸 확인할 수 있다.
2. 데이터 전처리하기
불러온 데이터의 Key 속성값은 {클래스 이름}/{세션 이름}/{유저 닉네임}/{시간}. png 형태를 지닌다. 미션 사진을 클래스, 세션, 유저, 날짜 단위로 보기 위해 해당 값을 쪼개 줘야 하는데, 이런 경우에 JS 코드가 사용된다. 즉, JS 코드는 리툴에서 전처리 목적으로 사용되며, 이 정도의 간단한 코드만 알아도 충분하다. 물론 심화 시스템에선 더 필요할 수도...?
[COLUMNS] 영역에서 기존 데이터를 활용해 새로운 칼럼을 만들 수 있다. 새로운 칼럼을 만들면, [Value] 입력란에 해당 컬럼에 어떤 데이터를 집어넣을지 설정할 수 있다. 여기에 {{currentRow.Key.split("/")[0]}을 입력했는데, "테이블의 각 행"에 있는 "Key 속성 값"을 "/" 기준으로 쪼개서 리스트로 만든 후에 "0번째 값"을 호출한다는 의미다. 그러면, 아래 이미지처럼 Key 속성 값에서 클래스 이름만 추출해서 확인할 수 있다. 이런 방식으로 클래스, 세션, 닉네임, 날짜별로 테이블에서 보이도록 설정할 수 있다.
앞선 방식은 테이블에 데이터를 호출한 후에 전처리를 진행한 거고, 아예 데이터를 전처리한 후에 테이블에 호출하는 방식도 있다. 이런 경우는 JS 코드가 더 많이 사용되지만, 코드 난이도는 큰 차이가 없다. 데이터 설정 패널에서 [JavaScript transformer]을 생성하면, 리툴에서 저장된 변수값을 활용해서 새로운 값을 만드는 JS 코드를 입력해서 가동할 수 있다.
앞서 생성한 테이블만으로 미션 사진을 보기 힘듦으로, 테이블에 클릭한 행의 미션 사진을 볼 수 있게 설정해줘야 한다. JS transformer을 생성하고, {{}}를 활용해 방금 생성한 테이블의 데이터를 불러와주면 된다. 아래 이미지를 보면 {{assignmentListAll.selectRow.data.key}}라고 적혀있는데, 이는 "assignmentListAll"이란 테이블에서 "선택한 행"의 "데이터" 중에서 "key" 속성값을 불러온다는 의미다.
전처리가 완료되면, 이미지 컴포넌트를 새로 생성하고 테이블과 마찬가지로 불러올 데이터로 위에 설정한 JS transformer을 {{}}로 입력하면 된다. 그러면, 테이블에서 클릭한 행의 이미지를 다음과 같이 보여준다.
필터 기능 구현하기
S3에서 모든 데이터를 불러와 조회할 수 있게 됐으니, 마지막으로 필터 기능을 구현할 차례다. 이를 위해 (1) 필터 값을 입력할 input 컴포넌트와 (2) 테이블에 필터를 적용시킬 Button 컴포넌트가 필요하다. 리툴에서 지원해주는 UI 컴포넌트 중에서 Button type이 있다. Button type의 컴포넌트는 클릭 시, 특정 액션을 작동시키도록 설정할 수 있다.
클래스, 세션, 닉네임, 날짜 기준 필터가 필요하므로, 총 4개의 input 컴포넌트를 생성해주면 된다. 앞의 3개는 [Text input] 컴포넌트를 만들면 되지만, 날짜는 기간으로 봐야 하므로 [Date Range] 컴포넌트를 만들어줘야 한다. 그리고, 필터를 작동시킬 [Button] 컴포넌트도 생성해주면 된다.
생성한 Button 컴포넌트의 설정 패널의 [Event handlers] 영역에서 작동시킬 액션을 설정할 수 있는데, 특정 컴포넌트에 필터를 적용시키는 액션이 있다. (1) [Action] 선택란에 "Control component"를 선택해주고 (2) [Component] 선택란에 필터를 적용할 테이블을 선택해주면 된다. 그리고 (3) [Method] 선택란에는 "Set filters"를 선택하고, (4) [Filters] 입력란에 어떤 필터를 적용할지 입력해주면 된다. 이때, {{}} 를 활용해 클래스, 세션, 닉네임, 날짜 필터 입력란에 적용된 값을 호출해서, 필터를 입력해줘야 한다.
이렇게까지 하면, 처음에 설정한 기능 범위인 (1) S3 데이터를 어드민 페이지로 불러온 후, (2) 필터를 적용해 (3) 데이터를 조회하는 기능이 모두 구현 완료됐다. 이런 간단한(?) 조작으로 어드민 페이지를 하루 만에 구현 가능할 수 있었다. 물론 구현하려는 프로덕트의 난도가 높거나, 코드 자체를 몰라서 서칭하는 경우에 시간이 더 걸릴 수 있다. 이거 다음에 구현한 클래스 개설 시스템은 복잡해서 3일 정도 소요됨... 다만, 이런 노코드 툴을 알고 있다면, 개발 의존성에서 벗어날 수 있으며 결과적으로 팀이 나아가는 속도가 더 빨라질 것이라 확신한다!
리툴을 배우고 싶다면?
투두몰의 클래스로 가볍고 쉽게 시작해봐요!
