Matcha Course
Matcha Logic이 '시스템 설계도(System Schematic)'라는 명확한 정체성을 입고 2.0 시대로 진입했습니다. 이번 대규모 업데이트는 단순한 시각적 변화를 넘어, 지식을 구조화하고 관리하는 방식에 대한 근본적인 리팩토링을 포함합니다. 가장 큰 변화는 '3인조 협업 체제(The Trio)'의 공식화입니다. JIYU(기획), Gemini(논리), Antigravity(실행)로 이어지는 에이전틱 워크플로우를 페이지 전반의 서사로 녹여냈으며, 이를 위해 `About` 페이지와 `Ingredients` 페이지를 전문적인 시스템 도면 컨셉으로 재설계했습니다. 기술적으로는 '데이터와 뷰의 완전한 분리'를 단행했습니다. 비대했던 `.astro` 파일들에서 데이터를 추출하여 `src/data`로 모듈화함으로써 유지보수성과 확장성을 극대화했습니다. 또한, 블로그 메인을 'Knowledge Archive'는 고밀도 시스템 로그 인터페이스로 개편하여, 수많은 지식 조각들을 스크롤 부담 없이 탐색하고 쿼리할 수 있는 환경을 구축했습니다. 이제 Matcha Logic은 단순한 블로그가 아닌, 정교하게 조립된 하나의 '지식 운영 체제'로서 작동하기 시작합니다.
새로운 디자인 시스템을 전면 도입하고, 사이트 구조를 현대적으로 재편했습니다. 기존의 과도했던 곡률을 16px(rounded-2xl)로 절제하여 세련미를 더했으며, 다크 테마에서의 깊이감을 더해주는 'Atmosphere Shadow' 시스템을 구축했습니다. 특히 고밀도 FHD 환경에 최적화된 레이아웃 제약을 전역에 적용하여 시각적 안정성을 확보했습니다. 이 과정에서 Antigravity를 활용한 대규모 코드 리팩토링을 단행하여, 비대했던 페이지들을 기능별 독립 컴포넌트로 분리하고 중복된 클라이언트 로직을 모듈화하는 등 코드 구조의 장악력을 높였습니다. 디자인 가이드를 위한 'Kitchen' 섹션까지 완벽히 현대화하여, 앞으로의 지속 가능한 성장을 위한 기술적/심미적 기틀을 완성했습니다.
FHD 고밀도 디자인 표준을 사이트 전역으로 확산시키고 사용자 인터랙션을 강화했습니다. 최상단에 독립적인 'Matcha Infusion Bar'를 신설하여 스크롤 흐름을 시각화하였으며, `PageTitle` 및 `Button` 컴포넌트의 폰트 스케일을 한 단계씩 하향 조정하여 고해상도 환경에서의 정보 밀도를 최적화했습니다. 특히 About과 Ingredients 페이지의 레이아웃 위계를 '실험 노트' 스타일로 통일하고, 어두운 배경에서의 가독성을 위해 고대비 슬레이트 컬러 시스템을 적용하는 등 시각적 완성도와 사용성을 동시에 확보했습니다.
사이트 전반의 시각적 위계를 재정립하고 고해상도 환경에 최적화된 고밀도 디자인 시스템을 적용했습니다. 섹션 1의 모바일 카드 너비를 62vw로 조정하여 입체감을 강화하고 본문 높이를 2줄 고정 및 중략 로직을 적용하여 레이아웃 안정성을 확보했으며, 누락되었던 스와이프 유도 인디케이터를 복구했습니다. 섹션 2에는 1초 전환 및 7초 간격의 페이드 슬라이드 방식을 도입하고 제목과 버튼이 나열되는 수직 스택 헤더를 적용했습니다. 또한 Badge 컴포넌트로 버전과 태그 규격을 단일화하고 은은한 로즈 톤의 Coral 색상을 액센트로 추가했으며, FHD 환경에 맞춰 폰트 크기와 회색조 컬러를 표준화하여 시각적 완성도를 높였습니다.
개발자 전용 공간인 Kitchen의 모바일 사용성과 소스 코드 뷰어의 안정성을 개선했습니다. Kitchen 전용 헤더에 다크 테마 햄버거 메뉴를 적용하여 모바일 접근성 확보, `?raw` import와 프론트매터 추출 로직을 적용하여, 보안을 유지하면서도 실시간 코드를 정확하게 렌더링하도록 개선, Kitchen 컴포넌트 가이드의 폰트 크기 및 레이아웃 디테일 수정.