녹호두

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

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

에어테이블의 개념 기초

왜 써 보게 됐는지

마침 계절이 지나가면서 코트/패딩류를 세탁 후 보관해야 하는 시즌이기도 했고, 서비스를 만드는 사람으로서, 다른 서비스를 경험해보고자 하는 것이 컸다.

왜 세특을 선택했는지

대표적으로 런드리 고와 세탁 특공대 두 가지가 있었고, 런드리고가 섬세한 브랜딩과 마케팅으로 좀 더 매력적인 브랜드로 인지되어있었다.

사용하고자 런드리고에 진입했다. 나는 구독 결제가 아니라 1회성 이용을 원했는데, 1회 이용 등록 화면에서 서비스 신청 전에 카드를 먼저 등록해야 했다. 그런데 단순 결제(네이버, 토스 등)를 지원하지 않아서 카드번호를 하나하나 입력해야 하는 불편이 있어서 이탈하게 되었다.

사진으로 카드번호를 등록하는 것도 지원하지 않아서 불편이 컸다.

그래서 세탁 특공대를 들어갔고,

세탁 특공대는 기본적으로 1회성 이용이 기본이어서인지 카드 등록이 필수조건이 아니었고, 신청서(챗봇 형식)를 작성한 후에 결제 등록을 하게 되어서 이미 신청 폼을 작성한 김에 그냥 여기서 하자.라는 이유로 이용하게 되었다.

특이했던 점은, 나는 코트 드라이클리닝을 맡겼는데 두 서비스의 이용금액이 동일했다는 점이다. 보통은 경쟁을 통해 가격 인하가 일어나기 마련인데 두 개의 서비스의 거의 모든 가격이 동일하다는 점이 의외였고 수. 상. 하. 다. 고 느껴졌다.

예상 밖의 불편했던 점

스스로 세탁 특공대와 런드리고 를 경험하면서 예상 밖이었던 것은

집 앞에 코인 세탁소도 있고, 크린토피아도 있어서 인지 굳이 앱을 새로 깔고 정보를 입력하고 카드 등록하고 새로운 플로우에 적응하는 것이 오히려 저항으로 느껴졌다는 점이다. 그 말은 앱을 통해서 세탁을 신청하는 경험 자체가 엄청 쉽고 편하진 않았다는 것을 의미하기도 한다.

세탁 앱 초기 이용 Funnel/STEP

** 서비스별로 작은 차이는 있을 수 있으나, 굉장히 스텝이 분화되어있다.

-> 세탁 앱의 주 타깃은, 세탁소에 방문하기 시간이 없는 사람이겠지만

단순히 귀찮거나, 편리함을 위해 사용해보고자 하는 유저들도 포섭하기 위해서는 현재의 "첫 이용 경험"의 funnel을 단축시킬 필요가 있어 보인다. 

세탁소 이용 Funnel/STEP

불편했던 부분

1) 결제수단 등록

신청 전에 꼭 결제수단을 등록해야 하는데, 일반적으로 커머스에서는 가장 마지막 단계에서 결제를 진행하게 되는데 세탁 앱에서는 결제수단 등록 스텝이 상당히 앞순위에 있어서 저항감이 꽤 드는 부분이었다. 

2) 신청하기 버튼을 찾기 어려움

UI는 깔끔하나, 전체적인 이용방식을 확인하는 데에 어려움이 있었다. 당연히 첫 페이지에서 신청하기 버튼이 있을 것이라고 생각했지만, 신청하기 버튼이라는 것은 존재하지 않고 하단 앱바에 (+) 버튼이 있고 이를 눌러야 신청서를 작성할 수 있었다.

특히, (+) 버튼은 인스타그램, 유튜브 등의 콘텐츠 베이스 서비스에서 주로 사용하는 UI이기에 유저들은 "콘텐츠 등의 무언가를 작성하는 버튼"으로 인식될 가능성이 높지, "신청서를 작성하는 버튼"으로 인지되기에는 어려움이 있을 것으로 예상되었다.

👉 "신청하기" "신청서 작성하기"라는 명확한 표현 없이 (+) 버튼으로 과연 유저들이 신청을 원활하게 할 수 있을까 의문이 들었다. 아마 초기 유저들의 경우 첫 페이지 랜딩 후 신청 미작성하는 비율의 상당수 원인이 신청하기 버튼을 찾지 못해서 일 것이 다라는 가설을 세워 볼 수 있었다.

