Notion을 기반으로한 웹서비스 제작을 with oopy

안녕하세요.

 

제목을 보시고 Notion? Notion으로 웹서비스를 만든다고? 라고 생각하시는 분들도 계실텐데요.

맞습니다, 작년부터 많은 분들이 사용중이신 노트, 협업툴로도 이용되고 있는 Notion으로 웹서비스 제작이 가능합니다.

 

oopy란? (https://www.oopy.io/)

- Notion을 기반으로 Custom 도메인을 생성해주고, Javascript 이벤트, GA, 애드센스등 다양한 툴을 Add-on 할수 있습니다.

- 쉽게 설명하면 Notion 위에 1개의 Layer가 덧붙여 있다고 생각해주시면 됩니다.

 

웹서비스를 일반적으로 개발할때 크게 Front-End, Back-End 2개의 파트로 나누어 개발을 진행합니다.

 

그 중 Front-End 영역을 oopy를 활용하게 되는데요, Notion의 HTML 코드 블럭을 이용하여 HTML과 Javascript를 활용할수 있게됩니다.

 

oopy에서 제공하는 간단한 가이드입니다. 

https://www.oopy.io/96ca3284-8e54-46b4-b5f9-978730127a76

 

위의 가이드를 보고 API 서버만 있다면 FE 영역은 oopy로 대체할수 있지 않을까? 생각하여 코드를 작성해봤습니다.

https://www.notion.so/2c87f056095d43d298723c7c99686bf1

 

notion 페이지만으로는 동적인 요소를 줄수 없고, API 통신이 불가하지만 거기에 oopy를 입히면 꽤 자연스러운 페이지로 변합니다.

https://alrimi.oopy.io/down-price-list

 

현재 API 서버는 AWS Lambda를 사용하고 있고, FE도 oopy와 notion에서 서빙해주고 있어 대용량의 트래픽도 견딜수 있는 심플한 서비스를 구성했습니다.

 

다양한 아이디어로 oopy를 활용할수 있을것 같은데요, 준비중이신 웹서비스가 있다면 배포의 부담이 없고 대용량 트래픽 서비스도 가능한 위 컨셉도 고려해보면 좋을것 같습니다. 읽어주셔서 감사합니다 :)

 

링크 모음

- oopy : https://www.oopy.io

- oopy HTML 가이드 : https://www.oopy.io/96ca3284-8e54-46b4-b5f9-978730127a76

- oopy 적용전 notion 원본 : https://www.notion.so/2c87f056095d43d298723c7c99686bf1

- oopy 적용후 서비스 페이지 : https://alrimi.oopy.io/down-price-list

- 알리미 서비스 클리앙 소개글 : https://www.clien.net/service/board/lecture/15736251

 

그럼,

   정보 공유합니다.

   - 출처:=> www.clien.net/service/board/cm_app/16134724?od=T31&po=0&category=0&groupCd=