노코드를 활용해 하루만에 AI MVP 서비스 만들기

1. MVP 개발에 완벽한 풀스택 노코드 툴, 버블

안녕하세요 버블 외주 및 교육업체, 노코더스입니다. 많은 스타트업과 창업가가 가설을 빠르게 검증하고 싶어 합니다. 불과 몇 년전까지 가설을 검증하기 위해 랜딩 페이지를 개설하고, 사용자의 반응을 통해 가설을 검증하는 방식을 많이 사용했습니다. 하지만 랜딩 페이지 검증론은 유효성이 많이 떨어졌습니다. 이러한 이유는 서비스에 대한 평가 기준이 높아졌기 때문입니다.

오랜 시간 동안 수많은 랜딩 페이지들이 쏟아져나왔기에 유저의 피로도는 높아졌습니다. 이 상태에서 UI 완성도가 낮거나 기능이 부족하다고 느끼면, '완성된 서비스'라고 느끼지 못하게 됩니다. 결과적으로 서비스의 기능을 소개하는 데 그치는 랜딩 페이지를 일종의 광고처럼 여기며, 평상시보다 페이지 참여도가 떨어집니다. 이는 오염된 데이터로 이어지며, 결과적으로 가설 검증도 오염된 데이터에서 이루어지는 상황이 발생합니다.

(출처 : 심슨 가족)

결과적으로 가설을 검증하기 위해선 실제로 동작하는 서비스를 개발하는, MVP 방법론만이 유효합니다. MVP 개발이 중요해짐에 따라 많은 분이 풀스택 노코드 툴, 버블을 찾고 있습니다. 프론트와 백엔드 작업을 코딩 없이 진행할 수 있고, 타 노코드 툴보다 압도적인 자유도와 기능을 제공하기에 웬만한 기능을 버블에서 모두 만들 수 있습니다.

• 🛠️ 노코드 풀스택, 버블을 활용한 MVP 외주 문의하기

• 📽️ 버블 입문자를 위한 노코더스 강의 보러가기

• 👾 노코더스의 버블 디스코드 합류하기

• 📚 국내 최초 버블 입문서 보러가기

2. 노코드와 openAI를 활용해 AI MVP 서비스 만들기

버블은 API Connector 기능을 통해 외부 API를 쉽게 연동할 수 있습니다. 이를 활용해 OpenAI, Claude 등 AI 서비스가 제공하는 API와 연동해 버블에서 AI MVP 서비스를 쉽게 제작할 수 있습니다. AI 서비스를 버블로 만드시는 분들이 늘어남에 따라, 버블에서도 메인 페이지에서 "AI 서비스 + 노코드"를 강조하고 있습니다.

버블로 AI 서비스를 만들 때, 대략적인 구조는 아래와 같습니다. 요약하면 (1) 버블로 전반적인 서비스와 데이터베이스를 구축하고, (2) AI가 필요한 부분만 openAI API를 사용합니다.

1. 버블로 유저가 사용하는 서비스 UI, 데이터베이스와 기본적인 워크플로우를 만듭니다.

2. 버블의 API Connector로 버블과 openAI를 연동합니다.

3. openAI API를 통해 전달 받은 결과 값을 활용하는 워크플로우를 추가해 AI 기능을 구현합니다.

openAI에서 다양한 API를 존재합니다. 텍스트나 이미지 생성 뿐만 아니라 감정 분석, 음성 생성 등 다양한 API를 제공합니다. 예를 들어, 유저의 목소리를 텍스트로 변환해 보여주는 기능이 필요하다면, TTS(Text-to-sppech) API를 사용하면 됩니다. 혹은, 블로그에 사용할 썸네일을 제작해주는 기능이 필요하다면, 이미지를 생성하는 DALLE API를 사용합니다.

3. 코드 1줄 없이 버블에서 AI 기능 구현하기

조만간 노코더스에서 버블로 AI MVP 서비스 만들기 강의를 출시할 예정입니다. 해당 강의에서 유저가 입력한 정보를 기반으로 AI가 사주를 알려주는 서비스를 만드는 방법을 소개합니다. 아래는 사주 결과 페이지의 일부를 캡쳐한 이미지인데, 대표적으로 3개의 기능이 존재합니다.

• 내 사주와 관련된 신비로운 이미지 보여주기

• 내 사주 풀이(ex. 재물운, 연애운 등) 보여주기

• 내 사주를 들려주는 음성 파일 재생하기

이러한 대표 기능들은 모두 openAI의 API를 통해 구현한 AI 기능입니다. 사주 풀이는 텍스트 생성 API를 사용했고, 이미지는 이미지 생성 API를 활용했습니다. 사주 음성 파일은 생성된 텍스트를 TTS(Text-to-speech) API를 통해 생성했습니다.

버블이 제공하는 API Connector 플러그인을 활용하면 외부 API를 연동해 사용할 수 있습니다. 

openAI API 개발 문서를 보면 어떠한 API가 있고, 각 API를 어떻게 사용해야 하는지 알 수 있습니다. 아래 이미지는 텍스트 생성 API로, API endpoint와 사용해야 하는 파라미터 값이 적혀있습니다.

이렇게 확인한 openAI API를 버블의 API Connector와 연결해 AI 기능을 구현할 수 있습니다.

아래를 보면, 다양한 openAI API를 연결해 AI 기능을 구현하신 걸 볼 수 있습니다. 

4. AI MVP 서비스를 만드는 법을 배우고 싶다면?

버블과 openAI를 활용해 AI 서비스를 만드는 강의 펀딩을 3월 6일까지 진행하고 있습니다. 강의에서는 AI 사주 풀이 서비스를 함께 따라 만들며, 텍스트 생성, 이미지 생성, TTS API 등을 다양하게 활용해 AI 서비스를 코드 없이 버블로 만드는 법을 알려드립니다. 지금 펀딩에 참가하시면 노코더스 사이트에서 강의를 구매할 때보다, 훨씬 저렴한 가격으로 만나볼 수 있습니다.

👉 https://www.wadiz.kr/web/campaign/detail/330214

버블로 AI MVP 서비스 제작 강의가 궁금하시면, 아래에서 일부 강의를 먼저 들어보실 수 있습니다. 

👉 https://www.wadiz.kr/web/campaign/detailPost/330214/news/475357

--

🛠️ 노코드 풀스택, 버블을 활용한 MVP 외주 문의하기

📽️ 버블 입문자를 위한 노코더스 강의 보러가기

👾 노코더스의 버블 디스코드 합류하기

📚 국내 최초 버블 입문서 보러가기

--

[노코드 버블] Bubble AI Assist 알파 테스트 후기

1. 노코더스가 Bubble AI Assist 테스터로 선정됐습니다!

안녕하세요 버블 외주 및 교육업체, 노코더스입니다. 2024 버블콘에서 Bubble AI Assist를 소개했습니다. Bubble AI Assist는 프롬프트를 입력하면 페이지 디자인, 데이터베이스 설계, 워크플로우 구축 등을 AI가 처리해 서비스를 대신 작업합니다. 2024 버블콘에서 소개 직후, 웨이팅 리스트가 오픈됐고, 이번에 알파 테스터 선정해 기능을 먼저 체험해봤습니다.

2. 프롬프트로 AI 기획안 생성하기

버블 AI 어시스트에서 프롬프트를 입력하면, AI가 이에 기반해 서비스 기획을 제안합니다. 

아래 이미지를 봐면 좌측이 프롬프트 영역이고, 우측이 AI 추천 영역입니다. 우측 영역에서 AI가 추천하는 (1) 서비스 이름, (2) 유저 스토리와 (3) 핵심 기능이 있습니다. 유저 스토리는 '서비스의 엔드포인트 유저가 서비스를 사용하면서 달성하고자 하는 목표'라고 보시면 됩니다.

프롬프트에 "학생들이 학습 자료를 공유하고 피드에 질문을 남기는 콘텐츠 플랫폼"를 입력했기에 학습 자료 공유, 질문 남기기 등에 대한 유저 스토리가 등록됐습니다. 또한, 해당 서비스에 필요한 핵심 기능으로 회원가입, 학습 자료 업로드 등이 추가됐습니다.

AI가 제안한 기획안에서 추가 프롬프트를 입력해 수정할 수도 있습니다. 기존 유저 스토리에서 엔드포인트 유저로 학생만 나왔기에, "선생님은 코멘트나 학습 자료를 삭제할 수 있다"라는 프롬프트를 추가해봤습니다.

그러니 AI 기획안이 업데이트되서 선생님에 대한 유저 스토리 및 핵심 기능이 추가됐습니다. 부적절한 코멘트나 학습 자료를 삭제할 수 있다는 유저 스토리가 추가됐고, 선생님을 위한 관리 툴이 핵심 기능에 추가됐습니다. 

생성을  클릭하면, 현재 Ai 기획안을 기반으로 페이지 UI, 데이터베이스와 워크플로우 작업이 시작됩니다. 참고로 작업이 걸리기까지 꽤 시간이 소요되는데 안내에 따르면 5 ~ 7분 정도가 걸린다고 합니다.

3. 버블 AI Assist가 만든 결과물

AI가 작업을 완료하면, 버블 에디터로 이동이 됩니다. 서비스 UI는 프롬프트에 입력한 보라 색 컬러가 적용이 됐습니다. 

PC, 테블릿, 모바일에 모두 대응되는 반응형 처리도 기본적으로 되어있습니다.

페이지도 1개만 만드는 게 아니라, 프롬프트에 기반해 여러 페이지를 함께 만들었습니다

서비스에 필요한 테이블과 각 테이블의 필드도 구성이 완료된 상태입니다. 필드는 알아서 데이터 타입이 지정되고, 테이블 간의 연결도 되어있습니다. 다만, 완벽히 테이블을 만들진 못합니다. AI 기획안 상으로 material (학습 자료)가 있었지만 이와 관련된 테이블은 존재하지 않습니다.

테스트를 위한 샘플 데이터도 알아서 추가가 됐습니다.

서비스에 필요한 워크플로우도 생성됩니다. 워크플로우는 서비스의 로직이라 생각하면 됩니다. 아래 영상을 보면 go to page, Create a new thing, show element, reset input 등의 액션으로 워크플로우가 구성됐습니다.

4. AI 어시스트로 서비스를 바로 만들 수는 있나요?

버블 AI 어시스트 기능을 사용해보면서 느낀 점을 요약하면 아래와 같습니다. 참고로 해당 평가는 매우 주관적입니다.

• 비IT직군에겐 소프트 스킬에 참고할 만하다

• 버블 개발자가 쓰기엔 아직 부족하다

버블 교육을 진행하면서 느낀 게 사람들이 버블을 어려워 하는 유형은 크게 2가지인 듯 합니다. 첫 번째는 버블의 기능이 방대해 어려워 하는 유형이고, 두 번째는 IT 경험과 지식이 없어서 어려워 하는 유형입니다. 후자의 경우는 서비스 기획을 어떻게 해야 하는지 모르고, 기획을 하더라도 데이터베이스 설계에 더 큰 장벽을 느낍니다.

AI 어시스트에 프롬프트를 적절히 입력하면 기본적인 유저 스토리와 핵심 기능을 정의해주기에 기획적인 측면에서 어느 정도의 가이드라인이 될 듯 합니다.

또한, 기본적인 데이터베이스 구조도 잡아주기에 참고를 할 수 있을 듯 합니다.

다만, "참고가 될 만하다" 정도의 수준이지 "완벽하다"의 영역은 아닙니다. AI 기획안에 제시된 기능을 담기 위해 필요한 테이블 중 일부가 누락되기도 했고, 테이블에 필드가 빠지기도 했습니다. 결국 AI가 제안한 부분은 참고만 하고, 부족한 부분을 직접 판단해 보완해야 합니다.

기준을 버블 개발자로 맞추면, 평가가 달라집니다. 버블 개발자에겐 높은 퀄리티의 서비스를 만드는 게 숙명(?)입니다. 퀄리티의 기준으로 본다면, AI가 만든 결과물은 많이 부족합니다. 우선 UI가 별로입니다. 이건 주관적일 수도 있는데, 제 기준으로는 AI가 만든 UI는 서비스로 운영하기에 부족한 점이 많아보입니다. 예를 들어, 반응형 처리에선 max width에 대한 고려가 되지 않거나, PC와 모바일에서 단순히 width나 column의 갯수를 바꾸는 식으로만 제공됩니다. 또한, 요소 사이의 간격을 고려하지 않는 등 디테일적인 부분에서 부족함을 보입니다.

데이터베이스도 부족하거나 이상하게 설계된 것도 존재합니다. 워크플로우에선 불필요한 액션이 있는 등 빵구가 난 부분이 다소 존재합니다. 

결과적으로 디테일한 부분이 많이 떨어지고, 직접 손을 봐야 하는 곳도 많습니다. 기초 공사가 잘못된 상태에서 서비스를 빌드하면 더 큰 문제로 이어지기에 제 기준으로는 그냥 처음부터 다시 만드는 게 더 나아보이긴 합니다.

현재의 기준으로는 당장 사용이 불가능하지만, 알아둬야 하는 부분은 버블 AI 어시스트는 알파 버전이라는 점입니다. 즉, 극초기 단계이며 일종의 MVP 테스트입니다. 알파 테스트에서도 이 정도 퀄리티면, 더 보완 됐을 때는 충분히 쓸만하게 나오지 않을까 싶습니다. AI 기획안 기능은 PM 직군 입장으로 볼 때 만족스러운 수준입니다. 단순히 핵심 기능을 소개하는 게 아니라, 유저 스토리를 기준으로 제안하는 게 좋은 접근이라 생각합니다.

