Non IT도 풀스택 개발자로 만들어 주는 '버블'
가장 강력한 노코드 Tool 버블(Bubble.io)
Non IT 출신의 일반인이 일을 하다 아이디어가 있어 이를 실행하려다 보면, 항상 벽에 부딪히는 분야가 2가지 있다. 하나는 디자인(Design)이고, 다른 하나는 프로그래밍(Programming)이다.
그래서 내부 직원 대상이든 외부 고객 대상이든 새로운 서비스를 내어 놓으려고 하면, 디자인과 프로그래밍 분야는 외주의 힘을 빌리거나, (대기업의 경우) 내부의 다른 전문가의 힘을 빌려야만 했다.
Non IT의 첫 번째 허들 : 디자인(Design)
웹페이지 또는 홍보물 등의 디자인을 의뢰하려면, 머릿속에 있는 아이디어를 꺼내어 컴퓨터 안에 옮겨야 했고, 내 머릿속을 들여다볼 수 없는 디자이너를 위해 추상적인 내용들을 구체적인 표현으로 잘 정리해서 준비해야 했다. 그렇게 고이고이 작성한 기획안을 디자이너에게 제공하고, 디자인 시안이 완료되기까지 2~3일을 기다려야 했다. 그리고 받게 된 디자인 시안이 마음에 쏙 들면 다행이지만, 마음에 들지 않는 경우 이런 과정을 다시 반복해야 했다. (너무 소모적인 일이 아닐 수 없다...)
다행히 수년 전부터 이런 디자인 공수를 줄여줄 수 있는 Canva, 미리캔버스, 망고보드 등 다양한 플랫폼들이 생겨났고, 이들의 등장으로 최소 3일 내외가 걸렸던 일들을 단 5분 안에 끝낼 수 있는 힘을 얻을 수 있었다.
특히 이런 디자인 툴들은 무료로도 충분히 이용 가능하다는 장점이 있는데, 나 같은 경우 Canva를 유료로 이용하고 있고, 200% 이상 활용하고 있는 중이라 만족도가 매우 높다.
Canva 홈페이지Canva는 단순한 이미지 디자인뿐 아니라, 숏폼 영상을 Bulk로 대량 생산하는 기능도 제공하며, 이외에도 활용 분야가 상당히 넓다는 장점이 있다.
단, 미리캔버스나 망고보드에 비해 한국어에 최적화되어 있지 않아, 한국어 텍스트 디자인 작업을 메인으로 하는 경우 적합하지 않을 수 있다는 단점이 있다.
Non IT의 큰 허들 중 하나인 '디자인' 분야는 이런 강력한 도구의 등장으로 비교적 쉽게 해결할 수 있는 길이 열렸다고 생각한다.
이것으로 Non IT의 발목을 잡는 두 가지 중 하나는 해결되었다고 보아도 무방하다. 문제는 그다음이다...
Non IT의 두 번째 허들 : 프로그래밍(Programming)
Non IT의 두 번째 허들은 더욱 높다.
예를 들어 내부 직원들 대상으로 사진 공모전을 실시해야 하는 상황을 상상해 보자. 홍보 이미지를 만드는 것까지는 디자인 툴을 활용해서 만들 수 있을 것이다. 그런데 이를 홍보하고 신청을 받을 웹페이지를 만들어야 할 텐데, 여러분은 어떻게 이를 구현할 수 있을까.
물론 구글폼이나 네이버폼과 같은 서비스를 활용해 받을 수도 있겠지만, 우리 회사만의 아이덴티티를 살려서 만들고 싶을 수도 있고, 구글폼이나 네이버폼으로는 원하는 모습을 구현하지 못할 수도 있다. (예를 들면 내가 원하는 홍보 이미지의 게시, 제출받고자 하는 이미지 파일 형태 지정, 홍보 영상 스트리밍 등을 구현해야 할 수 있다.)
이런 경우엔 개발(프로그래밍)이 필요하다. 사용자들이 접속하여 공모전에 신청서를 제출할 수 있는 프런트엔드 작업이 필요하고, 신청 내용을 데이터로 쌓을 수 있는 백엔드 작업이 필요하다.
그런데 이런 작업을 나 스스로 할 수 없다면, 이런 단순한 작업 때문에 외주를 고민해야 하거나, 회사 내부에 있는 개발자를 찾아 부탁해야 한다. 비용, 인력, 업무 로드 등 다양한 장애물을 모두 이겨내고 개발에 착수할 수 있었다 하더라도, 개발에 들어가기 전에 작성할 기획서와 요건정의서 작업에 들어가는 시간과 개발자가 개발하는 시간, 그리고 검수와 수정 보완에 필요한 시간 등을 합치면, 상당한 Time loss가 발생한다.
회사 업무 외에도 나의 아이디어를 세상에 선보이고 싶을 때, Non IT 일반인은 혼자의 힘으로 무언가를 만들어 볼 수 없다는 것이 가장 치명적인 아킬레스 건이 된다.
예를 들어 여행 커뮤니티 서비스에 대한 아이디어가 떠올라 이를 만들어 보고 싶을 때, 프로그래밍 역량을 가지고 있다면, 아래와 같이 프로토타입을 간단히 만들어 세상에 내어놓아 보고, 사람들의 반응을 확인해 볼 수 있다. 반응이 좋으면 제대로 시작하면 되고, 별로 반응이 없다면 그대로 묻어버리면 그만이다.
여행 커뮤니티 트립소다 화면 예시(출처 : 노코더스)그런데 이런 프로그램을 하나 만들려면 프런트엔드와 백엔드를 모두 다룰 수 있어야 하고, 전문 개발자 수준의 역량을 갖추기 위해서는 상당한 시간과 노력을 투자해야 한다.
나 또한 지극히 평범한 Non IT 일반인으로서, 이런 한계를 극복하기 위해 시간이 날 때마다 틈틈이 코딩 공부를 해왔다. 유명 유튜버 '노마드코더(니콜라스)'가 운영하는 강의 플랫폼에서 다양한 강의를 수강하고 코딩 챌린지에 참여하며, 프로그래밍 역량을 키워나가기 위해 노력을 기울였다.
(다른 코딩 강의들도 수강해 보았지만, 노마드코더의 강의가 가장 좋았다. 강의 수료증은 강의만 100% 완강하면 주는 증서이지만, 챌린지 뱃지는 노마드코더가 정한 일정기간 동안 매일 퀴즈와 코딩 챌린지를 통과해야 하고, 마지막으로 직접 코딩한 결과물을 제출하여 그 퀄리티를 보고 노마드코더가 승인해 줘야 얻을 수 있는데, 하나라도 더 모으려고 악착같이 챌린지에 임했었다. 노마드코더 플랫폼에서의 만렙은 10렙인데, 8렙까지는 달성했다.)
<코딩 공부를 하면서 직접 만들어 보았던 것들...>
카카오톡 클론 코딩(HTML, CSS, Javascript)
유튜브 클론코딩(Node.js, Pug, MongoDB)
나만의 홈페이지(Javascript)
To Do App(ReactJS, React Native)
줌 클론 코딩(SocketIO)
워드프레스 블로그 자동화 프로그램(Python)
OpenAI API 및 RAG을 활용환 맞춤형 챗봇(Python, Langchain, Streamlit)
Non IT 입장에서 코딩의 단점
프로그래밍을 메인 업무로 수행하고 있지 않은 Non IT 일반인에게 있어 코딩이라는 도구는 치명적인 단점을 지니고 있다. 바로 '연속성'의 결여다.
개발 업무를 수행하는 사람은, 코딩이 곧 본인의 업무고 이를 밖에서 배우거나 회사에서 하는 일이 모두 연결되어 있어, 계속해서 자신의 역량을 높여가며 코딩 역량의 깊이를 날로 더해갈 수 있다.
하지만 Non IT 입장에선, 업무 외 시간에 코딩을 배우기 위해 많은 시간을 쏟아야 하고, 정작 하루의 대부분의 시간은 코딩과 전혀 무관한 일을 하며 시간을 보내야 하기에, 학습과 일의 연속성을 가져가기 어려운 환경에 있다.
한 번 공부해서 오랫동안 기억할 수 있는 내용이라면, 가끔씩 꺼내어 쓰면 될 텐데, 평소 잘 사용하지 않다가 오랜만에 VSCode(비주얼 스튜디오 코드 : 코딩하는 도구)를 열면 내가 직접 작성했던 코드들도 상당히 낯설게 느껴진다.
그리고 종종 발생하는 다양한 에러들이 생기는데, 하나의 에러를 해결하기 위해 며칠(몇 달이 될 수도...)을 보내야 하기도 하고, 에러 하나를 해결하지 못해 프로젝트 하나를 통째로 포기해야 하는 경우도 생긴다. 물론, 완성시켜 놓은 서비스라도, 중간에 발생하는 에러를 나 혼자의 힘으로 커버해야 하는데, 내 본연의 다른 업무를 하며 이런 것들을 해나가는 것은 불가능에 가깝고, 감당해야 하는 리스크가 너무 크다.
글쓴이가 코딩한 'OpenAI API 및 RAG을 활용한 챗봇 만들기' 코드 일부노코드(Nocode)로 허들 넘어서기
코딩에 대한 이런 단점을 극복할 수 있는 도구가 바로 노코드(Nocode) 툴이다. 노코드란 코딩을 하지 않고도, 코딩을 통해 얻을 수 있는 결과물과 유사한 수준의 결과물을 얻을 수 있게 해주는 도구를 말한다.
광범위하게 보면, Make, Zapier와 같은 자동화 툴까지도 노코드라 볼 수 있지만, '개발(프로그래밍)'을 대체할 수 있는 도구로서의 노코드에 국한하여 이야기하자면, Bubble, Webflow, Softr, Glide와 같은 것들을 많은 유저가 사용하는 툴로 소개할 수 있을 것 같다.
상기 네 가지의 노코드 툴들은 각각 장단점을 가지고 있다. 초심자 입장에서 가장 쉽게 익힐 수 있는 툴은 'Glide' 다. Drag & Drop으로 대부분 해결이 가능하고 진입장벽이 낮다 보니 많은 Non IT 분들이 처음으로 접하는 노코드 툴이기도 하다.
다만 Glide는 치명적인 단점이 두 가지 있는데, 바로 자유도가 너무 낮다는 점(내가 원하는 모양과 기능을 마음대로 넣는 것이 불가능)과 SEO(Searching Engine Optimization, 검색엔진 최적화)에 취약하다는 점이다.
아무리 다루기 쉽다 해도, 내가 원하는 모습의 웹페이지를 만드는데 제약이 있다 보니, 많은 사람들이 처음에 Glide로 시작했다가 다른 노코드 툴로 넘어가는 경우가 많다. 그래서 노코드 툴을 찾는 분들이 있다면, 처음에 조금 어렵게 느껴져도 버블(bubble.io)을 배워보시길 추천드리고 싶다.
버블은 SEO 측면에서도 장점이 있지만, 무엇보다 거의 직접 코딩하는 수준에 근접할 정도로 높은 자유도를 가지고 있다는 점이 가장 강력한 매력 포인트다.
Non IT도 풀스택 개발자로 만들어주는 노코드 툴 '버블(bubble)'
버블은 엄청난 장점을 가진 노코드 툴이다.
아래는 내가 버블을 배우고 나서, 연습 삼아 혼자 만들어 본 웹사이트인데, 이와 같은 웹사이트를 노코드 툴 없이 코딩으로 구현하려고 하면, 프런트엔드(보이는 화면) 작업을 위한 코딩을 해야 하고, 각 충전소 데이터와 유저 데이터를 가지고 있는 백엔드(서버)도 코딩을 통해 구축해야 한다. (생각만 해도 머리 아프다...)
그런데 버블을 이용하면 아래와 같은 웹사이트를 만드는데, 한 시간이 채 걸리지 않는다. 노련한 사용자라면 20~30분에라도 만들 수 있을 것 같다.
코딩을 전혀 몰라도 프런트엔드부터 백엔드까지 이 버블이라는 툴 하나로 한 번에 해결할 수 있는 것이다.
재미 삼아 버블(bubble)로 만들어 본 '테슬라 슈퍼차저 정보' 제공 웹페이지작업 화면은 아래와 같다. 버블은 다양한 기본 템플릿들을 제공하는데, 아래의 화면 역시 버블에서 기본적으로 제공하는 템플릿을 활용한 것을 보여드리기 위해 가져와 보았다.
사용자가 내 웹사이트에 접속해서 로그인하고, 로그아웃 하는 프로세스 하나를 구축하더라도, 코딩으로 이것을 하려면 꽤나 타이핑을 많이 해야 하는데, 버블에서는 버튼 몇 번 클릭하면 작업이 끝나버린다. 조금만 공부하면 API를 활용해 소셜로그인(구글로그인, 카카오로그인 등) 역시 어렵지 않게 구현할 수 있다.
버블 내 작업 화면버블을 활용한 개발의 속도가 이처럼 빠르다 보니, 아예 개발 외주를 이러한 노코드 툴로 빌드하는 업체에 맡기는 경우도 종종 생긴다. 코딩으로 개발할 경우 2~3개월 걸릴 수 있는 작업을 버블로는 1~2주일 만에 빌드할 수 있기 때문인데, 아직 대중적으로 유명하지 않아서 그렇지, 속도가 생명이 되어가는 시기에 이런 스피디한 노코드 툴을 이용한 개발 수요는 계속해서 증가해 나가지 않을까 한다.
물론 위 이미지와 같은 사이트를 구축하기까지는 상당한 학습이 필요하다. 하지만, 간단한 웹사이트는 정말 손쉽게 만들어 볼 수 있고, 조금만 배우면 꽤 그럴듯한 결과물들을 만들어 볼 수 있다.
다만, 아쉬운 점은 아직 버블이 국내에서 인지도가 낮아 아는 사람이 얼마 없다 보니, 제대로 배워볼 수 있는 방법이 없다는 것이었다. 유튜브에 떠돌아다니는 몇몇 강의 영상이 전부였다.
국내 최초 버블 입문서
그런 와중에 국내 최초로 버블 입문서가 출간된다는 소식이 있어, 반가운 마음에 사전 예약을 신청해 놓았는데, 마침 신청 사연이 선정되어 무료로 국내 최초 버블 입문서를 받아보는 기회를 얻었다.
이 책을 쓴 저자 이명성 님은 과거에 '노션박스(Notion Box)'라는 노션 커뮤니티를 만들어 노션 붐을 일으키는데 일조했던 분이다. 노션이 꽤나 대중화되는 모습을 본 이후에는, 앞서 소개드린 '버블'에 빠져서 버블 커뮤니티인 '버블 박스(Bubble Box)'를 만들었고, 이 커뮤니티 역시 활성화되면서, 아예 노코더스(Nocoders)라는 브랜드를 새롭게 론칭하기도 했다.
저자 이명성 님께 선물 받은 국내 최초 버블 입문서 '노코드 풀스택 개발 with 버블'책 분량은 약 550페이지 전후로 상당히 두꺼운데, 대부분 초심자가 하나부터 차근차근 따라 할 수 있도록 풀어서 설명하고 있어 책을 보며 하나씩 익혀가기 좋게 되어 있었고, 어느 정도 공부가 되어 있는 사람이라면, 목차를 보며 본인이 취약한 부분만 찾아가며 공부하기에도 좋게 구성되어 있었다.
(무료로 선물 받은 만큼 마케팅에 도움을 드리기 위해 책 구매 링크를 아래 남겨드리고자 한다. 버블을 처음 공부해보고 싶은 분들이라면 구경해 보시길 추천드린다.)
https://product.kyobobook.co.kr/detail/S000214875929
노코드 툴은 당신의 아이디어에 '프런트엔드'와
'백엔드'라는 양 날개를 달아줄 것이다.
[버블 관련 도움을 얻을 수 있는 사이트들]
버블 홈페이지 : https://bubble.io/
모두의 노코드(커뮤니티, 질의 응답) : https://everynocode.org/
노코더스(블로그, 외주 문의) : https://nocoders.kr/
