노코드 대표 솔루션인 노션 Notion, 탈리 Tally 등을 활용해 4시간 만에 간단한 서비스를 만든 경험을 공유합니다.
노션으로도 충분히 간단한 서비스를 만들 수 있고, 가설 검증을 위한 퀵한 프로토타이핑에는 충분한 솔루션임을 증명합니다.
자세한 구성내용에 대해 공유하여, 누구든 아래 내용을 통해 비슷한 서비스를 만들 수 있습니다.
주제 : 교정비용 공유 커뮤니티/웹 서비스
히스토리
배경 확인
- 치아 교정은 각각 치과에서 상담을 해야만 그 가격을 알 수 있는 대표적인 깜깜이 시장 중 하나이다.
- 가격에 대한 로직도 고객에게 전혀 공개되지 않아, 내 가격이 괜찮은 것인지 또는 다른 사람들은 얼마에 교정을 하는지 확인하기 어렵다.
문제 확인
- 고객은 치아교정 비용을 알려면 수 많은 블로그를 전전하며 하나씩 정보를 취득해야 한다.
- 고객은 자신이 받은 치아교정 견적/비용이 적정한지 알 수 없다.
- 고객은 병원에 가서 상담을 받지 않으면, 가격을 알 수 없다.
대안탐색 과정
- 병원별 교정비용을 어딘가에서 수집해서 공개한다?
- 확보할 수 없다.
- 병원별 교정비용 계산로직을 어딘가에서 수집해서 공개한다.
- 확보할 수 없다.
솔루션을 찾아가는 과정
- 고객들이 다른 사람들의 견적비용을 확인할 수 있는 서비스를 만든다.
- ➡️ 조회 서비스를 만들려면 고객이 방문했을 때, 조회할 수 있는 데이터 원천이 있어야 하는데?
- ➡️ 고객이 자신의 견적비용을 입력할 수 있는 계좌를 만들고, 동기를 제공한다.
- ➡️ 치과는 마다마다 교정비용 로직이 모두 다르고, 치과에서 안내받은 비용 외에도 실제적으로 드는 비용이 많으나, 이를 확인하고 비교하기 어렵다.
- ➡️ 고객에게 여러 병원에서 자신이 받은 견적이 실제적으로 얼마 인지, 그 예상 비용을 계산하는 계산기를 제공한다. 계산기를 통해 실제로, 소요될 가격이 얼마일지 확인할 수 있고, 선택적으로 이를 제출하면 타인에게 공유된다.
- ➡️ (가설) 고객은 자신의 교정비용이 실제로 얼마가 드는지, 경험해보지 않는다면 알 수 없는 영역까지 계산해 주는 계산기가 있다면 매력을 느끼고 사용할 것이다.
- ➡️ 고객에게 여러 병원에서 자신이 받은 견적이 실제적으로 얼마 인지, 그 예상 비용을 계산하는 계산기를 제공한다. 계산기를 통해 실제로, 소요될 가격이 얼마일지 확인할 수 있고, 선택적으로 이를 제출하면 타인에게 공유된다.
- ➡️ 치과는 마다마다 교정비용 로직이 모두 다르고, 치과에서 안내받은 비용 외에도 실제적으로 드는 비용이 많으나, 이를 확인하고 비교하기 어렵다.
서비스 구경하기
사용 솔루션 및 이유
- 분석 환경 : 구글애널리틱스 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를 활용하고자 함.
- 커버 이미지 제작 : 피그마 + 애플 이모지
- 피그마를 활용해 노션 페이지 상단의 커버를 제작하였습니다.
- 별도의 템플릿을 활용하지는 않았으며, 기본 글꼴과 이모지를 활용하여 커버 이미지를 제작했습니다.
- 노션 커버이미지 사이즈는 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 = (유지장치 비용) + (기타 추가비용)
- Total Cost = Variable Cost + After Cost + Basic Cost
- 고객의 비용 계산기를 Tally 탈리로 제작하였습니다.
- 결과금액을 조회한 후, 하단에서 선택적으로 비용정보를 공유할 수 있습니다. 보다 도움이 되는 정보가 될 수 있게 선택적으로 상담자의 정보나 병원의 정보를 입력할 수 있도록 하였습니다.
- 비용정보를 공유하면, Tally의 인테그레이션 기능을 활용하여, 즉시 노션 데이터베이스에 반영됩니다.
- 웹페이지, 데이터베이스 : 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을 붙여 넣기 한 후, 내 노션 아무 영역에 붙여 넣기 합니다.
- 노션 페이지의 공유하기를 눌렀을 때 나오는 주소 전체를 복사합니다.
전문가에게 노션 페이지 제작 의뢰하기
에어테이블의 개념 기초
'📊 study > No-code study 🤨' 카테고리의 다른 글
에어테이블 airtable 소개 및 간단 사용법 (구글 스프레드시트와 비교, 가격, 엑셀, 구글폼, 대시보드) (2) | 2022.05.22 |
---|---|
[노션 꿀팁] Notion 데이터베이스 2줄로 입력하는 법 <노션트릭> (2) | 2022.04.17 |
[노션 꿀팁] Notion 페이지 타이틀 제목 두줄(여러 줄) 만드는 방법 <노션트릭> (0) | 2022.04.11 |
[노코드/앱시트 입문기] 노코드 플랫폼 선택방법, 글라이드Glide 선택이유, 글라이드Glide 단점, 앱시트 강의 <코딩하는 약사> (2) | 2022.03.28 |
[노코드 입문기] 글라이드 Glide 는 비추천합니다 - 샘플 앱, 거래 플랫폼, 에어비앤비 (0) | 2022.03.28 |