노션으로 개인 홈페이지 만들기
3시간 만에 뚝딱뚝딱 홈페이지 짓기
노션 홈페이지를 드디어 만들었다! 노션을 이용해서 깔끔한 홈페이지나 블로그를 운영하는 레퍼런스를 보면서, 나도 나의 것을 만들고 싶다는 생각이 계속 있던 중에.. 홈페이지가 필요한 일이 생겼고, 뉴먼 슬랙에서 '초단기 1차 포폴 만드실 분'이라는 K님의 번개가 열려서 후딱 탑승했다. 토요일부터 zoom으로 만나서 아이디어 회의를 시작했지만, 나는 영 진도가 지지부진했는데 오늘 새벽 K님이 보내주신 한 레퍼런스를 보고 영감을 얻어서 일요일 아침에 후닥닥 3시간 만에 완성했다. 그동안 레퍼들을 많이 봐와서 그런지, 방향을 잡으니 생각보다 빠르게 완성할 수 있었다.
진도가 지지부진했던 이유는 무얼 만들고 싶은 건지 결정을 못해서였다. 함께한 K님은 잡 오퍼가 온 곳에 당장 제출하셔야 하는 포트폴리오가 있어서 그동안의 작업물과 커리어 방향에 맞춘 결과물이라는 목표가 명확했는데, 나는 딱히 목표가 없었다. 그동안 내가 해온 걸 보여주고 싶은 건지, 사이드 프로젝트를 소개하고 싶은 건지 갈팡질팡했다. 네이버 블로그, 브런치 등으로 흩어져있는 기록들의 허브를 만들고 싶다는 생각 정도로 정리는 되었는데 이걸 어떻게 담아내야 하나 걱정이었다. 아 그냥 안 떠오르면.. 나중으로 미뤄야지.. 하고 있다가 오늘 아침에 일어나서 K님이 새벽에 보내주신 레퍼런스를 봤는데, 오! 이런 식으로 링크를 걸어서 처리하면 깔끔하게 표현할 수 있겠는데? 싶었다.
결정적인 영감을 준 Lennon Cheng의 노션 홈페이지머릿속에 그림이 그려진 후 바로 자리에 앉았다. 우선 구글 드라이브를 열어서 프로필로 쓸만한 사진부터 찾아봤다. 작년에 광주 나인블럭에서 찍은 사진이 상큼하니(?) 내 이미지와 잘 어울리는(?) 것 같아서 골라 넣었다. 사진이 세로로 길쭉한 편이라 사진을 넣고 그 옆에 컨택 포인트와 SNS 링크를 적었다. 그 아래에는 대부분의 시간을 쓰는 본업을 Main Job으로 타이틀을 만들어서 적었다. 작년에 회사 블로그에 소개된 센터 소개글도 링크를 달아뒀다. (범인 잡는 형사 st로 찍힌 사진도 있다^^) 그 아래에는 친한 회사 동료분이 나에게 해주셨던 말을 소개말로 적어봤다. '민석 님 완전 전방위 풀 스택 기획자 아니에요~?' UX부터, 백엔드 API까지 챙기는 상황을 보면서 해주셨던 말이었다. 아직 많이 부족하지만, 되고 싶다는 바람을 담아 적어봤다^^ 그리고 요즘 꽂힌 '일이 되게 하는 사람'이라는 말도 함께 적어보고. 그 밑에는 백쿼트로 내가 하는 일의 키워드를 함께 적었다.
메인 잡을 적은 후에는, 사이드 프로젝트를 적었다. 처음에는 노션 / 디지털 정리 / 돈 관리법 정도로 나누어서 적어볼까 했는데, K님이랑 이야기하다 보니 결국 노션과 디지털 정리가 비슷한 맥락으로 이어지는 것 같아서 '디지털 기록' 하나로 묶었다. 그동안 했던 노션 워크숍 소개 링크, 브런치 링크를 연결했고 지난 1월에 베타를 진행하고 천천히 디벨롭 진행 중인 디지털 정리 1:1 컨설팅 <나 조각모음>은 개요와 커리큘럼 소개와 함께 메일 구독 링크를 넣어뒀다. 구독 링크 여기도!
외부 링크와 노션 페이지 링크를 이용해서 사이드 프로젝트 소개하기여기까지가 약간 포트폴리오?(까지는 아니지만) 성격이 있었다면, 아래에는 블로그 허브를 만들고자 한 목표를 이루기 위해 최근에 내가 이곳저곳에 써둔 포스트를 갤러리 뷰로 모아두는 latest posts(최근 포스트)를 추가했다. 브런치, 네이버 블로그에 쓰고 있는 글 중에 보여주고 싶은 것을 기준으로 3개만 선정해서 넣어뒀다. 그 밑에는 요즘 보고/듣고/읽고 있는 것들을 넣는 now reading & playing 리스트 뷰를 추가했다. 아직 어떻게 발전할지는 모르겠고, 일단은 각 항목에 대한 링크만 넣어둔 상태. 나중에는 간단한 리뷰를 적거나, 별점을 매기거나(?) 하는 형태로 발전할 수도 있지 않을까!
이렇게 내용을 다 채우고 나서 oopy를 연결했다. oopy는 노션 페이지를 홈페이지로 만들어주는 서비스인데, 최근에 깔끔한 레퍼런스를 많이 보아서 홈페이지를 만들면 쓰려고 점찍어둔 서비스였다. 연결은 아주 쉬웠다. 도메인을 설정하고, 만들어둔 노션 링크를 입력하면 끝! 가지고 있는 도메인이 있다면 그 도메인을 연결하면 되지만, 전에 도메인 샀다가 귀찮은 일을 겪었던 것이 떠올라 나중에 시간이 나면 하려고 일단은 oopy에서 기본 제공하는 도메인으로 설정했다.
파비콘은 중요하다그냥 노션 도메인으로 써도 되지만 oopy를 굳이 돈 내고 연결한 가장 큰 이유는, 파비콘과 클린 url 때문이었다. 파비콘은 위 이미지처럼, 웹 브라우저 주소창에 표시되는 아이콘이다. 노션 페이지로 그냥 링크를 쓰면 노션 아이콘이 뜨게 되고 홈페이지로서의 매력도가 확 떨어진다고 봤다. 다른 사람들도 모두 같은 노션 아이콘이 뜰 테니까.. 물론 oopy를 안 쓰고도 어찌어찌해서 노션 홈페이지에 파비콘 연결하는 방법도 있겠지만 알아보기 귀찮았다....ㅎㅎㅎ 이럴 땐 돈을 내고 서비스를 이용하는 것도 필요하다고 생각했다.
두 번째는 클린 url인데, 내가 만든 홈페이지에는 메인 페이지에 연결된 하위 페이지가 여럿 있었다. 사이드 프로젝트에 적은 내용 중에, 디지털 정리 1:1 컨설팅 <나 조각 모음>, <나의 돈 흐름 관리법>, <월급날엔 월말 정산>은 하위 페이지를 만들어서 링크를 거는 형태로 만들어 두었다. 이렇게 만드는 게 깔끔해서 보기는 좋은데, url이 지저분해지는 게 마음에 아주 마음에 안 들었다. oopy의 클린 url 기능을 이용하면 매우 쉽고 간단하게 각 하위 페이지 별 url을 지정할 수 있었다.
클린 url 지정으로 노션 홈페이지 같은 느낌 주기 +10이 외에도, 폰트를 바꾸거나 스크롤 프로그레스(문서 읽기 진행률을 알려주는 상태 바) 등을 추가할 수 있다는 점도 좋았다. 방문자 수를 트래킹 하기 위해 Hits를 페이지 하단에 추가했는데 자꾸 위치가 제 맘대로 움직여서 당황하던 차에, oopy 콘솔에서 간단하게 모든 페이지에 페이지 뷰를 볼 수 있는 깔끔한 카운터를 추가할 수 있던 점도 좋았다!
편하게 글을 올리는 네이버 블로그, 인스타그램과 사이드 프로젝트에 관한 내용을 주로 올리는 브런치 등은 그대로 유지하면서도 나의 맥락을 하나로 담은 홈페이지를 완성할 수 있어서 뿌듯했다. 이전에는 홈페이지를 만드려면, 정말 많은 준비가 필요했는데...(나모 웹에디터..알 FTP.. 그 시절...) 지금은 노션과 oopy 두 개의 서비스만 잘 쓰면 깔끔하게 완성할 수 있다는 것도 여러모로 놀라웠고. 일단 홈페이지를 앞으로도 계속 잘 운영해봐야지! 자주 놀러오세요! minseok.oopy.io
