지난 11월달에 있었던 안동 학생 스포츠 대축전 공모전?사이트를 Notion으로 만들고 운영하면서 느낀 것들이 많아 이번 기회에 한번 정리 해보려고 한다.

서비스 스펙 결정

한 7~8월달에 나의 은사이시자 중학교 체육선생님께 연락이 와서 이런 공모전을 기획중인데, 앱이 필요하다고 말씀하셨다. 내용은 아래와 같다:

모바일에서 촬영한 영상을 올리고 볼 수 있는 앱을 만들어달라.

선생님께서 요구하시는 요구사항을 충족하기 위해서 여러가지 생각을 했다. 영상을 찍어 올리고 사람들이 볼 수 있는 일종의 플랫폼을 만들어 달라는 의미로 받아들였다. 이에 해당하는 개인적인 견해는 다음과 같았다.

• 앱을 만드는 것 보다 웹을 만드는게 빠를 것이다.
  왜냐하면 앱은 출시도 해야하고 버그가 생겼을때 심사를 하고 업데이트가 되기 때문에 버그대응이 느리다. 한달만 하고 끝나는데 애플은 운나쁘면 심사만 1주 소요.

따라서 내가 찾은 답은 웹으로 만드는 것이었다. 웹으로 만들게 된다면 여러가지 이점이 있을거라 생각했기 때문이다. 웹으로 선택하게 된 계기는 사실 앱을 만들기 귀찮았고 선생님께서 앱을 만들 리소스(아이콘이나 디자인용 이미지들)를 제공해주시지 않았기 때문에 내가 이것들을 잘할 자신이 없었기도 하다. 물론 플러터를 통해 머테리얼 디자인을 쓰면 조금만 만들어도 굉장한 앱을 만들 수 있지만, 역시 한달만 쓰고 버릴 앱인데 만드는 노력에 비해 너무 단기간 사용되고 버려질 앱인게 아까웠다.

그렇다면 웹서비스를 어떻게 구축할까에 대한 고민이 시작되었다.

제일 첫번째로 떠오른 것은 워드프레스다. 워드프레스는 워낙 유명하고 다양하게 쓰이고 있어서 자료도 많을 것이고, 나도 OSS수업때 진짜 설치정도만 해본적은 있었다. 워드프레스도 나쁘지 않은 선택지였다. 하지만 워드프레스를 쓰지 않기로 다짐했다.

1. 나는 어차피 웹 지식은 고작 html5/css/php 들을 조금 써볼 줄 아는 수준이기에 웹서비스를 한다면 무조건 새로 배워야 하기 때문이다. 어차피 새로 배워서 만들어야 하는데 워드프레스를 배우기에는 아까웠다.
2. 워드프레스로 하기에는 안써보기도 했고 아무나 영상을 올릴 수 있는지, 영상을 지울수 없는지 등 권한관리 해본적 없다. 즉 요구사항을 워드프레스로 충족시킬 수 있는지 서치하기 귀찮고 내 경험으로는 가늠할 수 없다.

그렇다면 워드프레스 말고 다른 것이 필요하다. 머리를 번뜩 스쳐 지나간 것은 Notion이었다. 처음 Notion을 써본 날은 2018년도 겨울이었다. 굉장히 심플하고 강력한 기능들이 나를 매우 만족시켰다. 이전에는 Markdown 기반의 부스트노트라는 앱을 사용해 전공 공부, 교양, 개인일정 등을 메모했다. 하지만 크로스 플랫폼으로 구동하기 힘들었다. 모바일 환경에서는 마크다운을 편집하기 굉장히 힘들었고 깔끔하긴 했지만 별로 이쁘진 않았다. 그래서 찾은게 노션이었다.

노션을 매우 오랫동안 써본 유저로 노션은 잘 다룰 수 있었지만, 이런 웹서비스를 노션으로 한다는 것은 처음이었다. 간혹 노션을 개인 포트폴리오나 회사 채용공고 사이트로 사용했던 케이스들은 본적이 있었지만, 이런 웹 서비스를 만든 케이스는 본적이 없었다. 예를 들어서 Notion을 사용해 쇼핑몰 웹서비스를 한 케이스가 있냐 이말이다. 내 짧은 경험으로는 노션은 그런 용도가 아니라서 아무도 그렇게 할 사람이 없다. 그렇다면 내가 한번 시도해보자고 생각했다.

Notion으로 할 수 있을까?

노션은 그냥 문서편집 프로그램이니 요구사항을 만족시키기 위해 각종 해결방안들을 찾아야 했다. 우선은 노션에 영상을 Embed하는 기능, link를 걸어서 보여주는 기능이 있다. 페이지를 서치가능하게 풀고 모두 수정할 수 있게 수정권한을 열어놓으면 누구나 영상을 올릴 수 있다. 하지만 누구나 영상을 다 지워버릴 수도 있다는 단점이 있다. 노션은 아직 이런 부분에서 권한설정을 세세하게 할 수 없다. 또한 이 공모전에 참가하는 많은 사람이 노션을 한번도 써보지 못한 사람들이 대부분이라 너무 높은 자유도에 사람들이 오히려 많은 혼동과 문의가 쏟아질 수도 있을거라 페이지 수정권한을 모두에게 허용하는 일을 해서는 안된다고 판단했다.

