Search

우피를 이용한 나만의 웹사이트 만들기

Properties
Blog
Reference
Empty
Author
Kipoong Kim
Date
2021/03/12
Link
Empty
이명성님의 페이스북 게시글을 보고 우피를 처음 알게 되었습니다 (이명성님의 블로그). 그리고 MoonSupport님의 블로그 존경합니다... 이외에도 많은 분들 감사합니다.

Introduction

필자는 원래 깃허브 페이지 (GitHub pages)를 이용하고 있었음.
Github page의 장점 중 하나는 매우 높은 자유도 그러나, 나처럼 HTML, CSS 등 웹에 대해 잘 모르는 사람이 사용하기에는 여러가지 문제가 많았다.
문제점: (1) 디자인을 커스터마이징하는 데 너무 시간이 많이 걸린다는 점. (2) 한번 커스터마이징을 잘 해놓고 포스팅을 하다가, 몇 개월 후 다시 조금 수정하려고 하면 뭐가 먼지 하나도 모르겠음...
대안을 찾던 중 노션을 발견하였고, - 곧바로 기존의 github page에 있던 자료들을 옮기기 시작함.
노션으로 여러가지 구상을 해놓고 보니, 가장 큰 문제점이 발생함. —> 내가 열심히 포스팅을 해도 다른 사람들이 public하게 볼 수 없다는 것!! (내가 공유한 링크를 가진 사람들만 찾아와서 볼 수 있음)
그래서 한 동안 노션을 개인 공간으로만 활용하고 있다가, 우연히 노션 + 우피로 웹사이트를 만드는 것을 발견 !!
우피에 대해 간략히 말하자면, - 노션 공간에 있는 페이지(게시물)를 웹에 올려주는 (배포) 역할을 하는 듯함. (1) 따라서, 내 게시글을 구글 / 네이버 검색에 노출시킬 수 있음. (2) 여러 웹 플러그인들을 적용할 수 있음. Google Adsense, Google Analytics, Disqus 등 (3) 클린 URL 사용하여 깔끔한 URL 구조를 가질 수 있음. - 기존의 복잡한 URL : "notion.so/~~~~~~" - 깔끔한 클린 URL : "statpng.oopy.io/aboutme" (4) HTML 편집 가능 !! (내 웹페이지를 커스터마이징 할 수 있음)
필자가 설정한 "노션 + 우피" 셋팅에 대해서 알아보자.

노션 설치 (notion installation)

각자의 플랫폼에 맞게 노션(notion)을 설치합시다 (모바일도 지원). 대학생이시면 Education Plan을 위해 학교 이메일을 사용하면 좋아요.
Education Plan을 이용하면 Personal Pro ($5 / month)를 무료로 이용할 수 있음.
노션에 대한 사용법 튜토리얼은 다음 사이트를 참고하시길 바랍니다. Notion Tutorial X ABONEU
개인 공간인 노션 페이지를 온라인에 배포(?)해주는 우피에 대해 알아보자.

우피 (oopy)

