2024-03-22

포트폴리오&블로그 페이지

포트폴리오 및 블로깅을 위해 개발한 페이지로, Notion API를 사용하여 데이터베이스 없이 CRUD가 가능한 간단한 홈페이지를 만들어보았다.

지금 이 페이지를 만들기 전에도 이미 페이지를 처음부터 계획, 디자인, 개발한 페이지가 존재한다.

해당 페이지는 Notion API가 느릴 경우에는 요청에 대한 응답이 최대 3000ms에서 4000ms까지 걸리는 사용자 경험적으로 문제가 크다고 생각하여 마크 다운을 사용한 정적 페이지로 개발하였다.

블로그 작성을 위한 마크 다운 작성은 옵시디언을 사용하였다.

Obsidian - Sharpen your thinking

Obsidian is the private and flexible note‑taking app that adapts to the way you think.

하지만 마크 다운을 수정하고 이미지를 업로드 하는 것이 불편하고 옵시디언 설정이 된 컴퓨터에서만 작성이 가능한 단점이 있었다.

또한 수정에 대한 배포로 깃허브 액션을 사용하니 포스팅 하나 올라가는데 시간이 오래걸렸다.

이러한 문제가 있어, 한동안 블로그 작성도 뜸해지고 페이지 관리를 안하다가 이번에 너무 방치한 것 같아서 이번 프로젝트를 기획했다.

노션 API가 나온지 시간이 꽤 흘렀고, 위와 같은 문제를 해결해보고자 Notion API를 활용한 블로그를 새롭게 만들어 보기로 했다.

기존 Github Page를 사용한 페이지도 못생기진 않았지만, 이번에는 조금 더 홈페이지같은 느낌의 사이트를 만들어보고 싶어서 새롭게 디자인해 보았다.

화면의 기본적인 프레임은 FlowBite를 기반으로 디자인했다.

https://flowbite.com/

추천해주셔서 감사합니다 팀장님!

V1 디자인

V2 디자인

기본 루트 페이지에서는 현재 나의 스팩과 내가 생각하는 수준을 progress 바를 통해 시각적으로 표시될 수 있게 하였다.

프로젝트 페이지에서는 지금까지 만든 간단한 토이프로젝트나 라이브러리를 조회할 수 있도록 만들었다.

블로그 페이지는 검색 기능을 추가했고, 검색 하기 전에는 가장 최근 글 3개를 띄울 수 있게 만들어 두었다.

디자인 페이지는 프로젝트 페이지와 거의 동일하지만, 페이지 디자인이나 모바일 디자인, 로고 디자인 정도의 디자인 프로젝트만 올리기 위해 만들었다.

아이콘 페이지에서는 지금 까지 그린 아이콘에 대해서 무료로 복사할 수 있도록 만들었으며, FlowBite의 아이콘 페이지를 참고해서 크기와 선 굵기를 마음대로 커스텀해서 사용할 수 있도록 만들어 보았다.

모든 페이지의 하위 페이지 ( 내용 페이지 )는 동일한 디자인으로 만들었다.

현재 기능은 정말 단순하게 조회 수준으로만 만들었기 때문에 추후에 가능하다면 더 많은 기능들을 넣어볼 예정이다.

배포는 github action를 사용해서 커밋하면 자동으로 배포될 수 있게 했다.

배포 환경은 오라클 클라우드에 인스턴스 하나에 K3S를 설치하여 리소스를 알아서 분배해서 사용할 수 있게 구축하였다.

Notion API가 이전보다는 확실히 빨라지긴 하였지만, 여전히 페이지 시작부터 보여지는 시간까지의 텀이 빠르면 500ms에서 느리면 2000ms 까지 걸리기 때문에 어떻게 해결할지 고민이 더 필요할 것 같다.

작년에 오라클 클라우드 free tier로 서버를 만들어 두었는데, 드디어 사용하게 되었다.

도메인까지 구매하였으나 올라간 애플리케이션이 없어서 아까울뻔 했지만, 드디어 사용하기 시작해서 마음이 편해졌다.

이번에 새롭게 디자인해본 이 블로그는 관리에 번거로움도 없고, 글 작성이나 수정도 보다 간편해졌으니 계속해서 포스팅을 할 예정이다.