프로젝트 시작 부터 0.1.0 버전 까지

프로젝트 소개 #

정적 웹사이트를 쉽게 관리하기 위해 tauri로 작성한 프로젝트 입니다.
최종적으로는 notion과 비슷하게 글을 관리할 수 있는게 목표지만, 이번 버전은 0.1.0 으로 최소한의 기능만 포함한 상태입니다.
ssh와 서버 설정이 가능한 탭이 있고, 설정 이후 파일 리스트 새로고침으로 content의 리스트를 가져올 수 있으며, 파일 관리가 쉽게 가능합니다.

이미지를 업로드하면 tauri 앱에서는 markdown 태그로 변하며, 이미지는 UUID로 생성된 이름으로 서버에 저장됩니다.
캡쳐 방식이 아니더라도 이미지 파일로 저장한 다음 이미지 파일을 복사 붙여넣기를 하면 같은 동작을 합니다.

개발 기간 #

24/02/29 ~ 24/03/03 : rust/svelte 공부 및 연습
24/03/03 ~ 24/03/17 : im not notion 0.1.0 릴리즈

계기 #

지금까지 네이버 블로그, 티스토리 부터 여러 방식으로 블로그를 옮기면서 두가지 큰 이유로 개인 서버의 개인 블로그를 구축해보고 싶었다.

1. 이미지나 게시글이 영구적으로 저장될 수 있도록 하기 위해
2. 개인 도메인을 사용하고 원하는대로 꾸미기 위해

이정도가 큰 이유였는데, 테마 적용이 쉽고 원치 않으면 markdown 으로 작성한 글을 다른 플랫폼으로 옮기면 되니 markdown 기반 hugo 서버로 정착하기로 결정했다.

대부분 맘에 들었지만, ssh로 서버에 접속해서 vim으로 글을 작성하면서 이미지도 서버에 영구적으로 저장하기 위해 WinSCP 프로그램으로 파일을 업로드 후 태그를 작성해줘야 한다는점이 불편했다.

블로그에는 글을 잘 쓰지 않게됐고 입사 후에는 공부한걸 정리할 시간이 더 부족해서 블로그보단 편리한 notion으로 정리하게 됐다.
공부한 것들을 편하게 정리하려면 언젠가 구현해야했기 때문에 회사 코드도 어느정도 숙지된 지금 퇴근하고 남는시간을 이용해서 프로젝트를 시작했다.

구상 #

노션과 hugo 게시글 관리할때의 차이를 줄이기 위한 프로젝트이기 때문에 노션의 기능을 대부분 사용할 수 있어야됐다.
그중 가장 급한 기능은 아래 세가지이다.

1. 폴더 구조를 쉽게 확인하고 글을 쉽게 불러와야함
2. 파일이나 폴더를 쉽게 관리할 수 있어야함
3. 클립보드 이미지를 쉽게 입력할 수 있어야함

추가적인 기능도 필요하겠지만, 당장 세가지를 먼저 구현하는데 초점을 뒀다.

1. 프론트만으로 브라우저에서 사용 가능한 싱글페이지 구현 #

가장 먼저 생각했던 방법인데, 웹 프론트엔드이기 때문에 UI를 예쁘게 만들 수 있고 검색해보니 notion의 클론코딩 프로젝트도 많아서 구현하기 쉬울것 같아 보였다.
브라우저의 보안 정책으로 파일관리나 ssh 연결은 불가능하기 때문에 다른 방법을 찾아야했다. 😢

2. ImGUI + webview 로 구현 #

ImGUI는 이전에도 사용해봤던 라이브러리이고, c++을 사용해서 언어 숙련도를 높일 수 있으며, 그냥 PC 클라이언트로 구현되기 때문에 브라우저의 보안 정책을 신경쓰지 않아도 됐다.

하지만 안예쁘다는 심각한 문제가 있었다.

그리고 노션과 비슷하게 구현이 가능할까 하는 의문점도 있었다.

3. 웹 프론트엔드 + agent 또는 웹서버 형식 #

1. agent 방식
   노션과 비슷하게 구현 가능하도록 웹 프론트엔드를 사용하며, 브라우저 보안 설정을 우회하기 위해 agent를 실행시키는 방법이다.
   agent도 원하는 언어로 구현할 수 있고, 프론트엔드도 노션 형태로 예쁘게 구현할 수 있었다.
   브라우저는 HTTP 통신이 가능하니 agent로 웹서버 포트를 열어서 HTTP 로 받고 agent에서 hugo server로 연결하는 방식으로 구현하려 했다.
   agent 프로그램과 프론트 파일의 분리로 두개 다 관리해야하고 사용자가 agent를 실행시키거나 자동실행에 등록해야하는 단점이 있었지만, 이 방식으로 깃 프로젝트까지 생성했었기 때문에 tauri가 없었다면 가장 유력한 후보였다.

2. 웹서버 방식
   웹서버 방식도 agent와 거의 비슷하지만 서버에 설치를 해줘야하고, 로그인 기능을 따로 구현해야된다는 문제가 있었다.
   (인증 없이 글을 수정하는건 아주 위험하니까…)
   차라리 agent 방식이 더 좋아보였다.

4. tauri #

계속 검색하다보니 electron을 발견하긴 했는데, nodejs 를 사용해야하고 비슷한 프로젝트중에 tauri 라는 프로젝트가 있는것을 발견했다.
프론트는 웹 프레임워크인데다 원하는걸 선택할 수 있고 백엔드는 러스트로 구현하면서, 실행파일은 한개로 관리할 수 있고, 모든 플랫폼이 전부 지원된다는게 와 내가 원하는 모든게 포함된 프레임워크였다. 🎉😆🎉
기존에 만들어둔 agent 방식의 깃 레포를 삭제하고 뒤도 안돌아보고 tauri로 옮겼다.

앞으로 #

0.1.0 버전이라서 레이아웃부터 앞으로 고치거나 추가할 기능들이 많지만, 당장은 노션을 대체할만 하다고 생각한다.

• 레이아웃, hugo config 파일 수정 가능한 페이지
• notion과 같은 단축키 기능 (ctrl + b 등)
• 레이아웃에 맞게 표시해주기.
• 자잘한 버그 수정 (메인 컨텐츠 스크롤 두개인 문제 등)
• 서버 재시작 기능
• 파일 검색기능
• 컨텐츠 저장할때 링크되지 않은 이미지들 전부 삭제하기
• 드래그앤 드랍으로 게시글 위치 옮기기

이 외에도 구현할게 많지만 당장은 사용하는것에 불편함이 없기 때문에 밀린 글 정리먼저 할 예정이다.