9주차 주간보고서

9주차 주간보고서

1. 개요 (Objective)

본 주차에는 AonBot 프로젝트의 시각적 일관성을 확보하고, 사용자 경험(UX)을 극대화하기 위한

[Design System] 규격을 명문화함. 단순한 심미적 요소를 넘어, 데이터의 가독성을 높이고 플랫폼(Discord, Web, Blog) 간 통일된 브랜드 아이덴티티를 구축하는 것을 목표로 함.

2. 주요 수행 내용 (Task Accomplishments)

가. 디자인 시스템 사양 (Design System Specification)

아이온2의 다크한 분위기와 프로젝트의 전문성을 결합한 고유 컬러 팔레트를 정의함.

• Primary Background (Deep Black: #121212): 장시간 이용 시 눈의 피로도를 낮추고 텍스트의 명도 대비를 극대화함.
• Point Color (Burgundy: #D32F2F): 열정과 경쟁을 상징하는 버건디 컬러를 강조 요소(버튼, 테두리, 알림 강조)에 적용하여 시선 집중 유도.
• Sub Background (Dark Gray: #1E1E1E): 카드 레이아웃 및 섹션 구분에 사용하여 화면의 입체감 부여.
• Typography: 메인 텍스트는 Pure White(#FFFFFF)를, 부연 설명은 Light Gray(#A0A0A0)를 사용하여 정보의 계층 구조(Hierarchy)를 확립함.

나. 기술적 UI 구현: EJS(Embedded JavaScript) 엔진 활용

CLAUDE.md 아키텍처에 명시된 웹 대시보드(views/)를 구현하기 위해 EJS 템플릿 엔진을 도입함.

• EJS의 역할: HTML 구조 내에 자바스크립트 로직을 직접 삽입할 수 있는 템플릿 엔진으로, 서버(Node.js)에서 처리된 실시간 데이터를 사용자 화면에 동적으로 렌더링함.
• 적용 사례:
  • dashboard.ejs: 봇의 업타임, 핑(Ping), 서버 가동 상태를 실시간 데이터 바인딩을 통해 표시.
  • bosses.ejs: MongoDB에서 가져온 보스 젠 데이터를 루프(Loop) 문을 통해 리스트 형태로 출력.
• 장점: 서버 사이드 렌더링(SSR) 방식을 채택하여 클라이언트 측 연산 부담을 줄이고 초기 로딩 속도를 개선함.

다. 인터페이스 설계 원칙 (UX Principles)

• 가용 영역 극대화: 7주차 트러블슈팅을 통해 반영된 ‘Full Card Clickable’ UI를 통해 사용자의 조작 편의성 증대.
• 실시간 피드백: 웹 대시보드와 디스코드 간의 디자인 일관성을 유지하여 사용자가 플랫폼을 이동하더라도 동일한 서비스 경험을 유지하도록 설계.

3. 기술적 성과 (Technical Achievements)

• 브랜드 가이드라인 수립: 프로젝트 전반에 적용되는 시각적 언어를 규격화하여 향후 유지보수 및 기능 확장 시 디자인 일관성 유지 가능.
• 동적 UI 구현 역량: 템플릿 엔진(EJS)을 활용하여 정적 웹페이지의 한계를 극복하고, 실시간 데이터 기반의 인터랙티브 웹 대시보드 구축 능력을 입증함.