녹호두

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

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

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

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

히스토리

배경 확인

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

문제 확인

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

대안탐색 과정

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

솔루션을 찾아가는 과정

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

서비스 구경하기

서비스 보러 가기 ➡️

사용 솔루션 및 이유

• 분석 환경 : 구글애널리틱스 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의 인테그레이션 기능을 활용하여, 즉시 노션 데이터베이스에 반영됩니다.

• 웹페이지, 데이터베이스 : 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을 붙여 넣기 한 후, 내 노션 아무 영역에 붙여 넣기 합니다.

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

에어테이블의 개념 기초

[노션 꿀팁/트릭] 노션 페이지 타이틀 2줄(여러 줄) 만드는 방법

과거 노션은 타이틀을 2줄 이상 작성할 수 있도록 허용하고 있었으나, 최근 언젠가부터 타이틀

의 줄 바꿈 줄 나눔을 지원하지 않고 있습니다. 

위처럼 두줄로 표기하기 위한 여러 가지 방법

1. 컨트롤 ctrl + 엔터 Enter

2. 알트 alt + 엔터 Enter

3. 윈도 window + 엔터 Enter

모두 다 해보아도 아래와 같은 결과만 노출됩니다.

맥북도 윈도우도 동일합니다.

하지만, 방법이 없는 것은 아닙니다.

준비물은 "이미 타이틀(제목)이 두 줄로 표시되어있는 템플릿 복제가 가능한 노션 페이지"입니다.

본인 소유의 페이지라면 복제 가능 여부는 없어도 괜찮습니다.

타이틀이 두줄인 페이지는 여기 있어요 👇

👋 순서대로 따라 하면 돼요

첫 번째.

이미 타이틀(제목)이 두 줄로 표시되어있는 템플릿 복제가 가능한 노션 페이지에 접속한다.

그리고, 복제 버튼을 통해 내 노션으로 해당 템플릿을 가져온다.

두 번째.

가져온 템플릿에서 타이틀을 쭉 드래그하고 복사한다.

(노션 특성상 해당 타이틀이 아니라 페이지가 복사돼 기도하기 때문에, 컨트롤 + C를 여러 번 누른다.)

세 번째.

여러 줄의 타이틀을 적용하고 싶은 페이지로 돌아와 타이틀에 붙여 넣기를 한다. 여러 번 붙여 넣기 하면 두줄 세줄도 가능하다.

네 번째.

원하는 내용으로 타이틀을 수정합니다.

단, 이 역시 타이틀에 여러 줄을 밀어 넣었을 뿐 "줄 바꿈/엔터"는 지원하지 않기 때문에 아래처럼 빈 줄을 만들려면, 해당 줄의 모든 내용을 삭제하면 됩니다.

노션 페이지 제작 문의하기 👇

유튜브에 올라와있는 앱 시트 Appsheet 노코드 강의 <코딩하는 약사>님의 강의를 수강하며 기록한 개인 공부 목적으로 기록한 자료입니다. 

구글 스프레드시트 데이터입력 > 확장 프로그램 > 앱 시트 > 앱 만들기

구글 스프레드시트의 데이터를 바탕으로 껍데기는 만들어짐

Data > Colums > 직원 정보에서 데이터 타입을 설정

UX 탭으로 옴, + 버튼을 눌러서 데이터를 입력함

저장하면, 입력한 데이터가 구글 스프레드시트에 반영되어있음

디테일뷰, 목록 뷰로 노출됨

구성은 UX에서 변경할 수 있음

(TBD)

노코드를 배우게 된 계기

프로덕트 매니저로 일하면서, 다양한 프로토타입으로 실제 테스트를 해보고 싶은 경우도 있고, 내가 생각한 것을 구현해보고자 하는 욕구가 크다. 그런데 늘 그렇듯 개발자와 디자이너 리소스는 부족하기 때문에, 우선순위에 밀려 못하게 되는 경우가 많다.

그래서, 내가 직접 앱/웹을 만들 수 있다면 어떨까라는 생각을 했고, 노코드 플랫폼을 알게 되었다.

어느 정도 시간만 투자한다면 원한 바 대부분을 얻을 수 있을 것이라고 생각했고, 스스로 하나의 특장점이 될 수 있다고 생각해 강화해보고자 한다.

노코드 툴에 관해

노코드 툴은 말 그대로 No code. 코드를 직접 쓰지 않고 앱/웹 등의 서비스를 만드는 툴을 말한다. 2022.03 현재 노코드 툴은 굉장히 많이 있다. 글라이드, 아달로, 앱 시트, 버블 등등. 이에 관해서 사수 캠프에서 다양한 노코드 툴의 사용목적이나 방법에 대해 안내한 글을 참조해 처음에는 글라이드를 공부하려 했다.

글라이드를 선택했던 이유

1. 구글 스프레드시트와의 연동을 지원한다.

노코드 툴은 대부분 데이터베이스를 Airtable이라는 툴을 사용하는듯하다.

하지만 노코드 앱/웹 메이킹 툴만 공부하는 데에도 시간이 많이 쓰일 것이라고 예상해, 굳이 DB를 위한 툴 공부에 시간을 쓰고 싶지 않아 구글 스프레드시트와의 연동을 지원하는 글라이드를 선택했다.

2. UI가 예쁘다.

아래의 스크린숏은 내가 만들려고 했던 "거래를해보쇼"라는 앱이다.

대충 봐도 알 수 있듯이, 글라이드 Glide는 아주 쉬울 뿐 아니라 예쁜 UI의 앱을 만들어주는 막 강한 툴이다.

하지만, 생각보다 글라이드는 쉽고 빠르게 만드는 데에 초점이 되어있을 뿐, 자유도가 생각보다 많이 낮았다.

글라이드 Glide로 앱 만들기 후기가 궁금하다면 👇

⚠️ 글라이드 Glide의 한계

1. 첫 페이지가 무조건 Style에 정해진 8가지 중 하나만 가능하다. 

리스트, 타일, 캘린더, 맵, 체크리스트, 카드, 스와이프, 디테일.

그렇기 때문에 설명이 적힌 랜딩페이지를 만들거나 하는 것은 어렵다.

2. 검색이 제한적이다.

타이틀, 부가정보 등으로 검색할 수 있으나, 날짜를 지정해 캘린더로 검색하는 기능은 지원하지 않는 듯했다.

또한, 필터도 하나의 조건만 가능하다. (eg. 총 상품 종류가 신발, 바지, 시계인 경우 세가 가지 중 하나만 선택 가능하며 다른 필터를 함께 적용할 수 없다. )

일정과 관련된 마켓플레이스를 만들어 보고 싶었기 때문에 위의 이유 때문에 글라이드 Glide를 사용하지 않게 되었고, 2번의 장점을 포기한 채 1번의 장점을 가진 앱 시트 Appsheet를 배우게 됐고, 앱 시트는 글라이드에 비해 심미적인 UI가 떨어지지만 자유도가 매우 높다. (수많은 노코드 플랫폼 중에서 구글이 앱 시트를 인수했다는 점에서, "쉽고" "파워풀하다"라는 점이 이미 증명됐다고 생각할 수도 있다.)

글라이드 Glide를 공부할 때는 제대로 된 가이드 문서가 없다시피 해, 하나하나 눌러가면서 배워야 했지만, 앱 시트는 <코딩하는 약사>라는 블로거/유투버분이 계셔서 강의자료를 참조하려고 한다.

코딩하는 약사님 강의 수강 기록 👇