[노코드] 노션으로 서비스 만들기 - 교정비용 계산기 (토이프로젝트, 사이드 프로젝트, 구글애널리틱스, 힛츠, 방문자, 임베드)

노코드 대표 솔루션인 노션 Notion, 탈리 Tally 등을 활용해 4시간 만에 간단한 서비스를 만든 경험을 공유합니다.

노션으로도 충분히 간단한 서비스를 만들 수 있고, 가설 검증을 위한 퀵한 프로토타이핑에는 충분한 솔루션임을 증명합니다.

자세한 구성내용에 대해 공유하여, 누구든 아래 내용을 통해 비슷한 서비스를 만들 수 있습니다.

---

주제 : 교정비용 공유 커뮤니티/웹 서비스

---

히스토리

 

배경 확인

• 치아 교정은 각각 치과에서 상담을 해야만 그 가격을 알 수 있는 대표적인 깜깜이 시장 중 하나이다.
• 가격에 대한 로직도 고객에게 전혀 공개되지 않아, 내 가격이 괜찮은 것인지 또는 다른 사람들은 얼마에 교정을 하는지 확인하기 어렵다.

 

문제 확인

• 고객은 치아교정 비용을 알려면 수 많은 블로그를 전전하며 하나씩 정보를 취득해야 한다.
• 고객은 자신이 받은 치아교정 견적/비용이 적정한지 알 수 없다.
• 고객은 병원에 가서 상담을 받지 않으면, 가격을 알 수 없다.

 

대안탐색 과정

• 병원별 교정비용을 어딘가에서 수집해서 공개한다?
  • 확보할 수 없다.
• 병원별 교정비용 계산로직을 어딘가에서 수집해서 공개한다.
  • 확보할 수 없다.

 

솔루션을 찾아가는 과정

1. 고객들이 다른 사람들의 견적비용을 확인할 수 있는 서비스를 만든다.
   1. ➡️ 조회 서비스를 만들려면 고객이 방문했을 때, 조회할 수 있는 데이터 원천이 있어야 하는데? 
   2. ➡️ 고객이 자신의 견적비용을 입력할 수 있는 계좌를 만들고, 동기를 제공한다.
      1. ➡️ 치과는 마다마다 교정비용 로직이 모두 다르고, 치과에서 안내받은 비용 외에도 실제적으로 드는 비용이 많으나, 이를 확인하고 비교하기 어렵다.
         
         1. ➡️ 고객에게 여러 병원에서 자신이 받은 견적이 실제적으로 얼마 인지, 그 예상 비용을 계산하는 계산기를 제공한다. 계산기를 통해 실제로, 소요될 가격이 얼마일지 확인할 수 있고, 선택적으로 이를 제출하면 타인에게 공유된다.
            1. ➡️ (가설) 고객은 자신의 교정비용이 실제로 얼마가 드는지, 경험해보지 않는다면 알 수 없는 영역까지 계산해 주는 계산기가 있다면 매력을 느끼고 사용할 것이다.

---

서비스 구경하기

교정비용 공유

서비스 보러 가기 ➡️

서비스 미리보기 1

 

서비스 미리보기 2

---

사용 솔루션 및 이유

 

• 분석 환경 : 구글애널리틱스 GA
  • 서비스, 계산기 페이지에 들어오는 고객에 대한 분석을 목적으로 합니다.
  • 노션에 구글애널리틱스를 연결하는 방법은 간단합니다.
    • GA4 가 아닌 과거타입인 UA 형태로 구글애널리틱스 속성을 생성합니다.
    • 여기서 UA-#########-1 를 복사 해옵니다. (###는 사람마다 고유 값이며, 숫자입니다.)
    • 노션 페이지의 공유하기를 눌렀을 때 나오는 주소 중 https:// 이후부터 notion.site 까지 복사합니다. 
      
      • https://greenhodu.notion.site/1939a1fdc5404f95ad6deac6b2371b91 의 경우, greenhodu.notion.site를 말합니다.
    • 그리고 이 페이지를 구글애널리틱스에서 뭐라고 부를지 구분합니다. /##### 류로 정의합니다.
    • 다음의 주소에 자신의 정보를 붙여 넣습니다.
      • https://notion-ga.ohwhos.now.sh/collect?tid=UA-#########-1&host=#######.notion.site&page=/#############
    • 이 주소를 복사하여, 노션에 아무 영역에 붙여 넣기 하며 완료입니다.
    • 이미지 형태로 임베드되며, 아무것도 표시되지 않으나 정상입니다.

구글애널리틱스

