[개발자 이력서] 노션 이력서에 폰트 적용하기(oopy.io, super.so 말고 공짜로..)

⚠️ 주의 

이 글은 오로지 노션 이력서에 폰트를 적용하고자 하는 강렬한 집념을 담아서 진행했던 과정으로 별 내용이 없을 수 있음을 미리 알려드립니다. oopy.io와 super.so를 사용하는 것이 훨씬 간편할 수 있으나 결제를 해야했기 때문에 다른 방법을 찾다가 발견한 방법입니다. 더 좋은 방법이 있다면 댓글로 알려주시면 감사하겠습니다! 

노션 이력서 공개하기

간단하게 노션으로 만든 이력서를 공개하는 방법부터 소개하자면 노션 앱 또는 웹 사이트에서 설정과 멤버 메뉴에 들어가면 공개 설정이라는 항목이 있습니다. 거기서 원하는 도메인과 공개할 홈페이지를 선택하면 됩니다. 

노션 앱 설정과 멤버 메뉴

아래 예시 사진처럼 도메인을 abc라고 설정하면 https://abc.notion.site 라는 주소를 인터넷 주소창에 입력해 내가 설정한 노션 페이지를 보여줄 수 있습니다.

제 이력서를 공개하기에는 아직 용기가 부족해 제가 이력서를 작성할 때 참고했던 좋은 노션 이력서 예시를 대신 올려보았습니다. 이 자리를 빌어 이력서를 공유해주신 워니님께 감사합니다!

https://wonny-log.notion.site/Wonny-c2f8051bfb574f349406a30d2bc71a45

Wonny | 데이터로 일하는 개발자

노션 이력서에 폰트 적용하기

올해 다시 취준 활동을 시작하면서 이력서와 경력 기술서를 다시 한 번 써보고 있는데 가장 마음에 걸리던 부분이 폰트더라구요. 

 

구글에 노션 폰트 적용이라고 검색하면 노션에서 제공하는 기본 3종 폰트를 바꾸는 방법을 알려주거나 크롬 확장 프로그램(notion-enhancer)을 사용해서 폰트를 바꿀 수 있는 방법을 알려주는 내용이 대부분이었습니다. 

 

하지만 저는 다른 사람에게 링크를 공유해서 내 이력서를 보여줄 때의 폰트를 내가 원하는 폰트로 바꾸고 싶었기에 다른 방법을 찾아야 했습니다. 그렇게 찾게된 방법이 노션 페이지를 렌더링 해주는 react 라이브러리를 활용하는 방법이었습니다.

 

아래 블로그와 깃허브 내용들을 참고하여 폰트를 적용할 수 있었습니다.(접은글 참고!)

https://blog.silentsoft.org/archives/193

oopy.io, super.so 대체제를 찾아서 (feat. Notion X)

https://1nnovator.tistory.com/55

노션 페이지를 React로 웹에 띄워보자 (react-notion)

https://github.com/transitive-bullshit/nextjs-notion-starter-kit

GitHub - transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Verce

transitive-bullshit 깃허브에서 아주 잘 설명해주고 있어서 그대로 따라하기만 하면 됐습니다. 제가 노션 페이지에 폰트를 적용하기 위해 실행한 방법은 아래와 같습니다.

 

1. 깃허브 레포지토리를 fork하거나 clone해서 내 레포지토리로 만듭니다.
2. 내 로컬 파일로 해당 레포지토리를 가져옵니다. (clone from url)
3. 가져온 파일들 중 site.config.ts 파일의 rootNotionPageId를 내가 공유하고자 하는 노션 페이지 아이디로 바꿔줍니다.
4. 컴퓨터에 npm이 없다면 설치해줍니다.
5. 의존 패키지를 설치하고 테스트를 위해 command 창에서 아래 명령어를 실행해줍니다.

npm install
npm run dev to test locally

6. 내 로컬 환경에서 노션 페이지가 정상적으로 뜨는지 확인합니다. (http://localhost:3000/)
7. vercel에 가입하고 깃허브 레포지토리와 연결합니다.

8. 배포한 결과물을 확인해서 인터넷에서 정상적으로 노션 페이지가 뜨는 것을 확인합니다.
9. 폰트를 적용하기 위해 css 파일을 수정합니다. 

저는 전체 페이지에 일괄 적용하기 위해 styles/global.css 파일을 아래처럼 수정해서 사용하였습니다.

@font-face {
  font-family: 'S-CoreDream-3Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'S-CoreDream-3Light';
  box-sizing: border-box;
}

노션 페이지 폰트 적용 결과 화면 비교, 후기

폰트 적용 전/후 노션 페이지

이렇게 비교해보면 왼쪽이 깔끔하게 느껴지는 건 왜 일까요..? ㅋㅋㅋ

 

아직 미완성이지만 노션으로 작성한 내 프로필이나 이력서에 내가 원하는 스타일(css)을 적용할 수 있게 된 점이 정말 만족스러웠습니다!

약간은 복잡하고 귀찮은 과정이었지만 공짜고(<- 제일 중요!!!ㅋㅋ) 방법을 찾아 해냈다는 점에서 뿌듯한 경험이었습니다. 이런게 인터넷에서 찾아보면 모든 해결 방법이 나오는 시대의 특권이 아닐지..

 

노션을 이용해서 간단하게 이력서나 프로필을 공유하고 싶으신 분들이라면 제가 했던 방법이 도움이 될 수 있지 않을까 싶어 공유해봅니다.