성공적인 온보딩을 위한 사례: 홉스의 개선 여정

고객이 서비스를 처음 접하는 온보딩 페이지는 첫인상입니다. 여기서 고객의 흥미를 끌지 못하면, 아무리 뛰어난 제품도 제대로 평가받지 못할 수 있죠. 오늘은 홉스가 온보딩 프로세스를 어떻게 개선했는지, 그 여정을 공유합니다.

여러분의 제품에도 힌트가 될 이야기를 시작해볼게요!

지난 아티클 이후 AI 기능 디벨롭과 글로벌 준비를 같이 진행하며 한달이란 시간이 지났네요!

곧 이어서 AI 기능에 대한 소개도 해보겠습니다.

기존 온보딩: 첫만남의 어색함.

과거 홉스의 온보딩 프로세스는 고객 정보를 타입폼으로 수집하고 미팅을 통해 제품을 안내하는 형태였습니다.
하지만 고객 입장에서 이 방식은 여러 문제가 있었습니다:

• 콘텐츠 부재: 제품에 대한 기능 설명 없이 인사말만 제공.

• 타입폼 의존: 제품 밖에서 정보를 입력해야 하는 불편함.

• 기능 미비: 예시 페이지는 보여줬지만, 전반적인 제품 소개는 부족.

결과적으로, 많은 고객이 온보딩 단계에서 이탈하거나 제품의 잠재력을 제대로 이해하지 못했습니다.

문제를 해결하기 위해 두 가지 개선 방향을 설정했습니다:

1. 고객 정보를 제품 내에서 손쉽게 수집

2. 고객이 관심을 가질 콘텐츠 우선 제공

개선1/ 정보 입력 절차 간소화

고객 정보를 받는 폼을 홉스 내부로 통합했습니다.
또한 다음과 같은 디테일로 사용자 경험을 개선했습니다:

• 단계별 안내: 프로그레스바로 입력 절차를 시각화하여 고객이 다음 단계를 예측할 수 있게 했습니다.

• 적정 정보만 요청: 회사 규모, 연락처, 요구 사항 등 꼭 필요한 정보만 수집.

• 유연성 강화: 고객이 원하면 건너뛸 수 있는 선택지를 제공.

이렇게 작은 변화만으로도 고객의 심리적 부담을 크게 줄일 수 있었습니다.

개선2/ 고객이 관심 가질만한 컨텐츠 우선 노출

온보딩 첫 화면에서 고객이 가장 관심 가질 부분을 바로 보여주기로 했습니다.

• 예시 페이지: 랜딩 페이지에 보이는 템플릿을 첫 페이지에서 바로 확인 가능.

• 즉시 활용 가능: 원하는 템플릿을 바로 설치하고 사용할 수 있도록 구성.

• 학습 콘텐츠: 제품 사용법을 문서로 따로 찾을 필요 없이, 바로 이해할 수 있는 가이드를 제공.

• 다음 단계 유도: 페이지 개발을 완료한 고객이 데이터 소스를 연동해 더 나아갈 수 있도록 자연스럽게 안내.

첫번째 개선에 대한 회고

첫 개선 이후에도 몇 가지 피드백이 들어왔습니다:

1. 단계 축소 필요: 입력 단계가 두 스텝으로 나뉘어 여전히 부담스럽다는 의견.

2. 디자인 개선 요청: 모달 화면 배경이 하얀색이라 답답하고 닫을 수 없는 느낌.

3. 콘텐츠 간소화: 온보딩 콘텐츠가 여전히 복잡하고 읽어야 할 정보가 많다는 의견.

피드백 반영: 더 직관적인 온보딩으로

모달 단순화:

• 입력 필드 수를 줄이고, 단일 스텝으로 축소.

• 모달을 닫았을 때도 즉시 콘텐츠를 확인할 수 있도록 변경.

온보딩 콘텐츠 개선

• 홉스 컴포넌트를 한눈에 볼 수 있는 시각적 구성.

• 랜딩 페이지에서 보았던 페이지와 동일한 페이지 노출

• 하단 버튼으로 AI 빌딩 기능과 템플릿을 바로 확인할 수 있도록 배치.

• 제품 전체 기능과 와우 포인트를 한 화면에서 빠르게 파악 가능.

여러분도 온보딩 개선을 고민하고 계신가요?
홉스의 사례처럼, 작은 변화가 고객 경험에 큰 차이를 만듭니다.
온보딩은 첫 만남입니다. 고객이 “이 제품, 내게 딱이야!”라고 느낄 수 있는 여정을 만들어보세요. 😊

저희팀도 아직 활발하게 온보딩을 개선 중입니다. 보시면서 떠오르신 아이디어가 있다면 편하게 의견을 공유해주세요!

전환율을 4배 올리고, 온보딩 고객을 확실히 잡아라! 랜딩 페이지 개선 이야기

이전 포스팅에 적었던 것처럼 얼마 전에 온보딩 UX 조사도 끝냈는데요, 이제는 랜딩 페이지 개선에 들어갑니다!

랜딩 페이지 매력도를 확 끌어올리면, 더 많은 고객이 온보딩을 시작하고, 온보딩 개선의 효과도 배가될 거라고 생각해요. 그래서 이번에 랜딩 페이지도 함께 개선하기로 결정했습니다.

이미 새롭게 바뀐 페이지가 배포되었으니, 한번 구경해보세요! 의견도 남겨주시면 큰 도움이 될 것 같아요 :)

랜딩 페이지 개선의 목적

이번 개선의 핵심은 간단합니다: 어드민 개발 비용에 고민하는 고객들이 회원가입하도록 만드는 것! 랜딩 페이지의 목적이 결국 전환이라는 건 모두 아시겠지만, 저희 페이지는 그 부분에서 부족한 점이 많았거든요. 그래서 이번에 확실히 개선해보려고 합니다.

물론, 지금까지도 여러 차례 고쳐왔지만, 앞으로도 계속 적극적으로 개선해 나가면서 고객들이 우리 제품의 매력을 제대로 느낄 수 있도록 만들 계획입니다.

히어로

개선 이전

개선 이후

히어로 섹션은 고객이 가장 먼저 마주하는 부분이라 엄청 중요하죠. 그래서 이번 개선에서는 내부 피드백을 반영해 몇 번이나 다듬었는데요, 고려한 사항은 이렇습니다:

1. 우리 제품의 핵심 가치를 고객이 바로 이해할 수 있게 문구를 개선했습니다. 시간과 비용 절감이라는 장점을 확실히 드러냈고, 어느 정도 절감할 수 있는지도 수치로 보여주었습니다.

2. CTA 버튼을 하나로 통일하고 크게 강조했습니다. 이제 누르고 싶은 버튼은 하나! 클릭을 유도하는 메인 버튼만 남기고, 나머지는 제거했어요.

3. 바로 로그인할 수 있게 했습니다. 전에는 타입폼에서 이메일을 입력하면 URL이 전송되는 방식이었는데, 이제는 불필요한 단계를 줄여 바로 제품으로 연결됩니다.

4. 버튼 문구도 가치와 연결되도록 다시 다듬었어요.

제품 이미지

개선 이전

개선 이후

제품 사용 흐름을 보여주는 이미지도 중요하죠! 고객이 어드민 개발이 진짜 빠르구나! 하고 바로 느낄 수 있도록 개선했습니다.

전에는 노션처럼 슬래시로 UI를 만드는 모습만 나와서, 어떻게 어드민 페이지를 쉽게 만들 수 있는지 직관적으로 전달하기 어려웠는데요, 이번에는 UI 제작부터 어드민 기능까지 어떻게 이어지는지 잘 보여줄 수 있도록 바꿨어요.

이제 제품의 가치를 더 잘 느끼실 수 있을 겁니다.

유즈 케이스

개선 이전

개선 이후

이제 고객이 만들고 싶은 어드민 페이지 이미지를 바로 확인할 수 있습니다. 이전에는 메뉴를 통해서만 볼 수 있었지만, 지금은 갤러리 형식으로 원하는 어드민 UI를 쉽게 찾아볼 수 있게 했습니다.

또, UI를 만드는 게 얼마나 간편한지 한 번 더 강조했습니다.

뿐만 아니라, "전문가인 홉스가 다 해준다"는 메시지도 담았습니다. 많은 고객이 어드민 개발에 고민을 가지고 있지만, 구체적으로 어떤 UI/UX로 해결해야 할지 결정하기 어려워하거든요. 그래서 로그인만 하면 바로 사용할 수 있는 UI를 미끼 상품처럼 노출했습니다.

하단 CTA

개선 이전

개선 이후

