👩🏻‍💻

[Tip] 코알못, 코린이를 위한 요즘 대세 노션 꾸미기 : Oopy 사용법 (노션에 눈 내리기)

[참고] 코알못, 코린이, 찐문과생들을 위한 초초초기초 Oopy 사용후기입니다. 코딩을 배워보신 분이나 공대생 분들이 보시기엔 너무 쉬운 내용이라서 '이게 무슨 Tip인가' 라고 생각할 수 있습니다. 매우 의아하고, 이상하게 보일 수 있으니 현타주의 조심하세요!
오랜만에 Oopy를 들어가 블로그의 통계와 html을 살펴보는데, 멘붕의 연속이었습니다.
갑자기 잘되었던 아이가 연결이 안된다며 에러가 뜨는 것이에요. 약 3주 전에 발품 팔아서 코잘알 분들의 후기를 찾아다니며 Cloudflare로 겨우 겨우 도메인-노션-Oopy 연결에 성공하였는데, 알고보니 제 방법이 틀렸던 것인지 갑자기 먹통이 되었습니다.
처음에 알고 있던 방법과 다르게, 매우 간단한 방법으로 충분히 가능하더라고요. 이게 원래부터 이 방법이면 되는 것이었는지, 아니면 그 사이에 개선되어 더 쉬운 방법으로 Oopy가 개선된 것인지는 여쭤보지는 못했습니다.
하지만 정말 감사했던 Oopy CS 채팅 담당자분! 제가 퇴근 후 여쭤보느라 다소 늦은 시간에 메신저로 문의를 했음에도 불구하고, 정말 빠르고 친절하게 도와주셨어요.
우선 저는 도메인을 구매하여, Cloudflare와 Oopy를 함께 사용하고 있습니다. 구글 애드센스를 활용해 보기 위함인데요.
노션 포트폴리오를 제작하고 싶으신 분들이라면, 이전 글에서도 말씀드린 바와 같이.
바로 Oopy에 가입하셔서, 원하는 서브도메인을 만들고, 노션 주소를 연동하면 깔끔하게 웹사이트 형태의 노션 포트폴리오/홈페이지/블로그를 만드실 수 있습니다.
차이점을 가장 잘 드러나는 부분을 보여드린다면, [상단]입니다.
바로 Oopy 없이 그냥 쉐어를 해서 타인에게 주소를 공유하면 상단이 노션 앱과 연결되는 환경이지만,
도메인을 활용하게 되면 깔끔하게 웹페이지처럼 정리되어 있는 것을 확인할 수 있어요.
좀 더 전문적인고 오피셜한 포트폴리오/홈페이지/블로그를 만들어 볼 수 있겠죠!
실제로 유명한 브랜드의 홈페이지가 노션+Oopy를 활용해서 운영되고 있기도 해요.
배달의 민족
왓챠
그럼 본격적으로, 제가 사용 중인 Oopy의 기능을 몇 가지 알려드릴게요.

코알못을 위한 Oopy

