04. <개발> 노코드 툴로 어디까지 가능할까?

저희 '여기있산⛰️' 팀은 아래와 같은 노코딩 개발 툴을 이용하여 개발을 진행하였습니다.

여기있산 노코드 개발스택🔨

• 프론트엔드 : webflow

• 벡엔드 : zapier

• 데이터베이스 : airtable

• 회원가입 : Memberstack

webflow는 시각적 디자인 웹 플랫폼입니다. 흔히 노코딩 툴로 소비되고 있어요. 여기있산을 구현하기 위해 webflow를 사용하면서 느낀 점은 어떤 점에서 굉장히 편하면서도, 어떤 면에서는 굉장히 불편하다는 것입니다.

편하다고 느낀 것은 서비스의 외부 모습을 구현할 때 입니다. html과 css를 알면 쉽고 빠르게 구현할 수 있고, 간단한 기능 (form 작성, 버튼 클릭)들은 손쉽게 구현할 수 있어, 랜딩 페이지를 만드는 데에는 최적화가 되어있음을 체감하였습니다.

반면 단점도 명확했습니다. 외부 서버에서 데이터를 불러와서 사용하는 것은 코드 없이는 거의 불가능했어요. 데이터를 사용하기 위해서 저희가 사용했던 Webflow에는 CMS라는 데이터 저장소가 있었는데, 해당 기능이 많은 콘텐츠의 페이지를 자동으로 구성할 수 있었지만, 응용하기에는 어려움이 있었습니다.

이번 글에서는 저희가 노코딩 툴로 구현했을 때 마주했던 어려움과 그 어려움을 어떻게 극복하고 서비스를 구현했는지에 대해 말씀드려보겠습니다.

#1. 내 등산 레벨에 맞는 코스를 보여줘

• 저희 여기있산의 초기 기획은 메인페이지에서 유저가 받은 등력 레벨과 부합하는 코스를 첫 번째 섹션으로 보여주는 것이었습니다. 이를 위해서는 유저의 레벨과 레벨에 맞는 코스를 동적으로 받아와야 했는데, Webflow의 CMS만으로는 구현할 수 없었습니다.

  그래서 저희가 생각한 것은 해당 로직을 수행할 수 있는 외부 툴을 붙이는 것이었습니다. 이때, 사용했던 툴이 Zapier와 Airtable입니다. Airtable은 스프레드시트와 유사한 데이터 관리 툴이고, Zapier는 이런 외부 툴의 연동을 자동화해주는 툴입니다.

  저희는 서비스에서 받은 유저의 레벨을 Airtable로 보내주었고, Airtable에서 Roll up이란 기능을 이용해 유저 레벨에 맞는 코스들을 매칭해서 테이블에 넣어주었습니다. 위와 같은 작업을 자동으로 하기 위해 Zapier를 사용해주었습니다.

  만약 코드로 개발했다면, 유저의 레벨에 맞는 코스를 필터링해 보여줘서 좀 더 직관적인 구현이 가능했을 것 같았으나, 노코딩 툴로 구현하다 보니 더 어려운 작업이 되어버리는 아이러니한 상황이었습니다.😓

#2. 개인화 된 페이지

• 로그인 이후 유저에게 보여줘야 하는 개인화 된 페이지는 ‘메인페이지’와 ‘마이페이지’ 가 있습니다. 메인페이지는 유저 레벨에 맞는 코스를 보여줘야 했으므로 개인화된 페이지가 필요하고, 마이페이지는 유저가 스크랩한 코스를 한 번에 보여주는 데 필요했습니다. 하지만 유저의 개인화된 페이지를 여러개 만들기에는 한계가 있었습니다.

  그래서 저희는 개인화된 한 페이지에 Tab을 내비게이션 바로 활용하여 모든 페이지가 들어갈 수 있도록 하였습니다. 즉, 위 사진처럼, User Template이란 한 페이지이지만, 탭을 이용하여 페이지 전체가 보일 수 있도록 하였습니다. (어떤 점에서 보면 개발에서 SPA(Single Page Application)와 유사한 형태입니다.)

  이렇게 하다 보니 이후 다른 부분에서 예상치 못한 상황이 발생하여, 노코딩 툴로서 개인화된 서비스를 구현하는데 한계를 느낄 수 있었습니다.😟

#3. 이게 맞나? 부족한 리소스

• 당장 기능을 구현하기 위해 여러 툴을 쓰다 보니 발생한 문제가 있습니다. 바로 재정적 리소스의 부족이었습니다. 저희가 가지고 있는 재정의 거의 반을 툴의 유료 요금제에 소비하게 되었습니다. 자동화에 사용되었던 Zapier 같은 경우에는 요금제에 따라 Task가 제한됩니다. 저희가 구독했던 요금제에서 제공되는 Task로는 저희 서비스 퍼널을 경험시키게 하려고 100명 정도의 회원을 받기도 힘든 상황이었습니다.

  이를 해결하기 위해서 저희 퍼널 단계에 있는 것 중 Zapier의 Task 사용성이 높은 것을 효율적으로 줄여야 했습니다. 저희 퍼널 단계 중 가장 많은 Task를 쓰는 구간은 회원가입을 하고 등산 레벨을 테스트하는 구간이었고 약 20개의 Task를 사용하고 있었습니다. 저희는 이 Task를 줄이기 위해 로그인 없이도 등산 테스트를 가능하게 했고, 등산 테스트하면 그 결과를 local Storage에 저장시켜주어 Zapier로 소비되는 Task가 없도록 했습니다. (이때는, Embeded Code를 사용했습니다.)

  

• 등력 테스트는 저희가 초기 기획했던 방법으로는 유저의 반응을 일으키지 못했습니다. 그래서 저희는 등력 테스트를 온보딩 식의 트랜디한 테스트 형식으로 만들기로 했습니다. 새로운 등력 테스트구현을 위해 저희는 스모어나 푸망 같은 툴을 사용하려고 했습니다. 하지만 우리에게 필요한 기능을 사용하려면 유료 요금제를 사용해야 했습니다. 저희 유료 요금제를 사용하기 보다는 자체 구현을 하기로 결정을 내렸습니다.

  사실 위에서 Webflow의 개발의 한계에 주로 말씀드렸지만, 등력 테스트를 만드는데 Webflow는 굉장히 적합하였습니다. 등력 테스트의 주요 기능은 온보딩 식의 에니메이션 효과인데 Webflow의 클릭 애니메이션은 굉장히 쉽게 잘 구현되어 있어, 약 하루 정도 리소스를 들여 등력 테스트를 만들 수 있었습니다.😝

이것 말고도 여러 작고 다양한 이슈들이 있었지만, 크게 위 내용으로 정리가 될 것 같습니다.

만약 노코딩 툴로 서비스를 구현하려 한다면 서비스 개발 전 내가 구현하려는 것이 어느 정도의 기능이 필요로 하는지에 대해 파악하고 적합한 툴과 구현 방법을 조사한 뒤 구현하는 것을 추천해 드립니다.🔍

다음 회차는 저희가 여기있산을 어떻게 알리려고 했는지에 대한 이야기로 찾아오도록 할게요:)📢📊