하단에서도 히어로와 똑같은 문구를 반복해서 CTA를 유도했습니다. 같은 문구를 반복함으로써 제품의 가치를 한 번 더 각인시키려는 전략입니다.

그리고 더 큰 버튼으로 고객이 바로 로그인하도록 강조했죠.

스포일러

저희는 마법 같은 어드민 개발 경험을 제공하기 위해 끊임없이 고민하고 있습니다. 이번 랜딩 페이지 개선은 그 첫걸음일 뿐이고, 앞으로도 계속 발전해 나갈 거예요.

만들고 싶은 페이지를 얘기하면,

마법 지팡이가 페이지와 코드를 모두 만듭니다

마치며

지금까지 랜딩 페이지를 여러 번 개선하면서도 부족한 점이 많았어요. 물론 이번에도 완벽하지는 않겠지만, 계속해서 실험하고 발전시키며 더 나은 경험을 제공하기 위해 노력하겠습니다.

읽어주셔서 감사합니다!

온보딩 UX 조사

이 글은 홉스에 와우 포인트를 만드는 과정 중 제품 온보딩을 강화하기 위해서 진행한 리서치에 대해서 소개합니다. 온보딩 기능을 개선하기 위해 저희 제품과 비슷하거나 참고하고 싶은 온보딩을 조사한 과정에 대해서 공유합니다.

홉스의 회원 가입은 별도 가입없이 이메일로 인증 코드를 받아 가입할 수 있게 했고, 구글로 로그인을 지원하고 있습니다.

홉스 인증 코드를 이메일로 받은 화면

간단한 인증 후 홉스에서 만나게 되는 화면은 아래 페이지였습니다. 샘플 페이지가 있긴 했지만, 이 페이지 내용만으로는 가지고는 고객이 스스로 온보딩 하기 어려운 상황이었습니다.

홉스 첫페이지

그래서 홉스의 온보딩 과정도 매끄럽게 진행할 수 있도록 이번 리서치를 진행하고 온보딩 과정을 홉스에 적용하기로 결정했습니다.

회원 가입 방법 정하기

PQL(Product Qualified Lead)로 고객을 유치하려는 제품은 로그인이나 회원가입에서 이탈률을 줄이기 위해 원클릭 가입을 제공하는 경우가 많습니다. 몇년전이라면 자주 보였던 "산용 카드 필요 없음" 문구도 이제는 별도로 표시 하지 않을 정도로 빠르게 고객이 제품을 체험해볼 수 있도록 경험을 제공하려고 하는 추세입니다.

홉스에서 사용하는 콜드 이메일 자동화 툴 woodpecker의 메인 화면

그래서 가장 먼저 회원 가입은 어떤식으로 진행되고, 온보딩 과정에서 어떤 정보를 받을지 여부에 대해 결정이 필요합니다.

추가적으로 홉스의 고객들 중 많은 사용자가 GitHub을 사용하는 개발자일테니 GitHub으로 로그인도 지원할 예정입니다.

고객에 대해 알고 싶어요!

회원 가입이 간소화되면서 생기는 문제는 고객의 정보를 회원 가입 과정을 통해 알기 어렵고, 맞춤화된 경험도 제공하기 어려워진다는 점인데요. 영업을 하는 입장에서도 고객의 정보가 없다면 SQL(Sales Qualified Lead)을 만드는 과정이 까다로워집니다.

홉스는 사용하는 기업의 정보에 따라서 원하는 어드민의 형태가 결정되기 때문에 가입은 쉽게 하되 가입을 결정한 고객들에겐 온보딩 과정에서 추가 정보를 받기로 결정했습니다.

다른 B2B 제품의 온보딩 첫화면 조사

Zapier의 온보딩 첫번째 화면

Superblocks의 온보딩 첫번째 화면

추가 정보는 우리가 타겟해야할 고객들에 대한 가설을 증명하고 분류하는데 필요한 정보입니다. 그래서 우리 고객의 프로필(페르소나)을 정의하는데 사용한 속성들을 그대로 사용하면 가장 좋을 것 같습니다.

Zapier의 경우 회사 내 역할에 따라 사용하는 Zap의 종류가 달라지기 때문에 역할을 가장 먼저 받고 있습니다. 엔지니어라면 Python이나 JavaScript 같은 프로그래밍 언어가 필요할 것이고, 마케팅 담당자라면 Mailchimp, Google Analytics 같은 서비스 연동이 필요할 것입니다.

Retool의 온보딩 첫번째 질문

Retool의 경우엔 프로그래밍이 필요한 제품이기에 프로그래밍에 대한 친숙도를 물어보고 있습니다. 역할 보다는 프로그래밍의 친숙도에 따라서 제품의 사용성이 달라지기 때문인 것 같습니다.

B2B 제품의 경우 고객의 회사 내 역할과 함께 가장 많이 받는 정보가 고객 회사의 규모인 것 같습니다.

Superblocks의 회사 규모 물어보는 페이지

Zapier의 회사 규모 물어보는 페이지

회사 규모에 따라서 담당자가 달라질 수 있고 사용해야하는 요금제가 달라질 수 있기 때문에 필요한 정보인데요. 홉스에서도 회사 규모에 따라서 사용하고 싶은 전략의 차이가 있고 요금제 역시 달라지기 때문에 회사의 규모 역시 필요하다고 판단했습니다.

어떤 문제를 해결하려고 하세요?

진통제와 같은 필수 제품이 되기 위해선 우리 제품이 여러 문제를 해결할 수 있다고 하더라도 고객이 문제점을 곧바로 잘 해결할 수 있어야할텐데요.

온보딩 과정에서 이를 위한 질문을 던지기도 합니다.

Superblocks로 만들고 싶은 도구는?

직접적으로 우리 제품이 해결할 수 있는 문제를 나열할 수 도 있지만, 이 과정에서 도움을 더 얻고 싶은지 아닌지 물어볼 수 도 있고 간접적으로 사용하고 싶은 기능들을 물어볼 수 도 있습니다

Retool의 경우 해결하고 싶은 문제가 이미 명확한지 물어봄

Zapier의 경우 내 역할에 따라서 사용하고 싶은 서비스를 물어봐서 어떤 Zap을 만들고 싶은지 파악함

Notion의 경우 내 역할과 해결하고 싶은 문제를 같이 간단하게 물어봄

홉스는 고객을 분류할 때 사용하는 어드민 기능의 분류가 있기 때문에 직접적으로 질문을 던지기로 결정했습니다.

우리 제품을 더 잘 사용하게 도와주고 싶어요!

필요한 고객의 정보를 파악했다면 이를 기반으로 고객이 제품을 잘 사용할 수 있도록 도울 수 있는 컨텐츠를 구성합니다.

사실 제품이 사용하기 쉽고 직관적일수록 이 부분이 두껍지 않아서 좋은 온보딩일 수록 컨텐츠가 적다는게 아이러니한 점이겠네요 ㅎㅎ

Notion은 시작하기 페이지로 자신들의 기능을 소개하고 있습니다.

노션의 경우 제품에 들어가자마자 노션의 페이지에 기능을 소개하는 체크박스가 보입니다. 체크박스를 선택해서 할일을 지우듯이 상호작용을 할 수 있고 간단하게 기능을 사용해볼 수 있습니다.

Superblocks는 일종의 gamification을 통해서 온보딩을 진행합니다.

제품이 조금 복잡한 경우 더 친절한 가이드를 제공하기도 합니다. Superblocks의 경우 게임에서 퀘스트를 수행하는 것 처럼 각단계의 가이드를 상세하게 주고 있습니다. 이러한 경우 고객이 다음 해야하는 행동을 바로 인지할 수 있기 때문에 장점이 있습니다.

Retool의 경우 템플릿을 선택할 수 있게 보여줍니다.

고객이 우리 제품을 사용해서 어떤 것들을 만들어낼 수 있는지 보여주는 것도 아주 좋은 방법입니다. 많은 제품들이 템플릿을 제공해서 고객에게 제품의 Best practice를 안내합니다.

홉스는 제품을 이용하여 온보딩 과정을 제공하되, 고객이 제품을 잘 사용할 수 있도록 템플릿을 제공하고 이를 통해서 제품 사용 방법을 자연스럽게 익힐 수 있도록 안내하려합니다.

홉스의 온보딩 구성 결정

• 가입을 빨리 시키기 위해서 매직 링크 가입 제공

• 온보딩에서 고객의 정보를 받고 맞춤 정보를 제공할 수 있도록 받는 정보

  • 조직 규모

  • 회사 분야

  • 해결하고 싶은 문제

• 제품 내의 기능과 제품 흐름을 자연스럽게 사용하는 온보딩 콘텐츠

마치며

