brunch

라이킷 18 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 노코드 햄스터 Oct 10. 2023

스타트업_노코드로 웹 서비스 만들기

Softr, Airtable, Zapier 적응기

지난 편까지 요약

타지에서 프로젝트를 하다가 회사에 왔더니 신사업을 한다고 분주했음

'전자책 출판사를 하고 싶다'는 생각만 있었지 구체적인 기획은 없었던 상황

다짜고짜 외주 개발 업체에 견적을 의뢰해봤더니 3,000 ~ 7,000만원 정도 견적을 받았다고 함
(제대로 된 기획, 원하는 기능조차도 정하지 않고 의뢰를 맡겼으니 그야말로 부르는 대로 값이었던 것)

시장조사를 하고 경쟁사를 벤치마크 하면서 필요한 기능을 알아감

'노코드'라는 개념을 알게 되고, 외주 개발 대신 직접 노코드를 배워서 웹 서비스를 만들기로 함

어쨌든 노코드로 개발을 해보겠다고 선언했으니, 우선 '노코드'가 무엇인지 찾기 시작했다. 그리고 내게 적합한 노코드가 무엇인지 고민을 시작했다. 원하는 노코드 도구를 선택한 후 간단한 웹사이트를 만들고 본격적으로 신사업 서비스 사이트를 만들었다. 그 일련의 과정과 깨달은 바를 아래에 정리해본다.

노코드란?

가볍게 정의하자면

노코드란, 코드 없이 개발이나 자동화를 할 수 있도록 도와주는 도구

그리고 코드 없이 개발이나 자동화 업무를 할 수 있다는 것의 장점은 다음과 같다.

첫 번째, 코드 개발에 비해 난이도가 크게 내려감

두 번째, 압도적으로 빠른 개발이 가능함

세 번째, 비싼 개발자 없이도 기획자 스스로 개발을 할 수 있음

즉, 노코드의 강점을 요약하면 쉽다 / 빠르다 / 싸다

'개발'이라고 하면 특정영역을 한정하기 어려울 만큼 굉장히 넓은 범위를 포함하고 있다. 그 안에서 전문 분야나 업무 범위가 천차만별로 나눠지는 것이다. 마찬가지로 노코드 역시 분야가 굉장히 넓고, 각 분야마다 노코드 서비스가 정말 많다. 이 글에서 다루는 노코드 서비스는 웹사이트 개발로 한정한다. (사실 이것도 터무니 없이 넓은 범위다)

다양한 노코드의 분야, 다양한 서비스(계속해서 새로운 서비스가 등장하고 있다!)

고려했던 노코드 서비스

Sixshop, Imweb - 국내 노코드 서비스

국내에 유명한 노코드 서비스는 아임웹, 식스샵이 있다. 이 둘은 쇼핑몰을 만드는 데에 최적화된 서비스다. 우리가 만드려고 했던 서비스는 쇼핑몰과는 다소 거리가 있었기 때문에 이 둘을 선택하지 않았다.

장점 : 정말 빠르고 쉽게 예쁜(?) 쇼핑몰을 만들 수 있다. 국내 서비스라서 결제 서비스를 연결하는 것도 비교적 쉽다고 한다.

단점 : 쇼핑몰이 아닌 다른 웹서비스를 만들기엔 제공하는 기능이 제한적이다.

Glide - 투박하지만 쉽고 다재다능한 해외 노코드 서비스

처음 내가 글라이드를 배제했던 이유는 '디자인 한계' 때문이었다. 난 디자인 감각은 없지만 디자인이 중요한 것은 알고 있었다(?). 그러나 나중에 글라이드를 배우고 활용했을 때 나는 적잖이 놀랐다. 정~말 배우기 쉽다. UI에는 확실히 제약이 있지만 사용자가 데이터와 상호작용 하는 CRUD(Create, Read, Update, Delete)라든지, 화면이 넘어갈 때마다 데이터를 주고받는 로직이라든지... 이런 것들을 정~말 쉽게 구현할 수 있다. 기회가 되면 Glide로 정말 빠르게 만들고, 유용하게 썼던 웹앱 목록도 정리해보도록 하겠다. (잠깐 테스트하고 서비스 종료된 것들이 많아서 잘 정리가 될 지는 모르겠다)