3) 신청 폼 작성

세탁 특공대의 신청 폼 작성방식은 "미소"와 유사하게 "챗봇/채팅"형식으로 되어있다. 

하나하나 질문이 나오면 그에 대해서 유저들이 응답하는 방식이다. 이 부분이 불편했던 이유는 다음과 같다.

🙋‍♂️ 나는 온라인으로 세탁 서비스를 처음 신청하는 유저이다. 세탁소를 방문해서 세탁소 사장님이 휘뚜루마뚜루 가이드를 주시는 것에 따라서 "네" "네"만 반복했던 것과 달리, 내가 직접 인지해서 "선택"해야 하는 것들이 상대적으로 많다. 그렇기에 챗봇이 내게 물어보는 선택지에 대해서 100% 이해하고 선택하기 어려운 것들이 많았는데, 챗봇 형식으로 되어있어서, 한번 선택한 응답을 취소할 수 없었다.

만약 스텝퍼로 구성되어있었다면, 이전 버튼을 클릭해 응답했던 내역을 수정할 수 있었을 텐데, 챗봇 형식이다 보니 응답을 수정하려면 아예 신청을 취소하고 처음부터 다시 시작해야 했다. 당연히 처음부터 다시 신청해야 한다면, 귀찮아서 그냥 이탈할 가능성이 클 것이라고 생각한다.

👉 과연 용어의 난이도가 있고, 선택지가 많은 이 서비스에서 챗봇 형식이 유저에게 신청을 받는 최선의 방법이었을지에 대한 고민이 필요해 보인다. 

4) 상태 값의 혼란

세탁물을 수령한 후 status 가 "배송 완료"였다. 보통의 유저는 배송상태 값을 커머스 기준으로 인지하기 때문에 "배송 완료" 이후에 내가 별도로 "구매확정"을 해야 하는 건가? 하는 느낌이 들었다. 그런데 "배송 완료"가 마지막 status였다는 것 자체가 어색했다. 

👉최종 상태 값을 "배송 완료"가 아니라 "세탁완료"등으로 하나 더 만들고, 배송완료 이후 세탁상태나 배송상태에 대해서 이의 신청할 수 있는 기간으로 쓰면 어떨까? 또는, 무신사처럼 status는 어떤 것들이 있고 지금 어느 status에 있는 것인지 알려주면 유저에게 혼란이 덜할 것 같다는 생각을 했다.

5) 배송 담당자 닉네임 노출

세탁택 공대는 배송을 누가 해줬는지 누가 세탁물을 배송했는지 닉네임을 유저에게 제공해주고 있다. 

이는 유저에게 신뢰를 주기 위함이고, 배송과정에서 문제가 있을 경우 대처를 원활하게 하기 위함일 것이다. 

다만, 세탁 담당자가 아니라 단순히 배송을 해주는 담당자 이름이기 때문에 서비스의 핵심이 아닌 담당자의 닉네임이 노출되기 때문에 큰 메리트는 없다고 생각했다.

또한, 닉네임이 일반적인 계정 아이디처럼 "bewolskim 요원"으로 나와있어서 전문성을 느끼기 어려웠다. 차라리 본명을 노출하게 하면, 유의미하지 않을까 싶었다.

👉 유저 중에 배송 담당자의 닉네임을 공유받음으로서 신뢰나 어떤 가치를 느끼는 유저가 얼마나 될까? 차라리 세탁 담당자의 이름/닉네임을 제공해주는 게 낫지 않을까? 또는 배송 담당자의 개인적인 닉네임 말고 브랜딩을 통해 최소한의 신뢰를 느낄 수 있는 "세특 요원" 등으로 보여주는 게 더 좋지 않을까 생각한다.

6) 마이 세특 탭의 모호성

이건 새로 출시한 "옷 보관서비스"를 홍보하려는 의도가 큰 것 같은데, 유저 경험상 "세탁 신청 이용내역"이 있을 것 같은 위치에 내 옷장이 있으니 익숙한 경험은 아니었고, 딱히 클릭해보고 싶은 매력도도 없었다.  