지금까지 제품에 들어오기 직전까지의 과정을 조사하고 결정했다면 이제 남은 과정은 실제로 제품에 온보딩하는 콘텐츠가 남았습니다.

다음 글로는 홉스의 온보딩 콘텐츠 구성을 소개하는 글로 찾아뵙도록 하겠습니다.

감사합니다.

우리는 어떤 제품 지표를 확인해야할까?

우리 제품의 현재 성과를 확인하거나 미래의 의사 결정을 위해 지표를 확인하고 추적해야 합니다. 그렇다면 어떤 지표들이 있고 우리 제품은 어떤 지표들을 확인하면 좋을까요?

어떤 데이터 지표가 있는지 어떤 것을 확인하기 위해서 이런 지표들을 확인 해야하는지 공유해봅니다.

제품에 맞는 지표 확인하기​

우리가 관리하고 있는 제품들은 모두 다양한 성격을 가지고 있으며 각기 다른 제품의 고유의 목표와 과제 그리고 성공을 정의하는 방식이 다르기 때문에 적합한 지표를 선정하는 것이 중요합니다.

또한 조직내 구성원의 역할에 따라서 다른 목표와 책임을 가지므로 확인해야하는 지표가 달라질 수 있습니다.

제품의 성장과 연결지어서​

제품 성장을 위해 집중해야 하는 목표는 제품의 성격에 따라 달라집니다.

예를 들어, 인스타그램 같은 소셜 미디어 앱이나 카카오톡, 디스코드 같은 메신저 앱은 고객이 앱을 자주 사용하고 다시 사용하는 것이 중요합니다. 그렇다면 월간 활성 유저수(Monthly Active User, MAU)를 확인하거나 고객 유지율로 제품이 성장하고 있는지 알 수 있을 겁니다.

넷플릭스와 같은 구독 기반 서비스나 카페24 쇼핑몰 같은 SaaS의 경우 월 단위로 반복해서 발생하는 매출이 중요하기 때문에 월간 반복 매출(Monthly Recurring Revenue, MRR)이나 사용자당 평균 수익(Average Revenue Per User, ARPU)을 확인하여 제품이 성장하고 있는지 확인할 수 있습니다.

이처럼 우리 제품의 성장을 어떤 데이터와 가장 밀접한 연관이 있는지 먼저 결정하고 이를 가장 잘 확인할 수 있는 지표를 확인한다면 가장 효과적일 것입니다.

구성원의 역할에 따라서​

기업 구성원의 역할에 따라 확인하고 추적해야하는 지표가 다를 수 있습니다.

경영진의 경우 기업 전체의 성과를 확인해야 하기 때문에 매출 성장률, 매출 총 이익율 등의 지표로 전반적인 기업의 상태를 확인할 수 있어야 합니다.

제품 개발팀의 경우 고객 행동이나 참여와 관련된 지표를 확인하여 고객이 우리 제품을 잘 사용하고 있는지 알 수 있어야 하기에 월간 활성화 고객(Monthly Active User, MAU)나 세션 시간 등을 확인하면 좋습니다.

우리 제품/기업을 위해 각 구성원의 역할과 목표가 무엇인지 먼저 확인하고, 이와 관련된 지표를 확인하는 것이 좋습니다.

지표 소개​

크게 3가지 정도로 나누어서 지표를 소개 해보려 합니다.

1. 매출 관련 지표

2. 고객 행동, 참여 관련 지표

3. 고객 만족 관련 지표

위에서 언급한 제품의 성장을 위한 목표와 구성원의 역할에 맞추어서 가장 적합한 지표들을 확인해보는 것이 좋을 것 같습니다.

매출 관련 지표​

기업의 매출, 비용과 직접적으로 연관이 있는 지표들입니다. 기업의 전체적인 매출, 비용, 성장을 확인할 수 있는 지표와 연관되어 있습니다.

고객 행동, 참여 관련 지표​

고객이 제품을 얼마나 잘 사용하고 있는지 알 수 있는 지표들 입니다. 제품의 품질과 사용자 만족도를 평가하고, 개선할 부분을 찾는 데 유용합니다.

이 지표들을 알기 위해서는 제품 활성화 기준을 먼저 설정하는 것이 중요합니다. 예를 들어 메신저 앱의 경우 "1명에게 메시지를 보낸다", "1명 이상에게 답장을 받는다" 처럼 고객이 제품의 목표에 부합한 행동들을 기반으로 정해야합니다.

고객 만족 관련 지표​

만족한 고객은 제품에 충성을 보이며 장기적으로 이용할 가능성이 높습니다. 그뿐만 아니라 다시 구매하거나 다른 고객을 유치하는데 도움이 되기도 하기 때문에 우리 제품이 고객에게 얼마나 큰 가치를 제공하고 있는지 확인할 수 있습니다.

마치며​

오늘 소개드린 지표 외에도 많은 지표들이 있지만 중요한 점은 역할의 목표에 따라서 어떤 지표를 봐야할지 결정하고 각 제품에 맞는 기준에 맞추어서 데이터를 확인하고 해석해야한다는 점입니다.

아직 어떤 데이터를 봐야할지 결정하지 못했다면, 가장 쉽게 확인할 수 있는 가입자 수, 월별 매출 등의 지표로 시작해서 더 나은 통찰을 이끌어 낼 수 있는 자세한 지표들을 찾아보면 어떨까요?

와우 포인트 만듭시다 : 어드민 전문가로써 새로운 어드민을 제시해라!

홉스 팀이 VAP 태호님을 만나게 되면서 시작하게된 실험에 대해서 소개드리려고 합니다.

홉스 : 로우 코드 어드민 빌더

홉스는 노션처럼 쉽게 개발하고 10배 더 빠르게 구현할 수 있는 로우 코드 어드민입니다. 작년에 베타 서비스를 시작으로 초기 고객분들을 유치하고 제품을 발전시키는 중에 있습니다.

홉스는 고관여 제품?!

홉스는 앞으로 ARPU(고객당 평균 매출)가 높은 고객을 유치하는 것을 목표로 하고 있습니다.

고객분들을 만나면서 느낀점 중 가장 큰 점은 어드민 개발이라는 문제를 해결하려면 기업 내부 프로세스와도 깊게 연관되어 일 해야한다는 점이 었습니다.

그렇다보니 구매를 결정하는 프로세스 역시 자연스럽게 길고 복잡해지게 되고 고관여 제품이 되는 만큼 고객의 크기와 관계 없이 긴 구매 여정이 필요했고, 그렇다면 LTV(고객 생애 가치)가 높은 고객을 유치하는 편이 유리하다고 판단하게 되었습니다.

그 과정에서 더 나은 해결책을 찾기 위해 태호님과 이야기를 나누게 되었습니다.

Pain Killer vs Vitamin

정말 많은 얘기를 나누었는데, 가장 깊게 얘기 나누었던 부분은 홉스는 어드민 개발에 필요한 다양한 기능들을 그동안 만들어왔고, 그 과정에서 진통제보다는 비타민 같은 사용 경험을 제공하고 있다는 부분이 었습니다.

고객이 기대하는 기준점을 뾰족하게 돌파하고, 그것을 뛰어넘는 것이 가장 중요할 텐데 말이죠.

그래서 앞으로 홉스 팀은 어드민 전문가로써 새로운 어드민의 시대를 제시하고 싶습니다.

앞으로 홉스 개선점

이 과정에서 가장 먼저 필요한 것은 가설 기반의 실험을 통한 제품 개선이었습니다. 이를 위해서는 고객이 제품을 직접 사용하고, 결제하거나 이탈하는 과정을 수치화해 실험을 검증할 수 있어야 합니다.

그리고 고객의 기대치를 뛰어넘기 위해서는 적어도 3개 이상의 와우 포인트가 필요하다는 조언을 얻었습니다.

홉스는 고객의 의견을 직접 듣기 위해 타입폼을 거쳐 데모 또는 바로 사용할 수 있는 링크를 제공하는 방식으로 서비스 가입을 유도해왔습니다. 우선 이 부분부터 개선하기로 결정했습니다.

또한 이번 온보딩 과정의 목표를 수치화해 설정했는데, 랜딩 페이지에서 인바운드로 유입된 고객의 50%가 홉스 서비스에서 데이터 소스를 연결하도록 목표를 잡았습니다.

홉스에서는 데이터 소스를 설정해야 자신의 어드민 페이지를 개발할 수 있는데, 와우 포인트를 경험한 고객들이 어드민 개발을 위해 데이터 소스를 연결할 것이라고 가정했습니다.

와우 포인트 만들기 돌입!

