avatar

풀스택 웹🌐 개발자 지망생 🧑🏽‍💻
➕ 인공지능 관심 🤖

Categories

Recent views

개인 블로그 Subbrain 개발기

나의 Subbrain 개발기

ℹ️ Subbrain의 예시

개요

프로젝트 명: Subbrain 개인 지식 기반 정적 블로그

개발 팀 : 혼자

개발 기간: 2022. 08. 17 ~ 2022. 12. 27 (개발 중단), 일 평균 2시간 투자

URL: https://roadvirushn.github.io/

Trello: https://trello.com/b/CJ5hI8Iz/til-%EB%A6%AC%EB%89%B4%EC%96%BC

Subbrain의 시작

ℹ️ Subbrain의 메인 페이지

Subbrain은 어딘가에 사는 늙은 개발자 지망생이 만든 IT 블로그 겸 개인 지식 기반 시스템이다.

Subbrain은 보조 뇌🧠라는 의미로, 나의 모자란 기억력을 보조하고, 저작물을 저장, 공개 하기 위한 용도로 개발되었다.

➕ 사실은…

이 프로젝트는 다음과 같은 필요성으로 시작되었다.

  • 기존의 지식 정리 방법이 남이 보기에 극히 더럽고 비효율적이여서 이를 개선하고자.
  • 나의 지식을 원하는 자에게 이를 숨김없이 나눠주기 위함. (특히, 다 잊어버렸을 미래의 나)
  • 집도 차도 직장도 없는데 인터넷 한 귀퉁이에 내 홈페이지 하나 정도는 있어도 되지 않나 생각해서 😭

따라서 Subbrain은 다음과 같은 조건을 중점으로 개발되었다.

  • 지식을 정리하는데 기존에 사용하던 마크다운 파일 형식과 옵시디언 툴의 기능을 지원할 것
  • 서버 비용이 적거나 무료로 사용할 수 있으면서 다른 유저들을 위해 적절한 접근성을 가질 것
  • 내가 원하는 기능을 손쉽게 커스터마이징하여 구현할 수 있을 것

Subbrain 기술 스택

ℹ️ Subbrain 아키텍처

원하는 기능을 구현하기 위해 다음과 같은 기술 스택이 선정되었다.

  • Github page : 깃헙에서 제공하는 무료 정적 사이트 배포 서비스
    • 상업적 목적이 아닌 이상 무료로 사용할 수 있으며, CDN, DNS, 배포 설정을 자동으로 해주므로 거렁뱅이인 나에게 이상적이다.
  • Jekyll : Ruby 기반의 정적 사이트 생성 툴
    • Github page 공식 문서의 적용 예시로 나와있음 + 많이들 사용하길래 사용
  • Obsidian : 커스터마이징 가능하고, 무료로 사용 가능하며, 인터넷 연결이 필요없는 마크다운 작성 툴
    • 내가 애용하는 툴이며, 이곳에서 한번 정리한 TIL 들을 블로그를 위해 한번 더 정리해야 한다는 점에서 불편함을 느꼈다.
  • Javascript
    • 분명 Jekyll의 기본 기능만으로는 만족하지 못할 것이라 예상하였다.
  • Sass : CSS 확장 언어
    • 기본 템플릿(minimal)을 바탕으로 직접 원하는 템플릿을 효율적으로 구현하기 위해
    • 여러 기업에서 CSS를 좀더 효율적으로 활용하기 위해 쓰는 것 같아 선정하였다.

프로젝트를 진행하면서 다음 기술 스택들이 추가되었다.

  • Typescript: 자바스크립트 타입 오류나는게 짜증나서 + 기술 스택 학습을 위해
  • Webpack: 자바스크립트와 기타 여러 정적 어셋들의 번들링 툴
    • 자바스크립트 모듈 및 라이브러리 임포트 순서 설정 등에 어려움을 느낀 후로 도입했다.
    • 알고보니 진즉에 필수로 적용했어야 했다.
  • Github Action: github에서 지원하는 CICD 툴
    • 루비 커스텀 플러그인을 보안상의 이유로 github page에서 지원하지 않자 이를 우회하기 위해 조금 건드리게 됬다.
    • 솔직히 필요한 문제 해결만 한 뒤로 깊게 배우지 않았으며, 앞으로도 깊게 배울 생각이 없다.