코딩을 잘 몰라도 웹페이지를 손 쉽게 꾸밀 수 있는 Oopy 기능
목차
현재 사용 중인 Oopy 기능 1 : 스타일
현재 사용 중인 Oopy 기능 1 : 스타일
(1) 스타일 - 상단 네비게이터 저는 현재 상단 네비게이터는 다크 모드 테마 사용을 위해 보이게 해 둔 상태입니다. '네비게이터'가 무엇인고 하니, 코알못 문과생 언어로 풀어 말하면 웹페이지/블로그 상단에 있는 바로 가기 버튼 느낌이랄까요! (아래 사진 blank 사이트 참고) 검색을 해보니, 모바일 UI/UX에서 보다 이해하기 쉬운 예시들을 많이 볼 수 있었습니다. 궁금하신 분들은 직접 구글링 해보시는 것도 좋을 것 같아요!
(2) 스타일 - 다크 모드 저는 네이게이터를 특별히 사용하지 않고 있으나, 앞서 말씀드린 것처럼 다크 모드를 사용하기 위해 켜 둔 상태입니다.
'다크 모드'는 웹페이지(노션) 배경을 사용자의 편의에 따라 화이트/블랙으로 변경할 수 있는 기능입니다. 다크 모드를 켜두면, 아래 사진처럼 왼쪽 상단에 방문자가 변경할 수 있는 버튼이 생성되어요.
(3) 스타일 - 폰트 앞서 스타일 관련 기능 이미지에서 보신 것과 같이, Oopy는 다양한 폰트를 제공하고 있습니다.
사진에 보여지는 폰트는 일부분이고요, 지속적으로 업데이트가 되는 것 같습니다.
(4) CTA 버튼 생성
바로 사진 하단에 있는 [Click me!] 박스가 보이시나요?
바로 저 박스의 문장과 링크를 수정하여, 바로가기 버튼을 활용할 수 있습니다.
바로 연결하고 싶은 개인 SNS나 주요 포트폴리오 영상 등을 연결해도 좋을 것 같아요.
현재 사용 중인 Oopy 기능 2 : 클린 URL 페이지별 YAML 코드블럭으로 노션에 쉽게 눈 내리기!
코딩을 몰라도! Oopy의 클린 URL 기능을 통해 원하는 페이지에 눈을 내릴 수 있어요!
내일도 함박눈이 내린다는 예보가 있는데요. 노션에 눈을 내리게 하고 싶다면!
전혀 코딩을 몰라도 할 수 있습니다.
클린 URL을 누르면 아래와 같은 화면이 뜹니다. 거기서 '클린 URL을 추가하는 더 스마트한 방법!' 이라는 문구가 보일 거에요.
[?] 버튼을 누르면, 관련된 노션 페이지가 연결이 되는데요.
자, 어렵다면. 천천히 저를 따라해 보세요!
여기서, 3가지만 기억하면 됩니다.
📌
1) 최상단에 무조건 만들기 2) 코드블럭을 만들고, 옵션버튼에서 YAML을 누르기 3) Oopy가 알려준 코드 복붙하기
1. [Code]를 눌러 코드블럭을 만듭니다.
2. 옵션 버튼에서 [YAML]을 누릅니다.
3. Oopy 가이드 문서에 적힌 코드를 복붙합니다.
위의 방법을 순서대로 하면, 저처럼 아래와 같이 Title 자리 다음에 바로 YAML 코드블럭이 생성됩니다.
노션에서는 이렇게 잘 보이지만! Oopy를 통해 저의 노션 블로그를 다시 들어가면.
상단에 봤던 것처럼, 눈이 내리고 있는 것을 확인할 수 있습니다.
Oopy가 내가 작성한 코드블럭을 특수처리(블럭 지우기)하고, 자동으로 코드 내용을 소화해 줍니다.
현재 사용 중인 Oopy 기능 3 :플러그인
확실히 우피는 비즈니스 용도로 편한 기능을 제안하고 있는 것 같아요. 저는 개인 블로거이기 때문에, 구글 애드센스 정도만 이용하고 있습니다.
구글 애드센스 신청하면서 받은 코드를 웹게시자 ID에 복붙하면, 자동 연결됩니다.
현재 사용 중인 Oopy 기능 4 :HTML 편집
개인적으로 가장 흥미롭고, 재미있게 활용하고 있는 기능인데요. 코린이의 코딩재미를 쏠쏠 올려주는 기능이 아닐까 싶습니다.
HTML 활용 예시를 사용해서 실시간으로 적용되는 노션 효과를 확인해 보세요!
HTML 편집 옆에 있는 활용 예시를 통해 코알못, 코린이도 비교적 쉽게 시도해 볼 수 있어요!
저는 현재 제목 옆에 있는 [?]물음표를 누르면, 아래와 같이 관련 노션 페이지가 연결이 되어요.
📌
<head>는 이미 Oopy HTML 편집 화면에 있으니, <style>부분에 해당하는 가운데 부분을 복붙하시면 돼요!
저는 여기서 현재 페이지 애니메이션 효과(fade-in)을 복붙하여 아까 위에서 보았던 것처럼 <head>에 붙여 사용 중입니다.
[▶️]재생 버튼을 누르면 적용된 예상 노션 페이지를 확인해 볼 수 있습니다.
개인적인 목표로는, 더 많은 코딩을 Oopy를 통해 시도해서 간접적으로나마 웹디자인을 즐겨보고 싶단 생각입니다.
저도 천천히 시도해 보면서, 추가로 쉽게 해볼 수 있는 것이 있다면 공유드리도록 할게요.
다음 블로그에서는 Cloudflare 연동 방법을 공유드릴게요! 또 만나요.
평안한 하루 보내세요! ☺️