장점 : 배우기도 쉽고, 기능 구현이 압도적으로 빠르다.

단점 : UI 한계가 분명하다. UX 최적화도 조금 까다롭다.

Webflow - 디자인 활용도가 높은 해외 노코드 서비스

웹플로우는 사용자가 원하는 대로 UI를 구성할 수 있는 강력한 노코드 서비스다. 적당한 수준의 난이도로 자유로운 디자인과 다양한 기능을 구현할 수 있다. 유력 후보였지만 안타깝게 탈락했다. 이유는 당시 Webflow 한글 교육자료의 부재... (지금은 대부분 영어 강의를 듣지만 당시엔 자신감이 좀 부족했달까...?)

장점 : 적당한 난이도로 자유로운 디자인, 다양한 기능 구현 가능

단점 : 그 당시에 한글 교육자료가 없었음. 지금('23년도 10월)은 꽤 있다.

Bubble - 높은 자유도, 높은 난이도. 노코드 끝판왕.

버블은 '노코드 끝판왕'이라는 별명이 가장 적절하다. 이 글을 쓰는 시점('23년도 10월)에 한참 버블을 배우면서 개발을 하고 있는데, 확실히 지금까지 다뤘던 노코드 툴 중 가장 어렵다. 코드는 필요없지만 개발 지식을 꽤나 많이 요구하기 때문에 같은 기능을 개발하더라도 위에 정리한 다른 도구보다 훨씬 어렵고 오래 걸린다. 공부도 꽤 필요하다. 하지만 정말 다양한 기능을 구현할 수 있다. UI, UX 구현은 정말 자유롭다. 세분화해서 데이터를 조작하고 기능을 구현할 수 있다. 실제 개발한 것과 구별할 수 없을 정도로 높은 수준의 웹사이트, 앱을 만들 수 있다. 어렵고 오래 걸린다고 하나 그것은 다른 노코드와 비교했을 때다. 실제 코드로 개발하는 것보다 여전히 압도적으로 빠른 것이다.

장점 : 자유로운 UI/UX, 상상하는 거의 모든 기능 구현 가능

단점 : 개발 지식이 많이 필요함(실제로 개발자들이 가장 선호하는 노코드 도구), 배우고 익숙해지는 데에 시간이 걸림

Softr + Airtable - 가성비 최고 노코드 개발 세트

내가 선택했던 노코드 서비스는 Softr과 Airtable이었다. 적절한 난이도로 아주 다양한 기능을 구현할 수 있었다.

눈에 보이는 UI/UX를 구성하는 웹빌더인 Softr은 Webflow와 비교하면 디자인 자유도가 부족했다. 하지만 Softr에선 '블록'단위로 정말 쉽고 빠르게 화면을 구성할 수 있다는 장점이 있다. 제공하는 블록이 상당히 괜찮았고 디자인 작업을 하기에도 부족함이 없겠다고 판단했다.

Airtable은 웹사이트의 눈에 보이지 않는 부분을 만들어주는 데이터베이스 노코드 서비스다. Airtable을 활용하면 관계형 데이터베이스까지도 쉽게 만들 수 있다. (관계형 데이터베이스가 뭔지 몰라도 된다. 어쨌든 데이터베이스 구축도 노코드로 굉장히 빠르고 쉽게 할 수 있다는 것만 기억하자!) 동적인 값을 보여주려면 데이터베이스 연동이 필수인데, Airtable은 Softr과 짝궁으로 불릴 수 있을 만큼 연동이 잘 된다.

결국 Softr로 화면을 구축하고 Airtable로 데이터베이스를 만든다, 로 결정했다. 사실 노코드 서비스 자체를 비교하는 것 외로 정말 중요한 지표가 하나 있었으니... 한글 교육자료의 유무였다. 다행히 Softr, Airtable을 교육하는 한글 자료가 있었다. 지금 보기엔 현재 서비스 버전과 너무 달라서 참고하기엔 아쉬운 점이 있다. (최근에 내가 직접 촬영한 Softr, Airtable 완전 기초 강의 영상이 있으니 참고 바람)

장점 : Softr에선 블록 단위로 빠른 UI 디자인 및 기능 구현이 가능 / Airtable에선 너무나 쉽게 데이터베이스를 만들 수 있음. 그리고 이 둘의 케미가 찰떡임

단점 : 최근 softr 유료 요금제가 좀 부담스러워졌다는 점... (무료 버전도 충분히 쓸만 하다).

(추가로...) Zapier - 가장 쉽게 배울 수 있는 자동화 노코드 서비스

Softr과 Airtable만 활용해도 충분히 괜찮은 웹사이트를 만들 수 있었다. 그러나 웹사이트 '운영'을 하기 위해서는 뭔가 아쉬웠다. 예컨대, 고객이 본인의 Email로 회원가입을 했는데, 그 Email이 정말 실존하는 Email인지, 그리고 그 사람의 Email인지 확인을 하는 절차가 필요했다. 이걸 사람이 직접 하려면 고객이 회원가입을 할 때마다 메일 보내고 확인하고 체크하는 작업을 해줘야만 했다. 아이고 머리야.... 우리에겐 자동화가 필요했다! 그래서 노코드 자동화 서비스인 Zapier를 활용했다. (다른 자동화 서비스와 비교하지 않을 거라 장단점은 적지 않겠다)

기획이 곧 개발! 빠른 개발, 빠른 보완, 빠른 런칭!

지금 이 글을 쓰는 시점에는 Figma로 UI/UX를 기획하고, ERDcloud로 DB를 기획하고 그 다음에 버블로 개발을 하는 프로세스를 밟고 있다. 하지만 처음 Softr을 배울 땐 IT 지식이 완전 없는 상태였기 때문에... '기획'이라는 용어도 경영 관점에서만 알았었지 IT 서비스 관점에서 '기획'이라는 개념은 내게 없었다. 그래서 한쪽엔 동영상 강의를 켜두고, 다른 한 쪽에서 기획과 동시에 개발을 시작했다. 첫 2주 동안 영상에서 배운 기능을 적절히 활용해서 웹사이트 하나를 만들어서 런칭했다. 기업 교육 플랫폼 웹사이트 러닝앤그로스다. 회사의 기존 사업 중 하나가 기업교육이었기 때문에 연습겸 만들었다. 나름 Airtable로 DB도 만들고, Zapier로 자동화도 구현해서 자신감이 좀 붙었다.

'23년도 10월 기준('22년도 6월에 만들고 기능은 바뀐 게 거의 없다. 디자인, 콘텐츠만 업데이트 함)

두 번째로 만든 프로덕트가 지금까지 운영 중인 전자책 출판유통 플랫폼 작가와다. 이걸 만드는 데에는 2달 반이 걸렸다. 고백하자면 만드는 동안 기능을 엄청나게 갈아엎었다. 기획이고 뭐고 없었다. 일단 비슷한 서비스를 베끼는 걸로 시작했다가 '이건 아닌 것 같아'하고 보완했다가 '이렇게 해볼까?' '아니야 원래 방법이 더 좋았어' 등... 엄청난 시행착오를 거쳤다. ~~(처음에 가졌던 자신감은 점점 오기로 변하고...)~~

변명을 조금 해볼까... 이 당시엔 회의를 하면 내가 주도하는 경우가 많았다. 아무래도 내가 개발을 맡고 있었고, 일부 작업을 다른 직원에게 교육하고 협업을 요청하는 입장이었으니까. 회의 때마다 '이렇게 저렇게 하겠습니다!'라고 모두의 동의를 받았다. 그리고 막상 그렇게 해오면 '음... 이렇게 해보면 어떨까?'가 되는 경우가 많았다. 별 수 없었다. 팀내에 IT 업무를 경험한 사람도 없고, IT 서비스에 관심이 있는 사람도 없었으니 효율적인 피드백을 기대할 수는 없었다.

그래도 우리의 '감(feeling)'을 믿고 '심플하게 만들자!'는 슬로건을 유념하며 어찌저찌 서비스를 완성했다. Softr, Airtable, Zapier 기본 기능에 각종 꼼수를 더해서 완성했다! 우앗!

후... 여전히 부족해보이지만 그래도 이것 하나 만큼은 자신할 수 있다.

단 한 페이지에서 출판-유통을 끝내는 서비스는 오직 작가와 뿐이다!

뭔가 시행착오를 엄청나게 겪은 것처럼 썼다. 사실이긴 하지만, 정석 코드 개발에 비하면 압도적으로 빠르고 효율적인 것이 분명했다. 만약 정석으로 코드 개발을 했다면 어땠을까? 사실 직접 경험해보지 못해서 잘 모르겠다. 그러나 확실한 것은 초기에도 20~30페이지에 육박했던 웹사이트를 아침에 회의하고 고치고, 오후에 회의하고 고치는 속도를... 정석 개발로는 따라가기 어려울 것이다. ~~(개발자가 많으면 모르겠지만)~~

노코드로 하면 압도적으로 빠르게 기능을 구현할 수 있다. 고치는 것도 쉽다. 팀원에게 협업을 부탁하기에도 무리가 없다. 왜? 쉬우니까! IT 기획을 할 줄 몰라도 괜찮았다. 왜? 시행착오를 아주 빠른 속도로 여러 번 반복하면서 우리들 나름대로 감을 키워가기 시작했기 때문이다. 어느 순간부터는 우리들끼리도 유용한 피드백을 주고받을 수 있게 되었고, 결국 모든 직원이 Softr, Airtable, Zapier 기초를 다룰 수 있게 되었다. 개발자 없는 IT 기업, 개발자 없는 개발팀이 만들어진 것.

그리고 런칭 후 1년이 지나도록 매출은 꾸준히 우상향을 그리고 있다. 상당 부분을 자동화했기 때문에 운영에도 큰 무리가 없다. 런칭 때보다 인원이 줄었는데도 서비스 운영에 큰 무리가 없는 것은, 보이지 않는 곳에 있는 각종 자동화의 힘이랄까... (Zapier로도 자동화를 했지만, 복잡한 연산은 Excel Power Query를 써서 시간을 크게 줄이기도 했다. 이것도 기회가 되면 다뤄보겠다)

'23년도 10월 기준('22년도 9월 1일에 런칭하고 자잘한 업데이트가 있었지만 큰 틀은 그대로)

요약

노코드로 개발하면 쉽다, 빠르다, 싸다

IT 지식 없어도 빠른 주기로 시행착오를 반복하면 당신도 돈을 버는 웹사이트를 만들 수 있다!

Softr, Airtable, Zapier 완전 기초 교육!

허허허허...! 어쩌다 보니 위 세 가지 툴에 조금은 능통하게 된 것 같습니다. 노코드 주제로 소소하게 이곳저곳에서 활동하다 보니 운이 좋게도 클래스101 측에서 제안을 주셨습니다. 그래서 이번엔 Softr, Airtable, Zapier 완전 기초를 다루는 교육을 만들게 됐습니다. 본 링크를 통해 할인 코드를 받아서 클래스101 구독하세요! 제 강의 뿐만 아니라 클래스101의 모든 강의도 들을 수 있답니다!