Notion API 사용 후기 & HTML 파일 구하기

1. Notion 소개

Notion은 훌륭한 static webpage이다. 모바일에서도/PC에서도 웹페이지 디자인은 깔끔하며, 내장 기능도 많아서 소규모 사업들이 이용하기 좋다. 스파르타코딩클럽이나, 노마드코더의 경우에는 Notion을 이용해서 유저들과 소통한다.

2. 프로젝트 목적: 웹서비스를 구현할 때 Notion을 써보자

현재 토이프로젝트로서 운동을 추천해주는 웹서비스 "FitCuration"을 만드는 중이다. Google Form에다가 사용자가 응답한 것을 기반으로, 유저들에게 맞는 운동을 추천해주는 서비스이다. 

FitCuration 설문지 초안 1

 FitCuration 설문지 초안 2

이렇게 유저들이 설문에 응답하면, 유저에게 추천하는 운동들 / 운동 센터 정보를 웹페이지를 담아서 배포했다. 이 때 Notion을 배포하는 웹페이지로서 이용했다.

 

운동 추천 및 센터 추천 웹페이지 part 1

운동 추천 및 센터 추천 웹페이지 part 2

 

운동 추천 및 센터 추천 웹페이지 part 3

3. (Unofficial) Notion API 사용 후기

FitCuration 서비스에서 "유저 응답 -> 웹페이지 반환"을 자동화하고 싶었다. 어쩌면 Notion을 Python/JavaScript 등으로 조작할 수 있는  unofficial API를 github에서 찾아봤다. 물론, 있었다!

 

notion-py가 실시간으로 작동하는 runthrough를 담은 영상

내가 참고한 문서는 jamalex라는 유저가 만든 notion-py였다.

jamalex/notion-py

notion-py라는 unofficial Notion API 사용 후기는 다음과 같다.

• 표 생성, 이미지 삽입, 체크리스트, YouTube Video embed 등 상당히 많은 기능들을 구현했다.
• bug가 너무 많이 생긴다. AssertionError, Positional Argument error 등... 
• Notion의 깔끔함을 notion-py로 구현하기는 힘들다.

4. Notion HTML/CSS Cloning하기

그래서 방향을 바꿨다.

Notion 서비스 안에서 웹서비스를 운영하기보다는, HTML만 베껴서 프론트로 사용하는 게 나을 것 같았다. 아래 과정을 거치면 웹서비스가 빠르게 완성될 것 같았다.

1. Notion으로 웹페이지를 프로토타이핑
2. 해당 Notion webpage를 HTML로 변환
3. HTML 코드 클로닝하고, 백단은 JavaScript로 구현  

github을 다시 찾아보니 go로 Notion 페이지를 html로 변환시켜주는 코드가 있었다. 문제는, 내가 go 언어를 전혀... 사용할 줄 모른다는 것.

kjk/notionapi

다행히도 페북 친구님의 도움으로, 아주 간단하게 해결할 수 있었다. Notion 자체에 Export as HTML 기능이 있었다. 

Export as HTML

5. 다음 일은?

유저한테 배포할 static webpage의 뼈대를 구했으니, 운동 추천 / 운동 센터 추천 알고리즘을 만들 차례이다. 으으... 산넘어 산이다.