우피 공식 홈페이지 : https://www.oopy.io/
우피 (oopy)를 이용하면 아래와 같은 나만의 홈페이지를 만들 수 있어요.
필자가 노션 + 우피로 만든 개인 홈페이지 (https://statpng.oopy.io)

우피에 로그인 하기

아래 링크에 들어가시면 우피에 로그인하는 절차가 나와있으니, 하나하나 차근차근 따라해보시면 됩니다.
정리하면 절차는 다음과 같아요.
1.
우피 홈페이지에 접속해요. (https://www.oopy.io/marketing/login
2.
회원가입이 필요 없어요. 이메일 인증만으로 로그인할 수 있어요.
3.
노션에서 내가 홈페이지로 사용할 페이지가 필요해요. (페이지는 public으로 공개되어있어야 함) 그리고 페이지 주소를 내가 만들 도메인과 연결합니다. 예) "notion.so/sdf123jksdf2312h123g12t123" (노션 주소) ←→ "statpng.oopy.io" (새로운 도메인)
4.
본인의 도메인 주소로 접속 가능한지 확인 ! e.g. 제 경우에는, https://statpng.oopy.io 로 접속이 가능합니다.

우피 설정하기

우피의 설정은 https://app.oopy.io/ 에서 이루어집니다. 여기로 접속해주세요.

A. 검색 엔진 허용

https://app.oopy.io에 접속하여 "검색 엔진 허용"을 체크해주시면 구글, 네이버에서 검색 가능합니다.

B. Disqus (댓글기능) 적용하기

디스커스(disqus)를 이용하면 각 페이지마다 이용자들이 댓글을 달 수 있어요.
1.
먼저 Disqus에 가입합시다. (https://disqus.com/)
"Get started" 클릭
저희 웹사이트에 댓글기능을 설치할 것이기 때문에 "I want to install Disqus on my site"를 클릭 !
Website Name 을 입력해주자. 그리고 바로 밑에 나타난건 웹사이트에 disqus를 연결할 때 필요한 "shortname"임.
베이직을 선택하자.
좌측에 "Configure Disqus"로 바로 가자.
Website URL(우피 주소)를 작성하자.
본인에게 맞는 댓글 정책을 선택하자.
Complete Setup을 누르면 설정이 완료됨.
하단에서 설정 종료(Dismiss Setup)를 누르고, 상단 바에 있는 Setting을 클릭하자.
Shortname이 보인다. 기억해두자.
2.
다시 "https://app.oopy.io"로 돌아가서 맨 아래 플러그인으로 들어가자.
3.
Disqus 부분에 아까 기억해둔 "shortname"을 적으면 끝 !
4.
각 게시글마다 아래쪽에 disqus가 활성화되어있는 걸 확인할 수 있음.

C. Clean URL 설정

Clean URL 설정 방법은 매우 간단합니다.
먼저 https://app.oopy.io 에 들어가셔서 맨 아래쪽 "클린 URL"을 클릭합니다.
그리고 노션에서 공유를 눌렀을 때의 링크를 아래에 입력해주기만 하면 돼요.

D. HTML 편집

> 애니메이션 효과 > 네비게이션 바 > CTA (Call To Action) 버튼 만들기 등등 웹사이트를 다양하게 커스터마이징할 수 있습니다. 참고자료: https://www.oopy.io/ko/guides/html-edition

(a) 네비게이션 바 설정하기

1. 우피 설정 (https://app.oopy.io)에서 "HTML 편집"으로 들어갑니다.
2. 웹 사이트에서 사이트의 구조를 설정하는 HTML은 Head와 Body로 구성되어있어요. Head 부분에서는 색상, 크기 등을 설정을 하고 Body 부분에서 실제 웹에다가 구조를 적용하는 거 같아요. (사실 저도 잘 몰라요)
우피에서 제공하는 네비게이션 바를 위한 Head와 Body는 아래와 같아요.

Head

Show / Hide

Body

Show / Hide
저는 네비게이션 바를 설정할 때 Body 부분에서 "클린 URL"을 사용하였습니다. (자세한 내용은 최종 코드 참고)
3. 위 Head와 Body 부분을 복사해서 1번의 Head와 Body 부분에 붙여넣고 저장 및 실행합니다.
4. 그러면 아래와 같이 상단에 네비게이션 바가 생겨요.
5. 저는 여기서 네비게이션 바에다가 Sound Cloud를 추가했어요
원하시는 음악을 찾으시고 아래쪽 Share - Embed를 클릭하셔서 "code" 부분을 복사하시면 됩니다. 코드 안에 "auto_play=true", "comments=false" 등의 다양한 옵션이 있으니 true/false 부분을 원하시는 걸로 설정하시면 됩니다 !
그리고 Body 부분에서 원하는 위치에 복사된 embeded code를 붙여넣으시면 됩니다. 그러면 이렇게 오른쪽 부분에 추가했어요. (추가 방법은 최종 코드 참고)
6. 최종적으로 저는 아래와 같은 코드를 입력해줬어요.

최종 Head 코드

Show / Hide

최종 Body 코드

Show / Hide
여기서 height 는 네비게이션의 높이를 나타내는데 원하시는 크기로 수정하시면 됩니다 ! (Head와 Body 모두 —> Height 아래 제 코드에서 50px 부분을 찾아보시면 돼요. )
Sound Cloud의 width는 원하시는 크기로 조절하세요~
HTML 커스터마이징을 특정 페이지에만 하고 싶은 경우, HTML을 적용하고자 하는 노션 페이지의 최상단에 YAML 코드로 "Head / Body" 부분을 입력하면 해당 페이지에서만 HTML이 적용되도록 할 수 있습니다. 반드시, 아래와 같은 형태로 입력하셔야하고, 위에 어떠한 블록도 있어서는 안됩니다. - - - - - - - - - - - <head> HEAD 내용 </head> <body> BODY 내용 </body> - - - - - - - - - - -
본인이 참고하고 싶은 웹사이트의 구조를 알고 싶을 때 크롬에서 F12를 누르고 "ctrl/command + shift + C"를 누른 뒤, 원하는 부분으로 커서를 이동시키면 해당 부분의 HTML 구조를 알 수 있음.

(b) CTA 버튼 생성하기

https://app.oopy.io/styles/cta 을 확인 바랍니다.

(c) YAML 코드블럭

YAML 코드블럭을 원하는 페이지 최상단에 위치시키면 다양한 기능을 얻을 수 있습니다.
e.g. cleanURL을 https://app.oopy.io 접속 없이 노션에서 컨트롤 또는 PagePassword를 적용하는 등
아래는 필자가 포스팅에 사용하는 기본 "YAML 코드블럭"임.
cleanUrl: /blog/BlogPost1 disqus: 디스커스shortname adsense: false theme: dark pagePassword: false share: false cherry: true
YAML
자세한 내용은 다음 링크를 확인하길 바랍니다. https://www.oopy.io/ko/guides/head-yaml-code-block

참고한 자료

Follow me on Facebook and Github. Thank you
TOP