그렇다면 영상을 올리는 방법을 강구해야 한다. 그래서 선택한 것은 구글 설문지였다. 구글 설문지를 통해 제목과 영상, 카테고리를 선택하면 구글 드라이브에 영상이 올라가고 해당 영상을 링크로 노션 데이터베이스에 개별 페이지로 만들어서 넣고 갤러리 뷰를 만들어서 보여주면 된다고 판단했다.

여기서 문제점은 구글 설문을 제출했다는 것과 그 정보를 받아서 노션에 업로드를 어떻게 하는가 이다. 여기서 또 떠오른 것은 Notion-py이다.

Notion-py

notion-py는 노션 페이지를 자동화할 수 있는 Unoffitial notion API이다. 이 라이브러리를 사용해 파이썬 스크립트로 영상블럭을 만들고 데이터베이스를 찾아서 페이지를 만들어 카테고리 프로퍼티를 지정하고, 제목과 영상, 이미지등을 첨부하면 된다. 이런 작업은 어렵지 않았다. notion-py 깃허브 문서에 다양한 예제들이 있어서 그것들을 보고 구현하는데 어렵지 않았다.

이 파이썬 스크립트와 구글 설문지와의 연결을 위한 마지막 퍼즐 조각이 하나 남았다. 구글 설문을 제출하면 어떤 스크립트를 수행하는게 있는지 열심히 구글링을 했고, 나는 드디어 마지막 조각을 찾았다.

Google Apps Script

[Google Apps Script] 구글 설문으로 자동 드라이브 공유 및 슬랙 초대하기

구글 앱스 스크립트라는 것이 있어서 설문지를 제출했을때 구글 스프레드 시트에 정보가 등록면 트리거를 발생시켜 특정 구글 앱스 스크립트를 구동하는 것이 가능했다. 위 북마크는 슬랙과 구글드라이브를 공유하는 자동화 스크립트를 만드는 방법을 알려주고 있었다. 나는 구글 설문으로 받은 정보를 패킷에 담아서 내 파이썬 스크립트로 날려주면 됐다. 앱스 스크립트 소스코드를 보니까 POST요청을 할 수 있다는 것을 발견했다. 그러면 내가 웹서버를 하나 구축해서 POST요청을 받으면 그 정보를 노션에다가 등록하는 파이썬 스크립트를 백그라운드로 실행하도록 프로그램을 만들면 된다. 노션을 파이썬 라이브러리를 사용해 업로드하니까 파이썬 Flask 라이브러리를 사용해 POST받는 백엔드서버를 뚝딱 만들었다.

이를 통해 기본이 갖춰졌다. 설문지를 제출했을때 영상이 잘 올라가는 것을 보고 이를 선생님께 보여드렸고 여러가지 개선점들을 찾아서 고치게 되었다.

Oopy.io 도입

1. 노션 도메인이 너무 길어서 다른 도메인 적용이 필요하다.

   노션에 커스텀 도메인을 적용할 방법을 찾아봤다. 페이스북 노션 사용자 모임에서 커스텀 도메인을 쓴 글을 본적이 있어서 쉽게 찾을 수 있었다. 한국인이 만든 Oopy.io라는 서비스를 쓰면 커스텀 도메인 가능하다는 것을 발견했다. 그래서 바로 노션 사이트에 커스텀 도메인을 등록했다.

2. 앱처럼 쓸 수 있도록 하는 방법은 없을까 (홈 스크린에 아이콘)

   앱처럼 사용한다는 의미는 홈 스크린에 아이콘이 있어서 그 아이콘을 누르면 웹페이지가 열리면서 우리 사이트로 연결되는 그런 것을 원하셨다. 이것은 스마트폰 웹 브라우저의 기능인 홈에 북마크 생성하는 기능을 사용하기로 했다. 하지만 문제는 이렇게 북마크를 생성하면 노션 아이콘이 당당하게 앱의 아이콘이 된다는 것이었다. 이 아이콘을 어떻게 바꾸는지 열심히 또 구글링을 했다. 찾아보니 html에 head 부분 소스코드를 넣어서 해결할 수 있다는 것을 발견했다. 하지만 이게 노션에 가능한지 의문이었다. 다행이도 oopy에 소스코드 인젝션을 제공했다. oopy가 아니었으면 절대 불가능했을 것 같다... 아래의 소스코드를 추가해서 아이콘을 바꿨다.

   <link rel="shortcut icon" href="https://github.com/SilverJun/AndongSportFest/blob/master/images/favicon.png?raw=true">
   <link rel="apple-touch-icon" href="https://github.com/SilverJun/AndongSportFest/blob/master/images/favicon.png?raw=true">

이렇게 노션과 구글 앱스 스크립트, 파이썬을 사용해 간단하고 심플하게 웹 서비스를 구축했다. Oopy.io를 사용해 노션 페이지를 홈페이지로 깔끔하게 만들고 파비콘도 바꿨다. 서비스 하면서 생각보다 많은 트래픽에 업로드 로직들을 수정하고 개선했던 경험은 다음 글에서 계속될 예정이다.

소스코드 깃허브: SilverJun/AndongSportFest
사이트 : sportfest.oopy.io/