이를 위해 사용자 흐름에 맞추어 와우 포인트도 설계하고 있는데요. 앞으로 만들 기능은 이 3가지 흐름 중에 하나에 부합할 수 있는 기능일 것 같습니다.

1. 데이터 소스를 연결하지 않아도 홉스가 어드민 전문가로써 해결하는 문제를 바로 보여준다.

2. 데이터 소스를 연결하면, 어드민 페이지가 너무 쉽게 만들어질 수 있을 것 같은 기능을 제공한다.

3. 데이터 소스를 연결하고 난 후 계속 페이지를 개발하고 추가할 수 있는 기능을 제공한다.

이미 지난 주말을 거쳐 어드민을 개발해야할 고객들이 느낄 수 있는 와우 포인트를 몇가지 만들어둔 상황입니다. 앞으로 3주간 스프린트를 통해 개발을 진행하면서 있을 일들과 얻게될 인사이트 역시 같이 공유드리도록 하겠습니다.

끝 마치며

어드민, 백오피스 개발 고민이 있으신가요?

위에서 말씀드린 것 처럼 홉스는 어드민 전문가로 정보 설계부터 화면 구성까지 어드민에 관한 고민이라면 무엇이든 이야기 나누고 싶습니다.
이 링크에서 일정을 잡아주시면 저와 바로 얘기 나눌 수 있습니다.

감사합니다.

구글 스프레드시트에서 카카오톡 보내기

잠재 고객이나 설문조사 등을 통해 핸드폰 번호/이메일 등을 수집하게 되면 수집한 데이터를 사용해 알람을 보내고 싶은 상황이 많은데요.

얼마전에 템플릿으로 추가한 카카오톡 연동을 사용해서 구글 스프레드시트에 추가된 데이터에 카카오톡 메시지 보내는 방법을 소개합니다.

카카오톡으로 메시지를 보내기 위해서는 카카오톡 비즈니스 계정과 메시지를 보낼 수 있는 공식 딜러사에 서비스 사용 신청을 먼저 진행해야 합니다. 더 자세한 내용은 블로그 글을 통해 확인해주세요.

홉스 워크플로우에서 구글 스프레드시트 데이터를 가지고 오고 동기화 주기를 정한 후 메시지를 전송하면됩니다.

1. 스프레드시트 데이터 가져오기

홉스는 구글 스프레드시트 연결을 지원하기 때문에 구글 스프레드시트의 데이터를 가지고 올 수 있습니다.

미리 생성해 둔 스프레드시트를 선택하여 데이터를 가지고 옵니다.

2. 데이터 자동화 주기 정하기

몇분마다 메시지를 전송하고 싶은지에 따라서 자동화 주기를 설정합니다. 최소 1분부터 1일에 1번까지 원하는 값으로 설정할 수 있습니다.

저는 10분 정도 주기로 알람을 전송할 수 있도록 설정해 보겠습니다.

3. 보낼 메시지 적기

카카오톡은 알림톡과 친구톡 2개의 기능을 제공합니다. 메시지의 성격에 따라 알림톡과 친구톡 중 어떤 메시지로 보낼지 결정해야합니다.

• 알림톡은 템플릿 등록 후 검수가 완료된 메시지만 보낼 수 있으며 정보성 메시지를 채널 친구 추가 없이 보낼 수 있다는 것이 가장 큰 장점입니다.

• 친구톡은 광고 메시지를 전송할 수 있지만 채널 친구 추가 후에만 메시지를 보낼 수 있습니다.

4. 메시지 전송 요청하기

카카오톡 비즈메시지 API 메시지 전송을 요청합니다. 홉스에서 제공하는 템플릿 사용을 하시면, 이 연동 부분에 필요한 부분이 대부분 설정되어 있기에 별도 설정이 필요 없습니다.

5. 트리거 설정하여 실행하기​

2번에서 정한 주기마다 트리거가 실행될 수 있도록 설정합니다.

6. 메시지 확인

스프레드시트에 데이터가 추가되면 카카오톡에 메시지가 전달됩니다.

마치며

​

오늘 소개해 드린 방법을 이용하면 홉스에서는 데이터베이스 데이터로 카카오톡 알람을 보낸다든지 구글 스프레드시트에서 메일을 보내는 등의 자동화를 쉽게 설정할 수 있습니다.

홉스에서는 오늘 소개해 드린 구글 스프레드시트, 카카오톡 자동화를 위한 템플릿을 만들어두었으니 이를 복사하셔서 바로 사용하실 수 있습니다. 홉스에서 준비해 둔 템플릿이 궁금하시다면 만나서 얘기 나누어보면 어떨까요?

템플릿을 이용한 설치를 도와드리겠습니다.

토스 페이먼츠 어드민 연동 한방에 해결하기

홉스에서 토스 페이먼츠를 연동하여 사용할 수 있는 템플릿을 출시 했습니다!

토스 페이먼츠 요즘 많이들 사용하고 계시는데요. 많은 고객분들이 자사의 데이터베이스에 있는 결제 정보와 토스 페이먼츠를 연동하기 위해 홉스를 사용하고 싶다는 의견을 주셨습니다.

템플릿​

홉스에서는 고객분들이 토스 페이먼츠를 어드민에 빠르게 도입하실 수 있도록 템플릿을 추가 하였습니다.

템플릿은 홉스에서 미리 만들어둔 어드민 페이지를 고객분들이 바로 사용하실 수 있도록 만들어둔 기능입니다. 홉스에 가입하시면 무료로 사용해보실 수 있고, 추가적으로 홉스 팀에서 데이터베이스와 토스 페이먼츠를 빠르게 연동할 수 있도록 도움을 드리고 있습니다.

토스 페이먼츠 템플릿​

토스 페이먼츠 결제 취소

홉스의 토스 페이먼츠 템플릿은 샘플 데이터베이스(PostgreSQL)와 토스 페이먼츠 API를 연동해 결제 취소 기능을 제공하고 있습니다. 홉스에 가입 후 템플릿 설치를 요청 주시면 몇분안에 결제 취소 기능, 가상 계좌 발급 등을 사용하실 수 있습니다.

결제 대시보드

결제 취소 등 연동 부분과 함께 추가적으로 결제 대시보드처럼 어드민에 필요한 분석 기능을 제공합니다. 다양한 결제 데이터와 상품에 관련된 데이터를 차트로 시각화하여 한 눈에 볼 수 있습니다.

마치며​

홉스 팀은 토스 페이먼츠 템플릿 외에도 친구톡 템플릿, AI 블로그 콘텐츠 템플릿 등을 개발 중입니다. 필요하신 템플릿이 있으시다면 편하게 말씀해주세요! 홉스 팀에서 검토 후 개발하여 제공해드리겠습니다. 저와 필요하신 템플릿에 관하여 이야기 나누고 싶으시다면 이 링크에서 일정을 공유해주세요.

홉스 AI 지원 추가!!

안녕하세요. 홉스 강효준입니다.

이번 GPT-4o 출시 소식을 듣고 나니 저희 홉스에서 추가된 AI 기능이 생각이 나서 뒤늦게 소식을 공유드리게 되었습니다.

이번 홉스 AI 기능은 크게 2가지 기능을 추가했는데요.

1. 코드를 작성하시는 프로그래머분이 AI의 도움을 받아 코드를 작성할 수 있음

2. AI를 어드민에 통합하여 업무에 적용할 수 있음

위 기능들에 대해 소개드리겠습니다.

AI 코드 작성

GitHub 코파일럿 처럼 홉스에서 코드를 작성하시면서 AI의 도움을 받아 코드를 작성하실 수 있습니다.

JavaScript와 SQL 코드를 작성하는 데 도움을 받을 수 있으며, 작성된 코드를 다시 문맥으로 설정하여 코드를 생성할 수 있기 때문에 코드 작성에 아주 유용합니다.

위 예시 코드에서는 피보나치 함수를 문맥으로 피보나치수열의 10번째 값까지만 반환하는 코드를 요청했는데, AI가 코드를 잘 생성한 상황입니다. 코드 작성하다가 막힐때 저도 많이 사용 중입니다!

AI 데이터 소스

홉스 AI 데이터 소스는 기본 데이터 소스로 제공 중이기 때문에 홉스에 가입 후 바로 사용해 보실 수 있습니다. 다른 데이터 소스와 마찬가지로 워크플로우 내에서 자유롭게 사용할 수 있습니다.

그렇기 때문에 데이터베이스나 써드 파티에서 가져온 데이터를 이용할 수 있고 AI 데이터 소스의 결과를 다시 메일로 전송할 수 있습니다.

홉스 AI 데이터 소스는 현재 2가지 기능을 제공합니다.

