TSBOARD 개발, 그 후

TSBOARD를 공개한 후에, 어쩌면 가장 많이 들었을 질문은 아래와 같습니다.

“SPA 방식은 SEO에 좋지 않은데, 왜 SSR 방식으로 개발하지 않았나요?”

조언해주신 분들의 말씀이 당연히 맞는 말씀이지만, TSBOARD를 처음 만들던 당시에 저는 모던 웹 개발이 정말로 생소 했었고, 제 기억 속에 웹개발은 PHP4 시절에 그대로 멈춰 있었습니다. 때문에 SSR(Server Side Rendering) 방식이 PHP랑 뭐가 다른거지? 라는 생각이 일단 크기도 했었고, 막 처음 배워본 SPA 방식의 개발이 나름 합리적이고 서버 입장에서 부담도 좀 덜하겠다는 판단에 우선 SPA(Single Page Application) 방식으로 TSBOARD를 개발하게 되었습니다.

최초 개발 시점에서 당시엔 생소했던 Bun 런타임 기반으로 풀스택 개발을 진행 했었고, 타입스크립트 언어가 마음에 들어서 이름도 Type Safety Board를 줄여서 TSBOARD로 만들었습니다. Bun 런타임이 정말 성능도 좋고 다 괜찮았었는데, 지금은 해결되었지만 당시에는 가상 서버의 vCPU 상에서 명령어 일부가 지원되지 않으면 동작이 안되는 문제로 인해 어쩔 수 없이 백엔드를 Go 기반으로 변경하게 됩니다.

그리고 TSBOARD 공개 후에 가장 많은 피드백을 받았던 SSR 방식 도입을 위해서 고민을 하다가, TSBOARD가 Vue3 프레임워크 기반으로 프론트엔드를 구성했으니 자연스레 Nuxt프레임워크가 눈에 들어와서 이걸 도입해 보기로 합니다. 처음에는 TSBOARD의 이름을 그대로 계승 하면서 v1.1.0 버전 업데이트 정도로만 생각을 했었고, 실제로 초반에는 생각한대로 쉽게 되었습니다. 하지만 곧 저는 SPA 방식의 개발에서는 한번도 생각해본 적 없는 문제들을 마주하게 됩니다. 대표적으로는 Hydration mismatch 문제가 있었고, 또 서버에서 어디까지 렌더링을 책임져야 하는지와 같은 보다 미묘한 문제들을 마주하게 되었습니다.

NUBO의 시작

처음에 품었던 생각과는 달리, 이번 작업은 백엔드를 Bun 런타임에서 Go백엔드로 교체하는 것 이상으로 고된 작업이 될 수도 있겠다는 생각이 들기 시작했습니다. 아무리 대 딸깍의 시대에 AI가 뭐든지 만들어 준다고는 하지만 저는 그런 식으로 모든 걸 내맡긴채 작업하고 싶진 않았거든요. 결국 고통스럽더라도 정공법으로 배워 나가면서, AI를 저의 1:1 튜터이자 선임 개발자로 대하면서 다시 기초부터 하나씩 배워가며 개발을 시작했습니다. 이때부터 이름을 NUBO라고 따로 명명하고 시작을 했는데, 처음에는 Nuxt 기반의 Board니까, 그냥 NUBO로 지어야지 하고 단순하게 정했던 것이 결국 지금의 프로젝트명으로 굳어지게 되었습니다.

이름을 바꾸기로 결정한 것에는 여러 영향이 있었는데요, TSBOARD에서 사용했던 UI 프레임워크인 Vuetify를 더 이상 쓰지 않고 shadcn-vue로 교체한 것도 나름 영향을 줬던 것 같습니다. 프론트엔드의 근간이라 할 수 있었던 걸 교체 하면서 가만히 생각해보니, 최초에 TSBOARD라는 이름으로 시작했던 프로젝트에서 이제 백엔드도 타입스크립트가 아니고, 프론트엔드도 원래 생각했던 그 구조가 아니게 되어버린 겁니다. 결국 부분 부분들을 교체 하면서 전체가 다 바뀌게 된 셈입니다. 이름만 그대로 둔다고 해서 의미가 있진 않을 것 같다는 생각이 들자 이름을 바꾸기로 결정하게 되었습니다.

NUBO 개발을 막 시작하던 당시에만 하더라도 가급적이면 백엔드는 그대로 유지하고, 프론트엔드만 바꾸자는 아주 희망찬 생각을 했었습니다. 그러나 이름도 바꾼 마당에 백엔드에서 그동안 내심 고쳐야지 하고 생각만 했던 걸 그대로 두기가 힘들었고, 결국 백엔드도 프론트엔드 만큼의 극적인 변화는 아니었지만 상당한 변화를 겪게 됩니다. 아마도 Go 를 막 배워가면서 만든 시기를 거쳐 이제 Go 언어로 이것 저것 만들어 본 경험들이 녹아들어서 더 공격적으로 개선 작업을 진행할 수 있었던 것 같습니다.

