녹호두

노코드 대표 솔루션인 노션 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을 붙여 넣기 한 후, 내 노션 아무 영역에 붙여 넣기 합니다.

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

에어테이블의 개념 기초

본 글은 유튜브 생활코딩의 강의를 배경으로 하는 주관적인 글입니다.

에어 테이블이란

구글 스프레드시트와 비슷한 표의 형태에 추가적인 부가기능을 가지며, 칼럼(열)마다의 타입을 직접 설정할 수 있는 데이터베이스.

실제 백엔드 엔지니어들이 사용하는 데이터베이스보다는 가볍고(쉽고), 구글 스프레드시트보다는 무거운(전문적) 데이터베이스.

라고 할 수 있다.

https://www.airtable.com/

추가로, 데이터베이스를 주로 활용하는 방식인 캘린더 / 폼(신청서) 등의 화면(페이지)을 지원한다.

예를 들어 구글의 경우 구글 스프레드시트에 데이터를 쌓게 하기 위해서 구글 폼을 사용하여 응답을 연결하는 방식. 즉 두 개의 앱을 사용하는 방식인 반면, 에어 테이블의 경우 데이터베이스와 폼 모두를 보유하고 있기 때문에 하나의 앱에서 두 가지 기능을 모두 사용 가능하다.

폼은 구글 폼에서도 지원하는 기능으로 큰 이점이 있다고 보기 어렵지만, 캘린더 등의 다른 뷰는 구글 문서에서는 지원하지 않는 기능으로 큰 이점이 있다.

무료인데 유료다

기본적으로 무료이나, 사용제한이 있으며 실질적인 데이터베이스로 활용하기 위해서는 유료결제가 필요하다.

가격정책은 다음과 같으며, 혼자 사용한다면 가격은 저렴한 편에 속하나, 

여러 명의 협업 목적으로 사용한다면 인당 가격이 부과되기 때문에 비용이 비싸진다.

어떤 경우에 쓰나

플러그인이나 앱과의 연동뿐 아니라, 구글 스프레드시트보다 많은 기능을 지원하면서도 '본격적인'데이터 보이스보다는 라이트 하기 때문에 혼자 서비스를 만들거나 간단한 프로덕트를 기획하는 케이스에 많이 사용된다. 

기본적인 구조

워크스페이스 Workspace > 베이스 base > 테이블 Table > 뷰 View

구글 스프레드 시트랑 비교하자면

1. 워크스페이스 : 구글 문서 도구 (폴더)

2. 베이스 : 구글 스프레드시트 문서 1개

3. 테이블 : 구글 스프레드시트 문서의 탭 1개

4. 뷰 : - (구글 스프레드시트에서는 지원하지 않는 단계) 

구글 스프레드시트를 대체할 수 있나?

구글스프레드시트를 문서도구로 사용하는 경우에는 해당하지 않겠지만, 데이터베이스로 활용한다면

유료임에도, 구글 스프레드 시트보다 상위 기능을 보유하고 있다는 점에서 대체가능하다고 생각한다.

대시보드 기능

구글스프레드 시트에서는 대시보드를 만들려면 하나의 시트를 새로 만들고 거기에 차트를 몰아넣고, 지금부터 너를 대시보드로 부른다.라는 방식으로 대시보드를 만들 수 있다. 

즉, "대시보드"인 탭을 만드는 방식이다.

반면 에어 테이블에서는 자체 기능으로 대시보드 기능을 지원한다.

베이스에서 좌측 상단에 있는 인터페이스를 선택하면, 다양한 인터페이스를 지원하며 이중 대시보드를 선택할 수 있다.

안전한가?

모든 데이터베이스 프로그램이 보안에 대한 이점을 어필하지만, 자체 데이터베이스를 구축하는 것만큼 보안 안정성이 높다고 하기 어렵다. 따라서, 기밀정보에 해당하는 정보들은 자체 데이터베이스를 활용하고, 에어 테이블 같은 서드파티 프로그램을 활용하는 것은 지양하는 것이 바람직하다.

함수 Formula도 지원한다.

구글 스프레드시트보다는 수가 적지만, 기본적인 함수 구조가 비슷하여 큰 어려움 없이 사용 가능하다.

https://support.airtable.com/hc/en-us/articles/203255215-Formula-field-reference

API와의 연동도 지원한다.

다양한 API 연동을 적극적으로 지원하여 다양한 자동화 업무가 가능하다. 가능한 API 리스트는 아래의 페이지에서 확인 가능하다. 

https://airtable.com/api

기본적인 사용법 링크

https://support.airtable.com/hc/en-us/sections/360009677453

생활코딩 강의 링크

https://youtube.com/playlist?list=PLuHgQVnccGMCD1zZNtEfdljrtoZIL4CaA 

(2023.10) 에어테이블을 활용해 노코드 프로덕트를 빠르게 만들어드립니다 👇

꼭 프로덕트가 아니어도, 에어테이블 세팅, 구축도 도와드려요 편하게 문의부탁드립니다

이런 걸 하고 싶을 때가 있습니다.

노션을 사용하다보면 아래의 첨부 이미지처럼, 표/갤러리/타임라인/보드 등 데이터베이스를 행이 2개로, 연속해서 2줄로 표시하고 싶은 때가 있습니다. (특히 PC 최적화인 페이지를 만들 때 그렇죠)

그런데,

익숙한 방법으로 칼럼을 밀어넣으려고 하면 동작하지 않습니다.

붉은색 박스인 예시 캘린더(1)를 잡고 예시 데이터(1)의 우측에 밀어 넣으려고 하면, 아예 동작하지 않습니다.

이렇게 해결하면 됩니다.

해결방법은 다음과 같습니다.

하나.

병렬로 놓고 싶은 두 개의 데이터의 맨 앞 관리 버튼 [::]을 클릭해 "페이지로 전환"을 클릭합니다.

그럼 아래처럼 "표", "캘린더"가 아니라 "페이지"로 전환됩니다.

둘.

이제 하나의 데이터를 다른 하나의 데이터 옆으로 끌어서 옮깁니다.
표/캘린더로 되어있던 이전과 달리, 옆으로 이동이 가능합니다.

셋.

이제 각각의 데이터의 [::] 버튼을 클릭해 모두 인라인으로 전환시켜주면 완성입니다.

이렇게, 인라인 데이터베이스를 병렬 배치하는 방법을 알아보았습니다.
적용된 템플릿은 여기서 확인할 수 있습니다.

👇 필요한 노션 페이지/사이트가 있다면

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

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

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

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

1. 컨트롤 ctrl + 엔터 Enter

2. 알트 alt + 엔터 Enter

3. 윈도 window + 엔터 Enter

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

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

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

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

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

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

👋 순서대로 따라 하면 돼요

첫 번째.

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

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

두 번째.

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

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

세 번째.

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

네 번째.

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

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

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