• 문장 생성: 입력된 데이터를 기반으로 이를 설명하는 글을 만들어낼 수 있습니다. 메일 내용 작성, 콘텐츠 생성 등에 사용할 수 있습니다.

• 문장 요약: 입력된 글의 내용을 축약하여 한눈에 볼 수 있도록 만들 수 있습니다. 긴 문서의 핵심 요약 등을 생성할 수 있습니다.

현재는 아래 사용 사례가 있을 것을 예상하며 기능을 개발하였습니다.

• 고객 문의 사항 요약: 고객 문의를 데이터베이스로 가져와 AI로 요약하여 표시합니다. 고객 문의의 흐름을 한 줄의 텍스트 요약으로 빠르게 확인합니다.

• 회의록 내용 요약: 써드파티 앱에 저장된 회의록을 AI로 요약합니다. 회의에 참석하지 않은 구성원들도 회의록의 내용을 한눈에 파악할 수 있습니다.

• 콘텐츠 제작 코파일럿: 블로그나 SNS에 게시해야 하는 콘텐츠를 AI 문장 생성을 통해 생성합니다. 자체 CMS 어드민 페이지에서 콘텐츠를 게시할 수 있습니다.

• 자동화된 보고서 작성: 문장 생성과 요약을 통해 제품의 주요 데이터들이 포함된 보고서를 작성할 수 있습니다. 작성된 보고서는 매주 슬랙 같은 메시지 채널에 자동으로 게시됩니다.

업무에 AI를 활용하고, 사용해보고 싶은 기능이 있으시다면 편하게 연락주세요!

어드민 개발 비용, 최대 80% 지원 - 클라우드 바우처 사업 선정!

안녕하세요. 홉스 강효준입니다.

홉스가 2024년도 중소기업 클라우드 서비스 보급·확산 사업 공급 기업으로 선정되었습니다.

홉스의 어드민 컨설팅/제작 비용과 SaaS 구독 비용의 최대 5천만원, 80%까지 지원 받으실 수 있습니다.

- 고객 관리, 결제 관리, 데이터 대시보드 등 어드민 도입이나 개편에 대해서 고민 중이신 분

- 어드민 유지 보수/개발에 투입되는 프로그래머 비용을 절약하고 싶으신 분

위와 같은 고민이 있으시다면, 홉스와 함께 클라우드 바우처 수요 기업으로 등록하신 후 어드민을 더 빠르고 쉽게 개발해보세요.

자세한 내용을 알고 싶으시다면 홉스 클라우드 바우처 페이지에서 신청해주세요.

홉스 12월 마지막 업데이트!

어느덧 12월 마지막 업무날입니다. 여러분 모두 2023년 한해 잘 마무리 하시길 바랍니다.

기능 추가

​

모달 추가​

페이지 내에서 모달을 추가할 수 있습니다. 모달을 통해서 상세한 내용을 보여주거나 편집 모달을 통해 데이터를 수정할 수 있습니다. 더 자세한 모달 사용 방법은 문서를 참고해주세요.

스프레드시트와 시트 이름 코드로 제어​

선택하고 싶은 스프레드시트와 시트의 이름을 코드로 제어할 수 있습니다. 셀렉트 필드를 이용해서 읽어오려는 스프레드시트를 변경하거나 별도의 시트에 값을 동적으로 저장할 수 있습니다.

홉스 페이지 레이아웃 변경​

더 많은 기능들이 추가될 예정으로 홉스 페이지의 레이아웃이 크게 변경되었습니다. 앞으로 추가될 감사기록, 트리거 등의 기능을 기대해주세요.

프로퍼티 설정 우측으로 이동​

프로퍼티 설정에 많은 기능들이 추가되면서 기존 프로퍼티 설정 방법으로는 한계에 도달했는데요. 더 정확하고 자세한 설정을 위해 프로퍼티 설정을 우측으로 이동하였습니다.

변경 전 프로퍼티

개선 후 프로퍼티

그외에도 아래 주요한 기능 추가가 있었습니다. 더 자세한 내용은 아래 블로그 글에서 확인하실 수 있습니다!

• 플레이스홀더 설정 기능​

• 이벤트 핸들러 모달 여닫기 기능 추가​

• 이벤트 핸들러 여러개 설정하기​

• 버튼 레이블 값 추가​

• 컴포넌트 비활성화 기능 추가​

• 버튼 스타일 추가​

홉스 6월 업데이트소식

홉스 업데이트 소식 알려드립니다!

6월 마지막 주에 업데이트한 소식인데 이제서야 안내를 드리게되었네요.

오랜만에 인사드립니다. 지난 한달동안 업데이트된 기능에 대해서 소개 드립니다. SQL Server(MSSQL)과 멀티 셀렉트 컴포넌트가 추가 되었습니다. 그외에도 많은 기능 추가와 개선이 이뤄졌습니다!

이벤트 리스너

쿼리 혹은 워크플로우가 성공했을때/실패했을때 그 다음에 실행될 행동을 설정할 수 있습니다.

SQL Server

마이크로소프트에서 개발한 SQL Server(MSSQL)를 데이터 소스로 추가하였습니다. Azure SQL이나 SQL Server를 연결하여 홉스에서 사용할 수 있습니다.

컴포넌트를 가릴 수 있는 프로퍼티 추가

자바스크립트를 실행한 결과 값을 넣을 수 있기 때문에 컴포넌트의 값, 쿼리의 결과 등을 이용하여 컴포넌트를 보이게 만들거나 가릴 수 있습니다.

그외 업데이트 소식은 아래 글에서 확인 부탁드립니다!

MSSQL 서버 연동 추가가 그랬듯이 고객분들이 어드민을 빠르고 쉽게 만들어낼 수 있도록 여러 기능들을 추가 중입니다. 어드민을 만드시면서 고민되시는 부분이 있다면 언제든지 연락주세요!.

🙌 홉스의 프로그래머가 어드민을 무료로 개발해드립니다.

디스콰이엇 커뮤니티 여러분들 안녕하세요. 홉스 대표 강효준입니다.

홉스에서 프로그래머 인력이 부족하신 스타트업들을 위해 어드민 개발을 직접 지원하려 합니다.

이전 블로그 글로 인사드렸었지만 저희는 프로그래머가 어드민을 더 빠르게 만들어낼 수 있는 제품인 홉스를 만들고 있습니다.

저희 팀은 평균 10년 경력의 프로그래머들이 창업한 다양한 서비스와 어드민 개발 경험을 가지고 있는 개발자 팀입니다.

이런 프로그래머들이 직접 전담 배치되어 홉스를 통해 어드민 개발을 지원하려고 합니다.

미팅을 신청하고 여러분의 고민과 해결해야하는 문제들을 저희에게 이야기해주세요. 여러분의 문제를 저희 제품을 통해 직접 어드민을 만들어 해결해드리거나, 해결책을 제안해드리려고 합니다.

1인의 홉스 프로그래머 배치와 2개월의 서비스 무료 사용 기간을 제공해드립니다.

최대 5개 팀까지 지원예정이니 많은 관심 부탁드립니다.

가벼운 문의도 괜찮으니 편하게 신청 부탁드립니다.

아래 링크에서 신청 부탁드려요!

홉스 어드민 프로그래머 무료 지원 프로그램 신청

데이터 수집을 Typeform을 사용하는 환경으로 변환합니다. 아름 다운 온라인 양식, 설문조사, 퀴즈 등을 만들 수 있습니다. 무료로 사용해보십시오.

https://iiu7khr0y53.typeform.com/to/urvefKNs

자피어로 모든 알림 원하는 곳에서 받기

자피어(Zapier)는 애플리케이션 간 자동화 플랫폼으로, 사용자들이 다양한 앱과 서비스를 연결하고, 작업을 자동화할 수 있습니다. 자피어를 사용하면 일상적이고 반복적인 작업을 자동화하여 시간과 노력을 절약하고, 업무 효율성을 향상시킬 수 있습니다.

자피어는 특정한 조건에 따라 작업이 트리거되도록 설정할 수 있습니다. 예를 들어, Gmail에서 새 이메일을 받으면 Google 스프레드시트에 자동으로 데이터를 추가하거나, Trello 카드가 업데이트되면 Slack에 알림을 보내는 등의 작업을 자동화할 수 있습니다.

자피어?​

자피어는 2,000개 이상의 인기 있는 앱과 서비스와 통합되어 있어, 마케팅, 판매, 고객 지원, 프로젝트 관리 등 다양한 업무 영역에서 작업의 효율성을 극대화할 수 있습니다. 자피어는 사용자 친화적인 인터페이스와 직관적인 설정 옵션을 제공하여, 누구나 손쉽게 자동화 워크플로우를 생성할 수 있습니다.

