#0.9.0 - 데브고래밥 스튜디오 개선

최근 방치해뒀던 코드의 약 70%를 개선했습니다. 이번에는 사용자 기능 개선보다는 블로그 관리자 페이지의 일부 기능 개선 내용을 보여드리려고 합니다.

저는 특정 플랫폼에 얽매이지 않고 저만의 블로그를 만드는 것이 목표였습니다. 이전에도 여러 번 시도했지만, 막상 블로그를 관리하는 기능이 부족하다 보니 블로그를 꾸준히 운영하기가 어려웠습니다.

_{삘이 올때마다 일단 만들어보는 블로그 프로젝트들의 기록..}

나름 애정을 가지고 만들었던 프로젝트들인데, 정작 블로그의 핵심 기능인 글쓰기가 너무 불편했던 것이 가장 큰 이유인 것 같습니다. 기본적으로 마크다운으로 글을 쓰는 게 편하다고 생각해서 처음에는 마크다운으로 게시물을 관리했습니다. 하지만 이미지 첨부 같은 메타 콘텐츠를 다루는 작업이 점점 번거로워지면서, 결국 글쓰기 자체를 멀리하게 되었습니다.

그래서 현재 블로그는 글을 작성하거나 기능을 조작할 때, 저에게 불편했던 점을 개선하는 데 시간을 쏟고 있습니다.

위지위그(WYSIWYG) 에디터

_{의미는 위키백과에서 찾아 보실 수 있습니다.}

현재 저는 TinyMCE라는 WYSIWYG 에디터를 사용하고 있습니다. 무료 기능만으로는 마크다운을 지원하지 않지만, 개발자가 직접 플러그인을 만들어 필요한 기능을 추가할 수 있다는 점과 깔끔한 인터페이스가 마음에 들었죠.

에디터에서 이미지 파일 등의 업로드를 처리하는 과정이 익숙하지 않아 많은 시행착오를 겪었지만, 덕분에 많은 것을 배울 수 있었습니다.

사용자 친화적인 관리 UI로의 변화

기존 관리 페이지의 UI는 조금 난잡했습니다. 사용자에게 보여지는 페이지가 더 우선순위였거든요. 저는 깔끔하면서도 사용하기 편리한 UI를 찾던 중, 유튜브 스튜디오의 디자인에서 영감을 얻었습니다. 직관적인 레이아웃과 효율적인 기능 배치에 깊은 인상을 받았고, 이를 바탕으로 지금의 UI를 만들었습니다. 현재 블로그 관리 페이지는 다음과 같이 변경되었습니다. 모바일에서는 사용을 염두해두고 있지 않기 때문에, 테블릿 사이즈까지의 반응형이 처리되어있습니다.

로그 모니터링

예전에 만들었던 사이트가 공격당하는 것을 실제로 겪은 뒤, 제 사이트에 대한 무단 침입 기록들을 시각화하고 알림을 받게하는 것을 우선 과제로 삼았습니다. Grafana를 활용해 로깅에 대한 모니터링도 진행했습니다.

블로그를 개설한지 2주도 채 안 되었는데, 벌써부터 프랑스, 중국, 러시아, 미국, 독일 등 다양한 국가에서 비정상적인 접속 시도가 감지되고 있습니다. 클라우드플레어 WAF(웹 애플리케이션 방화벽) 기능이 유료로 전환되면서, 서버에서 이런 공격들을 직접 관리할 수 있는 기능을 개발 중입니다 🤬

블로그 프로젝트에 대한 의미와 경험 공유

이번 블로그 프로젝트는 제가 개발한 nestjs-mvc-tools 라이브러리를 사용했다는 점에서 큰 의미가 있습니다. Angular, React, Vue 같은 프런트엔드 프레임워크 대신 NestJS 프레임워크와 템플릿 엔진을 사용한 전통적인 모놀리식 프로젝트임에도 불구하고, SPA(단일 페이지 애플리케이션)와 같은 사용자 경험을 제공합니다.

이 정도 규모에서는 개발 경험의 장단점이 있었지만, 전체적으로 만족스러운 결과입니다. 이런 방식으로도 개발할 수 있다는 것을 보여드리고자 시작했는데, 앞으로도 꾸준히 개선하며 느낀 점들을 공유하겠습니다.