인고의 시간

제가 TSBOARD를 Geek News에 처음으로 소개한 시점이 24년 5월 20일입니다. 지금 이 글을 쓰는 시점에서 보면 거의 2년 전입니다. 그리고 24년 12월 30일에 백엔드를 Gofiber v3 기반으로 변경했다고 소개를 했었죠. 그 후 나름 여기 저기에 TSBOARD를 적용해서 잘 쓰고 있었습니다. 그러다 25년 7월부터 NUBO 프로젝트로 전환하면서 프론트엔드는 Nuxt3 기반에서 Nuxt4까지 따라가면서 변경하는 대공사를 진행했습니다. 또 그 사이에 백엔드 코드도 적잖게 공사를 진행하면서 개선 작업을 병행했습니다. 물론 개발할 시간이 날 때만 짬짬이 했기 때문에 작업량에 비해서 기간이 매우 긴 것은 아쉽긴 합니다만, 그럼에도 여기까지 포기하지 않고 오는 것이 정말 쉽진 않았습니다.

TSBOARD를 개발하던 당시부터 지금의 NUBO 프로젝트에 이르기까지, 저는 이 프로젝트를 기반으로 운영하고 싶은 사진 커뮤니티 사이트가 있습니다. 아직은 별볼일 없는 작은 사이트지만, 언젠가 국내에서 내노라 하는 유명한 사진 커뮤니티 중 하나로 만들고자 하는 꿈이 있죠. 허나 꿈은 꿈이고 가진 자원은 그리 넉넉하지 않으니 가급적이면 가장 효율적으로 서버 자원을 써야만 했습니다. 트래픽도 역시 마찬가지구요. 때문에 그냥 남들이 다 쓰는 거 가져다 쓰는 것도 괜찮았지만, 가급적이면 레이싱카를 직접 튜닝 한다는 심정으로 하나부터 열까지 제가 직접 눈으로 확인하고 머리로 이해하면서 개발을 해야 했습니다. 겸사겸사 지금 보시는 이 블로그처럼 제가 필요한 다른 기능들도 하나씩 추가하면서요.

결국 NUBO 프로젝트를 시작 하고서 거의 10개월이 지나서야 이렇게 공개를 할 수 있게 되었습니다. 그 사이에 포기하지 않고 끝까지 개발을 한 저 자신이 정말 조금은 대견하고, 또 적당한 시점에 우선 끊어가는 선택을 한 것에도 스스로에게 박수를 보내주고 싶습니다. 개선해야 하는 것들이나 추가해야 하는 기능들이야 정말 많죠. 그렇지만 TSBOARD 시절부터 지금까지 오면서 백엔드는 개발 언어가 바뀌었고, 프론트엔드는 아예 프레임워크들이 바뀌면서 제 입장에서는 너무나도 큰 도전들을 연이어 한 셈입니다. 이제는 한 번 매듭을 지어주고, 다시 이어서 나갈 시점인 것 같습니다.

바뀐 이름, 계속되는 여정

TSBOARD를 만들면서 겪은 여러 문제들을 NUBO 프로젝트를 통해서 바로 잡고, 개선했습니다. 페이징이 없었던 것이 이제 지연 조인 기반으로 페이징을 저지연에 빠릿하게 지원합니다. 스킨 시스템이 없어서 디자인을 바꾸려면 통째로 파일을 고쳐야 하던 걸 이제는 레이아웃부터 관리자 화면, 게시판, 로그인 등 모든 디자인 요소들을 따로 따로 수정하고 발전시켜 나가실 수 있습니다. SEO(Search Engine Optimiztion) 문제도 해결된 것은 물론이고, AI 서비스들이 웹 페이지 검색할 때 내용들을 보다 쉽게 파악할 수 있도록 개선 중입니다.

하지만 여전히 부족한 서버 자원에서도 최대한 쥐어짜보려는 집착이 코드 전반에 걸쳐 남아있습니다. 아직도 부족하지만 최대한 간결하게 코드 베이스를 가져갈 수 있도록 계속 집요하게 배워 가면서 한땀 한땀 코드를 작성하고 있습니다. 누군가는 저에게 AI 시대에 도태된 개발자라 할 수 있지만, TSBOARD부터 NUBO에 이르기까지 지난 2년간의 궤적이 가치 있었다고 믿으면서 이 프로젝트와 함께 저도 더 성장하고 보다 모던 웹 개발에 대해 이해도를 높일 수 있었다고 생각합니다.

이름도 바뀌었고, 백엔드와 프론트엔드 모두 코드가 변경 되었지만 처음에 프로젝트를 시작하면서 품었던 목표와 마음은 그대로입니다. 그리고 앞으로도 계속해서 조금씩 꾸준히 발전시켜 나가보려고 합니다. 이 여정에 저 뿐만 아니라 커뮤니티 사이트를 운영해보고 싶은 다른 누군가에게 도움이 된다면 더 바랄 게 없겠네요.