AI 어시스트의 부족한 부분은 기획안을 기반으로 버블의 UI, 데이터베이스와 워크플로우를 만드는 데 있습니다. 현재는 잘못됐거나 빵구가 난 부분도 있지만, 이 부분이 개선된다면 버블 초급자분들에겐 당장 큰 도움이 되지 않을까 생각합니다. 그리고 디테일적인 부분에서 보완도 이루어진다면, 버블 중급자 이상인 분들도 해당 기능을 부분적으로 사용해 작업 효율성을 높일 수 있지 않을까 하네요.

노코드 풀스택 툴, 버블에 관심이 있다면
노코더스를 방문해주세요!

📽️ 버블 입문자를 위한 노코더스 강의 보러가기

🛠️ 노코드 풀스택, 버블을 활용한 MVP 외주 문의하기

📚 국내 최초 버블 입문서 보러가기

[노코드 버블] 노코드와 AI를 활용해 하루 만에 사이트 런칭하기

본 글의 마지막에 노코더스의 버블 AI 강의 할인 쿠폰(25.02.16까지 사용 가능)을 확인할 수 있습니다

안녕하세요 버블 외주 및 교육업체 노코더스입니다.  버블은 풀스택 노코드 툴로 코드 없이 다양한 웹사이트와 서비스를 만들도록 도와줍니다. 쉽게 말해 프론트엔드와 백엔드 작업을 코딩 없이 할 수 있는 툴이라고 이해하시면 됩니다.

재밌는 부분은 노코드 툴에서 AI 기능이 함께 있다는 점입니다. 현재 버블은 AI 페이지 디자이너라는 기능을 제공 중입니다. AI 페이지 디자이너는 버블 AI가 입력한 프롬프트를 기반으로 페이지 UI를 만들어 주는 기능으로, 현재 모든 유저가 사용할 수 있습니다. 현재 베타 버전으로 모든 분이 사용하실 수 있습니다.

AI 페이지 디자이너는 아래처럼 특정 유형의 페이지를 지원하고 있습니다. AI에게 랜딩 페이지 제작을 맡기고 싶다면, [Landing Page] 유형을 선택만 하면 됩니다.

페이지 유형을 선택하면, 프롬프트를 입력하는 창이 나옵니다. 여기에 만들고자 하는 페이지 정보를 입력해 생성을 클릭하면, 프롬프트 값에 기반해 AI가 페이지를 제작합니다.

아래는 버블 AI가 만든 랜딩 페이지입니다. 입력한 프롬프트 값에 기반해 텍스트 및 이미지가 자동 입력이 됩니다. 이때, 이미지와 폰트도 프롬프트에 기반해서 스타일이 지정이 됩니다. 또한, 반응형 UI도 자동 처리가 되어있어 PC, 테블릿과 모바일에 모두 대응되는 UI가 만들어집니다. 다만, 버블이 외국 서비스다보니 텍스트는 영어로 입력되는 게 흠입니다.

프롬프트를 어떻게 입력하느냐에 따라 생성된 페이지의 스타일도 완전히 달라집니다. 아래는 내용이 동일하고, 이미지 스타일만 다르게 프롬프트를 입력해 생성한 페이지입니다. 프롬프트에서 "애니", "네온펑크", "픽셀" 스타일의 이미지를 사용하라고 말했습니다. 그 결과 페이지의 전체 컬러는 동일하지만, 폰트와 이미지에서 큰 차이를 보입니다.

많은 분이 사이드 프로젝트나 스텔스 창업을 위해 버블로 사이트 및 서비스를 만들고 있습니다. 하지만, 혼자만의 힘으로 만들기엔 할 일이 너무도 많습니다. 서비스 기획부터 UI 디자인, 버블 개발까지 너무 많은 일을 혼자서 해내야 합니다. 이런 분들이 AI 페이지 디자이너 기능을 잘 활용한다면 큰 도움이 될 수 있을 거 같아서, "AI 페이지 디자이너 기능을 활용해 웹사이트를 하루 만에 런칭하기"를 주제로 강의를 준비했습니다.

AI를 잘 활용하기 위해선 무엇보다 프롬프트가 중요합니다. 어떤 프롬프트를 입력하는지에 따라서 AI가 만드는 결과물을 천차만별이며, 자신이 원하는 페이지를 생성하기 위해선 그에 딱 맞는 프롬프트가 필요합니다. 다양한 프롬프트를 조합해 테스트를 진행했고, 실험 결과를 종합해 작성한 프롬프트 가이드북도 강의에서 함께 제공됩니다.

버블 AI 기능을 좀 더 저렴하게 배울 수 있도록 할인 쿠폰을 준비했습니다. 아래 링크에서 강의를 구매하실 때, 아래 할인 쿠폰 코드를 입력하면 추가 할인이 적용됩니다.

👉 버블 AI를 활용해 하루만에 웹 사이트 만들기

💸 할인 쿠폰 : nocoders_ai_master

노코드 툴로 B2B 생성형 AI 서비스를 만들었습니다

오늘 AI 참여형 콘텐츠 마케팅 서비스, 스냅폼을 최종 완성해 배포했습니다 🥳

스냅폼은 기업이 보유한 IP와 콘텐츠를 소재로 한 AI 스냅샷을 만들어 주는 서비스입니다. 스냅폼을 이용하면, 아래 같은 콘텐츠를 만들 수 있습니다. 이처럼 스냅폼의 미션은 생성형 AI를 활용해 단순한 시청이 아닌 참여하며 즐기는 콘텐츠 마케팅을 선도하는 것입니다...!

• 🎪 가보지 못한 팝업 스토어를 배경으로 AI 프로필 만들기

• ✈️ 다양한 여행지를 배경으로 하는 AI 스냅샷 만들기

• 🍿 영화의 한 장면에 주인공으로 등장하는 AI 포스터 만들기

• 🎶 최애 아이돌의 뮤비 촬영지의 AI 포토카드 만들기

B2B 서비스다보니 초기 고객을 찾기 힘든데, 운 좋게도 글로벌 여행 커뮤니티인 트립소다에게 서비스를 제공할 수 있게 됐습니다 :) 집에서 세계 여행지를 방문한다는 컨셉으로 브랜드 마케팅을 진행 중입니다. 스냅폼이 궁금하다면, 무료로 참가해보세요!

스냅폼은 프론트와 백엔드를 코드 없이 구현하는 풀스택 노코드 툴, 버블(Bubble)을 활용해 만들었습니다. 물론 AI 파트는 서버로 따로 구현하고, 클라이언트만 버블로 만들어 API로 연동을 했습니다. 노코드 툴, 버블로 AI 서비스를 만드는 법은 아래 링크에서 자세히 확인하실 수 있습니다

https://brunch.co.kr/@famelee/145

10만 유저의 사이드 프로젝트를 멈추다

키울 맛을 잃은 사이드 프로젝트

 사이드 프로젝트로 노션박스를 운영한 지 벌써 2년이 넘었다. 데이터를 돌아보니 별도 홍보 없이 연간 10만 명의 유저가 찾아왔고, 수익도 월 150만 원 정도는 꾸준하게 발생하고 있다. 코드 없이 혼자서 시작한 사이드 프로젝트 중에서 이 정도 성과를 달성한 분이 얼마나 있을지 궁금하기도 하다.

다만 노션박스의 운영 기간이 길어질수록 고민도 함께 커졌다. 노션박스의 주력 서비스는 ‘노션 템플릿’이었다. 하지만 이제 노션 헤비 유저들이 많아졌고, 이들 대다수가 노션 템플릿을 만들어 시중에 공유를 하고 있다. 바꿔 말해, 노션 템플릿 시장은 포화 상태에 이르렀다. 물론 노션박스가 여전히 국내에서 가장 인지도 높은 템플릿 사이트지만, 포화 시장에서 투자한 리소스 대비 임팩트는 시간이 지날수록 떨어질 수밖에 없다.

 원래는 노션박스라는 브랜드를 활용해 강의나 외주 등으로 서비스를 확장할지 고민도 했었다. 하지만, 이런 경우에는 사이드 프로젝트에 들어가는 리소스가 너무 커지기에 불가능하다고 판단했다. 노션박스를 매각하려고도 했지만, 인수 제안자들과 딜 협상이 성공적으로 이루어지지 않았다. 딜이 실패한 가장 큰 이유는 노션박스가 '나(FameLee)'에게 의존하는 서비스였기 때문이다. 즉, 내가 없이 노션박스만 넘기는 경우, 노션박스를 사업적으로 활용하는데 제한이 많다는 게 인수자들의 분석이었다.

무엇보다 노션박스에 이전과 같은 흥미가 더 이상 남아 있지 않았다. 노션박스는 이미 안정기에 접어들었고, 별도의 터치를 하지 않아도 잘 굴러가고 있다. 즉, 더 이상 사이드 프로젝트로서 키울 맛이 없는 서비스로 자리 잡혔다. 고민 끝에 노션박스는 현상 유지만으로 남겨두고, 새로운 프로젝트를 시작하기로 했다. 재미로 움직이는 인간... 그것이 바로 나...

사이드 프로젝트를 시작할 때
고민해야 하는 요소들

 사이드 프로젝트를 시작하기에 앞서 5가지 요소를 주로 본다. 여기서 1~4번은 서비스의 임팩트 관점이고, 5번은 사이드 프로젝트라는 현실적 요소에 기반한다.

1. 사람들이 관심을 가지는 영역인가?

2. 영역 안에 아직 해결되지 못한 문제가 있는가?

3. 해당 문제를 사람들은 기꺼이 돈을 내려고 하는가?

4. 해당 문제를 해결하는 서비스가 기존에 없는가?

5. 내가 크게 신경 쓰지 않아도 알아서 잘 굴러가는 구조인가?

1. 사람들이 관심을 가지는 영역인가?

 노션박스를 시작한 것도 위 요소들을 모두 따른다. 노션박스를 런칭한 20년도를 돌이켜보면, 노션이 국내에 상륙하고, 주변 지인들이 노션이란 서비스를 들어봤거나 혹은 막 쓰기 시작했었다. 즉, 1번의 요소가 충족됐었다.

2+3. 아직 해결되지 못한 문제가 있고, 기꺼이 돈을 내려고 하는가?

 당시 노션박스를 기획할 때, 고려한 타겟은 (1) 다이어리를 쓰는 사람들과 (2) 스타트업 재직자들이다. 많은 사람들이 굿노트 등을 이용해 다이어리를 쓰고 있고, 다꾸를 위한 스티커나 템플릿 등 온라인 콘텐츠에 돈을 지불했다. 스타트업에서는 노션을 협업 툴로서 활용하고 있고, 협업 시스템을 어떻게 구축할지 모르는 사람들은 컨설턴트를 찾아가 돈을 지불했다. 2번과 3번 요소가 충족됐었다.

4. 해당 문제를 해결하는 서비스가 기존에 없는가?

 하지만 당시에 노션 템플릿을 위한 전문적인 서비스는 존재하지 않았다. 간혹, 블로그를 하는 분들이 자신이 만든 템플릿 공유할 뿐이었다. 노션에서 자체적으로 제공하는 템플릿도 있었지만, 해외 유저를 위한 템플릿들이 대다수였고 유형과 개수도 많지 않았다. 이러한 부분에서 4번이 충족됐다.

5. 내가 크게 신경 쓰지 않아도 알아서 잘 굴러가는 구조인가?

 사이드 프로젝트를 큰 규모로 가져가면, 본업에 지장을 받을 수밖에 없다. 즉, 부캐가 본캐를 역전하는 상황이 연출된다. 이를 방지하기 위해 내가 신경 쓰지 않아도 알아서 잘 굴러갈 수 있는 서비스인지 고민해야 한다. 노션 템플릿은 콘텐츠의 일환이며, 콘텐츠는 한 번 잘 만들어 두면 평생을 사용할 수 있다.

버블 플러그인을
사이드 프로젝트로 선택한 이유

 고민 끝에 내가 잡은 주제는 노코드 툴, 버블이었다. 그중에서도 다양한 플러그인을 개발해 제공하는 사이드 프로젝트를 시작하기로 했다. 사실, 여기에는 내 관심도 어느 정도 반영됐다. 가장 좋아하는 툴은 버블과 노션이며, 국내에서 관련 정보가 부재한 황무지 상황에서부터 혼자 공부하며 사용하기 시작했었다. 조금 더 자만하자면, 국내에서 가장 잘 쓰는 사람이라고 생각한다.

 그렇다고 흥미만으로 해당 프로젝트를 선택한 건 아니다. 앞서 말한 5가지 요소들도 모두 충족된다.

1. 사람들이 관심을 가지는 영역인가?

2. 영역 안에 아직 해결되지 못한 문제가 있는가?

3. 해당 문제를 사람들은 기꺼이 돈을 내려고 하는가?

4. 해당 문제를 해결하는 서비스가 기존에 없는가?

5. 내가 크게 신경 쓰지 않아도 알아서 잘 굴러가는 구조인가?

1. 사람들이 관심을 가지는 영역인가?

