일주일만에 노코드로 MVP 만들기

MVP를 만든 계기

예상보다 빠르게 MVP를 만들게 되었는데, 먼저 6월 후반부에 진행한 1차 가설검증을 요약하자면 이렇다.

• 가설 :
  영상 커뮤니티 이용자들은 "영상창작인에 특화된, 새로운 네트워킹 플랫폼"의 소개페이지를 클릭하고, 정보를 제공할 것이다.

• 검증 방법 :
  MOVIN의 핵심 기능을 소개하는 랜딩페이지를 구성하고, CTA를 삽입하여 얼마나 많은 유저들이 email 정보를 제공하는지 조사하고, 수요를 확인하는 방법

• 결과 :
  3.3%의 전환율,
  링크를 클릭한 사람 약 300명 중 10명이 정보를 제공했다.

• 방향 설정 :
  나쁘지 않은 숫자이지만, 그럼에도 불구하고 확실한 수요를 확인하기에는 부족한 숫자라고 판단하였다.
  실제로 작동하는 MVP를 일단 만든 후, 가입율을 확인하는 것이 훨씬 확실한 지표가 될 것이다.

*참고한 디스콰이엇 현솔님의 아티클
https://www.disquiet.tech/post/validation-in-two-weeks

core loop

MVP를 만들기에 앞서, 고려한 아이디어와, 무빈의 core loop를 정의했다.

고려한 아이디어

1차 가설검증에서 CTA로 유저의 정보 뿐 아니라, 무빈의 이용목적도 질문사항에 넣었었다.
목적을 크게 구인, 구직, 정보 교류 세 가지로 구분했는데, 답변 중 구직이 가장 많았지만, 정보교류도 못지 않게 많았던 점이 의외였다.
구직을 가장 먼저 해결해주고 싶었지만, 이부분은 일단 사람이 모여야 가능한 일이라고 생각했기에, 정보교류라는 니즈에 집중해보자는 의견을 냈다.

Core Loop :

1) 회원가입/로그인
2) 개인 프로필 생성
3) 아티클 업로드

아주 핵심 기능만 간추리면 이렇게 정리되었다.

노코드 툴 탐색

노코드(No Code) :
개발자 없이 소프트웨어 플랫폼을 만들 수 있는 방식

개발을 하지 않고도 머릿속의 플랫폼의 모습을 바로 구현할 수 있다는 점이 큰 장점으로 다가왔다.
비록 노코드를 난생 처음 접해보는 상황이었고, 심지어 일주일이라는 비교적 짧은 시간이 나에게 주어졌지만,, 일단 "할 수 있을 것 같다"라는 막연한 생각을 갖고 도전했다.

또, 실제 개발보다 훨씬 적은 시간을 투입해서 빠르게 가설을 검증해볼 수 있다는 점에서 기획자 혹은 PM으로서 굉장히 매력적인 스킬셋이라고 생각했던 것도 있었다.

먼저 다양한 웹 빌더를 고려했는데,
버블, 웹플로우, 워드프레스, 아임웹, softr, carrd, Notion 등으로 종류가 아주 많았다.

그 중 우리가 구현해야 하는 기능의 복잡성을 고려한다면, 버블과 웹플로우 중에서 골라야 할 것 같았다.

둘의 특징을 비교한 내용은 다음과 같다.

[webflow]

1. 처음에 배우기가 어렵고 진입장벽이 높음
2. 멤버스택, airtable, zapier 같은 여러 툴을 같이 이용해야 함 (결제를 세번 해야 한다는 뜻)
3. 차후에 코드를 export 가능 → 개발자가 코드 기반으로 개발할 수 있음

[bubble]

1. 자유도가 높다 → 각 컴포넌트 위치를 직접 조율 가능함
2. 정보가 많다 → 사용자가 많고, 관련 커뮤니티도 다른 툴에 비해 활발한 편
3. 차후에 코드 export가 불가능함 → 개발자가 개발하는 경우 새로 시작해야 함

=> 버블이 장점이 더 많은 듯 보였지만, 코드를 export할 수 있다는 장점을 특히 높이 사서, 웹플로우로 선택했다.

Build

웹빌더를 웹플로우로 정했기 때문에, 여러 3rd party tool을 고려해야 했다.
긴 고민 없이 가장 잘 알려져있고 정보도 많은 툴들을 선정하여,
어떤 기능을 구현하는데 적합한 툴인지 탐색했다. 그 결과 :

