노션 페이지에 oopy 끼얹기

Created
1/23/2021, 6:44:00 AM
3 more properties
thumbnail-17.png

"당신의 노션 페이지가, 웹사이트가 됩니다"

우피(oopy) 서비스의 1줄 설명입니다. 우피는 이 설명처럼 만들어둔 노션 페이지를 커스텀할 수 있게 해 주는 서비스입니다(노션을 잘 모르는 분들은 여기를 참고해 주세요). 이 글에서는 제가 우피를 사용해 보고 느꼈던 여러 가지 장/단점을 정리해 보려고 합니다.

이런 분들이 보시면 좋습니다

공개적으로 노션을 사용중인 분
노션에 브랜딩을 적극적으로 얹어보고 싶은 분
노션 페이지의 유저 데이터를 보고 싶은 분
노션에 메신저 챗헤드를 붙여 유저 피드백을 받아보고 싶은 분

우피를 도입한 이유

저는 노션을 통해 포트폴리오 페이지를 운영중입니다. 그 이유는 다음과 같습니다.
효율적으로 문서 기반 콘텐츠 작성 가능
코딩 없이 웹에 콘텐츠 작성, 배포 가능
콘텐츠 작성 후 링크를 통해 빠르게 공유 가능
최근 몇 년 동안 이러한 노션의 장점을 적극적으로 활용해 콘텐츠를 만들며 운영했는데요, 사용하다 보니 한계 또한 있었습니다.
공식적인 커스텀 도메인 미지원
페이지에 대한 데이터 트래킹 어려움
커스텀UI, 비로그인 사용자 댓글, 버튼 등 미지원
노션의 강력한 콘텐츠 작성 기능을 유지하면서 이런 한계점을 해결하기 위해 여러 가지 방법을 알아보았고, 커스텀 도메인이나 구글 애널리틱스 같은 외부 서비스를 일부 적용할 수 있었습니다. 그러나 공식 지원 방법이 아니었고, 방법을 제공하는 주체가 제각각이었기 때문에 만족스럽지 않은 상태로 운영하고 있었습니다.
우피는 이런 노션 커스텀 니즈를 한 곳에서 관리할 수 있게 해 준다는 점이 매력적이었습니다.

실제 써 본 3가지 장점

1. 여러가지 커스텀이 가능합니다

interaction.gif
위 화면처럼 우피로 노션 페이지에 html 블록을 추가할 수 있습니다. 저는 html과 그닥 친하지 않지만 우피에서 제공한 예시 블록을 활용해 fade-in 애니메이션을 적용할 수 있었습니다.
Frame_3.png
이 외에도 다크모드 토글, 폰트 변경, 검색 탭이나 브레드크럼 같은 UI를 숨길 수 있는 등 다양한 옵션을 제공합니다. (대부분 스타일에서 노 코드로 변경 가능합니다)
Frame_4.png
폰트 선택지는 많을 수록 좋다.

2. 노션 페이지의 디테일을 추가할 수 있습니다

이미 구매한 도메인을 연동해 노션 URL을 대체할 수 있습니다.

_2021-01-23__10.02.06.png
제 경우, 이미 사용하고 있던 도메인인 www.sanghyo.xyz 를 그대로 연동했습니다. (보안인증서 등등도 우피가 알아서 해줍니다)

하위 페이지 URL을 마음대로 커스텀할 수 있습니다

Frame_10.png
노션은 페이지별로 URL을 생성해 주는데요, 생성 규칙이 있긴 하지만 기본적으로 작성자가 직접 URL을 고칠 수는 없습니다. 게다가 보통 길고 복잡합니다. 우피에서 제공하는 URL 커스텀을 잘 사용하면, 유저가 해당 페이지를 더 쉽게 기억할 수 있는 여지를 주며, 타이핑해서 들어올 수도 있기 때문에 퍼널에 긍정적인 영향을 끼칠 것 같습니다. 작성자 본인이 기억&관리하기도 편합니다.

전체 페이지를 아우르는 파비콘, OG이미지를 등록할 수 있습니다

Frame_7.png
(왼쪽 : 파비콘 적용 예 / 오른쪽 : 파비콘 미적용 예)
내 로고를 파비콘으로 추가해, 내부 페이지 이동에 상관없이 일관된 로고를 보여줄 수 있습니다. 페이지별로 넣어둔 아이콘, 아이콘을 넣지 않은 곳 모두 업로드한 파비콘이 적용됩니다.
Frame_6.png
OG이미지(URL공유시 뜨는 이미지)를 추가해, 이미지가 없는 페이지에도 이미지를 노출시킬 수 있습니다.

