노션 포트폴리오,
oopy에 연결해서 커스터마이징
oopy.io를 활용하여 노션 포트폴리오 꾸미는 방법
최근 많은 기업에서 포트폴리오를 요구하고 있다. 기업뿐만 아니라, 자신을 브랜딩 하여 소개하는 목적으로도 포트폴리오는 다양하게 활용되고 있다. 하지만, 제출용으로 제작하는 포트폴리오가 아닌 각종 SNS나 링크드인처럼 리크루팅 페이지에 포트폴리오를 공개하기 위해서는 PDF 형태로 된 포트폴리오는 적절하지 않을 것이다. 그때 사용하는 것이 바로 '노션'이다.
노션 포트폴리오의 장점에 대해서는 꽤 오랜 기간 많은 사람들이 공감해왔을 것이다. 웹사이트를 직접 개발하거나 어렵고 무거운 프로그램을 활용하여 제작하는 것이 아닌, 쉽고 빠르게 본인의 경력 사항을 정리할 수 있기 때문이다. 물론 가벼운 만큼 화려하거나 커스텀 된 포트폴리오를 만들기는 어렵지만 정재 된 기능으로도 충분히 개성을 표현할 수 있는 방법이 있다.
그중, 'oopy(우피)'라는 프로그램을 활용하여 노션에서 기본적으로 제공하는 기능을 벗어나 좀 더 커스터마이징 시키는 방법에 대해 소개해보고자 한다.
노션 웹사이트 제작을 위한 'oopy'oopy, 어떻게 활용할 수 있나?
Feat. 노션 포트폴리오에는?
oopy는 만들어진 노션 페이지에 원하는 주소를 연결하여 하나의 홈페이지를 만드는 데 특화된 서비스이다. 이를 회사 브랜딩 사이트나 행사 랜딩 페이지, 고객 가이드 사이트, 그리고 셀프 브랜딩을 위한 포트폴리오 사이트로도 활용할 수 있다. 나는 oopy를 셀프 브랜딩, 즉 포트폴리오에 활용하기로 했고 여러 기능 중 다음과 같은 기능을 적극 활용하는 것을 추천한다.
1. 깔끔한 도메인 주소를 넣을 수 있다.
2. 글꼴을 변경할 수 있다.
3. 스크립 코드를 활용하여 다양한 디자인 변화를 시도할 수 있다.
4. 바로 이어질 수 있는 메신저를 달 수 있다.
5. 바로 이어질 수 있는 메신저를 달 수 있다.
6. 페이지 뷰 카운트나 GA를 추가하여 통계 데이터를 볼 수 있다.
oopy는 유료 서비스이다. 호스트 네임당 월 5,900원 정도의 금액이 부과되는데, 개별 도메인 주소를 깔끔하게 활용할 수 있고 각종 커스텀을 할 수 있다는 점에서 그리 비합리적인 금액은 아니라고 생각한다. 또한, 연결한 노션 링크에 대해서는 하위 페이지를 아무리 많이 만들더라도 금액이 추가되지 않기 때문에 나는 빠르게 결제를 했다. 참고로, 처음 가입하면 7일 동안은 무료로 활용할 수 있다.
또한, oopy를 활용하기 위해서는 미리 제작한 노션 페이지가 필요하다. 원래 해당 글을 작성하기 전에 노션 포트폴리오를 만드는 방법에 대한 글을 먼저 쓰려고 했는데, 이왕 oopy를 활용하면서 기억이 더 생생할 때 활용하기 좋은 팁들을 소개하기 위해 다음 기회에 그 내용을 정리하려고 한다. 아무튼, 노션 페이지가 준비되었다면 해당 페이지를 공개 설정한 다음 링크를 복사한다.
스타일 기능을 활용해서
폰트, 배경, CTA버튼 설정
노션 링크 연결에 성공했다면 기본 정보를 세팅할 수 있다. 호스트 네임.oopy.io를 기본 형태로 설정할 수 있으며, 만약 각자 사용하고 싶은 도메인 주소가 있다면 그를 활용해도 좋다. 연결된 노션은 수정 페이지에서 얼마든지 변경 가능하다. 왼쪽 창에는 연결된 노션 수정 페이지가, 오른쪽에서는 설정을 바꿀 수 있는 창을 한 번에 보면서 스타일을 변경할 수 있다.
내 포트폴리오는 One-paper로 경험을 전부 정리하고, 세부 페이지나 경험 사항을 클릭해서 더 상세한 경력사항을 볼 수 있도록 구성했다. (일반적인 형태의 Resume 형식과 비슷하다고 볼 수 있다) 그렇기 때문에 깔끔한 스타일의 디자인으로 구성하고자 했고, 일반적인 노션의 딱딱한 폰트보다는 좀 더 말랑한 느낌을 주고 싶었다. 전반적인 톤을 초록색으로 가져가고 싶기도 했다.
기본 스타일에서는 노션에서도 제공하고 있는 기능인 라이트 모드와 다크 모드뿐만 아니라 커스텀 모드도 함께 선택할 수 있다. 커스텀 모드를 활용하면 노션 페이지 뒷 배경 색상을 바꾸거나, 전체 폰트의 색깔을 바꿀 수 있다. 개인적으로 약간 옅은 컬러의 배경 색상을 바꾸는 것은 괜찮았으나, 폰트 색상을 변경하니 너무 통일되는 느낌 때문에 그리 마음에 들지는 않았다. 배경 색상과 폰트 모두 정해져 있는 컬러에서 선택할 수 있는 것이 아니라 컬러코드를 활용하여 변경할 수 있기 때문에 커스텀의 폭이 더욱 넓어진다고 느꼈다.
특히 oopy를 노션 포트폴리오에 활용하기 좋았던 점은 CTA 버튼이었다. 최근 카카오 뷰 큐레이션 기능을 활용하여 궁금한 점이 있을 때 더욱 빠르게 소통할 수 있게 하기 위해 카카오 간편 채팅 채널을 생성했다. 이를 노션 포트폴리오에도 넣어 다른 사이트에서 내 포트폴리오에 접근했을 때도 간편 채팅을 통해 더 많은 이야기를 나눌 수 있게 세팅할 수 있는 기능이 바로 CTA이기 때문이다.
해당 기능은 하단에 플러팅 바 형태로 노션 페이지 어디에서나 접근할 수 있도록 구성되어있다. 이를 세팅하기 위해 필요한 것은 하단에 넣을 멘트와 클릭 시 연결될 링크이다. 물론 플러그인을 활용하여 채널톡 기능을 넣을 수도 있지만 이왕 카카오 채널에서 모든 대화를 관리하기로 마음먹은 만큼 굳이 활용하지 않았다.
또 하나의 정리 방법,
페이지별 클린 URL 설정
노션 페이지를 공유하면 당연히 각각의 페이지별 고유 URL이 존재한다. oopy에서는 조금만 고생하면 메인 페이지뿐만 아니라 각각의 하위 페이지에도 깔끔한 URL을 삽입할 수 있다.
지금도 노션 페이지를 세팅하고 있기에 많은 클린 URL을 세팅하지는 않았고, 홈 화면에서 각각의 활동 경험 항목에 상세 페이지를 연결할 수 있도록 구성해둔 전체 활동 정리 페이지에 /all이라는 클린 URL을 생성해두었다.
그렇게 하면 위와 같이 gradation.oopy.io와 gradation.oopy.io/all로 각각의 페이지 URL이 더욱 깔끔해져 있음을 확인할 수 있다. (정말 깔끔하게 세팅하기 위해서는 하위 페이지 전부 활동명을 입력해야겠지만.. 우선은 그 정도 대규모 세팅까지는 여력이 없어서 다른 페이지들의 URL은 정리하지 못한 상태이다)
HTML 코드를 활용하여
노션에 각종 효과 삽입
oopy가 매력적이라고 느꼈던 또 하나의 기능은 바로 각종 html 편집 기능이다. 언젠가 노션 포트폴리오에 좀 더 스토리를 넣고, 가독성 있게 바꾸고 싶기 때문에 나는 페이지 애니메이션 효과 정도만 넣고자 했다. 다행히, oopy에서는 커스텀 메뉴바나 콜아웃 및 갤러리 모서리를 둥글게 하는 코드, 제목 색깔만 변경하거나 배경 이미지를 넣는 코드 등을 제공하고 있다. 이 외에도 본인이 꾸미고 싶은 것이 있다면 아래 링크를 참고하여 페이지를 세팅할 수 있을 것이다.
페이지 유입자 분석을 위한
페이지뷰 차트 기능
원한다면 페이지뷰 카운트 기능을 넣을 수 있다는 부분도 활용도가 높아 보였다. 특히 여러 하위 페이지가 있을 때는 페이지뷰 별 어느 정도의 접근율을 보이고 있는지도 간단하게 확인할 수 있었다. 메인 페이지에 접속한 뒤 어떤 페이지를 많이 클릭해서 보는지에 대해서 위와 같이 볼 수 있다.
더욱 상세한 데이터 활용을 위해서는 페이지 뷰차트에서 Google Analytics를 추가해야 하지만, 포트폴리오가 아니라 기업 브랜딩 페이지나 리크루팅 페이지에서는 유입자를 분석할 때 더욱 적극적으로 활용할 수 있을 것이라는 생각이 들었다.
또 하나의 팁이 있다면 노션을 변경하고 우피에 바로 내용이 적용되지는 않는다. 약 1-3분 정도 소요되는 것 같았고, 스크립 코드를 변경할 시에는 체감상 그것보다 좀 더 걸리는 느낌이었다. 그 밖에도 oopy를 소개하는 페이지에서 여러 레퍼런스와 팁을 확인할 수 있는데, 각자의 목적에 따라 더 상세한 기능들을 활용해봐도 좋을 것 같다.
처음 oopy를 노션 포트폴리오에 넣어야겠다고 마음먹은 것은 클린 URL 때문이었다. 링크드인이나 블로그에 노션 포트폴리오를 공개하고 싶은데, 긴 URL이나 bit.ly가 들어간 랜덤 URL을 활용하고 싶지 않았기 때문이다. 커스터마이징 할 수 있는 포인트를 살펴보고 기능을 조금씩 추가하면서 더 많은 요소들을 활용할 수 있다는 점을 깨달았고, 노션 포트폴리오 재정비를 하면서 각종 코드들을 심어볼 예정이다.
oopy를 활용하며 노션 포트폴리오 페이지 하나만으로 내가 어떤 사람인지 알 수 있고, 일을 하면서 참여했던 각종 프로젝트를 정리할 수 있으며 궁금한 점이 생겼을 때 언제든지 커뮤니케이션할 수 있는 수단으로 발전시킬 수 있도록 수정 과정을 거쳐야겠다고 생각했다.
