🏠 Brolog 메인 페이지 개발 시작

Brolog는 개발 과정과 프로젝트 경험을 기록하기 위해 제작한 개인 기술 블로그 프로젝트다.

처음 프로젝트를 시작했을 때는 Nuxt Docus Theme에서 제공하는 기본 문서 구조를 활용하는 방향으로 개발을 진행했다.

Docus는 문서 사이트를 구축하기 위한 기능들이 잘 구성되어 있었지만, 실제로 개발 기록을 계속 쌓아가면서 기존 구조만으로는 원하는 블로그 경험을 만들기 어렵다고 판단했다.

특히 개발 기록을 관리하는 목적에서는 단순히 최신 글을 보여주는 것보다,

• 어떤 기술을 다뤘는지
• 어떤 프로젝트에서 작성된 글인지
• 관련된 글들을 어떻게 연결해서 볼 수 있는지

를 쉽게 탐색할 수 있는 구조가 필요했다.

그래서 Brolog의 메인 화면은 Docus의 기본 랜딩 페이지를 그대로 사용하는 대신, 프로젝트 목적에 맞는 Custom Home 구조로 직접 구현하기로 했다.

🎨 Brolog Home 화면 설계 방향

메인 페이지는 개발 문서 아카이브 형태를 목표로 다음과 같이 전체적인 레이아웃을 구상했다.

Hero Section

↓

Tag Filter

↓

Post Timeline

↓

Category Tree

상단에서는 Brolog라는 프로젝트의 성격을 보여주고, 중앙에서는 작성한 글의 흐름을 확인하며, 좌측에서는 파일 구조 기반으로 원하는 문서를 탐색할 수 있도록 설계했다.

🚀 프로젝트 아이덴티티를 위한 Hero 영역 구성

처음에는 메인 페이지 상단에 단순한 제목과 설명만 표시할 계획이었다.

하지만 프로젝트를 진행할수록 Brolog만의 개성과 아이덴티티를 표현할 수 있는 요소가 필요하다고 느꼈다. 이에 따라 Hero 영역을 별도로 구성하고 다음과 같은 형태로 제작했다.

Brolog Title + Project Description + Terminal UI

개발 블로그라는 특징을 직관적으로 살리기 위해 일반적인 이미지 중심 Hero 대신 터미널 형태의 UI를 적용했다.

또한 이번 프로젝트를 단순히 글을 모아두는 공간에 그치지 않고, 하나의 독립된 프로젝트 브랜드로 발전시키고자 프로젝트를 대표하는 캐릭터와 로고를 직접 제작해 메인 페이지와 Header 영역 전반에 녹여냈다.

📝 시간 흐름 기반 Post Timeline 구현

기존 Docus 구조는 개별 문서를 탐색하는 데에는 적합하지만, 블로그 메인 페이지처럼 작성한 글들을 목록 형태로 모아볼 수 있는 기본 기능이 없었다.

Brolog에서는 개발 과정을 기록하는 특성상 작성 순서와 작업의 흐름이 중요하기 때문에, 중앙 영역에 Post Timeline 형태의 컴포넌트를 구현했다.

각 포스트는 작성 날짜를 기준으로 정렬되어, 시간의 흐름에 따라 프로젝트가 어떻게 발전해 나갔는지 한눈에 확인할 수 있도록 했다.

🌳 콘텐츠 성격에 맞춘 Category Tree 구성

Brolog의 콘텐츠는 모두 Nuxt Content 기반 Markdown 파일로 관리하고 있다.

프로젝트를 진행하면서 단순히 글을 시간순으로 나열하는 것만으로는 원하는 내용을 다시 찾아보기 어렵다는 점을 느꼈다. 카테고리별로 구조를 나누어두는 편이 글을 찾고 관리하기에 훨씬 직관적이고 편할 것이라 생각했다.

이에 따라 콘텐츠의 성격을 크게 세 가지로 분류했다.