3. 데이터를 쉽게 볼 수 있습니다

기존에 이용하던 클라우드플레어 대비 페이지뷰를 깔끔하게 볼 수 있습니다.

Frame_8.png
관리자 IP를 제외해 더 정확한 결과값을 얻을 수도 있고 하위 페이지의 뷰 비율도 같이 보여주기 때문에, 우피를 활용하면 특정 콘텐츠에 대한 부가적인 효과(새로 올라온 콘텐츠로 유입 후 다른 페이지를 브라우징 한다거나…)도 측정해볼 수 있을 것 같습니다.

구글 애널리틱스 아이디를 우피 콘솔에 복붙하는 것으로 연동이 가능합니다.

Frame_9.png
일반적인 웹사이트 대비 수집할 수 있는 정보가 제한적인 것 같지만, 여전히 유용하게 사용할 수 있을 것 같습니다. 이제 막 연동했기 때문에 조금 더 추이를 지켜보려고 합니다.

써 보지 못한 2가지 장점

1. 채팅 서비스를 연동할 수 있습니다

Frame_12.png
노션은 기본적으로 비로그인 사용자와 소통할 수 있는 기능을 제공하고 있지 않습니다. 우피를 이용하면 여러 채팅 서비스를 쉽게 노션과 연동할 수 있는데요, 현재 지원하는 서비스는 페이스북 메신저, 채널톡, 디스커스 3가지입니다. 우피 페이지에서는 페이스북 메신저를 연동해 사용하고 있어서, 궁금한 점을 부담없이 문의할 수 있었습니다.

2. 수익화가 가능합니다

노션에는 광고를 붙이기가 매우 어려웠습니다. 우피를 사용하면 구글 애드센스를 붙이는 것도 가능하다고 하니, 수익화에 관심이 있는 분들은 준비해보셔도 좋을 것 같습니다. 다만 현 시점에서는 노션을 우피에 연동했다고 누구나 애드센스를 연동할 수 있는 것은 아니고, 구글 심사를 통과해야 하는 것 같습니다(link).

예상치 못한 부가적인 특징

1. 인스타 브라우저 버그 해결

모바일 인스타그램에서 노션 링크를 열면 첫 번째 진입시 PC뷰로 보이는 버그가 있는데요, 이유는 모르겠으나 우피를 사용하니 해당 버그가 일어나지 않습니다.

2. 수정사항 실시간 반영이 아닌, 5분 후 반영

원활하게 서비스를 꾸려나가기 위한 기술적 결정이라고 합니다(link). 크게 불편하진 않지만 html이나 내용 수정, 공유시 인지하고 있는 것이 좋을 것 같습니다.

가격

매달 3,900원

첫 일주일은 무료로 사용 가능하나, 이후로는 유료로 구독해야 합니다. 기본적으로 매달 3,900원으로, 하나의 계정으로 여러 도메인을 연동하면 할인율이 적용됩니다(link). 하지만 제 경우 1도메인이기 때문에 매달 3,900원을 내야 합니다. 제공하는 기능을 고려하면 개인적으로는 합리적인 금액이라고 생각합니다.
Frame_11.jpg
하지만, 우피 홍보를 열심히 하면 새로 등록하는 사람과 추천한 사람 모두 50% 할인쿠폰을 받을 수 있다고 합니다. 따라서 제 글을 읽고 우피를 써 보고 싶어지신 분들은 아래처럼 텍스트필드에 https://app.oopy.io?referrer=www.sanghyo.xyz 를 붙여넣어 주세요. 저와 함께 할인된 가격으로 이용할 수 있습니다 😂

총평

노션으로 퍼블릭한 페이지를 지속적으로 운영하려는 분들에게는 우피가 해결사 역할을 해줄 수도 있을 것 같습니다. 바꿔 말하면, 개인 작업용으로 노션을 사용중이신 분들에게는 퍼블릭 페이지만큼의 메리트는 없을 수도 있을 것 같고요. 제 경우 위 기준에 잘 맞는 노션 페이지를 이미 운영중이었기 때문에, 유료 서비스임에도 불구하고 당분간 계속해서 이용할 것 같습니다. 이 글이 많은 분들에게 도움이 되셨길 바랍니다.
ⓒ 2021. SangHyo Yee, All Rights Reserved.