👉해당 위치에는 가장 최근 이용내역을 노출하고, 클릭 시 해당 이용내역의 상세페이지로 이동시키고, 하단/상단에 이벤트 배너 영역을 추가해서 옷 보관서비스를 홍보하는 것이 유저 경험상 적절하지 않을까 생각한다.

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

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

그런데,

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

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

이렇게 해결하면 됩니다.

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

하나.

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

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

둘.

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

셋.

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

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

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

강의 수강 후기에서 이어지는 글입니다.

주요 내용

📌 Copy writing vs Ux writing

📌 UX writer의 역할

1) 고객 입장으로 생각하기

2) 창의적으로 브랜딩 녹여내기

3) 원하는 행위를 이끌어내기

4) 프로덕트를 빠짐없이 이해하기

📌 What is UX writing

디지털 기술의 발달, 정보량 증가 → 사용자의 읽는 행위 변화 → 유용한 정보를 명확하고 간결하게 제공 → 고객과의 관계를 위해 문구로 소통

📌 Ux writing의 4가지 조건

1) 고객 지향성

- 고객과 오프라인에서 대화하듯이

- 고객을 명확하게 설정하고 지칭

- 높은 공감력과 감수성

2) 일관성

- 하나의 디지털 제품에 들어가는 문구는 동일한 보이스 톤, 용어 유지

- 헷갈림 없게 작성하기. 헷갈림은 불편으로 불편은 이탈로 이어진다.

3) 명확성

- 필수적인 사항만 전달하여 핵심 메시지가 흐려지지 않게 하기

- 한 문장에 한 가지 목표에 집중하기

- 어떤 과정인지를 명확히 알려서 현재 상태와 해야 할 행동을 알리기

4) 효율성

- 한정된 인터페이스 내에서 정보 전달하려면

- 짧고 가독성 좋게 쓰기

- 불필요한 단어, 문장 부호 생략하기

📌 Ux writing의 6가지 전략

1) 명확하고 올바르게 쓰기

- 한자식 표현 자제

- 번역투 표현 자제

- 과도한 외래어 사용 자제

- 올바른 숫자, 기호 표기 사용

- 맞춤법 검사는 필수

- 헷갈림, 불편함 없게

2) 간결하게 쓰기

- 모바일에서 가장 중요한 전략

- 불필요한 단어와 조사는 모두 제거

- 중복되는 내용 제거

- 두괄식으로 쓴다.

3) 쉽게 쓰기

- 성별, 나이 상관없이 이해가 가능하게 작성

- 유저는 서비스, 브랜드를 전혀 모른다는 가정

- 업계 외계어(전문용어) 사용을 주의

+ if, 꼭 필요한 경우, 안내 모달을 사용

4) 고객과 대화하듯 쓰기

- 고객의 입장에서 출발하자

- 오프라인에서 실제로 대화한다고 생각

- 적절한 구어체의 사용 ( 했습니다 → 했어요 )

- 대상의 목적과 상황, 수준 등을 고려

- 부정적인 표현을 최소화

+ if, 부정 표현의 반복은 더더욱 최소화

5) 폰트 ,색상, 글꼴, 이모지 활용

- 가독성 좋은 폰트 사용

- 강조해야 할 부분은 크기와 색상을 바꾸거나, 볼드체 활용

- 적절한 이모지 활용

6) 사용자 피드백과 데이터 활용하기

- 문의가 많은 부분, 이탈이 많은 부분은 텍스트를 수정하거나 추가 (장바구니, 뒤로 가기)

- 상품이 아니라 텍스트만 바꿔도 매출이 오를 수 있다.

- CTA라면 더더욱, A/B 테스트를 통해 전환율이 높은 텍스트를 선택

📌 우리 브랜드에 UX writing 도입하기

1. UX writing 규칙 정하기

- 최대한 규칙에 따라 쓴다.

- 기획안 단계부터 반영할 수 있어 효율적

2. 테스트하기

- 기획한 의도에 맞게 사용자가 이해하는지 관찰

- 필요시 지속적으로 수정

3. 잘 된 사례를 벤치마킹하고 적용

- 평소에 사용하는 서비스에서 벤치마킹

- 스스로가 테스터라고 생각하기 ( 내가 왜 클릭했지? 어떤 지점인지 고민)