노션 200% 활용기_코딩 없이 프로덕트 만들기
개발자 없이 혼자서 프로덕트를 만들어보자
목차.
1. 개발자 없이 프로덕트 만들기
2. 이 툴만 알면 끝끝!
3. 저는 노션으로 이런 걸 만들어 봤습니다.
4. 관련 정보
하나라도 해당되면, 재밌게 읽을 수 있어요!
1. 코딩 없이 무엇인가를 만들어 보고 싶다.
2. 노션을 사용한 지 얼마 안 됐다.
3. 사이드 프로젝트를 한 번 해보고 싶다.
개발자 없이 프로덕트 만들기
웹사이트, 블로그, 채용 전용 사이트 등 하나의 스타트업에서 다양한 웹 프로덕트가 필요하다. 근데, 이 모든 웹 프로덕트가 높은 수준의 퀄리티를 요구하는 건 아니다. 일부 프로덕트는 별 다른 인터렉션이 필요하지 않고, 단순히 콘텐츠를 전달하거나 이메일을 주고받는 기능만 요구되는 수준이다, 이렇게 볼륨이 작은 웹 프로덕트를 만들기 위해 개발자의 인력을 쓰는 건 뭔가 아깝지 않은가? 차라리, 그 시간에 개발자는 고객이 쓸 프로덕트를 만드는 데 임팩트 있지 않을까?
초기에 노션은 문서 혹은, 협업 목적으로 사용됐다. 하지만, 노션과 연동되는 다양한 툴이 등장했고, 이제 노션으로 웹사이트를 만들 수 있을 정도에 이르렀다. 이제 기획자는 개발자 없이 노션만으로 간단한 수준의 웹 프로덕트를 만들 수 있고, 개발자는 그 시간에 더 필요한 일을 할 수 있게 됐다.
개발자를 괴롭히지 말자... (출처 : monkeyuser)이 툴만 알면 끝끝!
노션과 함께 사용할 수 있는 툴, 몇 가지만 안다면 누구나 웹사이트를 만들 수 있다. 필수적인 툴과 알면 좋은 툴을 한 번 소개하고자 한다. 모든 툴의 링크는 페이지 최하단에 있습니다.
1. oopy
노션 페이지를 사이트로 변환!
우피(oopy)는 노션 페이지를 사이트로 만들어 준다. 우피에서 도메인을 만들고, 이 도메인에 노션 페이지 링크를 삽입하면 끝이다. 이렇게 만들어진 홈페이지의 디자인 요소를 입힐 수 있고, HTML을 직접 손볼 수도 있다.
GA 등의 별도 데이터 툴 없이도, 페이지 뷰(Page View, PV)를 자체적으로 트래킹 해준다. 물론 유저가 어디서 유입됐는지, 얼마나 머물렀는지 등까지 세부 데이터는 제공하지 않는다. 그 대신, 플러그 인 기능을 통해 쉽게 다른 데이터 툴과 연동할 수 있다.
실제로, 많은 기업이 고객과 직접적 관련은 없지만, 회사 운영에 필요한 사이트를 우피를 통해 제작 및 운영하고 있다. 대표적으로 회사의 채용 사이트가 있다.
채용 사이트는 고객에게 직접 노출되지 않아서 우피로 빠르게 만든다(출처 : 우아한 형제, 배민 플랫폼실)2. Joey
홈페이지에 인터렉션 한 스푼
우피로 만든 사이트는 유저와의 인터렉션이 불가능하다. 즉, 단순히 콘텐츠를 보여주는 일방향 소통만 가능한 사이트다. 이때, 조이(Joey)를 사용하면 사이트 내 쌍방향 소통이 일정 부분 가능하게 만들 수 있다. 조이는 노션의 임베디드(embeded) 기능을 활용하는데, 조이에서 만든 url 블록을 그냥 복붙만 하면 되므로, 누구나 쉽게 사용이 가능하다. 조이를 통해 '좋아요', '버튼', 'QA창', '코멘트' 등 다양한 인터렉션 요소를 추가할 수 있다.
복붙만으로 끝! 매우 편리한 조이3. Apption
더 많은 기능과 인터렉션이 필요해!
노션의 임베디드(embeded) 기능은 특정 사이트(url)를 작은 뷰(window)에 담아서 노션 내에 보여준다. 따라서, 특정 기능을 담은 url을 임베디드 시키면, 노션 내 뷰를 통해 해당 기능을 사용할 수 있다. 위의 조이와 앱션, 모두 이 원리에 기반한다. 둘 다, 노션 사이트에서 인터렉션, 기능 등을 추가하기 위해 사용한다.
이 둘의 차이점으로 조이는 '꽉 찬 내용물'을, 앱션은 '껍데기'를 제공한다고 생각하면 된다. 조이는 '처음부터 HTML 코드가 반영된 url'을 제공한다. 따라서, 특정 기능의 생성 버튼만 누르면, 이를 담고 있는 url 링크를 얻을 수 있다. 반면, 앱션은 자신이 직접 HTML 코드를 입력해서 url을 만든다. 따라서, HTML 코드를 자유롭게 입력해서 노션 페이지에 다양한 기능과 인터렉션을 구현할 수 있다. 예시로, 오른쪽 아래에 날씨 위젯을 볼 수 있다. 관련 HTML 코드를 입력한 url을 앱션으로 생성한 후, 노션 페이지에 임베디드 시킨 것이다.
친절하게도 앱션은 HTML 코드를 모르는 사람을 위해, 완성된 HTML 코드를 제공하기도 한다. 필요한 기능을 찾은 후, HTML 코드를 그대로 복사해서 사용하면 된다.
4. Hits
대략, 몇 명이 왔다 갔나요?
히트(Hits)는 노션 페이지의 PV(페이지 뷰, Page View)를 보여준다. 노션으로 만든 홈페이지에 들어온 유저에게 다른 사람이 대략 몇 명이나 들어왔는지를 보여줄 수 있다. 물론, 여기서 보여주는 수치는 유저 수가 아닌 페이지 뷰지만, 그래도 대략 사이트가 얼마나 활성화됐는지 방문자에게 보여줄 수 있다. 조이와 마찬가지로, url을 그냥 복붙만 하면 된다.
5. Kairo
대시보드, 이거 하나면 가능!
노션에서 개인, 팀 등이 활용할 수 있는 대시보드를 케이로(Kairo)로 만들 수 있다. 케이로는 타이머, 카운터 등의 기능을 제공하며, 개인의 업무를 관리하거나, 팀의 KR 트래킹 등의 목적으로 다양하게 활용할 수 있다.
저는 노션으로 이런 걸 만들어 봤습니다.
1. 성공 교환 플랫폼, On the Rocket
토스에서 '금융이 불편한 순간' 이란 페이지를 운영한다. 많은 사람이 금융에서 불편함을 겪는 순간을 자유롭게 적을 수 있다. 이 페이지를 통해 VOC를 재미있게 수집한다.
'성공하기 위해선 무엇이 필요할까?', '성공이란 무엇일까?' 등 성공에 대한 이야기를 친구들과 만날 때마다 자주 했다. 다양한 친구들과 이야기를 하면서, 각자가 정의하는 성공이 매우 다른 게 흥미로웠다. 토스의 '금융이 불편한 순간' 페이지와 같이, '모두가 성공에 대해 이야기할 수 있는 공간이 있으면 좋지 않을까?'라는 생각을 했다.
노션으로 관련 페이지를 만들고, 조이를 이용해 댓글을 남길 수 있는 블록을 설치했다. 히트를 이용해 몇 명의 유저가 왔다 갔는지를 보여줬고, 우피로 노션 페이지를 홈페이지로 바꿨다.
플러그인을 활용해 GA를 연동했고, 얼마나 많은 유저가 방문했는지를 트래킹 했다. 약 1.5 개월 동안 홈페이지를 운영했고, 513명의 방문자가 왔다 갔다. 이 중에서, 65명이 '성공'에 대한 정의를 남겼다.
2. 포트폴리오
빠른 수정과 편리한 유지 보수를 위해 포트폴리오도 노션으로 만들었다. 포트폴리오 제작에 대한 과정은 아래 링크에서 정리했다.
관련 정보
1. 투두클래스
노션으로 웹사이트를 만들고 싶다면, 투두몰의 [개발 없이 랜딩 페이지 만들기] 클래스를 수강해보세요.
2. 아티클
https://hits.seeyoufarm.com/#history