Subbrain의 기능

Subbrain 블로그는 다른 블로그와 달리 다음과 같은 차별화된 기능을 가진다.

  • Obsidian-Jekyll 연동 포스트 생성

Obsidian으로 생성한 md 파일을 프로젝트 폴더로 옮기기만 하면 그대로 블로그의 포스트로 생성됨.

  • 파일 구조 기반 카테고리 사이트맵 생성, Github Repository 기반 포스트 등록

파일 구조 형식으로 정리한 마크다운 파일들이 그대로 카테고리 항목과 포스트로 생성되도록 하는 기능, 서비스 배포는 Github 레포지토리에 변경 사항을 푸시하면 자동으로 진행된다.

  • Obsidian의 커스텀 플러그인 기능이 포함된 마크다운 지원
    500

콜아웃, Mathjax 문법, Link 미리보기, 외부 링크 경고 등 순정 markdown에서 지원하지 않는 Obsidian의 기능을 지원

  • 브라우저 기반 검색 기능
    500

정적 사이트는 보통 WAS와 DB가 존재하지 않아 동적인 검색 기능을 지원하기 힘들지만, 지식을 저장하고 공유하는 블로그 입장에서 검색 기능은 필수적이다. 이를 위해 자바스크립트 기반의 검색 기능을 구현하였다.

  • 커스터마이징된 기능과 템플릿
    300

개폐 가능하며, 카테고리 항목, 최근 조회 포스트 등의 기능을 가진 사이드바 추가, 스크롤바, 태그 등의 스타일을 변경

Subbrain의 끝

Subbrain은 2022년 12월 27일을 기점으로 개발이 중단된다. 이유는 다음과 같다.

  • 재사용이 힘들고 표준화가 되어있지 않은 코드
    여태껏 진행해왔던 프로젝트들은 주로 프레임워크를 이용해 개발하는 경우가 많아 컴포넌트화 및 객체화 등에 소홀히 하였고 마치 절차지향적인 코드가 생성되었다.

  • Jekyll의 한계
    Jekyll은 말그래도 간단한 정적 블로그를 생성하기 위해 만들어졌으며, 내가 원하던 기능들을 구현하는 데에 한계가 많았다. 직접 구현한 기능들은 막대한 개발 비용 요구와 나쁜 성능을 가지고 있었다.

  • 단촐할 것으로 예상한 설계와 달리 점점 방대해지는 프로젝트
    처음에 간단하게 기술 스택을 지정한 이유는 이 프로젝트가 이렇게 긴 시간으로, 그리고 고도화된 기능을 구현하게 될 것이라고 생각하지 않았기 때문이다. 애시당초 검색엔진, 댓글 등의 동적 기능을 고려하면서 동시에 정적 사이트 프로젝트를 설계하는 것은 커다란 모순인 것 같다.

  • 그래서 이건 블로그인가? 개인 지식 기반 시스템인가?
    블로그는 남에게 내 글을 읽게 하는 곳이므로, 누가 보더라도 흥미롭고 유익하게 글을 써야 한다.
    개인 지식 기반 시스템(PKMS)은 나의 지식을 정리하고 저장하는 곳이므로,일부 정보는 생략과 축약을 통해 없애고, 필요한 정보를 위주로 필요 정보만 나타내야 하며, 이 둘은 서로 상충된다.

  • 현자타임
    새로운 서비스? 기존의 다른 포트폴리오를 정리하고 개선할 시간도 부족하지 않은가?
    어떤 회사가 Jekyll과 Ruby 언어를 사용하는 프로젝트에 관심을 가지겠는가? 그것도 ruby on rails 없이?
    사람들이 이 프로젝트를 흥미롭게 생각할 것 인가?

  • 전혀 힙(hip)하지 않음
    막상 공들여 만들어낸 결과물은 기존의 tistory나 네이버 블로그에 비해 조악하였고 전혀 차별화되지 않았다. 그렇다면 학습 이외에 내가 이 서비스를 계속 개발해야할 이유가 있는가?