버블에 대한 사람들의 관심도를 판단하는 데 크게 3가지 증거에 주목했었다. 우선 토스에서 버블에서 사용할 수 있는 결제 플러그인을 주제로 웨비나를 진행했었다. 토스가 직접 지원해 주는 모습부터가 국내의 관심도를 대변한다고 생각했다.

  두 번째는 내가 쓴 버블 글의 조회 수였다. 21년도에 작성한 버블 글을 꾸준히 많은 사람들이 검색을 통해 찾아와서 읽고 있다. 지금까지 발행한 글 중에서 2번 째로 높은 조회 수를 보이고 있다.

https://brunch.co.kr/@famelee/27

 마지막으로 이전 교육 창업에서 버블을 주제로 오프라인 강의를 진행한 적이 있는데 다양한 직업과 연령대의 분들이 신청을 해줬었다. 또한, 강의가 끝난 이후에도 다음 오프라인 강의를 언제 여는지에 대한 문의가 주기적으로 오고 있다. 아쉽게도 강의는 더 이상 열리지 않는다... 오프라인 강의는 넘 빡세...

2+3. 아직 해결되지 못한 문제가 있고, 기꺼이 돈을 내려고 하는가?

 버블이란 영역 안에서 플러그인을 선택한 이유는 다음과 같다. 버블에서는 내가 자체적으로 구현하기 어려운 기능이 있다면, 다른 사람이 만든 플러그인을 불러와서 구현할 수 있다. 버블에서 서비스 빌드는 보통 혼자서 진행한다. 즉, 그 누구의 도움을 구하지 못하고 혼자서 목표하는 서비스를 어떻게든 완성해야 한다. 근데, 내가 어떻게 구현할지 도저히 모르겠는 기능이 있을 때, 어떻게 해야 할까? 자연스럽게 플러그인을 찾아보게 된다.

플러그인이 비싸도 상관이 없다. 이 플러그인이 아니면, 기능을 구현할 수 없기 때문이다. 더군다나 몇 만 원 밖에 안 한다면, 사지 않고 배길 수 있을까? 나도 버블로 서비스를 만들 때, 막히는 부분은 기꺼이 유료 플러그인을 결제해 사용했다.

4. 해당 문제를 해결하는 서비스가 기존에 없는가?

 하지만 버블은 해외 툴이기에 아직까지 국내 유저를 위한 인프라가 갖쳐져 있지 않았다. 다양한 플러그인이 존재하지만 모두 해외 유저를 타기팅한 플러그인이며, 카카오, 채널톡 등 국내 서비스를 위한 플러그인은 존재하지 않는다. 심지어 나에게 필요한 플러그가 있을지라도, 모든 정보는 영어로 적혀 있다. 영어에 미숙한 사람이라면 막막하기만 하다.

5. 알아서 잘 굴러가는 구조인가?

플러그인은 콘텐츠와 같다. 한 번 잘 만들어두면, 유지 보수를 하지 않아도 오랫동안 사용할 수 있다. 물론 새로운 기능을 추가 업데이트 하고 싶은 경우가 있긴 하겠지만, 이건 내 선택에 의해 결정된다. 내가 기능을 추가하고 싶지 않다면, 그냥 기존의 플러그인을 계속 판매하면 된다.

나홀로 하는 버블박스 런칭

1. 서비스명 정하기

 서비스 이름은 버블박스라고 정했다. 사람들이 버블박스를 봤을 때, 노션박스를 함께 떠오르면 좋겠다는 생각에 '박스'를 돌림 이름처럼 사용했다. 만약 버블박스도 성공적으로 진행된다면, 앞으로도 계속 00박스 유니버스를 만들 수도 있지 않을까?

2. 플러그인 개발하기

 가장 큰 허들은 플러그인 개발에 있었다. 버블은 노코드 툴이지만, 플러그인을 만들 때는 node.JS 혹은 javascript 코드를 직접 작성해서 사용해야 한다. 필자는 python만 어느 정도 알고 있으며, 그것도 서비스 빌드를 위한 게 아니라, pandas 같은 데이터 라이브러리만 알고 있다.

 풀고자 하는 문제가 있으면 어떻게든 풀어야 하는 게 나홀로 사이드 프로젝트의 숙명이다. AI 시대에 인간에게 필요한 것은 AI를 만드는 능력이 아니라, 활용하는 능력이라는 말이 있다. nodeJS를 몰라도 chatGPT를 요리조리 활용해 플러그인을 모두 개발할 수 있었다. 사실 내가 한 일은 GPT에게 필요한 함수를 설명하고, 답변을 보고 재질문하면서 코드를 GPT에게 잡아달라고 한 것뿐이었다. GPT는 신이야! 

 버블박스를 런칭한지 2주 정도가 지났다. chatGPT의 도움으로 벌써 11개 정도의 플러그인을 개발했다. 이제는 개발을 잘 몰라도 AI의 도움으로 코드를 활용한 프로젝트를 할 수 있는 AI 시대다. 결국 우리에게 필요한 건 풀고자 하는 문제를 어떻게든 풀어 보겠다는 마음이 아닐까?

FameLee의 새로운 사이드 프로젝트,

버블박스를 만나보세요!

사이드 프로젝트, 노션박스의 연말 결산

안녕하세요. 노션박스 운영자 FameLee입니다. 사이드 프로젝트로 노션 템플릿 사이트, 노션박스를 운영한지 벌써 2년이 지났습니다. 연말을 맞아 노션박스의 지난 23년, 한 해의 성과를 집계했습니다.

토스의 강의 중에 CC(Carrying capacity)라는 개념을 아마 다들 알고 계실 겁니다. 노션박스의 22년과 23년, 두 해의 성과를 각각 비교해보니 모두 비슷하게 연 방문 유저가 약 9만 명인 걸 확인했습니다. 현재 노션박스의 유입은 약 70%가 검색을 통해 발생합니다. 이러한 점을 종합했을 때, 노션박스가 CC에 도달한 건 확실한 것 같네요. 현업이 바쁜 상태에서 사이드 프로젝트인 노션박스를 앞으로 어떻게 운영할지 계속 고민이 드네요.
사실 팔고 싶은데... 노코드로 만든 서비스라 양도도 힘드네요... 😢

노션박스의 한 해 성과가 궁금하다면, 심심풀이로 링크를 확인해주세요!

[노션박스] 노션 무료 템플릿 5종을 받아가세요!

안녕하세요. 사이드 프로젝트로 노션 템플릿 사이트, 노션박스(NotionBox)를 운영 중인 FameLee입니다. 9월 템플릿 공유 후, 2.5개월 만에 신규 템플릿을 추가했습니다. 이직 등의 이슈로 바쁘다 보니, 새로운 템플릿을 만들 시간이 별로 없네요 😢

오랫동안 기다린 만큼, 이번에 신규 5종 무료 템플릿을 업로드했습니다. 이 중 장비 관리와 페르소나 관리 템플릿은 노션박스에게 요청주신 제안에 따라 만들었습니다. 템플릿 요청이 있다면, [템플릿 요청] 탭에서 적어주세요

• 장비 관리 템플릿

• 전략 분석 프레임워크 템플릿

• 페르소나 관리 템플릿

• 이미지 라벨 관리 템플릿

• 팀원 칭찬 장려 템플릿

https://www.notionbox.kr/template/category/new

+ 저를 대신해 국내 1위 노션 사이트, 노션박스를 인수해 이어갈 분을 찾습니다. 관심 있으신 분은 아래 링크를 참고해주세요

https://www.notionbox.kr/enterprise/notionbox_sell

서비스 기획부터 개발, 실험까지 싸이클을 돌려보자!

목차  
1. 인터렉션 가이드 제작 서비스, ActiveGuide  
2. 서비스를 배포하기까지 어떤 과정을 거쳤나요?  
3. 가설 검증 결과와 넥스트 액션  

 지난 추석 연휴, 본가에서 시간이 남아 사이드 프로젝트로 ActiveGuide라는 서비스를 만들었습니다. 꽂히는 아이디어가 있다면 서비스로 만들어 테스트해야 직성이 풀리는 스타일이다 보니, 황금 같은 연휴를 서비스를 만드는 데 시간을 쏟아버렸습니다. 기획, 디자인과 개발까지 1주일 정도가 걸렸고, 10월 9일에 MVP 서비스를 출시했으니 벌써 3주가 지났습니다. 경험을 복기하기 위해, 관련 글을 남깁니다.

인터렉션 가이드 제작 서비스,
ActiveGuide

 ActiveGuide를 인터렉션 가이드를 만드는 SaaS 툴로, 서비스 UI에 인터렉션을 추가한 학습 콘텐츠를 제작할 수 있습니다. 궁극적으로, 유저가 우리 서비스를 더 잘 사용할 수 있도록 도와줍니다. 

Interactive : 서비스 UI에서 클릭, 더블클릭, 드래그, 드랍 등 다양한 인터렉션을 통해 학습시켜요

Step By Step : 가이드 목표를 설정하고, 전반적인 과정을 차근차근 따라 하며 학습시켜요.

Share : 링크를 공유해 모든 사람들을 참여시키거나, 패스워드를 설정해 학습자를 지정해요.

Embeded : 기존 운영 중인 노션, 사이트 등에서 생성한 가이드를 임베드해 함께 사용하세요.

서비스를 배포하기까지
어떤 과정을 거쳤나요?

1. 현상 관찰하기

SaaS 기업에게 유저 온보딩은 필수적이다.

 국내 SaaS 시장은 점점 커지고, 많은 SaaS 서비스가 등장하고 있습니다. B2C 서비스와 다르게, SaaS 기업은 2가지 문제를 동시에 풀어야 합니다.

[1] 유저에게 가치를 줄 수 있는 서비스 만들기 
[2] 서비스를 유저가 잘 활용하게 만들기 

 SaaS 기업은 유저를 충성 고객으로 만들어 지속적으로 서비스를 사용하도록 만들어야 합니다. 이때, 아무리 좋은 기능을 구현해도, 이 기능을 유저가 잘 활용하지 못하면 가치가 온전히 전달되지 못합니다. 많은 SaaS 기업이 가이드 문서, 튜토리얼 영상 등을 운영하는 이유도 이 맥락과 일치합니다. 온보딩 과정을 통해 유저에게 서비스를 학습시킴으로써, 기능을 더 잘 활용하도록 만들기 위함입니다.

온보딩이 잘될수록, 지불 의사의 중요성 ( 출처 : <요즘 IT> )

 국내 SaaS 기업들 중 상당수는 유저의 학습을 돕기 위해 고객 가이드 사이트를 운영합니다. 해당 사이트에는 서비스에서 어떤 기능을 어떻게 활용하는지를 안내합니다. 예를 들어, 노션은 유저들이 노션을 더 잘 활용할 수 있도록 여러 가이드를 제공하고 있습니다.

노션에서 운영하는 가이드 사이트 (출처 : <노션>)

2. 문제 정의하기

유저는 '글' 중심의 가이드 문서를 읽지 않는다.

 하지만, 많은 SaaS 기업이 유저 온보딩을 위해 만든 가이드 문서는 큰 실효성을 전달하지 못합니다. 주변 지인들에게 물어보니 새로운 툴을 접할 때, 공식 가이드 문서를 처음부터 끝까지 모두 읽는 사람은 찾지 못했습니다. 아마, 이 글을 읽는 분들 중 대다수는 공식 가이드 문서를 세심하게 읽은 경험이 없을 겁니다. 

 이러한 현상이 일어나는 이유는 당연합니다. 애초에 '공부'란 지루하고 재미가 없는 일입니다. 그렇다고, 큰맘 먹고 공부를 하고자 가이드 문서를 본다고 해도, 글이 빼곡한 문서는 지루하고 재미가 없어서 어느새 읽지 않게 됩니다.

노션 가이드를 보면 글 중심으로 적혀 있는 걸 볼 수 있다.(출처 : <노션>)

3. 솔루션 방향 설정하기

가이드 형식을 '글'이 아닌 '인터렉션'으로 바꾸기

 유저가 가이드 문서에 몰입하지 않는 이유는 '글'이란 형식 때문입니다. 글은 정보를 일방향으로 전달하는 수동적 방식입니다. 그래서 가이드 문서의 형식을 상호작용 중심으로 바꿔야 해당 문제를 해결하리라 판단했습니다.  (1) 서비스 UI를 보여주고 (2) 여기서 인터렉션을 하면서 차근차근 학습하는 방식의 가이드를 제작할 수 있는 툴을 만들기로 했습니다.

4. 가설 설정하기

기업 고객, 일반 고객을 모두 검증해야 한다.

 가이드 문서 제작 툴의 핵심 이해 관계자는 '기업 고객'과 '일반 고객'입니다. 서비스를 구매하는 건 기업 고객이지만, 기업 고객은 서비스의 가치를 일반 고객의 학습 유효도에 의해 평가합니다. 즉, 가이드 문서 제작 툴의 가치는 "일반 고객을 학습하는 데 얼마나 영향을 주는가?"에 의해 결정됩니다. 그래서 기업 고객과 일반 고객, 각각 가설을 설정했습니다.

기업 고객 가설
- 가설 : 기업은 가이드 문서에서 인터렉션 요소가 있다면, 온보딩에 효과적이라 생각할 것이다.
- 핵심 지표 : 가이드 생성률 (= 기업 이메일로 가입한 유저의 가이드 생성 수 / 기업 이메일로 가입한 유저의 수 )

일반 고객 가설
- 가설 : 일반 고객은 서비스 UI와 인터렉션 하면서 배우는 방식에 더 큰 몰입력을 가질 것이다.
- 핵심 지표 : 가이드 완주율 (= 배포 가이드 최종 완료 유저 / 배포 가이드 시작 유저)

 필요한 기능을 리스팅 하고, 검증 가설에 맞춰서 우선순위를 분류했습니다.