단순히 폴더 구조를 시각화하는 것에 그치지 않고, 현재 어떤 주제의 글을 읽고 있는지 자연스럽게 인지하며 관련 문서까지 매끄럽게 탐색할 수 있도록 설계했다.

아울러 앞으로 새로운 프로젝트나 기술 카테고리가 늘어나더라도 기존 구조를 해치지 않고 유연하게 확장할 수 있는 토대를 마련했다.

🏷️ Metadata 기반 Tag Filter 구현

각 포스트는 Markdown Frontmatter에 Metadata 정보를 가지고 있다.

예:

tags:
  - Nuxt
  - Vercel
  - Deployment

처음에는 단순히 글의 하단에 정보를 표시하는 Badge 용도로만 사용했으나, 작성되는 글이 많아질수록 특정 기술이나 주제별로 글을 모아볼 수 있는 필터링 기능의 필요성을 느꼈다.

이에 따라 기존 포스트의 Metadata에 담긴 Tag 정보를 활용하여 Tag Filter 컴포넌트를 구현했다.

🔄 동작 구조

Markdown Metadata

↓

Tag 데이터 수집

↓

Tag Filter Component

↓

해당 Tag 포함 Post 출력

🖥️ 구현 결과

이를 통해 사용자는 특정 기술이나 관심 분야와 관련된 글만 빠르게 탐색할 수 있다.

🔎 기존 Docus 기능 활용과 Custom 영역 분리

메인 페이지를 구성하면서 모든 기능을 새롭게 만드는 방향은 선택하지 않았다.

Docus에서 이미 안정적으로 제공하는 기능은 적극 활용하고, Brolog만의 사용자 경험이 필요한 영역만 직접 커스터마이징하여 개발했다.

🛠️ 역할 분담

기존 유지 기능:

Search System + Content Rendering + Nuxt Content Integration

이미 검증된 검색 시스템과 마크다운 렌더링 환경은 그대로 가져가 개발 공수를 줄이고 안정성을 확보했다.

커스터마이징 영역:

Home Layout + Post Timeline + Category Navigation + Tag Filter + Branding Element

블로그의 핵심인 타임라인과 카테고리 트리, 태그 필터를 직접 구현해 콘텐츠 탐색 경험을 극대화했다.

⚙️ Component 기반 Home 구조 설계

최종적으로 메인 페이지는 Vue Component 단위로 분리했다.

구조는 다음과 같다.

Home Page

├── Hero Component

├── Tag Filter Component

├── Post Timeline Component

└── Category Tree Component

각 기능을 독립적인 컴포넌트로 분리한 덕분에, 추후 새로운 탐색 방식이나 UI 개선이 필요할 때 기존 코드를 건드리지 않고도 쉽게 확장할 수 있도록 구조화했다.

이러한 컴포넌트들이 유기적으로 결합되어 완성된 Brolog의 최종 메인 화면은 다음과 같다.

💡 개발을 마치며: 개발 아카이브로의 도약

Docus는 Nuxt Content 기반 문서 사이트를 빠르게 구축할 수 있는 훌륭한 프레임워크다. 하지만 개발 기록을 지속적으로 쌓는 개인 기술 블로그로 운영하기 위해서는 프로젝트 목적에 맞는 독자적인 구조 설계가 필요했다.

특히 아래의 요소들은 단순히 템플릿을 쓰는 것을 넘어 서비스 목적에 맞게 직접 고민하고 녹여내야 했다.

Content Structure + Metadata 활용 + Navigation Experience + Brand Identity

이번 메인 페이지 개발을 통해 Brolog는 단순한 문서 뷰어를 넘어, 나의 개발 과정과 기술 성장을 지속적으로 기록하고 관리할 수 있는 진정한 의미의 개인 개발 아카이브로 거듭나게 되었다.

이 후속 글에서는 이렇게 구성한 Brolog 프로젝트를 실제 서비스 환경에 배포하는 과정에서 마주했던 Nuxt Multi Layer, Vercel Build, AI Assistant 연동 등 다양한 트러블슈팅과 해결 과정을 기록한다.