🎨 Brolog 브랜드 아이덴티티 적용

이전 글에서는 Brolog 메인 페이지를 구성하면서 개발 기록을 위한 화면 구조와 콘텐츠 탐색 환경을 구축했다.

메인 화면과 게시글 구조를 정리한 이후 프로젝트를 실제 서비스 형태로 발전시키면서 한 가지 아쉬운 부분이 있었다.

기능적으로는 정상적으로 동작하고 있었지만, 이미지가 없는 게시글이나 존재하지 않는 페이지처럼 예외 상황에서는 Docus 기본 UI가 그대로 노출되고 있었다.

Brolog는 단순히 Markdown 문서를 보여주는 블로그가 아니라 개발 과정과 프로젝트 경험을 기록하는 개인 플랫폼으로 확장하는 것을 목표로 하고 있다.

따라서 프로젝트를 대표하는 디자인 요소가 필요하다고 판단했고, Brolog 캐릭터를 제작한 뒤 이를 기반으로 공통 이미지 리소스와 Error Page를 구성했다.

이번 글에서는 Brolog 브랜드 리소스를 제작하고, Nuxt Docus Layer 구조를 활용해 Custom 404 페이지와 Default No Image를 적용한 과정을 기록한다.

🖌️ 프로젝트 캐릭터와 디자인 리소스 제작

Brolog의 대부분의 콘텐츠는 Markdown 기반 문서로 관리되고 있다.

개발 문서 중심의 사이트에서는 텍스트 비중이 높기 때문에 작은 이미지 요소라도 프로젝트의 인상을 결정하는 중요한 요소가 될 수 있다고 판단했다.

그래서 프로젝트를 대표하는 캐릭터와 로고를 제작하고, 이를 다양한 상황에서 활용할 수 있도록 리소스를 구성했다.

제작한 주요 리소스는 다음과 같다.

Project Logo

+

Header Logo

+

Default No Image

+

404 Not Found Image

각 이미지는 단순한 장식 목적이 아니라 사용자가 현재 어떤 상황인지 자연스럽게 이해할 수 있도록 상태를 표현하는 용도로 활용했다.

🖼️ 게시글 Thumbnail Fallback 처리

Brolog의 게시글은 Nuxt Content 기반으로 Markdown 파일을 관리하고 있으며, Frontmatter metadata를 통해 게시글 정보를 정의한다.

예:

---
title: 'Example Post'
image: '/images/example.png'
---

기본적으로 게시글별 대표 이미지를 직접 지정할 수 있지만, 모든 글에서 이미지를 관리하는 것은 번거로운 작업이 될 수 있다.

따라서 이미지 정보가 없는 게시글은 프로젝트 기본 이미지를 자동으로 표시하도록 fallback 구조를 적용했다.

동작 방식은 다음과 같다.

게시글 Image 존재

↓

등록된 이미지 사용


게시글 Image 없음

↓

Default No Image 적용

이를 통해 게시글 목록에서 이미지가 없는 경우에도 동일한 UI 구조를 유지할 수 있었고, 프로젝트 전체 디자인 방향성도 유지할 수 있었다.

🚧 Nuxt Error Page 구조 확인

존재하지 않는 주소로 접근했을 때는 기존 Docus에서 제공하는 기본 Error Page가 표시되고 있었다.

기능적으로는 문제가 없었지만, 프로젝트 전체 UI와는 다소 다른 느낌을 주고 있었다.

그래서 Brolog 전용 Custom 404 페이지를 제작하고 적용하기로 했다.

구현 과정에서 확인한 점은 Nuxt Layer 구조였다.

Brolog는 Nuxt Docus를 Layer 형태로 사용하고 있기 때문에 기본 Error Page 역시 Layer 내부에서 제공되고 있었다.

기존 구조는 다음과 같다.

layer

└── app

    └── error.vue

처음에는 Layer 내부 파일을 직접 수정하는 방법을 생각했지만,

Nuxt Layer 구조에서는 extends 된 Layer 파일을 직접 변경하지 않고 프로젝트 영역에서 동일한 경로의 파일을 생성하면 Override가 가능하다.

🔄 Docus Layer Override를 활용한 Custom 404 구현

기존 Layer 파일을 수정하는 대신 서비스 프로젝트 영역에 새로운 Error Page를 추가했다.

구조는 다음과 같다.

docs

└── app

    └── error.vue

Nuxt Layer 우선순위는 다음과 같이 동작한다.

현재 프로젝트

↓

extends 된 Layer

↓

기본 Nuxt 파일

따라서 docs/app/error.vue가 존재하면 Layer 내부의 layer/app/error.vue보다 우선 적용된다.

결과적으로 Docus 기본 Error Page는 유지하면서, Brolog 프로젝트에서 필요한 Custom Error 화면만 교체할 수 있었다.

이 과정을 통해 Nuxt Layer 구조에서는 Framework 내부 파일을 직접 수정하기보다 Override 방식을 활용하는 것이 유지보수 측면에서 더 적합하다는 점을 확인했다.

🏷️ Header Logo와 브랜드 요소 적용

추가적으로 프로젝트 Header 영역의 Logo도 Brolog 전용 이미지로 변경했다.

Docus에서 제공하는 검색 기능과 Navigation 구조는 그대로 활용하고, 브랜드 정체성이 필요한 영역만 교체하는 방식으로 구성했다.

Docus 기본 기능

+

Custom Logo

+

Custom Error Page

+

Custom Thumbnail

Framework가 제공하는 기능은 유지하면서 필요한 부분만 확장하는 방식으로 프로젝트를 구성할 수 있었다.

💡 이번 작업에서 확인한 점

이번 작업은 단순히 이미지를 추가하는 작업이 아니라 프로젝트 전체 경험을 정리하는 과정이었다.

사용자가 정상적인 페이지뿐 아니라,

• 이미지가 없는 게시글
• 존재하지 않는 페이지
• 프로젝트 첫 화면

등 다양한 상황에서 Brolog만의 일관된 경험을 제공할 수 있도록 구성했다.

또한 Nuxt Docus 기반 프로젝트에서는 모든 기능을 직접 구현하기보다,

기존 Framework 구조를 이해하고 필요한 부분만 Override 하는 방식이 효율적이라는 점을 확인했다.

Docus가 제공하는 Content 관리, 검색, Navigation 구조는 유지하면서, 프로젝트 목적에 맞는 UI와 브랜드 요소는 Custom Component와 Layer Override를 통해 확장할 수 있었다.

앞으로 Brolog에서도 Framework가 제공하는 기본 기능은 활용하고, 서비스 목적에 필요한 영역은 직접 확장하는 방식으로 프로젝트를 발전시켜 나갈 예정이다.