우선순위 High
- 기업 유저는 가이드를 저장하는 워크스페이스를 개설할 수 있다.
- 기업 유저는 시나리오 형식으로 가이드를 개설할 수 있다. 
- 기업 유저는 가이드를 나눌 수 있는 하위 챕터를 만들 수 있다. 
- 기업 유저는 챕터 안에 보여줄 서비스 UI를 등록할 수 있다.  
- 기업 유저는 서비스 UI 위에 인터렉션 포인트를 지정할 수 있다.
- 기업 유저는 인터렉션 포인트에 상세 설명을 추가할 수 있다.
- 기업 유저는 가이드 제작을 완료하면, 이를 배포할 수 있는 링크를 생성할 수 있다.
- 일반 유저는 가이드를 처음 접속할 때, 가이드에 대한 정보를 가장 먼저 확인한다.
- 일반 유저는 공유받은 링크에 접속해 설정된 시나리오에 따라 인터렉션 포인트를 클릭 해야 한다.
- 일반 유저는 가이드를 끝까지 완료하면, 가이드가 종료됐다는 안내받는다.

우선순위 Mid
- 기업 유저는 인터렉션 포인트에 유형(Ex. 스크롤, 더블 클릭)을 설정할 수 있다.
- 기업 유저는 인터렉션 포인트에 추가된 설명과 관련된 링크를 추가할 수 있다.
- 기업 유저는 배포한 가이드에 비밀번호를 설정할 수 있다.
- 일반 유저는 배포 링크의 메타 태그에서 가이드 정보를 확인할 수 있다.
- 일반 유저는 매 챕터를 시작할 때, 해당 챕터에서 무엇을 배우는지 알 수 있다.

우선순위 Low
- 기업 유저는 워크스페이스 이름과 로고를 변경할 수 있다.
- 기업 유저는 개설된 워크스페이스에 팀원을 초대할 수 있다. 
- 기업 유저는 워크스페이스에 초대된 팀원에게 관리자 혹은 일반 유저 권한을 설정할 수 있다. 
- 기업 유저는 자신의 닉네임과 프로필 이미지를 설정할 수 있다.
- 기업 유저는 관리자 권한으로 있는 워크스페이스의 플랜을 설정할 수 있다.

5. 서비스 빌드하기

최대한 낮은 리소스로 빠르게 빌드하기

 테스트 목적의 서비스이기에 설계 및 개발은 최대한 리소스를 줄이는 방향으로 갔습니다. UI 디자인은 투두몰 UI를 최대한 활용해 리소스를 줄였고, 구조만 잡기 위해 데이터베이스 모델링을 진행했습니다. 로직과 정책은 사전에 정의하지 않고, 서비스를 빌드하면서 잡아가기로 했습니다.

 대략적인 설계 방향을 잡은 후, 버블을 활용해 개발을 완료했습니다. 참고로 버블은 프론트와 백엔드 작업을 코딩 없이 도와주는 노코드 툴입니다.

 마지막으로 여러 엣지 케이스를 고려한 추가 대응 로직을 구현해 서비스 빌드를 완료했습니다. 

[예시 1] 워크스페이스에 초대받지 않은 사람이 URL을 입력해 들어간다면, 어떻게 해야 하는가? 
[로직 1] workspace_member에 현재 유저가 없다면, 루트 페이지로 리다이렉트 시킨다.

[예시 2] 패스워드를 설정해 가이드를 배포했다. 유저가 가이드 시작 페이지에서 패스워드를 입력하고 학습 페이지로 넘어간 게 아니라, URL을 직접 입력해 학습 페이지에 들어온다면, 어떻게 해야 하는가?
[로직 2] 학습 페이지 이동 시, password 파라미터를 전달 + 해당 파라미터의 값이 유효하지 않으면 가이드 시작 페이지로 리다이렉트 시킨다.

6. 데이터 환경 세팅

핵심 지표를 어떻게 수집할까?

 서비스를 모두 완성한 후, 가설 검증을 위해 핵심 지표 데이터를 어떻게 수집할지 고민했습니다.

 핵심 지표
- 기업 고객의 가이드 생성률 (= 기업 이메일로 가입한 유저의 가이드 생성 수 / 기업 이메일로 가입한 유저의 수 )
- 일반 고객의 가이드 완주율 (= 배포 가이드 최종 완료 유저 / 배포 가이드 시작 유저)

 [가이드 생성률] 지표는 아래 방식으로 확인하기로 했습니다.

1. 유저 테이블에서 기업 이메일 확인 
2. 해당 기업 이메일이 개설한 워크스페이스 확인 
3. 해당 워크스페이스가 보유한 가이드 확인 

 배포한 가이드는 일반 유저가 회원가입 없이 확인할 수 있는 공유 링크로 접속하기 때문에 [가이드 완주율] 지표는 데이터베이스에 저장된 데이터로 확인할 수 없었습니다.  따라서, GA와 GTM을 활용해 가이드가 시작될 때와 종료될 때의 이벤트 데이터를 수집하도록 설정했습니다.

1. 가이드 시작 페이지가 실행되면 "guide_start" 이벤트 데이터 수집
2. 가이드 종료 페이지에서 실행되면 "guide_end" 이벤트 데이터 수집

7. 실험 모수 확보하기

실험을 위한 최소 모수를 어떻게 모으지?

 데이터 수집 환경까지 세팅한 엑티브 가이드를 배포했고, 아래 방식으로 초기 홍보를 진행했습니다. 커뮤니티 업로드는 홍보 지속성이 매우 짧기에, 꾸준한 유입이 발생하는 노션박스를 최대한 활용하기로 했습니다.

1. 창업 커뮤니티(디스콰이엇, EOPlanet)에 홍보 글을 업로드해 관심 기업 유입시키기
2. 노션박스 사이트에 제작한 가이드를 보여줘 일반 유저에게 체험시키고, 전환 유도하기

가설 검증 결과와 넥스트 액션

1. 기업 고객 가설 검증하기

기업 고객 가설
- 가설 : 기업은 가이드 문서에서 인터렉션 요소가 있다면, 온보딩에 효과적이라 생각할 것이다.
- 핵심 지표 : 가이드 생성률 (= 기업 이메일로 가입한 유저의 가이드 생성 수 / 기업 이메일로 가입한 유저의 수 )
- 결론 : 실험 설계가 잘못 됐다. 기업의 "기존 가이드 사이트 유무"라는 변수를 제거해야 한다.

 16명이 회원가입을 했고, 이 중에서 기업 이메일로 가입한 유저는 3명이었습니다. 그리고, 기업 이메일로 가입한 유저가 만든 가이드는 3개였습니다. 가이드 생성률은 100%를 달성했습니다. 다만, 모두가 생성한 가이드를 배포하지는 않았습니다. 단순한 호기심으로 가이드를 생성하고, 완성은 하지 않았는지 확인해 보니 확인했습니다. 페이지와 인터렉션 테이블에서 데이터를 확인하니 가이드는 모두 완성된 상태였습니다. 즉, 가이드를 완성했지만 배포 처리를 하지 않았습니다. 

 해당 기업들의 사이트를 들어가 보니 (1) 이미 노션을 활용해 가이드 사이트를 운영하고 있거나 (2) 가이드 문서 자체가 없는 기업이었습니다. (2)의 기업은 완성한 가이드를 배포 처리하지 않은 게 당연하며, (1)의 기업은 새로운 가이드 제작 툴을 도입하는 데 허들이 있을 수밖에 없었습니다. 즉, "기존 가이드 사이트의 유무"라는 변수를 고려하지 못한 채로 실험을 설계한 셈입니다.

2. 일반 고객 가설 검증하기

일반 고객 가설
- 가설 : 일반 고객은 서비스 UI와 인터렉션 하면서 배우는 방식에 더 큰 몰입력을 가질 것이다.
- 핵심 지표 : 가이드 완주율 (= 배포 가이드 최종 완료 유저 / 배포 가이드 시작 유저)
- 결론 : 가설은 참이다. 완주율도 괜찮고, 뒷부분으로 갈수록 전환율이 더 높아진다.

  노션박스에 임베드한 가이드를 총 397명이 학습을 시작했고, 이 중에서 가이드를 끝까지 확인한 사람은 56명이었습니다. 즉, 가이드 완주율은 약 14%에 이릅니다. 심지어 각 챕터별 전환율을 확인해 보니, 학습이 길어질수록 전환율은 오히려 높아지는 걸 확인했습니다. 해당 지표로 일반 고객 가설은 맞다고 판단했습니다. 

• 챕터 1 시작 (=가이드 시작) : 397명

• 챕터 1 완료 : 166명 / 이전 퍼널 전환율 42% / 전체 퍼널 전환율 42%

• 챕터 2 완료 : 85명 / 이전 퍼널 전환율 51% / 전체 퍼널 전환율 21%

• 챕터 3 완료 : 70명 / 이전 퍼널 전환율 82% / 전체 퍼널 전환율 18%

• 챕터 4 완료(=가이드 종료) : 56명 / 이전 퍼널 전환율 80% / 전체 퍼널 전환율 14%

3. 넥스트 액션

 우선 서비스를 현재 상태로 유지하고, 해당 실험을 1개월 정도 더 지속하기로 했습니다. 그리고, 기업 고객 가설을 검증하기 위해선 "기존 가이드 사이트의 유무" 변수를 없애야만 합니다. 그렇지 않으면, 인터렉션 요소를 고려하기도 전에, 기존에 운영 중인 가이드가 있기에 인터렉션 가이드를 도입하기 어렵다고 단정 지을 수 있기 때문입니다.

 따라서, "기존에 운영 중인 가이드 사이트와 함께 사용할 수 있다"를 인식시키기로 했습니다. 여러 기업이 가이드 사이트를 노션으로 제작해 활용해 운영하고 있습니다. 따라서, 노션으로 이미 제작한 가이드 사이트 안에 인터렉션 가이드를 임베드할 수 있도록 기능을 추가했습니다.

 또한, 홈페이지에 "노션 웹사이트에 임베드가 가능하다"라는 소개 영역을 추가하고, 메타 태그에 "노션에 인터렉션 가이드를 임베드하세요!"라는 문구를 강조했습니다.

 이렇게 빠르게 서비스를 만들어
실험하고 싶은 능력과 경험을 기르고 싶다면
[노코드로 나만의 서비스 만들기] 강의를 찾아주세요! 
(2기 모집 종료 : ~ 23.11.12)

국내 1위 노션 템플릿 사이트, 노션박스를 인수할 분을 찾습니다.

안녕하세요. 국내 1위 노션 템플릿 사이트, 노션박스를 만든 FameLee입니다.

제목 그대로 노션박스를 구매할 분을 찾고 있습니다.

왜 판매하고 싶나요?

나홀로 사이드 플젝으로 노션박스를 시작한지 벌써 2년이 지났습니다. 서비스는 안정기에 접어들었고 몇 개월 동안 일정한 지표를 보이고 있습니다.

SEO로 검색 키워드를 모두 선점했기에 이제 별다른 액션을 하지 않아도 알아서 굴러가는 서비스가 됐습니다.

현재 상태를 레버리지해서 노션박스를 더 키울 수도 있겠지만, 본업에 더 집중하고 싶단 생각에 노션박스를 정리하려고 합니다.

노션박스 가치

노션박스는 국내 1위 노션 템플릿 사이트입니다.

• SEO 최적화 완료로, 1년 검색 노출 수 111만

• "노션 템플릿" 키워드 선점

• 1년 누적 방문 유저 10만 명 + 검색 유저 비율 72.5%

• 월 MAU 8천 + WAU/MAU 24.4%

• 보유 노션 템플릿 수 120개

노션박스를 레버리지로 삼아 자사 서비스를 더 키울 수 있다고 판단되시는 분이라면, 언제든 편하게 연락주세요.

노션박스에 관한 자세한 정보와 컨택 이메일은 아래 링크에서 확인할 수 있습니다.

[노코드 툴, 버블] 한글 자료가 없어서 직접 만들었습니다.

버블 공식 문서를 한글로 번역하는 작업을 하고 있습니다.

갑자기 번역 작업을 왜 하는거죠?

여기 계신 분들이라면 노코드 툴, 버블을 한 번 쯤 들어봤을 겁니다. 버블은 프론트와 백엔드 작업을 모두 코딩 없이 할 수 있기에 빠르게 초기 서비스를 만드는 데 특화됐습니다.

코딩 작업을 모두 대체하기에 배울 것도 많고, 러닝 커브도 높은 편입니다. 장점과 단점이 확실한 편입니다.

제대로 배운다면 모든 걸 할 수 있지만, 이 "제대로"라는 영역에 도달하기까지 허들이 있습니다.

사실, 러닝 커브가 높다고 말하지만 (1) IT에 대한 제반 지식이 있고 (2) 버블과 관련된 학습 자료만 있다면 빠르게 배울 수 있습니다.

다만, 아직까지 한글로 정리된 자료를 찾기 힘듭니다.

많은 분이 버블을 시작할 때 공식 문서를 많이 참고하지만, 영어로 적힌 방대한 양의 문서를 공부하는 게 쉬운 일은 아닙니다. 특히 저와 같은 영알못이라면 더욱 더,...

참고할 학습 자료가 마땅히 없다보니 버블 학습이 더 어렵게 느껴질 수 밖에 없습니다.

한글 번역본을 공유합니다.