코드를 활용하기​

앞서 소개해드린 것처럼 자피어는 프로그래밍을 모르더라도 작업을 자동화를 할 수 있는 기능을 제공하지만, 약간의 코딩을 얹어서 활용한다면 더 다양한 일들을 처리할 수 있습니다.

현재 자피어는 두가지 코드 통합을 지원하고, 프로그래밍 언어에서 제공하는 제어문들과 비슷한 기능도 제공하고 있습니다. 알림과 관련된 몇가지 자동화 활용 예를 소개 드리면서 코드를 사용해서 기능을 조금 더 고도화하는 과정까지 공유 드리겠습니다.

원하는 곳에서 원하는 알림을 받자!​

리드 알림 받기​

구글 폼, 타입폼, 탈리 등의 서비스를 이용해서 고객의 정보를 수집하고 연락을 보내는 것은 요즘엔 아주 흔한 방법 중 하나인데요. 설문이 새롭게 접수되었을때 슬랙이나 메일로 알림을 받을 수 있다면 조금 더 빠르게 고객에게 응답할 수 있습니다.

10분 안에 고객에게 응답해야 리드 전환율이 10배 이상 올릴 수 있는 만큼 빠르게 반응할 수 있는 환경을 구성하는 것이 중요하겠죠?

자피어에서는 위 서비스들의 이벤트 트리거를 모두 지원합니다.

자피어의 트리거는 특정 조건을 만족했을때 실행되며, 다음에 정의한 액션들을 실행합니다. 위 트리거는 타입폼에 새로운 설문이 생겼을때 액션들을 실행합니다. 이어지는 액션들로 다른 앱에서 메시지를 보낼 수 있습니다.

메시지 내용에 타입폼으로 받은 응답을 사용해 누가 설문에 참여했는지 알 수 있습니다.

위에서 설정한 액션의 경우 타입폼에 접수한 사람의 정보를 슬랙 채널에 메시지로 전송하고 있습니다. 만약 일관된 답변이 있다면 곧바로 설문에 답변한 사람의 메일로 답변을 보내는 자동화도 가능합니다.

코드로 확장하기​

고객에게 곧바로 자동화된 응답을 보내고 싶은데 조금 복잡한 조건이 들어간다면 어떨까요. 아래의 조건들을 만족하는 zap은 어떤식으로 구성할 수 있을까요?

• 팀의 규모에 따라 연락을 해야하는 팀이 달라야한다.
• 팀의 분야에 따라 반응해야하는 메시지가 달라야한다.
• 설문자의 직급에 따라 메시지에 반응해야하는 응급도가 다르고 이를 메시지에 표시해야한다.

이런 조금 더 복잡한 작업을 처리하기 위해서는 위에서 말씀드린 제어문 중 Path를 사용하거나 코드를 직접 사용할 수 있습니다.

위 예제 코드처럼 간단한 내용은 Path로 대체할 수 있습니다. 하지만 조금 더 복잡한 로직을 구현하거나 자피어의 요금을 줄이기 위해 최소한의 zap의 갯수로 원하는 로직을 만들고 싶다면 간단한 코드를 작성하는 것만으로 큰 효과를 기대할 수 있습니다.

응답까지 자동화 하기​

설문자에 답변을 받을 이메일이 포함되어있고, 코드로 확장해 개인화 메시지까지 만들었으니 이제 응답도 자동화할 수 있습니다.

타입폼에서 입력받았던 이메일을 Gmail Send Email 액션에 To 부분에 채워넣어주기만 하면됩니다. 코드에서 만들었던 메시지를 Message 부분에 넣는다면 개인화된 메시지 역시 전송할 수 있습니다.

GitHub 이메일 알림 스킵하기​

신호량에 대비해 잡음량이 너무 크다면 신호를 잡을 수 없는 것 처럼 너무 많은 양의 이메일의 알림이 오게되면 정작 중요한 메일이 도착했을때 반응하지 못할 확률이 올라갑니다.

그래서 저는 Gmail의 필터 기능을 이용해 hopsoffice 조직의 PR만 따로 레이블링하고 받은 편지함에서 건너뛰도록 설정해놨습니다. 물론 리포지토리 워치를 비활성화할 수 있지만 리포지토리가 여러개다보니 한번에 처리하기 위해 Gmail의 필터 기능을 사용했습니다.

Gmail의 필터 기능만으로도 생산성을 위한 훌륭한 자동화가 만들어지지만, 그룹 계정에 오는 메시지 중에 일부는 슬랙으로 알려줘야 한다면 어떻게 해야할까요? 홉스에서는 대표적으로 채용 메일이 그런 메시지였습니다.

채용 메일을 통합해서 슬랙으로 받아보기​

홉스에서는 사람인, 원티드와 같은 여러개의 플랫폼에 채용을 진행하고, 채용의 상황은 노션에서 관리하다보니 각각의 채용 플랫폼에 들어가서 지원자의 이름과 이력서를 받아 노션으로 옮기는 작업을 진행하고 있습니다.

각각의 채용 접수 메일 메시지는 비슷하지만 다른 메시지여서 메일 제목으로부터 파싱을 해야합니다.

위 같은 메시지는 정규식을 통해서 채용하고 있는 직무와 채용인원의 이름을 가지고 올 수 있습니다.

자피어는 아래와 같은 흐름으로 구성할 수 있습니다.

1. Gmail의 필터 기능으로 특정 이메일만 수신하여 채용 메일만 거른다.
2. 코드를 통해 정규식으로 파싱해서 필요한 정보를 메일에서 얻어온다.
3. 노션 데이터베이스 아이템에 등록해 채용팀이 잘 관리할 수 있도록 돕는다.

특정 이메일만 필터하기 위해 레이블에 추가된 메일만 가지고 옵니다. 모든 새로운 메일을 수신해일 자피어를 구성할 수 있지만 모든 이메일을 수신할 경우 이메일이 올때마다 자피어를 실행하기 때문에 zap이 낭비됩니다.

자피어 코드를 통해 정규식으로 지원자의 플랫폼, 이름, 직무 등을 파싱합니다. 보여드린 코드에는 나와있지 않지만 조금 더 복잡한 정규식을 통해서 채용 플랫폼으로 이동하는 링크도 파싱했습니다.

채용팀이 보고 있는 노션 데이터베이스에 아이템을 생성합니다. 이렇게 설정해두면 지원자가 채용 플랫폼에 지원하면 채용 플랫폼이 메일을 주고, 그 채용 플랫폼에서 메일이 왔을때 노션 데이터베이스에 아이템까지 만들 수 있습니다.

내부 도구를 만들어야 하는 신호​

메일을 전송하는 버튼을 만들고 내부 구성원들이 모두 메일을 보낼 수 있도록 하고 싶다면 어떻게 해야할까요? 여러개의 설문 조사 결과 중 하나를 골라 설문자에게 메시지를 보내고 싶다면요?

자피어에서 많은 Toil을 자동화할 수 있지만, UI를 만들어 내지는 못합니다. 그런데 자동화에 UI가 필요하다면? 그것은 바로 내부 도구를 만들어야하는 신호입니다!

내부 도구 개발을 하셔야하는 신호를 보셨다면 저에게 연락주세요!

홉스는 개발자가 내부 도구를 빠르고 쉽게 만들 수 있도록 돕고 있습니다. 홉스에는 zap이 액션을 실행하는 것과 비슷하게 순차적으로 명령들을 실행할 수 있도록 워크플로우를 제공합니다. 앞으로 자피어만큼 많은 통합을 지원할 수 있도록 개발중이며 로우 코드를 활용해 내부 도구 개발을 도우려 하고 있습니다.

마치며​

• 알림을 받는 예제로 블로그 글을 구성해보았습니다. 알림뿐만아니라 여러 업무를 자피어와 같은 자동화 도구를 통해 생산성을 극적으로 향상 시킬 수 있습니다.
• 거기다가 코드까지 더해진다면 꽤 적은 코드로도 많은 일들을 할 수 있습니다. 이게 바로 로우 코드의 이점이겠죠?
• UI가 필요하다면, 뭔가 다른게 필요한 신호입니다. 내부 도구를 만들고 더 많은 구성원들의 업무 생산성을 끌어올릴 신호입니다. 로우 코드 내부 도구 빌더 "홉스"의 사용을 고려해보세요!

홉스 사용뿐만 아니라 내부 업무 자동화에 대해 고민이 있으시다면 언제든지 커피챗 신청해주세요!

자피어로 모든 알림 원하는 곳에서 받기 | 홉스 블로그