Subbrain은 한동안 현재 상태로 계속 사용될 것이며, 가끔 실험 등을 위해 조금씩만 개선될 것이다.
이후, 개인 블로그 개발 프로젝트 시즌 2 mospOS(가제)의 개발이 완료된 후 어딘가에 처박힐 예정이다.

기술 스택 별 회고

Subbrain 개발기 - Ruby&Jekyll

Subbrain 개발기 - Typescript

Subbrain 개발기 - Sass

Subbrain 개발기 - webpack, eslint, etc

Subbrain의 교훈 및 회고

🗣️ “IT 프로젝트의 성공률은 약 30%” - 보스턴 컨설팅 그룹
  • 아쉬운 점들

    • 예상보다 느린 개발 진척과 차별화되지 못한 결과물
      처음에는 모든 개발을 14 영업일 이내에 끝낼 생각이였지만, 대략 그것보다 두배 가량의 시간이 걸렸으며, 점점 추가된 계획까지 포함한다면 아마 또 그것의 배가 들었을 것이다.
      결과로 나온 블로그는 객관적인 입장에서 기존의 무료 상용 블로그에 비해 떨어진다. 이 모든 일은 다음 항목들이 원인이라고 생각한다.

    • 잘 설계된 계획과 이를 지키는 일을 아주 중요하다.
      원 계획은 훨씬 간소한 일정과 간단한 기능만을 포함한 블로그였지만, 점점 거창한 기능과 사용해보지 않은 기술들을 추가로 고려하면서 일정이 눈덩이처럼 불어나버렸다.
      또한, 솔로 프로젝트이므로 의사소통에 문제가 적을 것이라 생각하여 문서화를 소홀히 했다.
      👉 다음부터는 정식적인 문서 작성과 체계화된 설계를 필두로 하여 개발을 진행할 것이다.
      예를 들어 Trello의 사용법을 좀더 정교화하고 엄격히 한다거나, figma 목업, 유즈케이스 다이어그램, 클래스 다이어그램 같은 UML 도입, Sprint 등의 도입을 고려해볼 것이다.

    • 얻은 기술 스택이 생각보다 도움이 될것 같지 않음.
      러닝 커브와 트랜드를 고려하지 않고 재미있어 보이는 기술 스택을 위주로 골라 학습에 많은 시간이 걸렸고, 앞으로 사용할 일도 많이 없을 것 같다.
      👉 다음부터는 기획은 창의적이되, 기술은 검증되고 인기있는 것을 사용하도록 하자.
      현재 예상되는 블로그 시즌 2의 기술 스택은 Next.js, Express.js를 사용하는 동적 사이트가 될 것 같다.

  • 좋았던 점들

    • 새로 얻은 기술 스택들과 교훈 그리고 보람
      Jekyll, Webpack, Typescript, Regex, Github Action, Ruby, Sass 등 내가 공부만 해보고 제대로 단독으로 사용해본적 없는 기술들을 사용해볼 수 있었다. 앞으로 사용 여부와 관계없이 나에게 많은 깨달음과 보람을 주었다.

    • 이전 보다 나아진 TIL 정리법
      상용 블로그에 비할바 못되지만 기존의 Github 레포지토리에 정리되지 않은 채로 우르르 올리던 때보다 훨씬 체계적이고 보여줄만한 개인 지식 기반 시스템이 완성되었다.

    • 부족하지만 내 손으로, 내 의지로 만든 내 보금자리
      이전까지 해본 프로젝트는 취직을 위해, 팀원을 위해, 평가를 위해, 학습을 위해 등 철저히 목적지향성이었지만, 이번 프로젝트는 순수히 나의 지적 욕구와 필요성에 의해 개발되었으며, 홀로 힘으로 만들어냈다. 내가 어째서 개발을 시작하게 되었는지 다시 떠올릴 수 있었던 좋은 기회였다.

⚠️ warning

… 그리고 드디어 인터넷 한 귀퉁이에 나의 공간이 생겼다.

이 곳은 앞으로 진행될 나의 세계 정복 계획의 교두보가 될 것이다. 👽