그래서 버블 공식 문서를 한글로 번역하는 작업을 하고 있습니다.
시간이 날 때마다 번역 작업을 진행하고 있으며, 검색을 통해 필요한 정보를 빠르게 찾을 수 있습니다.

아직 작업이 되지 못한 부분이 많지만, 먼저 번역된 내용을 공유하고자 합니다.

🔗 한글 번역본 보러가기

더 확실하게 버블을 배우고 싶다면?

버블을 잘 모르는 분이라면, 독학이 비효율적입니다.

알아둬야 할 내용이 방대한데, 뭐부터 어떻게 공부해야 할지 몰라서 막막할 수 밖에 없습니다.

버블을 압축적으로, 확실하게 배우고 싶은 분들을 위해 "나만의 서비스 만들기" 오프라인 강의를 운영 중입니다.

1기가 성공적으로 마쳤고, 많은 분이 자신만의 서비스를 6주만에 완성하셨습니다.

현재 2기 모집을 하고 있으며 코딩 없이 나만의 서비스를 만드는 스킬을 기르고 싶다면, 강의를 찾아주세요!

그로잉피플 2기 모집 ( ~23.11.12)

얼리버드 좌석이 곧 마감됩니다!

🔗 그로잉피플 바로가기

[SaaS 업데이트 뉴스] 10월 3주차

투두몰에서 다양한 SaaS 툴에 대한 최근 업데이트 및 기능 출시를 매일 확인해서 알려드리고 있습니다.

해외 글을 한글로 요약해 정리해드리니, 자신에게 관심 있는 툴의 최근 업데이트를 매일 확인해보세요!

업데이트를 알려주는 툴

Meta 광고 Bubble Tally Retool Figma Zapier Stibee Notion GoogleAnalytics GoogleSheet

🔗 한 곳에서 모든 SaaS 업데이트를 확인하고 커뮤니티 합류하기

🔗 다양한 SaaS 툴 빠르게 배우러 가기

업데이트 소식

• Meta 광고: X

• Bubble: X

• Tally : X

• Retool : [23.10.19 업데이트 노트] Self-hosted Retool 3.16.1

• Figma : [23.10.20 업데이트 노트] Workspace-level public link settings

• Zapier : X

• Stibee : X

• Notion : [23.10.19 업데이트 노트] 엔터프라이즈 고객을 위한 개선 사항

• Google Analytics : X

• Google Sheet : X

[SaaS 업데이트 뉴스] 10월 2주차

투두몰에서 다양한 SaaS 툴에 대한 최근 업데이트 및 기능 출시를 매일 확인해서 알려드리고 있습니다.

해외 글을 한글로 요약해 정리해드리니, 자신에게 관심 있는 툴의 최근 업데이트를 매일 확인해보세요!

업데이트를 알려주는 툴

Meta 광고 Bubble Tally Retool Figma Zapier Stibee Notion GoogleAnalytics GoogleSheet

🔗 한 곳에서 모든 SaaS 업데이트를 확인하고 커뮤니티 합류하기

🔗 다양한 SaaS 툴 빠르게 배우러 가기

업데이트 소식

Meta 광고

• [23.10.10 업데이트 노트] Reels ads updates: new performance features, automated creative and suitability solutions

Retool

• [23.10.13 업데이트 노트] Cloud-hosted Retool 3.17: October 13, 2023

Figma

• [23.10.11 업데이트 노트] New settings for managing billing

커뮤니티 최근 게시글

Bubble

• 버블에서 Slug 설정을 잊지 마세요!

GoogleAnalytics

• GTM 버튼 트리거가 작동이 안 되는 현상

Notion

• 열 안에 하위 열 만들기

노션 사이트에 [인터렉티브 가이드]를 임베드 해보세요!

ActiveGuide가 트렌딩 프로덕트 1위를 했네요! 생각보다 여러 기업 고객들도 가입을 해주셨고, 사용하시는 분들도 있다보니 만족스럽네요.

사이드 프로젝트를 할 때마다 가설을 몇 개 설정하고 빌드하는데, 어느 정도 검증은 된 거 같아 행복하네요! 앞으로도 시간이 날 때마다 하나하나 디벨롭을 해보려고 합니다.

• [가설 1] 서비스 UI와 직접 인터렉션하면서 배울 수 있는 학습 콘텐츠를 만들면, 유저가 더 재밌게 학습활 수 있다.

• [가설2] SaaS 기업도 유저가 자신의 서비스를 더 잘 사용할 수 있게 만들고 싶어한다.

피드백을 바탕으로 부랴부랴 임베드 기능을 추가했습니다.

가이드를 제작한 후, 자사 사이트나 블로그에 embeded 태그를 추가해 바로 사용할 수 있습니다.

<embed src=“https://activeguide.kr/guide/{id}/?embeded=yes”>

특히, 노션으로 사이트를 운영하는 경우에 임베드 링크를 붙여넣기만 해도 바로 가이드를 사이트에 삽입할 수 있습니다.

신기능 튜토리얼은 아래서 확인할 수 잇습니다.

https://activeguide.kr/guide/1697129232533x626874026409590800

ActiveGuide를 한 번 사용해보고 싶다면 아래 링크를 접속해주세요

https://activeguide.kr/

해당 툴은 오직 노코드 툴만 사용해서 추석 연휴 동안 혼자서 만들었습니다. 이런 서비스를 혼자서 만들어서 배포해보고 싶다면, 아래 노코드 강의를 신청해주세요!

https://www.growingpeople.site/

[SaaS 업데이트 뉴스] 10월 1주차

투두몰에서 다양한 SaaS 툴에 대한 최근 업데이트 및 기능 출시를 매일 확인해서 알려드리고 있습니다.

해외 글을 한글로 요약해 정리해드리니, 자신에게 관심 있는 툴의 최근 업데이트를 매일 확인해보세요!

업데이트를 알려주는 툴

🔗 다양한 SaaS 툴 빠르게 배우러 가기

🔗 SaaS 커뮤니티 합류하기

Meta 광고 Bubble Tally Retool Figma Zapier Stibee Notion GoogleAnalytics GoogleSheet

Meta 광고

[23.10.04 업데이트 노트] Generative AI features for ads coming to all advertisers

Bubble

[23.10.06 업데이트 노트] All About the Official Bubble Developer Certification

[23.10.01 업데이트 노트] Monthly Community Update – October 2023

Tally

[23.10.06 업데이트 노트] Conditional logic update & collapsable sidebar

Retool

[23.10.06 업데이트 노트] Retool Cloud updates for 06 October 2023

[23.10.05 업데이트 노트] Retool Workflows is now generally available

Figma

[23.10.05 업데이트 노트] Little Big Updates Week 5 외 2건

Zapier

-

Stibee

-

Notion

-

Google Analytics

[23.10.03 업데이트 노트] Introducing data redaction

[23.10.02 업데이트 노트] Exclude Google signals data from reports and explorations

Google Sheet

[23.10.06 업데이트 노트] Add emoji reactions to comments in Google Sheets 외 1건

MVP의 딜레마 : 속도 vs 정확성

 자신이 만드는 서비스가 소히 "될 놈"이라는 걸 알기 위해서 MVP를 만들고 시장에 던집니다. MVP는 Minimum Viable Product의 약자로 "최소 기능 제품"을 뜻합니다. MVP의 목적은 빠른 검증으로 (1) 최소한의 비용을 들여 (2) 핵심 기능만을 담아내야 합니다. MVP 개념은 대중화된 덕분에 많은 분이 자신의 서비스를 만들기 전에 "MVP를 만들어서 반응을 봐야겠다!"라는 마인드셋이 기본이 됐습니다.

해본 사람만 아는 MVP의 딜레마

 MVP라는 개념은 '이론적으로' 쉽지만, MVP를 실제로 만들어 본다면 불명료한 답만이 존재한다는 걸 알게 됩니다. 앞서 말했듯 MVP의 목적은 가설의 빠른 검증에 있습니다. 여기서 검증할 가설은 다양한데 크게 아래가 존재합니다.

- 고객 가설 : 서비스의 핵심 고객은 누구일까?
- 문제 가설 : 고객이 겪는 문제는 무엇일까?
- 가치 가설 : 문제를 위해 우리가 제공해야 하는 가치는 무엇일까?
- 솔루션 가설 : 이 가치를 효과적으로 전달하기 위한 방법은 무엇일까?

 집중할 가설을 선택하고, 검증을 준비하고 있을 때 한 가지 의문이 듭니다. 

검증을 위해 어느 수준까지 기능을 구현해야 하지?

 특정 가설을 검증하고 싶은데, 이 가설을 검증하기 위해서 어느 수준의 서비스를 만들어야 하는지 고민에 빠집니다. MVP는 가설을 검증하기 위한 도구이며 바꿔 말해, 가설을 확실하게 검증하지 못하는 MVP는 의미가 없습니다.  현재까지 만든 기능 범위에서 충분하다는 생각이 들면서, 동시에 가설을 확실하게 검증하지 못하리란 불안감이 듭니다. 그렇다고 더 많은 기능을 구현하고자 하니, MVP의 핵심인 최소 비용에 어긋나는 느낌이 듭니다. 실제로 주변 창업을 하는 지인들과 이야기하면, 항상 언급되는 주제기도 한...

다양한 MVP 방법론

1. 컨셉만 제공하는 형태

 유저의 반응을 가장 빠르게 확인할 수 있는 방법이며 랜딩 페이지 실험이 있습니다. 설정한 가설을 기반으로 서비스의 컨셉과 기능을 랜딩 페이지 안에 작성합니다. 그리고, 사전 신청 폼을 삽입해서 가상의 서비스를 실제로 얼마나 많은 유저가 관심을 갖는지 확인합니다. 랜딩 페이지에 들어온 사람 대비 사전 신청자가 많을수록, 서비스가 유효하다고 판단합니다.

  최근에 웹플로우 같이 다양한 랜딩 페이지 제작 툴도 많이 발달해서, 코딩 없이도 퀄리티가 높은 랜딩 페이지를 빠르게 만들 수 있어서 많은 사람들이 선호합니다. 대다수의 창업 강의에선 MVP 방법론으로 랜딩 페이지 제작을 알려주고 있습니다.

 다만, 랜딩 페이지 방법론은 가설 검증이 불확실합니다. 유저들은 랜딩 페이지에 적힌 글만 보고 기능을 유추해야 하며, 이때 우리가 생각한 서비스와 다르게 인지할 수도 있습니다. 또한, 사전 신청자 중에서도 추후 출시한 서비스를 사용하는 비율도 높지 않을 수 있습니다. 즉, 우리가 랜딩 페이지 실험을 통해 확인한 데이터와 검증 결과가 사실 올바르지 않은 데이터일 수 있습니다.

2. 핵심 가치만 제공하는 형태

 결국 가장 확실한 검증은 유저가 서비스를 실제로 인터렉션 하는 걸 전제로 합니다. 다만, 서비스를 처음부터 빌드하는 건 시간이 걸리며 이는 MVP의 "빠른 속도"를 위배합니다. 그래서 서비스를 빌드하는 건 아니지만, 여러 툴을 조합해 핵심 가치만 전달하는 형태로 MVP를 제공할 수 있습니다. 

 예를 들어 특정 타겟에게 필요한 정보를 제공하는 서비스를 만들고자 한다면, 노션에 관련 정보를 적어서 제공할 수 있습니다. 혹은 PDF 등을 활용해 전자책으로 제작해 배포하는 방법도 있습니다. 이러한 방법은 고객, 문제와 가치 가설을 검증하는 데 적합합니다. 다만, 솔루션 가설을 검증하는 데 한계가 있습니다. 가치를 제공하는 방식이 자유롭지 못하게 한정 됐기 때문입니다.

3. 실제 서비스를 제공하는 형태

 MVP 방법론으로 서비스를 만들지 않는 이유는 코딩에 시간이 많이 들어가기 때문입니다. 하지만, 코딩을 하지 않고 서비스를 만들 수 있다면 어떨까요? 단시간에 실제 서비스를 완성하고 배포해 유저들이 직접 사용하게 만드는 게 가장 효과적이고 확실한 검증 방법이 됩니다. 

 다행히 IT 서비스를 코딩 없이 만들 수 있는 노코드 툴이 존재합니다. 노코드 툴을 활용할 수 있다면 화면 작업, 데이터베이스와 로직 구축 등 서비스 출시 및 운영을 위한 전 과정을 코드 없이 진행할 수 있습니다. 또한, 코딩으로 만든 서비스와 동일하게 데이터 트래킹도 가능하기에 유저가 실제로 서비스를 어떻게 사용하는지 알아낼 수 있습니다.

 어떤 방식이 가장 효과적인지 답은 존재하지 않습니다. 다만, 애매한 방법은 검증 결과가 불확실해 나아갈 방향을 명쾌히 알려주지 못하고, 그동안의 시간을 헛되게 만듭니다. 그로잉피플에서 프론트와 백엔드 작업을 모두 코딩 없이 처리하는 노코드 툴, 버블을 알려드리고 있습니다. 진짜 MVP를 만들고 싶다면, 그로잉피플을 찾아주세요

그로잉피플 2기 모집 중 ( ~ 23.11.13)

https://www.growingpeople.site

추석 맞이 노션 템플릿 받아가세요.

소소하게 사이드 프로젝트로 노션 템플릿 사이트, 노션박스를 운영하고 있습니다. 솔직히 말하면, 현생이 바빠서 방치를 해두고 있었지만... 그래도 추석을 맞아 짬내서 새로운 템플릿을 업데이트했습니다. 다들 노션 템플릿으로 갓생하세요!