자피어(Zapier)는 애플리케이션 간 자동화 플랫폼으로, 사용자들이 다양한 앱과 서비스를 연결하고, 작업을 자동화할 수 있습니다.

https://blog.hops.pub/zapier-as-low-code

공동 창업자 스터디

저희팀은 창업을 시작한 후로 비정기적이나마 스터디를 진행하고 있습니다.

저도 초보 대표이다보니 가설 기반으로 고객을 만나면서 제품을 개발하는 "린 고객 개발", 커뮤니케이션 방식을 습득할 수 있는 "실리콘 밸리의 팀장들", 세일즈의 새로운 관점을 제시했던 "챌린저 세일" 같은 책에 도움을 많이 받았습니다.

저희팀에서 같이 일하고 계신 편재솔님이 저희팀의 스터디 문화에 대해서 공유해주셨습니다!

한 스타트업의 2년이 넘어가는 사내 스터디 | 홉스 블로그

팀 홉스에서는 아주 오묘한 일정이 하나 있습니다.

https://blog.hops.pub/hops-study

B2B MKTG HUSTLE 가입 인사!

• 어떤 제품을 만들고 계신가요 ?
• 프로그래머가 빠르게 내부 도구를 만들 수 있도록 돕는 로우코드 서비스를 만들고 있습니다.
• https://hops.pub
• 클럽에 참여하는 이유/목적을 알려주세요!
• 현재 제가 만들고 있는 제품이 B2B SaaS 제품이고 초기 단계입니다. 저는 프로그래머로 일해왔다보니 B2B SaaS 세일즈에 대한 지식이 부족하고 항상 공부하고 있습니다.
• 현재 이 클럽에 적어주신 글들의 통찰이 좋아서 참여하고 싶었습니다!
• 현재 고민인 점이 있나요 ?
• 저희 제품을 누가 잘 쓸 수 있을지 그리고 그 고객들을 어떻게 찾아내고 발굴하고 연락할 수 있을지 고민이 큽니다!

개밥먹기를 하기 위해 스타트업 대시보드 만들기

홉스를 개밥 먹기 하기 위해 만들게 된 스타트업 대시보드 개발기를 공유합니다.

저는 최근에 Typed를 만들고 있는 비즈니스캔버스에서 개최한 Essential^ 웨비나에 참여하게 되면서 GTM(Go-To-Market)에 대해 더 많이 알게 되었습니다.

웨비나 도중 비즈니스캔버스 전략팀에서 스타트업 정보를 조사하여 작성하신 스타트업 대동여지도에 대해서 소개해주셨는데요. 스타트업이 Typed가 많이 사용한다는 점은 알고 있었지만 고객을 자세히 조사하시고 잠재 고객들을 분류하시는 방법이 아주 명확해 깊게 감명을 받았습니다.

홉스는 저같이 스타트업에서 제품 개발을 담당하며 내부 도구도 동시에 개발해야 하는 많은 프로그래머가 사용하길 바라면서 만들고 있는데요. 우리 팀도 비슷한 자료가 있다면 저와 비슷한 문제를 가지고 있는 팀을 잘 찾아내고 만나는 데 엄청난 도움이 되겠다고 생각했습니다.

물론 엑셀이나 좋은 CRM 서비스를 사용해서 만들어 볼 수 있었지만, 홉스를 더 잘 만들기 위해 직접 홉스로 만들어 보기로 했습니다.

데이터베이스 생성하기

​

데이터베이스부터 구축하기로 했는데요. 저는 PostgreSQL을 꽤 오랫동안 사용해 오고 있습니다. 빠르게 PostgreSQL 데이터베이스 서버를 생성하려면 AWS 콘솔을 통해 RDS 인스턴스를 생성할 수 있겠지만, 테라폼을 적용하여 코드로 관리되고 있는 AWS 인프라에 제품과 관련이 적은 코드를 추가하고 싶지 않았습니다. 요즘 이런 가벼운 작업에는 Supabase를 많이 사용하고 있습니다.

Supabase​

Supabase는 Firebase의 오픈 소스 대체제입니다. 제가 가벼운 데이터 작업에 사용하기 좋다고 느낀 이유는 Supabase의 흥미로운 구조 때문인데요.

PostgreSQL 위에 다른 여러 개의 오픈 소스를 조합하여 kong이라는 API Gateway를 통해 Firebase의 기능을 대체하여 풍부한 기능을 제공하지만 동시에 Supabase 내부에서 사용하고 있는 PostgreSQL 서버를 사용자가 직접 접근하여 사용할 수 있습니다.

저는 이 기능과 Edge function을 이용해서 홉스에 사용할 만한 간단한 데이터 셋이나 API 서버 등을 만들어 오곤 했습니다. 그래서 이번에도 다시 Supabase의 도움을 받기로 했습니다.

나중에 Edge function에 관해서도 소개해드릴 수 있으면 좋겠네요.

더 자세한 내용은 Supabase 문서를 확인하시면 됩니다. 데이터베이스 생성부터 테이블 스키마 설정까지 Supabase 웹 인터페이스를 통해 완료했습니다.

데이터 소스 연결하기​

홉스에서는 다양한 서비스와 홉스를 쉽게 통합할 수 있도록 데이터 소스를 제공합니다.

위에서 언급한 것처럼 Supabase는 데이터 저장을 하기 위해 PostgreSQL을 사용하고 직접 이 PostgreSQL 서버에 접근할 수 있는 연결 정보를 제공하기 때문에 Supabase의 연결 정보를 입력하면 바로 Supabase 데이터베이스를 홉스에서 사용할 수 있습니다.

페이지 만들기​

추가 페이지 만들기​

스타트업 정보를 저장하기 위해 텍스트필드와 셀렉트로 UI를 만들기로 결정했습니다. 홉스에서는 여러 종류의 UI 컴포넌트를 /를 입력하여 추가할 수 있습니다.

스타트업의 이름과 홈페이지, 대략적인 투자 금액의 범위, 스타트업의 카테고리를 입력할 수 있도록 했습니다.

스타트업의 카테고리의 경우 데이터베이스의 값을 미리 넣어두고 그중에서 선택하는 식으로 구성할 수 있었지만 앞으로 어떤 카테고리가 더 추가될지 알기 어려워서 일반 텍스트로 추가할 수 있도록 만들었습니다.

텍스트필드와 셀렉트에 입력한 값은 쿼리에서 바로 사용할 수 있습니다.

SQL 쿼리에서는 템플릿과 함께 컴포넌트값을 사용할 수 있습니다. componentName.value로 필드에 입력한 값을 가지고 올 수 있기 때문에 INSERT문을 간단하게 작성했습니다.

스타트업의 데이터를 추가 했으니 이제 데이터를 볼 수 있는 화면도 만들어 보겠습니다.

조회 페이지 만들기

​

곧 페이저 컴포넌트는 추가될 예정이지만, 당장 테이블의 자료를 적당한 수준으로 보기 위해 셀렉트와 텍스트필드로 페이저를 대체하여 만들었습니다. 추가로 스타트업 이름과 투자 범위로 필터링하기 위해 여러 개의 필드를 추가하니 필드가 세로로 너무 길어져서 다단으로 가로로 필드를 배치했습니다.

테이블을 추가하기 위해 /t를 입력해서 찾았습니다. 홉스의 컴포넌트들은 한글 이름으로도 검색이 가능하지만 영어 이름으로도 검색할 수 있습니다. 예를 들어 테이블 컴포넌트의 경우 /테이블와 /table 두 가지의 명령어로 찾아서 추가할 수 있습니다. 저는 항상 영어 이름으로 찾는 게 버릇이 되었네요.

쿼리의 값은 queryname.data로 가지고 올 수 있습니다. SQL의 결괏값은 { data: <queryresult> } 형태이기 때문에 listStartup.data.data 로 가지고 올 수 있습니다. 코드나 템플릿을 입력하는 곳은 자동 완성 팝업을 통해 입력해야 할 값이나 결괏값의 미리 보기가 가능합니다. 자동 완성과 결괏값 미리보기를 통해 쉽게 쿼리를 컴포넌트에 연결할 수 있습니다.

추가 SQL을 만들 때와 비슷하게 템플릿을 사용해서 조회 SQL을 작성했습니다. 이번엔 조금 복잡한 SQL이 필요했기 때문에 변수도 사용해서 코딩했습니다. 쿼리에서 변수는 inputs라는 이름으로 접근할 수 있습니다. 여러 번 사용할 만한 값들을 변수로 저장해서 쿼리에서 사용할 수 있습니다.

템플릿 내부는 JavaScript를 사용할 수 있기 때문에 간단한 스크립팅이나 함수 사용이 가능합니다. parseInt를 사용해 숫자 연산을 하거나, Array.join()을 사용해서 SQL 조건문을 동적으로 생성할 수 있습니다.

