🏠 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 형태의 컴포넌트를 구현했다.

구조는 다음과 같다.

Latest Post

↓

Previous Post

↓

Older Post

각 포스트는 작성 날짜를 기준으로 정렬되며,

시간 순서대로 프로젝트의 발전 과정을 확인할 수 있도록 구성했다.

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

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

프로젝트를 진행하면서 단순히 글을 시간순으로 나열하는 것만으로는 원하는 내용을 다시 찾아보기 어렵다는 점을 느꼈다.

특히 Brolog에서는 작성하는 글의 성격이 크게 세 가지로 구분되기 때문에, 이를 기준으로 콘텐츠를 분리하기로 했다.

현재 구성은 다음과 같다.

Brolog

├── Note
│   ├── Nuxt
│   ├── Vue
│   └── Architecture
│
├── Project
│   └── Brolog
│
└── Error(Troubleshooting)
    └── Deployment

각 카테고리의 목적은 다음과 같다.

• Note : 개발 과정에서 학습한 개념이나 아키텍처, 기술 정리
• Project : 사이드 프로젝트를 진행하며 기록하는 개발 일지
• Error : 개발 과정에서 발생한 문제와 해결 과정을 기록한 트러블슈팅

메인 화면 좌측에는 이러한 구조를 트리 형태로 표현하는 Category Tree 컴포넌트를 구현했다.

단순히 폴더 구조를 보여주는 것이 아니라, 현재 어떤 주제의 글을 보고 있는지 자연스럽게 파악하고 관련 문서까지 이어서 탐색할 수 있도록 구성하는 것을 목표로 했다.

개발이 진행될수록 새로운 프로젝트나 기술 카테고리가 추가되더라도 기존 구조를 유지하면서 확장할 수 있도록 설계했다.

🏷️ Metadata 기반 Tag Filter 구현

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

예:

tags:
  - Nuxt
  - Vercel
  - Deployment

처음에는 단순히 글의 정보를 표시하기 위한 용도로 사용했지만,

작성되는 글이 많아질수록 특정 기술이나 주제의 글만 빠르게 찾을 수 있는 기능이 있으면 좋을 것 같다고 생각했다.

그래서 기존 포스트 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

특히 검색 기능은 Docus에서 제공하는 Search UI를 그대로 활용했다.

이미 검증된 기능은 유지하고,

Brolog만의 콘텐츠 탐색 경험을 만드는 부분에 집중하는 방향으로 개발했다.

⚙️ Component 기반 Home 구조 설계

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

구조는 다음과 같다.

Home Page

├── Hero Component

├── Tag Filter Component

├── Post Timeline Component

└── Category Tree Component

각 기능을 독립적인 컴포넌트로 분리하면서,

추후 새로운 탐색 방식이나 UI 개선이 필요할 때 쉽게 확장할 수 있도록 구성했다.

💡 개발 과정에서 확인한 점

Docus는 Nuxt Content 기반 문서 사이트를 빠르게 구축할 수 있는 좋은 기반을 제공한다.

하지만 개발 기록을 지속적으로 쌓는 개인 기술 블로그 형태로 운영하기 위해서는 프로젝트 목적에 맞는 추가적인 설계가 필요했다.

특히:

Content Structure

+

Metadata 활용

+

Navigation Experience

+

Brand Identity

부분은 서비스 목적에 맞게 직접 구성해야 했다.

이번 메인 페이지 개발을 통해 Brolog는 단순한 문서 페이지가 아니라,

개발 과정과 기술 기록을 지속적으로 관리할 수 있는 개인 개발 아카이브 형태의 기반을 만들게 되었다.

이후 글에서는 이렇게 구성한 Brolog 프로젝트를 실제 서비스 환경에 배포하는 과정에서 발생한 Nuxt Multi Layer, Vercel Build, AI Assistant 관련 문제 해결 과정을 기록한다.