구글애널리틱스 페이지

• 링크 변경 : 비틀리 
  • 공유를 목적으로 하는 링크 변경. 링크 길이를 감소시켜 카카오톡 등에 공유하기 용이하게 함.
  • 비틀리 프로 요금제를 사용할 경우, 몇 명의 유저가 언제 들어왔는지 데이터 분석용으로도 사용가능하나, 무료 요금제를 사용하여, 해당 내용은 구글애널리틱스 GA를 활용하고자 함.
    • asis : https://greenhodu.notion.site/1939a1fdc5404f95ad6deac6b2371b91
    • tobe : https://bit.ly/3AZNUyP

비틀리

링크 공유 예시

 

• 커버 이미지 제작 : 피그마 + 애플 이모지
  • 피그마를 활용해 노션 페이지 상단의 커버를 제작하였습니다. 
  • 별도의 템플릿을 활용하지는 않았으며, 기본 글꼴과 이모지를 활용하여 커버 이미지를 제작했습니다. 
    • 노션 커버이미지 사이즈는 1200px * 200 px 이 적절하며, 작업 후 4 배수 정도로 출력하여 적용하여야 PC web에서 깨짐이 없습니다.
  • 노션 OG는 별도로 설정하지 않아도 다음을 따릅니다.
    • OG image : 노션 커버 이미지
    • OG Title : 노션 페이지 제목
    • OG Description : 노션 페이지 내 첫 문장

피그마

링크 공유 예시

노션 상단 키 비주얼 제작

• 계산기 : Tally 탈리
  • 고객의 비용 계산기를 Tally 탈리로 제작하였습니다.
    • 비용 변수 구성 :  Total Cost = Variable Cost + After Cost + Basic Cost
    • A부터 I까지 변수를 고객이 입력하면 설정한 로직에 따라 결과금액을 노출합니다. 
    • 로직
      • Total Cost = Variable Cost + After Cost + Basic Cost
        • Basic Cost = (기본 비용) + (교정 전 치료 비용) + (초기 검사 비용) 
        • Variable Cost = (회당 진료비 + 교통비)  * (한 달마다 방문 진료 횟수) * (예상치료 기간) * 12 (월)
        • After Cost = (유지장치 비용) + (기타 추가비용)

탈리

계산로직

• 결과금액을 조회한 후, 하단에서 선택적으로 비용정보를 공유할 수 있습니다. 보다 도움이 되는 정보가 될 수 있게 선택적으로 상담자의 정보나 병원의 정보를 입력할 수 있도록 하였습니다.

비용정보 공유하기

• 비용정보를 공유하면, Tally의 인테그레이션 기능을 활용하여, 즉시 노션 데이터베이스에 반영됩니다.

노션에 즉시 데이터 연동

Tally <> Notion 연동 : Integration

• 웹페이지, 데이터베이스 : Notion 노션
  • 페이지와, 데이터베이스는 모두 노션으로 만들었습니다.
  • 페이지에 임베드된 tally를 통해, 고객은 비용 계산해 보기를 할 수 있으며, 선택적으로 자신의 견적정보를 저장할 수 있습니다.
  • 정보를 저장하면 노션의 데이터베이스에 저장되며, 가공하여 노출됩니다. 

노션

노션

 

• 방문자수 카운트 : Hits
  • 이 페이지가 얼마나 활성화 되었는지 고객에게 보여주고, 간단하게 오늘 몇명의 고객이 방문하였는지 확인하는 목적으로 힛츠를 활용하였습니다.
  • 힛츠 링크 : https://hits.seeyoufarm.com/
  • 사용방법은 매우 간단합니다. 위의 구글애널리틱스 연동과 동일하게 임베드를 활용하는 방식입니다.
    • 노션 페이지의 공유하기를 눌렀을 때 나오는 주소 전체를 복사합니다.
      
      • https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://greenhodu.notion.site/1939a1fdc5404f95ad6deac6b2371b91&count_bg=#79C83D&title_bg=#555555&icon=&icon_color=#E7E7E7&title=hits&edge_flat=false
    • 다음의 영역에 url을 붙여 넣기 한 후, 내 노션 아무 영역에 붙여 넣기 합니다.

힛츠

 

전문가에게 노션 페이지 제작 의뢰하기

노션 Oopy로 뚝딱 홈페이지, 서비스 만들어드립니다 - 크몽

 

에어테이블의 개념 기초

에어테이블 airtable 소개 및 간단 사용법 (구글 스프레드시트와 비교, 가격, 엑셀, 구글폼, 대시보