brunch

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 노코드 햄스터 Nov 17. 2023

스타트업_노코드 Bubble.io로 첫 프로덕트 런칭

전자책 출판사 '작가와' CMS 웹사이트

지난 편까지 요약

아이디어만 있는 상태에서 외주 개발 의뢰했더니 너무 비쌌음

'노코드'라는 개념을 알게 되고 검색을 시작함

수많은 노코드 툴을 비교하고 내게 적합한 Softr, Airtable, Zapier 를 공부하며 개발 시작

노코드 스터디 2주만에 기업 교육 브랜드 웹사이트 런칭

이후 2달 반 동안 '전자책 출판-유통 서비스 작가와' 런칭('22.09)

그리고 런칭 전후로 했던 일들 요약('22.07 ~ '23.06)

(작가와 런칭 전) 초기 사용자를 모집하기 위해 '모두의 출판사' 슬로건에 맞는 '공동집필' 서비스 런칭

판매, 정산 데이터를 처리하기 위해 Excel Power Query를 배워서 어찌저찌 자동화를 만들어냄

작가와 웹사이트와 '공동집필' 서비스 ☆합체★

글라이드 Glide 노코드 툴을 배워 이런 저런 서비스용 웹앱 제작 (지금은 모두 어디론가 사라져버린...)

Notion으로 체계적인 일정 관리, 협업 프로세스 구현

Notion으로 Task와 내부 정보를 기록하는 체계 구축

기타(원래 회사에서 하고 있던 경영컨설팅, 기업 교육 등...)

하나씩 다뤄보고 싶지만... 일단은 이렇게 퉁치고 넘어가기로 한다(...?)

노코드 도구 Bubble.io를 접하다!

그리고 올해 7월부터 본격적으로 Bubble.io라는 도구를 활용해 개발을 시작하게 됐다. 이글은 Bubble.io로 런칭한 첫 번째 서비스인 CMS(Contents Management System) 개발 스토리다.

배경

Softr로 만든 웹사이트에서 고객의 판매, 정산 데이터를 개괄적으로 보여주고 있었지만 종종 상세한 데이터를 원하는 고객이 있었다. 대체로 이런 문의였다.

'어디선가 소개 글을 보면 도서 판매액의 최대 60%까지 받을 수 있다고 나와있는데, 왜 실제로 받은 금액은 그것보다 적은 거죠?'

그럴 때마다 그 사람의 정산 데이터를 하나씩 열어보아야만 했고, 다음과 같은 말을 반복할 수밖에 없었다.

'서점마다 정산비율이 다르다. 같은 서점이라도 판매채널(B2C, B2B, B2BC)에 따라 정산비율이 또 다르다. B2BC인 경우 서점수수료가 도서판매액의 70% 가까이 되는 경우도 있다. 고객에게 도서판매액의 60%가 되는 것은 일부 판매채널 한정이다.' ......

이렇게만 말해도 알아듣는 사람이 있으면 좋겠지만, 보통은 5분 이상 통화가 이어지는 경우가 대부분이다.

그래서 '판매채널', '서점 수수료' 등의 정보가 담긴 상세데이터를 고객에게 공개하면 좋겠다, 는 결론에 이르렀다.

Softr로 만든 웹사이트에서는 한계가 명확했다. 갖고 있는 데이터 목록을 길게 표현하는 것도 불편했고, 어떻게든 표현한다고 해도 UI가 매우 구렸기(?) 때문이다. 그래서 Softr + Airtable 보다 자유도와 활용도가 높은 (개발 난이도 역시 높은;) Bubble.io에 관심을 갖게 됐다.

Softr 웹사이트 중 '월별 판매내역' UI

※ 서점에서 판매데이터를 보여주는 웹사이트를 CMS(Contents Management System)이라고 부르길래 이름을 그대로 따왔다.

개발 스토리

1. 꽤 어려웠던 시작

유튜브를 보면서 버블을 배우기 시작했지만... 확실히 Softr, Airtable, Zapier 배울 때보단 속도가 더뎠다. 가성비 좋은 저 노코드 3총사를 쓸 땐, 한 쪽에 유튜브를 켜놓고 배우면서 바로 응용해서 기능을 구현할 정도로 속도가 빨랐다. 나도 모르게 '노코드 = 쉽고 만만한 것'이라는 편견이 생겼던 것 같다.

그러나 Bubble.io를 배우면서 생각이 바뀌었다. 노코드는 배우기 쉬운 도구인 것은 맞지만, 흠... 개발이 쉬운 것은 아니었다. Bubble.io에선 Softr에서 설정하지 않았던 정말 자잘한 개발 요소들까지 직접 만져줘야했다. 페이지가 넘어갈 때 데이터를 어떻게 주고 받는지, 디바이스 너비에 맞춰서 UI가 어떻게 조절되어야 하는지... 코드를 쓰진 않았지만 개발 지식이 없으면 제대로 된 기능을 구현할 수가 없었다.

2. 버블 외주개발 업체에 자문을 구함

독학으로는 시간이 오래걸리겠다고 판단했다. 그래서 대표님께 '버블 외주 업체에 초기 설계 도움을 받으면 좋을 것 같다. 만들고자 하는 기능은 명확하니 어떻게 구현하는지에 집중하면 빠르게 배울 수 있다.'고 설득했다. 그래서 버블 외주 업체인 해치하이커(링크)에 자문을 의뢰했다.

원래는 1시간씩 4번을 계획했었지만, 실제론 1.5시간씩 2번(주 1회, 총 2주, 3시간) 진행했다. 피그마로 미리 UI 디자인을 했었고, 기존에 정규화된 형태의 데이터, 그리고 노코드 짬밥(?) 덕분에 낭비하는 시간 없이 CMS를 구현하기 위한 버블의 기능, 플러그인을 집중해서 배울 수 있었다.

자문 기간 동안에도 버블 공부를 계속했었는데, 아래에서 소개할 유튜브 선생님 덕분에 Bubble.io 기초를 제대로 익힐 수 있게 됐다.

3. 나를 성장시킨 유튜브 채널, 선생님들

버블을 처음 배우기엔 정말 막막하다. 버블 공식 유튜브 채널에 가면 튜토리얼이 있긴 하지만... 지금봐도 생초보가 보기엔 말도 빠르고 내용도 압축되어 있다. 이미 아는 사람이 개념을 정리하기에 적합한 영상이라는 생각이 든다. 다른 채널들도 각 기능(모듈) 별로 어떻게 작업하는지를 다룬 가이드가 대부분이다. 정말 생초보를 위한 강의를 찾기는 힘들었다. 강의 영상, 강사 등을 엑셀에 정리하면서 자료를 정리하다가.... 드디어 찾았다. 나의 버블 선생님...

Matt Neary라는 유튜브 채널을 발견한 것. 그리고 여기서 버블을 처음 접하는 사람에게 희망을 주는 영상을 찾았다. 바로 이 것. 무려 3시간짜리 영상이다. 그러나 이 영상 안에 있는 개념을 익히지 않고선 버블 개발을 할 수가 없다. 정~~~~~말 이해하기 쉽게 설명한다. '강사'로서 이 사람을 존경하게 될 만큼 잘 가르친다. 영어라는 점이 조금 걸리긴 하지만... 영어가 안 들려도 화면을 보다 보면 이해가 간다!

Matt Neary 기초 영상 중 '데이터베이스' 설명 부분. 이 사람만큼 쉽게 설명하는 유튜버 또 없다. 장담한다.

그리고 버블 커뮤니티에서 활동하시는 숨은 고수 공대적 문과생님께도 도움을 크게 받았다. 관계형 데이터베이스를 이용하는 것과 'Do a search for'을 활용해서 정보를 불러오는 것이 얼마나 다른지 알게 해주었다. 이외에도 자잘하게 도움을 정말 많이 주셨다 ㅠㅠ (피그마도 이분 영상 보면서 익혔다!)

이외에도 이것저것 도움을 주신 분들이 많다. 그 중엔 대표님 지인 개발자 분도 계셨다. 개발팀 리더 관점에서 내가 마주한 문제를 거시적으로 바라보고, 조언을 주셨다. '기능'에만 집착하던 꼬꼬마에게 더 넓은 시야를 제공해주셨다. ~~(물론 아직도 기능에 집착하고 있긴 하지만...)~~

4. 결과물!!

시행착오를 많이 거치긴 했지만, 그래도 하나씩 배워가면서 어떻게든 원하는 결과물을 만들어냈다. '잘 만든 프로덕트'는 아닌 것 같다. 이 글을 쓰는 시점에서도 아쉬운 점이 여럿 보이는 것이... 첫 작품은 어쩔 수 없나보다. 그래도 의도한 기능은 다 담고 있으니 그걸로 된 거 아닐까 싶다. 이미지와 함께 핵심 기능을 설명해보겠다.

CMS 메인 페이지

CMS 메인 페이지다.

- (좌상단) 이곳에서는 작가의 콘텐츠(도서)와 판매, 정산 현황이 대쉬보드 형태로 주어진다.

- (우상단) 대표님 요청사항에 맞춰서 '일촌작가' 기능을 추가했다. 선후배 작가를 등록할 수 있다.

- (하단) 최신 공지사항 5개가 이곳에 노출된다.

첫 페이지인 만큼 더 알차게 구성했으면 어땠을까... 하는 생각이 든다. '전월 대비 판매액 증감율' 이런 게 들어갔다면 어땠을까. 작가에게 간접적으로 '추가 집필', '홍보/마케팅'에 대한 메시지를 전달할 수 있지 않았을까?

CMS 판매/정산 - 월별 판매정보

CMS 판매/정산 - 판매정보 상세

판매/정산 메뉴는 다시 4개의 하위 메뉴로 나뉜다.

- 월별 판매내역 : 월별로 도서 판매 데이터를 보여준다. 위에서 보여준 Softr UI와 크게 다르지 않게 설계했다. 추가된 기능이 있다면 '엑셀다운로드'.

- 누적 판매내역 : 판매기간을 나누지 않고 도서별로 얼마나 판매됐는지 나타내는 공간이다.

- 판매정보 상세 : '판매서점', '유통채널' 별로 얼마나 팔렸고, 정산 비율이 어떻게 되는지를 보여주는 부분이다. 엑셀 다운로드를 하면 '서점 수수료' 등 더욱 상세한 정보를 볼 수 있다.

- 정산내역 : 월별로 고객 계좌로 이체된 정산액을 정리한 부분이다.

CMS를 처음 만들기 시작한 것은 '판매정보 상세' 페이지를 보여주기 위해서였다. 그러다보니 저 페이지에 공이 좀 들어갔다. 저자유형에 따라 정산액 그래프도 좌르륵 있고...(왼쪽 개인저자 도서 정산액에 그래프가 없는 이유는... 내가 혼자 쓴 책이 없기 때문이다... ㅠ) 판매내역 상세 데이터를 엑셀 다운로드 하면 더욱 자세한 데이터를 볼 수 있다. CMS에서 제공하는 통계가 아쉬운 경우, 작가 스스로 분석할 수 있도록 유도했다.

내 서재 - 도서목록

내 서재 - 공유용 서재

도서 상세 페이지. 아래로 스크롤 하면 목차, 도서 소개문구, 판매처 링크 등의 정보가 더 있다.

CMS(Contents Management System)라면 너무 당연하게도 자신의 콘텐츠를 한 눈에 볼 수 있어야 한다. 그리고 경쟁사에서 작가의 책을 깔끔하게 모아서 보여주는 페이지가 있길래 그것도 벤치마크해(베껴)왔다.

- 도서목록 : 내가 참여한 도서 목록을 볼 수 있다. '공유용 서재'에서 내가 참여한 도서로 보여줄 것인지 아닌지를 ON/OFF 할 수 있다.

- 공유용 서재 : 작가가 자신의 도서목록을 잠재고객에게 정리해서 보여줄 수 있는 공간이다. 이 주소 URL을 복사해서 공유하면 된다. [참고]

- 도서 상세 페이지 : '공유용 서재'에서 도서를 클릭하면 이동하는 페이지다. 책에 대한 개괄적인 내용을 이곳에서 확인할 수 있으며, 국내 주요서점에서 해당 도서가 판매되는 페이지로 바로 이동할 수 있다.

이외에도 자잘한 기능들이 여럿 있으나... 생략!

마무리

후... 쉽지 않았다. 하지만 어쨌든 해냈다. 그리고 Bubble.io의 가능성을 확실히 체감했다. 처음 기초를 익히기가 까다롭지만, 한 번 익혀두면 정말 많은 것들을 할 수가 있게 된다. 플러그인도 정말 많고, 플러그인을 활용할 수 있는 자유도도 엄청나기 때문에 정말 생각하는 아이디어는 대부분 구현할 수 있을 것 같다.

이 글을 쓰는 시점에서는 Bubble.io로 벌써 두 번째 프로덕트까지 만들었다. Figma 기획, ERD로 DB 기획, 버블로 MVP 개발까지 실개발 일수로 20일 정도 걸렸다. 그 이후론 관리자 페이지를 포함해서 기능을 계속 추가하고 있는 상황. 속도가 훨씬 빨라졌고 UI, UX까지도 고려해서 작업할 여유가 생겼다. 처음이 어렵지 Bubble.io도 결국엔 노코드기 때문에 개발보다 훨씬 빠르게 배우면서 결과물을 만들어낼 수가 있다.

다음엔 Bubble.io로 만든 두 번째 프로덕트를 소개해볼까 한다. 지금도 계속 업데이트를 하고 있으나, 아마 다음 글을 쓸 때 쯤이면 퇴사 직전이거나 퇴사 직후일 테니... 어느 정도 마무리 된 결과물을 살펴볼 수 있을 것 같다.

끝.

노코드 랜딩페이지, MVP 서비스 제작 및 온/오프라인 교육 문의

메일 : hamster.the.merciless@gmail.com

네이버 블로그 [링크]

클래스101 softr 교육 [클래스 101 구독 할인 링크]

keyword