1) 회원가입/로그인 -> memberstack

2) 개인 프로필 생성 -> webflow

3) 아티클 업로드 -> webflow + zapier

+4) 동료 리스트 업데이트 -> airtable

이렇게 구현하기로 결정했다.

1. Memberstack

• 소개
  멤버스택은 단순히 html 코드를 복사, 삽입함으로서 로그인과 회원가입 기능을 바로 구현할 수 있는 툴이다.

• 방법
  1) 그냥 로그인/회원가입 코드를 복붙해서 멤버스택 자체 폼을 넣을 수 있다.
  2) 웹플로우 내에서 로그인/회원가입 폼을 직접 디자인해서 attribute를 넣는 형식으로 구현할 수 있다.
  *처음에는 1번으로 했지만, 로그인/회원가입 화면도 서비스와 어울리는 모달로 디자인하는게 유저 입장에서 완성도 있게 느껴질 것 같았다.

• 특징
  -개인적으로 가장 작동이 부드럽다는 느낌을 받았다.
  -처음 접하는 유저가 빠르게 습득할 수 있도록 설명이 굉장히 친절했다.

• 기능(이미지)
  

2. webflow

웹플로우는 기능이 굉장히 많아서 웹플로우만 따로 다룰 예정

3. Zapier

• 소개
  -재피어는 노코드 툴 사이를 연결해주는 자동화 툴이다.

• 방법
  -트리거 -> 액션, 두가지를 각각 정의하는 형식이다.
  -멤버스택이나 다른 폼에 입력된 정보를 웹플로우에 자동 업로드하는 용도로 사용했다.

• 특징
  -기능이 간단명료해서 이해하기가 쉽다
  -과정이 명확해서 하라는 대로만 하면 끝이다(오류나면 안되지만..)

• 기능(이미지)
  

4. Airtable

• 소개
  -에어테이블은 기본적으로 스프레드시트(엑셀) 특성을 가진 데이터베이스 툴이다.

• 특징
  -모바일 어플로도 있고, 굉장히 활용도 높은 툴이었다.
  -사용해 본 3rd party tool 중 현재로는 내 마음 속 1위를 달리는걸로..!

• 활용
  -멤버스택에 들어오는 유저 정보는 모든 정보가 하나의 테이블에 가득 차있어 가독성이 떨어진다.
  -에어테이블에서는 그냥 마음 가는 만큼 테이블을 생성할 수 있고, 백엔드에서의 관계형 데이터베이스까지도 일부 구현이 가능하다.
  ++에어테이블 자체에서 재피어와 비슷한 역할을 하는 automation이라는 기능도 있어, 웹플로우 폼 입력 알림이 슬랙으로 오도록 만드는 작업을 airtable로 완성했다.
  (오히려 재피어보다 오류도 덜 나고 편리한듯)

MVP 완성

일주일 간 완성한 MVP의 모습이다!
로그인과 회원가입이 가능하며,유저가 아티클을 게시할 수 있다.
(형우님과 정길님이 사전에 공유해주신 아티클을 업로드 한 모습)

그 후 아주 자잘한 수정사항이 계속 발생했고, 그때마다 바로 수정을 거쳤다.

**웹플로우로 MVP를 만든 과정은 조금 더 자세하게 다루고 싶어서,
웹플로우 관련 게시글을 따로 쓰려고 한다.

++

: 노코드 단톡방에서 도움을 받은 노력의 흔적...(감사합니다)

[Daily Work]

6/23(목) : 디스콰이엇 벤치마킹 계획(ㅎㅎ..)과 MVP개발 계획 수립

6/24(금) : 노코드 강좌 찾기, 웹플로우 샅샅히 탐색

[MVP]
1. 6/27(월) : MVP 제작 스타트 : 웹플로우 적응&적용, 메인 페이지 제작

2. 6/28(화) : memberstack으로 회원가입/로그인 기능 추가

3. 6/29(수) : zapier 탐색 및 적응 그리고 재피어로 연결시키기

4. 6/30(목) : 프로필, 아티클 상세 페이지 만들기, CMS기능 넣기

5. 7/1(금) : 자동화 보수작업, 모든 기능 연결, 마무리 추가 수정 작업

[참조한 영상들]
: https://www.youtube.com/watch?v=pIf_MjUVLQ4
: https://www.youtube.com/watch?v=kwxfoukJ8PA