• [무료] 주간 루틴 관리 템플릿

• [무료] 주간 업무 시간 트래킹 템플릿

• [무료] 포지셔닝 맵 템플릿

• [프리미엄] 과탑 선배의 대학 생활 템플릿

• [프리미엄] 선생님을 위한 온라인 교실 템플릿

https://www.notionbox.kr/template/category/new

오랜만에 지표를 체크했는데, 방치한(?) 사이드 프로젝트 치곤 수치가 괜찮은 거 같습니다. 알아서 잘 굴러가는 서비스를 만든 느낌인데, 계속 놔두기엔 어딘가 찝찝하기도

• 노션박스 런칭 2년

• 지금까지 만든 노션 템플릿이 100개 이상

• 누적 검색 노출 유저가 15만 명, Home PV는 60만

• 소소한 유료 템플릿 판매로 연 매출 천 만원

노션박스는 노코드로 혼자서 만든 툴입니다. 코딩을 할 줄 모르는데, 만들고 싶은 아이디어가 있고 결국 노코드를 파게 됐습니다. 그 동안 쌓은 경험과 노하우를 공유드리고 싶어 노코드로 나만의 서비스를 만드는 강의, 그로잉피플을 현생으로 운영하고 있습니다. 최근 2기 모집을 시작했고, 지금 신청하시면 얼리버드로 참가하실 수 있습니다.

https://www.growingpeople.site/

55만 원에도 팔리는 교육 상품을 만들었습니다.

가치가 있다면, 얼마든지 돈을 낸다

그로잉피플에서 "노코드로 나만의 서비스 만들기 1기"가 시작된 지 벌써 4주가 지났다. 해당 교육 상품을 처음 준비할 때, 걱정이 많았다.

55만 원의 가치를 제공하는 오프라인 강의를 만들 수 있을까?

그로잉피플은 마이플랜잇의 두 번째 교육 서비스다. 첫 번째 교육 서비스인 투두몰은 온라인 학습 서비스로 사람들이 다양한 SaaS 툴을 쉽게 배울 수 있도록, 저렴한 가격을 핵심 가치로 삼았다. 반면, 그로잉피플은 오프라인 교육 서비스로 높은 단가를 지닌다. 이전과 다르게, 교육 상품의 방향이 달라지면서 많은 걱정과 부담이 생겼다. 무엇보다 높은 단가에 걸맞는 가치를 수강생들에게 전달할 수 있을지 걱정이었다.

결론적으로 걱정할 필요가 없었다. 사람들은 가격에 상응하는 가치를 제공한다면, 얼마가 됐든 간에 결제를 한다.

55만 원짜리 강의도 자신에게 필요하다고 생각하면 결제한다.

수강생들 중에는 강의가 너무 저렴하다고 생각한 분들도 있다.

오프라인 일정이 맞지 않아서, 온라인으로라도 듣고 싶은 분들이 존재한다.

누구나 서비스를 만들고 싶은 욕망이 있다.

그로잉피플의 강의를 기획할 때, 어떤 주제를 선정할지 고민이었다. 다양한 아이디어가 나왔고, 주된 판단 기준은 "사람들이 그만큼 돈을 낼까?"였다. 단가가 높은 만큼, 사람들이 정말 배우고자 하는 주제를 다뤄야 했다. 고민 끝에 주목한 강의 주제는 "서비스 런칭"이엿다. 지코의 노래처럼 우리 모두는 아티스트다. 누구나 아이디어를 갖고 있고, 이 아이디어를 실현시켜 줄 서비스를 만들고 싶어 한다. 사이드 프로젝트, 스텔스 창업 같은 키워드가 이 모습을 대변한다.

이런 아이디어를 서비스로 만들 수 있지 않을까...?

하지만, 코딩이란 장벽을 넘기 힘들다. 코딩을 할 줄 아는 비율은 현저히 적으며, 그렇다고 함께 할 개발자를 구하기도 어렵다. 결국, 현실적 제약으로 아이디어를 상상으로 그치는 분들이 많다. 이런 분들에게 코딩을 사용하지 않고 서비스를 만들 수 있는 법을 알려준다면, 돈을 내면서까지 배우고 싶어 하지 않을까?

검증하고자 한 가설로 "많은 사람들이 나만의 서비스를 만들고 싶지만, 코딩을 모르기에 만들지 못한다. 따라서, 코딩 없이 서비스를 만드는 과정을 모두 알려주면, 높은 비용이라도 지불할 것이다."였다. 그리고, 이 가설은 현재 수강생과 이야기를 나눠보며, 완벽히 맞아떨어짐을 느꼈다. 대부분이 자신이 만들고자 한 서비스가 뚜렷했다. 중계 플랫폼, SaaS 정보 서비스, 게임 매칭 서비스, 구직자 커피챗 서비스 등 다양했다.

Q. 어쩌다가 그로잉피플을 알게 된 거예요?

A. 오래전부터 생각한 서비스가 있는데, 코딩을 배우는 건 무리일 거 같아서 포기했었어요. 그러다 SNS에서 광고를 보고, 바로 신청했어요.

진짜 '노코드'를 알려주는 강의

시중의 노코드 강의를 보면, 대다수가 조작이 쉬운 노코드 툴을 활용해 랜딩 페이지를 만드는 데 그친다. 일부는 심화 과정으로 Zapier를 활용해 자동화 로직까지 만들기도 한다. 이런 유형의 노코드 강의는 빠르게 배워서 써먹을 수 있지만, 수많은 유저들이 실제로 이용하는 서비스를 만들기 어렵다. 결국, 랜딩 페이지를 만든 이후에 실제 서비스를 만들려면, 다시 코딩으로 회귀해야 한다.

강의의 목표는 "수강생이 실제로 서비스를 만들어 보는 것"이다. 따라서, 랜딩 페이지를 넘어 완전히 동작하는 IT 서비스를 만들 수 있는 노코드 툴을 알려줘야 했다. 그래서 높은 자유도와 뛰어난 완성도를 지닌 버블(Bubble)을 다루기로 했다. 버블은 프론트와 백엔드 작업을 모두 코드 없이 처리하도록 도와주기에, 웬만한 IT 서비스는 모두 버블로 만들 수 있다. 다만, 모든 코딩 작업을 대체하기에 러닝 커브가 높고, 국내에는 관련 자료를 찾기도 힘들다. 그렇기에 우리가 준비한 강의가 더 매력적으로 느껴지리라 확신했다.

서비스 런칭의 AtoZ를 알려주는 강의

하나의 서비스를 완성시키기까지 많은 과정을 거친다. 고객과 이들의 문제를 정의하고, 서비스에서 구현해야 하는 기능을 정의해야 한다. 이후, 와이어프레임과 화면 설계서를 작성해 서비스 청사진을 그리고, 디자인 작업을 거쳐 UI을 완성한다. 이렇게 만든 UI를 화면으로 구현하고, 데이터베이스를 구축하며, 뷰 로직과 비즈니스 로직을 구현해야 한다.

서비스를 만들었다고 해서 끝난 게 아니다. 이후에는 서비스를 지속적으로 개선할 수 있는 액션이 필요하다. 지속적으로 서비스를 개선하기 위해선 데이터를 수집하고 분석할 수 있는 환경도 필요하고, 서비스 홍보를 위한 SEO 작업이나 SNS 타겟 광고도 준비해야 한다.

각 영역에 필요한 업무를 하나하나 찾아서 배우는 건 리소스가 많이 낭비된다. 더군다나 경험이 아예 없는 영역이라면, 무엇을 어떻게 찾아서 배울지도 모른다. 단순히 서비스를 만드는 데 그치는 게 아니라, 지속적으로 운영해 개선하는 법을 알려주도록 강의를 구성했다.

내가 가장 자신 있는 강의

그로잉피플에서 준비한 강의는 내가 가장 자신 있는 영역이기도 하다. 이번 강의는 그 동안의 모든 경험이 레버리지로 작동 됐다. 버블이 국내에 알려지기 전부터 찾아서 사용을 했고, 버블로 여러 서비스를 혼자서 만들어 봤다. 공식 문서와 포럼도 하나하나 뜯어보며, 버블의 작동 원리나 심화 기능도 틈틈이 공부하고 있다. 국내에서 가장 버블을 잘 아는 사람이라고 자부할 수 있다.

오랫동안 혼자서 다양한 사이드 프로젝트를 했고, 여러 서비스를 출시해봤다. 노코드로 서비스를 완성하는 것 외에도 데이터 트래킹, SEO, 마케팅도 모두 혼자서 해왔기에 서비스 런칭에 필요한 업무를 전반적으로 알고 있다.

이번 1기에서 얻은 인사이트를 기반으로 2기에서 더 많은 사람들이 자신의 서비스를 완성할 수 있도록 강의를 준비하고 있다. 언젠가는 한 번의 강의를 끝냈을 때, 수십 개의 서비스가 나타나는 날이 오지 않을까?

현재 2기 사전 알림을 받고 있습니다.
곧 2기 모집이 시작되며, 사전 알림을 신청한 분들에겐 특별한 혜택이 제공됩니다

chatGPT와 waveon으로 유형 테스트 만들기

1. 제작 방향과 툴 결정하기  
2. 테스트 로직 설계하기  
3. 유형 테스트 제작하기  

 노코드를 활용한 '나만의 IT 서비스 만들기' 강의 1기가 시작된 지 벌써 2주가 지났다. 오프라인 기수제로 운운영되기에 강의를 오픈하려면 최소 수강 인원이 모여야 했다. 교육 상품의 단가가 어느 정도 있기도 하고, 페이드 마케팅도 큰 비용을 지불하지 않았기에 모집이 잘 될지 걱정이었다. 

 하지만, 걱정이 무색하게도 많은 분이 관심을 가져주셨고, 1기 수강생을 성공적으로 모집했다. 2기 사전 알림 신청도 계속 받고 있는데 벌써 30명이 넘은 걸 보면, 우리가 준비한 교육 상품이 가치가 충분히 있음을 느끼고 있다. 

 수강생 모집을 위해 다양한 활동을 했는데, 가장 기억에 남은 건 유형 테스트 마케팅이었다. chatGPT와 노코드 툴, waveon을 함께 사용해 하루 만에 유형 테스트를 제작해 배포했는데, 새로운 툴을 익힌 게 재밌어서 기록을 남겨본다.

제작 방향과 툴 결정하기

1. 강의 컨셉에 맞도록

 유형 테스트를 만든 이유는 모집 종료일이 얼마 남지 않은 시점에서 바이럴을 태우기 위해서였다. 다만, 바이럴뿐만 아니라 서비스 전환도 간과할 순 없었다. 이전에도 유형 테스트로 마케팅을 돌린 적이 있는데, 바이럴은 컸지만 서비스 전환은 높지 않았다. 즉, 많은 사람이 테스트를 공유하고 열심히 참가하지만, 서비스 사이트에는 접속하지 않고 이탈했다. 

 유형 테스트를 완료한 사람이 강의 사이트에 접속하게 만드는 방법을 고민했고, 유형 테스트를 강의 컨셉에 맞추기로 했다. 나만의 서비스를 만든다는 강의에 맞춰서 "내가 서비스 메이커라면, 어떤 서비스를 만들까?"를 유형 테스트의 주제로 삼고, 결과 페이지에서 다양한 서비스를 보여주기로 기획했다. 그리고, 하단에 이와 같은 서비스를 강의에서 함께 만들 수 있음을 보여줘 전환을 높이려고 했다. 

2. 스모어 vs 웨이브온

 처음엔 도다의 스모어를 사용해 유형 테스트를 제작하려고 했었다. 이전에 팀의 마케팅 수단으로 유형 테스트를 제작하기 위해 사용한 적이 있는데 인터렉티브 폼의 디자인도 이쁘게 뽑히고, 로직 설정도 직관적이어서 좋았다.

 결론적으로 스모어는 사용하지 않았다. 유형 테스트는 바이럴이 핵심인 만큼, 결과 페이지의 공유 기능이 가장 중요하다. 스모어에서 공유 기능을 사용하려면 유료 플랜을 이용해야 하는데, 강의의 모집 종료일이 얼마 남지 않은 상태에서 돈을 사용하는 게 어딘가 아까웠다.

 다른 유형 테스트 제작 툴을 찾다가, waveon을 알게 됐다. 찾아보니, SNS 공유 기능이 무료 플랜에서도 사용할 수 있어서 주저하지 않고 선택했다.

 스모어와 웨이브온을 모두 사용한 입장에서 봤을 때, 둘의 포지션은 명확히 다르다. 요약하면, 스모어는 유형 테스트 툴이고, 웨이브온은 노코드 툴이다. 웨이브온으로 유형 테스트를 만들 수 있지만, 스모어에 비해서 작업 시간이 길었다. 하지만, 그만큼 자유도가 있는 편이라서 시간을 쏟으면, 스모어보다 더 입체적인 폼 디자인이 가능하다. 결국, 절대적으로 완벽한 툴은 없고, 상황에 따라 맞는 툴만이 존재한 셈이다. 

테스트 로직 설계하기

