CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·아이포니앙 ·MaClien ·주식한당 ·일본산당 ·방탄소년당 ·개발한당 ·자전거당 ·소시당 ·노젓는당 ·안드로메당 ·디아블로당 ·나스당 ·AI그림당 ·가상화폐당 ·육아당 ·AI당 ·소셜게임한당 ·스팀한당 ·개판이당 ·요리한당 ·달린당 ·걸그룹당 ·여행을떠난당 ·키보드당 ·창업한당 ·날아간당 ·퐁당퐁당 ·덕질한당 ·보드게임당 ·리눅서당 ·골프당 ·영화본당 ·냐옹이당 ·3D메이킹 ·바다건너당 ·이륜차당 ·물고기당 ·야구당 ·e북본당 ·찰칵찍당 ·시계찬당 ·콘솔한당 ·IoT당 ·꼬들한당 ·X세대당 ·ADHD당 ·사과시계당 ·배드민턴당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·활자중독당 ·볼링친당 ·캠핑간당 ·문명하셨당 ·클래시앙 ·클다방 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·동숲한당 ·날아올랑 ·전기자전거당 ·갖고다닌당 ·이브한당 ·패셔니앙 ·도시어부당 ·FM한당 ·맛있겠당 ·포뮬러당 ·젬워한당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·MTG한당 ·소리당 ·노키앙 ·적는당 ·방송한당 ·PC튜닝한당 ·그림그린당 ·소풍간당 ·심는당 ·패스오브엑자일당 ·라즈베리파이당 ·품앱이당 ·리듬탄당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·파도탄당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·터치패드당 ·트윗당 ·VR당 ·WebOs당 ·위스키당 ·와인마신당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

개발한당

강좌와팁 Notion을 기반으로한 웹서비스 제작기 입니다. (with. oopy) 8

8
2021-05-11 18:15:07 수정일 : 2023-02-05 11:35:43 222.♡.28.82
Mask_

안녕하세요.


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

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


시작에 앞서 저는 oopy 서비스와는 관련이 없고, 소개드리는 서비스 안에는 쿠팡 파트너스 링크가 있어 참고만 부탁드립니다.


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://www.alrimi.click/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://www.alrimi.click/down-price-list

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


질문은 언제나 환영입니다 🙂

Mask_ 님의 게시글 댓글
SIGNATURE
쿠팡 가격변동/재입고 알리미 텔레그램, 라인 챗봇을 운영중입니다.
- 쿠팡 상품 가격변동 / 카드할인 / 재포장 상품 입고시 알림

https://www.alrimi.click

많은 피드백 부탁드립니다 :)
서명 더 보기 서명 가리기
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [8]
재바리
IP 220.♡.63.129
05-11 2021-05-11 18:51:11
·
오 좋은내용 감사합니다! 스크랩하고 후에 읽어보겠습니다.
보고또또보고
IP 122.♡.154.143
05-11 2021-05-11 23:07:04
·
노션 기반으로도 웹서비스가 가능하군요. 그런데 oopy.io 는 주체가 어디인가요? 이런것도 만들수 있도록 노션이 개방하는가 보죠?
Mask_
IP 175.♡.104.163
05-12 2021-05-12 06:31:11 / 수정일: 2021-05-12 07:03:55
·
@지적굶주림님 Notion의 기능인 외부 URL 공유를 활용한 서드파티 서비스로 봐주시면 될것 같습니다.
oopy외에 동일한 해외서비스도 았지만 해외에 서버를 두고있어 속도가 좋지 않은것으로 알고 있습니다 :)
삭제 되었습니다.
조용히나와
IP 106.♡.196.150
05-12 2021-05-12 10:29:10
·
노션 잘 쓰고 있었는데 이렇게 입힐 수도 있구나 싶네요!! 좋은 글 감사합니다
feelopk
IP 73.♡.132.158
05-13 2021-05-13 07:36:27
·
오! 어제오늘 깃블로그 만들고있었는데, 이 방법도 좋겠네요!
일단 북마크 해두고 자세히 읽어보겠습니다.!ㅎ
감사합니다!
/Vollago
써니
IP 211.♡.215.178
05-14 2021-05-14 23:39:20
·
오!! 좋은 글 감사합니다 ^^
꼬프로
IP 118.♡.224.88
05-15 2021-05-15 00:31:25
·
쿠팡 api가 단시간에 콜을 많이 하면 막히던데 그런 부분은 어떻게 처리하셨는지 여쭈어봐도 될까요?
XZ
IP 119.♡.25.157
05-20 2021-05-20 21:17:56
·
아니 노션이 웹서비스가 가능하군요?
와! 좋은 정보 감사합니다!
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.