이름과 투자 범위를 필터링할 수 있는 조건문 생성과 페이징을 위한 데이터 수 처리는 템플릿 내부 스크립팅으로 해결했습니다.

짜잔, 꼭 필요한 비즈니스 로직을 위한 코드만을 작성하여 추가와 조회가 가능한 대시보드를 만들어 냈습니다. 앞으로도 모든 프로그래머분이 10배 이상 쉽고 빠르게 내부 도구를 만들어 낼 수 있도록 홉스를 만들고 성장시키도록 하겠습니다.

앞으로 할 일 // TODO​

사실 이 스타트업 데이터베이스를 통해 내부 도구 만들어 내는데 시간을 투자할 수 없어 문제를 겪고 계신 분들을 만나 뵙고 싶습니다. 그렇게 하기 위해선 연락처 추가, 메일 보내기, 미팅 노트 작성하기 등 아직 만들어야할 기능들이 많습니다.

홉스를 통해서 많은 스타트업 프로그래머와 종사자분들을 만나기를 바랍니다. 🤭

혹시 내부 도구를 만들어야 하는데 시간이 없으셔서 만들지 못하고 계신다면 알려주세요! 홉스가 가장 쉽고 빠르게 만들 방법을 제시하겠습니다. 감사합니다.

홉스, Supabase로 스타트업 대시보드 만들기 | 홉스 블로그

홉스를 개밥 먹기 하기 위해 만들게 된 스타트업 대시보드 개발기를 공유합니다.

https://blog.hops.pub/startup-dashboard

홉스를 시작하게된 이유

데이터베이스를 누구나 쉽게 사용할 수 있도록 하는 "쿼리 딜리버리"를 개발하던 홉스 팀이 프로그래머가 쉽고 편하게 사용할 수 있는 로우 코드 내부 도구 빌더 "홉스"를 만들게 된 계기에 대해 얘기해보려합니다.

쿼리 딜리버리의 시작

저는 전 직장에서부터 풀 스택 프로그래머로 일해왔습니다.

제가 만들던 소프트웨어는 O2O 포인트 적립 서비스다 보니 타깃 고객군도 "매장 사장님"과 "매장 방문 손님"으로 두가지 타깃이 있었습니다.

두 가지 타겟 고객에서 들어오는 다양한 요청 사항과 총 이용 고객이 천만 이상 되는 서비스를 개발하고 운영한다는 것은 정말 도전적인 일이었습니다.

제품 개발팀에서 오래 재직하다 보니 내부 도구를 개발하던 경험을 살려, 매장 사장님과 매장 방문 손님을 직접 관리하는 팀과도 밀접하게 일하게 되었습니다. 제 책임과 역할이 넓어지면서 제품 운영팀 분들이 서비스 고객과 직접 마주하며 전쟁과 같은 하루를 보내신다는 것도 이전보다 훨씬 더 잘 알게 되었습니다

.

이미 어드민 페이지(내부 도구)가 만들어져 있었음에도 사업 성장과 같이 유지 보수되지 못하다 보니 운영팀은 모든 고객의 문제에 대응하기 어렵고, 어쩔 수 없이 개발 인력이 존재하는 제품 개발팀에 지원 요청을 할 수 밖에 없는 상황이었습니다.

하지만 제품 개발팀도 제품의 기능의 개발이 우선되다 보니 모든 요청을 지원할 수 없는 상황이었고, 결과적으로는 개발팀과 운영팀 모두 어려운 상황을 마주쳤던 것 같습니다. 저는 이 문제를 조금 더 잘 해결하기 위해 홉스를 창업하게 되었습니다.

제품 운영 문제에서 프로그래머의 리소스 사용을 최소화하려다 보니, 데이터베이스 사용에 관해 관심을 쏟게 되었습니다.

1. 전 직장에서 많이 받던 요청이 내부 도구에서 볼 수 없는 데이터를 위해 SQL을 작성하는 일이었습니다.
2. 제품 운영을 책임지는 내부 도구의 역할 중 가장 중요한 부분이 데이터베이스의 데이터를 조회, 편집을 쉽게 하도록 해주는 것이라고 판단했습니다.

그래서 홉스는 첫 목표로 "데이터베이스를 누구나 사용할 수 있도록 하자!"는 목표를 세웠습니다. 기술의 제약 없이 데이터베이스를 누구나 사용할 수 있다면, 프로그래머가 별도로 구현해야 하는 기능도 없어질 것이고 더 나아가서는 제품 운영팀이 만들고 싶은 기능을 스스로 만들어서 사용할 수 있으리라 생각했습니다.

그렇게 홉스는 노 코드/로우 코드 기술 기반으로 누구나 쉽게 데이터베이스를 사용할 수 있도록 "쿼리 딜리버리"를 개발하게 되었습니다.

쿼리 딜리버리에서 해결하지 못한 문제

데이터베이스에 있는 데이터들을 SQL 없이도 조회할 수 있는 기능과 프로그래머가 SQL을 재활용할 수 있도록 템플릿 언어와 함께 작성할 수 있는 두 가지 기능을 쿼리 딜리버리에서 가장 먼저 제공하였습니다. 이후에 차트, 대시보드, 권한 등의 기능을 만들어 나갔고 이를 기반으로 페이지를 구성할 수 있는 빌더 시스템을 개발 중이었습니다.

쿼리 딜리버리의 고객분과 만나며 문제를 듣고 홉스에서도 쿼리 딜리버리의 운영을 쿼리 딜리버리로 직접 하면서 몇 가지 문제점에 부딪히게 되었습니다.

1. 데이터를 조금 더 깊게 분석하고 보고 싶으신 분들의 경우 SQL을 직접 공부해서 사용하시고 있었습니다.
2. CRUD를 자유롭게 사용할 수 있는 서비스에 데이터 무결성/보안 측면의 걱정이 있었고, 정확한 데이터 작업을 위해서라도 결국 프로그래머가 SQL을 만들어 실행하는 경우가 대다수였습니다.
3. 내부 도구를 대체하기 위해서는 데이터베이스만으론 부족했습니다. 고유한 비즈니스 프로세스를 처리하기 위해 내부 로직을 사용하기도 하고 데이터베이스 외에 다양한 스택 연동을 해야했습니다.

쿼리 딜리버리는 데이터베이스를 누구나 쉽게 사용할 수 있도록 돕고 있지만, 제품 운영을 적극적으로 도울 수 있는 내부 도구를 만들어 내기 위해서는 새로운 방법이 필요했습니다.

홉스의 새로운 해결책

홉스는 내부 도구를 개발하는 프로그래머에게 주목하기 시작했습니다. 몇 년 전 제품 운영을 고민하는 프로그래머였던 제 자신의 문제이자 쿼리 딜리버리를 운영하면서 만난 고객들의 문제를 더 잘 해결하기 위해서였습니다.

우리는 이제 내부 도구 개발을 위한 로우 코드 서비스인 "홉스"를 출시합니다. 홉스에서는 쿼리 딜리버리에서 직면했던 문제를 아래의 해결책으로 해결합니다.

1. 내부 도구를 가장 잘 만들 수 있는 프로그래머를 돕습니다. 프로그래머가 가장 편하고 쉽게 사용할 수 있도록 합니다.
2. 다양한 UI 컴포넌트를 통해 적은 코드로 다양한 화면을 구성할 수 있습니다.
3. 데이터베이스 외에도 JavaScript, REST API, MongoDB를 지원하고 더 많은 데이터 소스를 통해 수십 가지의 일을 해결합니다.

홉스가 어떻게 문제를 잘 해결할 수 있는지 등의 세세한 기능 소개는 앞으로 차차 소개해드리겠습니다.

마치며

쉽게 써지는 가벼운 내부 도구 빌더 "홉스"를 통해 제품 운영에 새로운 방법을 제시합니다. 랜딩 페이지와 문서에서 더 자세한 기능 설명을 보실 수 있습니다.

내부 도구 개발이나 제품 운영에 고민이 있으시거나, 내부 협업 프로세스 자동화 등에 고민이 있으시다면 언제든지 연락 부탁드립니다. 디스콰이엇 메시지나 저희 제품의 채널톡으로 연락주셔도 됩니다!

감사합니다.

홉스를 시작하게된 이유 | 홉스 블로그

데이터베이스를 누구나 쉽게 사용할 수 있도록 하는 "쿼리 딜리버리"를 개발하던 홉스 팀이 프로그래머가 쉽고 편하게 사용할 수 있는 로우 코드 내부 도구 빌더

https://blog.hops.pub/why-do-we-start-making-hops