1. 로직 방향 설정하기

 유형 테스트의 방향과 제작 툴을 선택했으니, 그 다음에 로직을 고민했다. 솔직히 말해 유형 테스트를 짜는 게 쉬울 줄 알았는데, 막상 로직을 설계하려니깐 답이 보이지 않았다. (1) 어떤 문항을 물어봐야 하고, (2) 점수는 어떻게 측정할 것이며, (3) 각 점수에 따라 결과를 어떻게 보여줘야 할지 감이 잡히지 않았다. 

 그러다가, MBTI 검사 로직을 차용하기로 했다. MBTI 검사 로직은 (1) E/I, N/S, T/F, J/P를 구분하는 문항을 물어보고 (2) 응답에 따라서 유형 점수를 매기며 (3) 최종 점수에 기반해 MBTI 결과 값을 보여준다. 로직은 이와 동일하게 가되, 결과 페이지에는 해당 MBTI가 좋아하는 서비스를 보여주기로 했다. 예를 들어, 점수 상으로 ENFJ가 나왔다면, ENFJ가 만들면 좋아할 것 같은 서비스를 보여주면 된다.

2. 결과 페이지 설계하기

 우선, 결과 페이지를 먼저 기획하기로 했다. 결과 값으로 MBTI 별로 좋아하는 서비스를 보여주면 되는데, 16개의 MBTI, 각각 어떤 서비스를 좋아하는지 검색해서 찾는 건 시간이 오래 걸린다. 따라서, 시간을 줄이고자 chatGPT를 사용했다. 

  결과 페이지에서 가장 메인으로 보여줄 정보는 "내가 서비스를 만든다면, 어떤 서비스를 만들까?"이다. 이를 위해 chatGPT한테 각 MBTI 별로 어울리는 서비스를 추천해 달라고 요청했다.

 chatGPT의 응답에서 서비스의 핵심 키워드를 추출하고, 해당 키워드를 봤을 때 가장 먼저 떠오르는 서비스를 결과 값으로 정했다.  예를 들어, ESTP는 모험을 떠나는 사업가 유형으로 여행, 운동, 활동이 관심 서비스의 핵심 키워드로 나왔다. 여행과 활동이란 키워드에 맞는 에어비엔비를 결과 값으로 골랐다.

 결과 페이지에서 응답자가 어떤 서비스를 만들면 좋을지 추천하는 것 외에도 (1) 응답자의 성향과 (2) 추천받은 서비스에 대한 설명을 적기로 했다. 이 부분도 검색 리소스를 줄이기 위해 chatGPT를 활용했다. 

 응답자의 성향을 글로만 보여주는 건 재미가 없을 것 같아서 서비스 제작과 연관된 5가지 지표를 선정하고, chatGPT한테 요청해 MBTI 별 점수도 도출했다. 이런 식으로 chatGPT한테 도움을 받아 결과 페이지에서 어떤 값을 보여줄지를 모두 결정했다. 

3. 문항 페이지 설계하기

 결과 페이지 기획을 완료했으니, 그다음 문항 페이지를 고민했다. 마찬가지로, chatGPT한테 MBTI를 판단할 수 있는 문항 추천을 요구했다.

 chatGPT가 알려준 바를 큰 결로 잡고, (1) 각 유형의 점수를 측정할 수 있는 문항과 (2) 응답에 따른 점수 변화를 픽스했다. 문항의 개수는 각 유형(E/I, S/N, T/F, P/J)마다 3개의 문항으로 총 12개를 설정했다. 유형 별 문항이 홀수가 돼야, 서로 다른 유형이 동점을 이루지 않기 때문이다.

유형 테스트 제작하기

1. 결과 페이지 제작

 로직을 모두 설계했으니, waveon에서 바로 작업을 진행했다. 우선 결과 페이지를 먼저 작업했다. 앞선 chatGPT한테 물어본 바를 바탕으로 16개의 결과 페이지를 만들었고, 각 페이지마다 관련된 서비스 정보를 입력했다. 좌측 패널을 보면, 각 MBTI 별 페이지가 존재하는 걸 볼 수 있다. 

 그리고, 페이지 최하단에 결과 페이지에서 확인한 서비스를 강의에서 만들 수 있다는 문구를 박으며, 전환을 유도했다. 웨이브온에서는 우측 패널에서 로직을 관리하며, 버튼을 클릭했을 때 특정 URL로 이동하는 로직이 설정된 걸 볼 수 있다. 

2. 문항 페이지 제작

 사전에 설정한 문항에 맞춰서 총 12개의 문항 페이지를 제작했다. 우측 로직 패널을 보면, 상단 버튼을 클릭 시에 score_s가 +1이 되도록 설정된 걸 볼 수 있다. 이는 해당 문항이 S/N을 구분하는 문항이고, 위쪽 응답이 S의 응답 점수로 관련 점수를 추가해야 하기 때문이다.

 이어서 현재 측정된 점수를 확인해 (1) MBTI 값을 도출하고 (2) 관련 결과 페이지로 이동시키는 로딩 페이지를 만들었다. 우측 로직을 보면, E/I, S/N, T/F, P/J 각각의 점수가 몇 점인지 확인하고, 이에 맞춰서 결과 페이지로 이동하게 만든 걸 볼 수 있다.

3. 링크 공유 설정

 유형 테스트에 들어왔을 때, 가장 먼저 보이는 메인 페이지 작업을 완료하고, 링크 공유 시, 해당 유형 테스트의 정보를 확인할 수 있도록 타이틀과 썸네일을 설정하고 배포 처리를 완료했다.

 chatGPT가 처음 나왔을 때, AI에 의존하면 정보를 탐색하고 분석하는 능력이 떨어질 것 같아 일부로 멀리했다. 하지만, 막상 써보니깐 정보 검색 등의 노가다(?) 업무에 큰 도움을 받고, 정보를 해석하고 소화시키는 데 더 많은 시간을 쏟을 수 있었다. 결국, 미래에는 툴을 얼마나 잘 활용하느냐의 싸움이 되지 않을까? 

비개발자도 노코드로 하루 만에 서비스 런칭합니다 (3)

 그로잉피플의 강의 커리큘럼을 따라 24시간 만에 올인원 링크 관리 솔루션, 브릿지링크라는 서비스를 완성해 배포했습니다. 그로잉피플에서 서비스 기획부터 UI 디자인, 노코드 개발까지 모든 과정을 함께 해보면, 노베이스인 사람도 IT 서비스를 혼자서 만들 수 있습니다.

🔥 이번 주 강의 모집이 종료됩니다. (~ 23.08.27)
친구와 함께 수강하면, 페이백을 드려요!

목차 
1. 버블로 데이터베이스 구축하기  
2. 서비스 로직과 shortURL 기능 구현하기  
3. 완성된 서비스 배포하기  
4. 총 소요 시간 분석하기  

버블로 데이터베이스 구축하기

1. 데이터 모델링하기

 이전 글에서 프론트엔드 작업을 끝냈으니, 백엔드 작업을 시작했습니다. 프론트엔드 작업을 위해 UI 디자인 작업이 선행됐다면, 백엔드 작업을 위해서 데이터베이스 모델링이 선행돼야 합니다.

 데이터베이스 모델링을 위해 아래의 질문을 던졌습니다.

• 어떤 개체가 필요한가?

• 개별 개체의 속성은 무엇인가?

• 개체 사이의 관계는 어떻게 되는가?

 여기서 개체(entity)는 ‘정의 가능한 사물 또는 개념’으로, 데이터베이스에서 테이블(table)로 대변됩니다. 속성(attribute)은 ‘개체가 갖고 있는 정보의 유형’으로, 테이블의 컬럼(column)으로 대변됩니다.

2. 개체, 속성과 관계수 정의하기

 브릿지링크의 플로우 차트를 참고해 어떤 개체가 필요한지 정의했습니다. 전반적인 서비스 프로세스는 (1) 업무 공간에 여러 팀원을 초대하고 (2) 공간에서 URL과 UTM을 등록하며 (3) 배포 링크를 생성합니다. 이때, 필요한 경우에 (4) ShortURL을 생성하고 썸네일 등을 별도 설정합니다.

설명을 기준으로 도출한 개체와 개체 별 속성은 다음과 같습니다.

 마지막으로 서로 다른 개체가 어떠한 관계 수를 맺고 있는지 생각했습니다. 예를 들어, 1개의 워크스페이스는 N명의 유저와 관계를 맺을 수 있습니다. 반대로, 1명의 유저는 N개의 워크스페이스에 참가할 수 있습니다. 이런 경우에 유저와 워크스페이스는 N:N의 관계를 맺고 있다고 말합니다.

3. 데이터베이스 구현하기

 버블에서 클릭 몇 번으로 데이터베이스를 구현할 수 있습니다. 앞서 도출한 개체와 속성에 맞춰 테이블과 속성을 생성했습니다.

 이렇게 생성한 테이블의 데이터는 버블에서 확인할 수 있습니다.

서비스 로직 구현하기

1. 페이지 이동 로직 구현하기

 데이터베이스를 구현했으니, 이제 서비스 작동 로직을 처리할 차례입니다. 버블의 로직은 워크플로우 형태로 존재합니다. 워크플로우는 (1) 트리거 이벤트와 (2) 액션 이벤트로 구성되며, 트리거 이벤트가 작동되면, 연결된 일련의 액션 이벤트가 작동됩니다. 예를 들어 서비스에서 특정 이미지나 버튼을 클릭하면, 다른 페이지로 이동됩니다. 여기서 트리거 이벤트는 “특정 이미지나 버튼의 클릭”이고, 액션 이벤트는 “지정한 페이지로 이동”이 됩니다.

 로직은 간단한 것부터 작업을 시작하기로 했습니다. 가장 먼저 작업한 기능은 페이지 이동 로직입니다. 해당 로직은 특정 요소를 클릭하면, 페이지를 이동하게끔 설정만 하면 됩니다.

 버튼을 클릭했을 때, 특정 페이지로 이동하는 워크플로우를 만들었습니다. 워크플로우를 생성하고, 트리거 이벤트로 “시작하기 버튼 클릭”를, 액션 이벤트로 “페이지 이동”을 설정하면 페이지 이동 로직이 구현됩니다.

2. 데이터 로직 구현하기

 CRUD는 데이터 로직인 Create, Read, Update, Delete의 줄임말입니다. 이 중에서 데이터 호출 로직(Read)을 먼저 처리했습니다. 그래야 데이터 생성, 수정 및 삭제 로직의 결과를 바로 확인해서 로직에 오류가 있는지 바로 확인할 수 있기 때문입니다.   

• Create : 데이터를 새로 생성하는 로직

• Read : 기존 데이터를 호출하는 로직

• Update : 기존 데이터를 수정하는 로직

• Delete : 기존 데이터를 삭제하는 로직

 텍스트, 이미지 등의 요소로 데이터베이스에 저장된 데이터를 불러올 때, Dynamic data 기능을 사용합니다. 이는 현재 페이지, 데이터베이스, 유저 정보 등을 변수 값으로 활용할 수 있는 기능으로, 사용한 변수 값은 파란색 글씨로 표기됩니다. 아래에 적힌 Current page’s workspace’name는 현재 페이지와 관련된 워크스페이스 데이터에서 name 값을 불러옴을 뜻합니다. 이런 식으로 모든 요소에 필요한 데이터를 호출했습니다.

 호출 로직을 처리한 후, 데이터의 생성(Create), 수정(Update)과 삭제(Delete) 로직을 구현했으며, 이때 케이스 별 로직 처리를 고려해야 합니다. 예를 들어, URL 데이터를 생성할 때, 무작정 입력한 모든 값을 URL로 등록하면 안 됩니다. 현재 워크스페이스에 이미 등록된 URL이라면, 이를 등록하지 못하게 막아둬야 합니다.

 앞선 예시에서는 동일한 버튼을 클릭했지만, 조건에 따라 다른 결과가 나왔습니다. 바꿔 말해, 트리거 이벤트는 동일하지만, 액션 이벤트만 다릅니다. 이런 경우에 하나의 워크플로우 안에 조건 별 액션 이벤트를 따로 설정하면 됩니다.

3. shortURL 구현하기

 마지막으로 생성한 shortURL로 유저가 접속할 시, 연결된 링크로 리다이렉트를 시키는 로직을 구현했습니다. bitly 같은 단축 URL 서비스의 작동 원리는 아래와 같습니다.   

• 1. 유저가 Short URL을 클릭해 페이지 접속

• 2. Short URL과 연결된 Original URL를 데이터베이스에서 확인

• 3. Original URL 값을 호출

• 4. 해당 URL로 페이지 리다이렉트

 우선 Short URL을 클릭했을 때 나오는 빈 페이지를 생성했습니다. 그리고, 혹시 인터넷 문제로 리다이렉트가 지연될 경우에 유저에게 로딩 중이란 느낌을 줄 수 있도록, HTML 코드를 활용해 애니메이션 요소를 직접 생성했습니다. 버블의 기본 요소 중에 HTML 요소가 있는데, HTML 코드를 직접 입력해 요소를 생성할 수 있습니다.

 그다음으로 페이지의 Title, Description과 Thumbnail Img를 유저가 설정한 데이터를 불러와 설정되게 만들었습니다. 이제 카카오, 슬랙 등의 채널에서 shortURL 링크를 공유했을 때, 설정한 값이 유저에게 보입니다.

 마지막으로 페이지의 HTML Header에 연결된 링크를 불러온 후, 여기로 리다이렉트 시키는 메타 태그를 입력했습니다. 이제 페이지에 들어오면, 호출된 링크로 리다이렉트가 됩니다.

완성된 서비스 배포하기

1. GA 연결하기

 이제 서비스 제작이 완료됐으니, 배포를 준비할 차례입니다. 유저들이 서비스를 어떻게 사용하는지 파악하기 위해 GA를 연결했습니다. 버블의 설정 페이지에서 현재 서비스를 구성하는 모든 페이지의 <Head>와 <body>에 코드를 삽입할 수 있습니다. 여기에 생성한 GA 계정의 트래킹 코드를 삽입하면 됩니다.

2. 링크 설정

초기에 서비스를 홍보할 때, 커뮤니티나 주변 지인에게 링크를 공유하는 방식을 사용합니다. 이때, 채널에서 자동으로 링크에 저장된 썸네일, 타이틀, 디스크립션 값을 불러와서 보여줍니다. 썸네일 이미지와 문구가 얼마나 매력적인지에 따라서 유저의 클릭율도 달라집니다.

 설정 페이지에서 링크 공유 시 보여주는 기본 값을 설정할 수 있습니다. 썸네일 이미지로 서비스의 핵심 기능을 담은 목업을 설정하고, 타이틀에는 서비스 이름을, 디스크립션에는 서비스의 제공 기능을 요약해서 적었습니다. 

3. 자체 도메인 연결

 버블은 작업한 서비스에 bubbleapps.io라는 도메인을 기본 제공합니다. 예를 들어, 서비스 이름이 bridgelink라면, 서비스 URL은 bridgelink.bubbleapps.io이 됩니다. 기본 도메인이 마음에 들지 않는다면, 직접 구매한 도메인을 연결할 수도 있습니다. ShortURL 기능에서 bubbleapps.io 도메인은 길이가 길다고 판단해, 별도로 도메인을 구매해 사용하기로 했습니다. 어떤 도메인을 사용할까 고민하다, “Cloud”라는 도메인이 “링크를 공유한다”는 컨셉에 부합해 이를 구매해서 연결했습니다.

 모든 세팅을 완료하고, 최종적으로 서비스를 배포했습니다. 버블은 유료 플랜에서 Dev와 Live 버전 서비스를 지원합니다. 이 둘은 독립적으로 존재하며, Dev는 개발용이고 Live는 유저용 서비스라 보면 됩니다. 버블에서 작업한 부분은 실시간으로 Dev에 반영됩니다. 작업을 완료한 Dev 버전을 배포하면, 그제야 Live 버전에 적용됩니다.

총 소요 시간 분석하기

 약 24시간 만에 브릿지링크 서비스를 만들면서, 어떤 업무에서 시간이 많이 소요됐는지를 체크해 봤습니다. UI 디자인에서 가장 오랜 시간이 걸렸고, 그다음으로 프론트엔드 작업과 로직 설정에서  걸렸습니다. 로직 설정에서 시간이 걸린 이유는 케이스에 따른 로직을 고려해야 했기 때문입니다.

 노코드로 방법론의 가장 큰 장점은 ‘가장 많은 걸 알고 있는 사람’이 모든 것을 다 결정하고 행동할 수 있다는 점입니다. 기획자, 디자이너, 개발자가 서로 협업하는 경우, 각자가 알고 있는 정보를 동기화하는 데 시간이 소요되고, 잘못된 정보 동기화로 이상한 결과물이 나올 수 있습니다. 하지만, 노코드 개발 방법은 기획부터 디자인과 개발까지 혼자서 처리할 수 있기에, 커뮤니케이션 오류와 비효율성이 전혀 발생하지 않습니다. 결과적으로, 일관적인 방향으로 서비스를 디벨롭할 수 있습니다. 

🔥 이번 주 강의 모집이 종료됩니다. (~ 23.08.27)
친구와 함께 수강하면, 페이백을 드려요!

버블로 만든 서비스, 브릿지 링크를 아래서 확인할 수 있습니다.

비개발자도 노코드로 하루 만에 서비스 런칭합니다 (2)

직접 준비한 그로잉피플의 강의 커리큘럼을 따라 24시간 만에 올인원 링크 관리 솔루션, 브릿지링크라는 서비스를 완성해 배포했습니다.

그로잉피플에서 서비스 기획부터 UI 디자인, 노코드 개발까지 모든 과정을 함께 해보면, 노베이스인 사람도 IT 서비스를 혼자서 만들 수 있습니다.

목차 
1. UI 작업을 위한 서비스 기획하기 
2. 디자인 키트로 서비스 UI 완성하기 
3. 노코드 툴, 버블로 서비스 화면 구현하기  

그로잉피플에서 노코드로 나만의 서비스를 만들어봐요!
친구와 함께 하는 페이백 이벤트도 진행 중입니다.

UI 작업을 위한 서비스 기획하기

1. 서비스 컨셉 정하기

 이전 글에서 솔루션의 큰 방향을 잡았으니, 본격적인 서비스 기획에 들어갔습니다. 가장 먼저 도출한 솔루션의 방향을 중심으로 서비스 컨셉을 먼저 정했습니다. 컨셉은 기획의 중심으로 작용해 서비스의 디테일을 일관적인 방향으로 잡도록 도와줍니다. 

 도출한 솔루션 방향을 확인해 보니, 마케터의 링크 관리 업무의 시작부터 끝까지를 다루고 있습니다. (1) 관리 공간에서 UTM과 URL을 등록하고, (2) 이를 불러와서 배포 링크를 생성하고 (3) 제목, 썸네일을 따로 변경해 ShortURL을 만드는 흐름이 그려집니다.

 이 흐름에 착안해 서비스 컨셉을 “올인원 링크 관리 솔루션”으로, 캐치프레이즈를 “한 곳에서 끝내는 링크 관리”로 잡았습니다. 그리고, 다양한 링크를 연결한다는 의미로 “브릿지링크”를 서비스명으로 설정했습니다.

2. 플로우차트와 IA 그리기

 ‘한 곳에서 끝내는 링크 관리’로 포지셔닝한 이상, 서비스가 링크 관리에 필요한 업무를 일련의 흐름에 따라 처리하할 수 있도록 도와줘야 했습니다. 서비스의 플로우 차트(Flow Chart)를 직접 그려보며, 유저의 링크 관리 업무를 어떤 흐름으로 가지고 가야 할지 스케치했습니다.

 그다음으로 IA(Information Architecture)를 그려보며, 서비스가 어떤 구조로 이루어질지 생각했습니다. IA는 정보 구조도(Information Architecture)로 웹, 앱, 소프트웨어 등 IT 서비스의 구조를 설계한 문서를 뜻합니다. 앞서 만든 플로우 차트를 참고해 어떤 페이지가 필요하고, 각 페이지에는 어떤 정보가 들어갈지 간략히 정리했습니다.

디자인 키트로 서비스 UI 완성하기

1. 디자인 키트란?

 서비스 기획을 완료하고, 화면 UI 작업에 들어갔습니다. 일반적으로 와이어프레임을 만든 후에 UI 디자인 작업에 들어가지만, 디자인 키트가 있기에 바로 UI 작업을 시작했습니다. 그로잉피플에서는 디자인을 모른 사람도 UI 퀄리티가 높은 서비스를 만들 수 있도록, 디자인 키트를 함께 제공합니다. 디자인 키트는 디자인을 더 쉽고 빠르게 할 수 있도록 도와주는 도구 모음입니다. 피그마 로컬 파일로 제공되며, 이를 불러와 자신의 계정에서 바로 사용할 수 있습니다.

키트 구성 요소
- 컴포넌트 시스템
- 폰트 시스템
- 컬러 시스템
- 아이콘 시스템

2. 컬러와 폰트 선택하기

 디자인 경험이 없는 사람에게 (1) 컬러 선택과 (2) 폰트 선택이 가장 힘든 일입니다. 다행히(?)도, 그로잉피플의 디자인 키트에는 바로 사용할 수 있는 컬러 시스템과 폰트 시스템이 존재합니다. 디.알.못이기에 기존 컬러 시스템과 폰트 시스템을 그대로 사용하기로 했습니다.

3. 컴포넌트를 조합해 UI 완성하기

 디자인 키트에는 입력 필드, 드랍박스 등 약 200개의 컴포넌트도 제공합니다. 제공받은 컴포넌트 중 필요한 것을 선택해 조합을 하면 UI를 쉽게 완성할 수 있습니다.

 컴포넌트를 조합해 UI 작업을 진행했습니다. 이 부분에서 가장 오랜 시간이 걸렸지만, 그래도 디.알.못인 저에게 만족스러운 UI 결과물이 탄생했습니다.

노코드 툴, 버블로 서비스 화면 구현하기

1. 버블이란?

 자신의 아이디어를 현실로 만들 때, 가장 큰 허들이 바로 ‘코딩’입니다. 배우기도 어려운데, 그만큼 시간을 투자하기 힘들기 때문입니다. 하지만, 최근에 노코드 툴이 떠오르면서 이제 코딩을 몰라도 누구나 서비스를 만들 수 있게 됐습니다. 클릭, 드래그 앤 드랍만으로 서비스를 만드는 시대가 도래했습니다.

 버블(Bubble)은 해외에서 유명한 노코드 툴입니다. 다양하고 많은 노코드 툴이 있지만, 이 중에서 버블만큼 높은 화면 자유도를 가진 툴은 없습니다. 대다수의 노코드 툴은 레이아웃이 정해져 있거나 컴포넌트도 고정된 형태를 지닙니다. 선택지가 적은 만큼 서비스를 쉽고 빠르게 만들 수 있지만, 그만큼 자신이 생각한 바를 완벽하게 서비스에 담아내기 힘듭니다. 이와 다르게, 피그마로 디자인하는 것처럼, 버블은 컴포넌트를 자유롭게 만들고 배치할 수 있기에 자신이 생각한 화면을 그대로 만들어 낼 수 있습니다.

2. 디자인 시스템 세팅하기

 버블은 자유도가 높은 만큼, 서비스를 만드는 데 오랜 시간이 걸립니다. 페이지와 컴포넌트마다 스타일 값, 마진, 패딩 등을 하나하나 설정해줘야 하기 때문입니다. 다만, 버블의 디자인 시스템 기능을 활용하면, 작업 시간을 기하급수적으로 단축시킬 수 있습니다. 서비스 개발에 드는 시간을 줄이기 위하 디자인 시스템기능을 적극적으로 활용했습니다. 

 버블의 디자인 시스템으로 (1) 컬러 스타일과 (2) 컴포넌트 스타일이 있습니다. 여기에 한 번 등록한 설정 값은 작업하는 도중에 바로 불러와 적용할 수 있습니다. 반복적으로 사용하는 설정 값은 매번 입력할 필요 없이 불러오기만 하면 됩니다. 전체적인 디자인을 변경해야 하는 경우, 디자인 시스템 자체를 바꾸면 모든 컴포넌트에 일괄 적용되기에 유지 보수에도 편리합니다. 디자인 키트에서 사용한 컬러 시스템의 헥사 코드를 그대로 등록하고, UI를 만들 때 사용한 컴포넌트도 스타일 값으로 등록했습니다.

3. 페이지 UI 작업하기

 디자인 시스템을 세팅했으니, 바로 화면 작업을 시작했습니다. 우선, 스케치한 IA를 기준으로 개별 페이지를 생성했습니다. 버블은 크게 (1) 배경 화면인 ‘페이지’와 (2) 페이지 내부를 구성하는 컴포넌트인 ‘요소’로 구성됩니다.

 그다음으로 작업한 UI 작업물에 따라 개별 페이지에 필요한 요소를 생성해 배치했습니다. 버블의 프론트엔드 작업은 (1) 클릭과 (2) 드래그 앤 드랍으로 끝이 납니다. 요소 생성 창에서 인풋 필드, 텍스트 필드 등을 클릭해 페이지 안으로 드래그하면, 페이지 안에서 바로 생성됩니다. 

 생성한 요소를 클릭하면, 바로 설정 창이 나옵니다. 배치한 요소에 앞서 생성한 디자인 시스템을 불러와 값을 적용하면서, 프론트 작업이 끝납니다. 이제 UI 디자인물과 똑같은 서비스 화면이 완성됐습니다.

4. 반응형 작업하기

  버블은 PC, Tablet, Mobile에서 모두 대응 가능한 반응형 서비스를 만들 수 있습니다. 반응형 서비스란 유저가 접속한 디바이스에 맞춰서 UI 요소들의 크기, 위치 등이 자동으로 조정되는 서비스입니다. 

 우선, 모든 요소의 width를 px 단위에서 % 단위로 맞췄습니다. 그러면, 해당 요소의 Width는 상위 그룹 요소의 Width에서 입력한 %가 적용된 값으로 자동 조정됩니다. 예를 들어 상위 그룹 요소의 width가 1024px이고 하위 요소의 width가 50%라면, 적용되는 width 값은 512px이 됩니다.

 PC의 넓은 화면에 담을 수 있지만, Mobile의 작은 화면에서 담길 수 없는 요소들도 있습니다. 예를 들어, 네비게이션은 PC에서 좌측에 고정 상태로 있지만, Mobile에서는 크기로 인해 보여주기 어렵습니다. 이렇게 디바이스에 따라서 다르게 보여줘야 하는 요소들은 출력 처리에 조건을 걸었습니다. 

프론트엔드 작업이 끝났으니, 이제 버블에서 데이터베이스를 만들고 로직을 구현하면 서비스가 완성됩니다. 관련한 내용은 다음 편에서 이어서 다루겠습니다.

그로잉피플에서 노코드로 나만의 서비스를 만들어봐요!
친구와 함께 하는 페이백 이벤트도 진행 중입니다.

버블로 하루 만에 만든 서비스,
브릿지 링크를 아래서 확인할 수 있습니다.