Thinking in
Soft Logic.

`about.astro` 및 `changelog.astro` 페이지의 비대해진 코드를 리팩토링하고 정형 데이터를 외부로 격리했습니다. 1. 소개 페이지 데이터 격리 - `about.astro` 내부에 하드코딩되어 있던 3인(JIYU, Gemini, Antigravity)의 프로필 및 스토리 데이터를 `src/data/aboutData.ts`로 격리했습니다. - SVG 아이콘 소스 코드를 `src/components/icons/AboutIcons.ts`로 추출하여 결합도를 낮추고 유지보수성을 극대화했습니다. (메인 컴포넌트 코드 크기: 439줄 → 373줄로 약 15% 감축) 2. Changelog 공통 설정 및 타입 다이어트 - 변경 이력 유형(Major, Feature, Fix 등)에 따른 테마 컬러 명세 및 버전 파서 로직을 `src/data/changelogConfig.ts`로 공통화했습니다. - 기존의 서버사이드 코드와 클라이언트사이드 스크립트에서 중복 관리되던 테마 설정 값을 단일 지점(Single Source of Truth)으로 일관되게 바인딩했습니다. (메인 컴포넌트 코드 크기: 374줄 → 348줄로 감축) 3. Kitchen Source 파일 추가 - `kitchen/source` 페이지 뷰어에 `changelog.astro` 및 `blog/[...slug].astro` 핵심 코드를 추가하여 Astro 기반의 기능 로직 명세 노출 영역을 한층 더 넓혔습니다.

변경 이력을 SQL 테이블 형태의 직관적인 표로 개선하고, 각 릴리즈마다 작성된 개발 블로그(Blog) 및 AI 비평(Tasting) 콘텐츠의 연계 유무를 한눈에 볼 수 있도록 아코디언 매트릭스 뷰를 도입했습니다.

시스템 변경 이력(Changelog)의 사용성 및 탐색 직관성을 강화하기 위해 건반 형태의 다차원 필터와 메인 화면 접이식 로그, 그리고 전반적인 배지/도트 색상 시스템 동기화를 적용했습니다. 먼저, Changelog 페이지 내 필터 영역을 밀착형 피아노 건반(Piano Keys) 스타일의 단일 가로 툴바로 전면 개편했습니다. 기존의 흩어져 있던 배지 목록을 정돈된 하나의 모서리가 둥근 컨테이너로 묶고, 버튼 내 콘텐츠를 영문 헤더(위)와 작은 한글 라벨(아래) 구조로 수직 정돈했습니다. 각 필터 항목 우측에는 해당 카테고리에 할당된 실시간 업데이트 누적 건수를 동적으로 표시하여 정보성을 높였으며, 각 건반을 누를 때마다 장미색(Rose 600), 유자 금빛(Gemini Yuzu), 호지차 브라운(Hojicha Brown) 등 브랜드 팔레트에 부합하는 고유 컬러가 켜지는 스위치 애니메이션 효과를 부여했습니다. 메인 화면의 System Logs 요약 섹션은 정보 피로도를 낮추기 위해 네이티브 details 및 summary 태그를 활용한 접이식 아코디언 형태로 컴포넌트화했습니다. 평소에는 버전과 제목만 간결히 노출되다가 사용자가 클릭할 때만 상세 구현 내역이 하단으로 슬라이드되어 나타나도록 제어했습니다. 이 과정에서 카테고리에 할당된 색상 명세가 메인 화면의 수직 도트 라인 및 버전 뱃지 테마(신규 hojicha 배지 규격 추가)와 일률적으로 연동되어 나타나도록 동기화했습니다. 마지막으로, 새로 정의한 장미색(Rose 600, #E11D48) 정보를 디자인 명세서(palette.astro)에 공식 수록하고, Changelog 페이지 하단에 공통 Button 컴포넌트를 이식해 홈으로 손쉽게 복귀할 수 있는 CTA 영역을 정비했습니다. 또한 검색 엔진 최적화(SEO) 및 탐색 편의성을 위해 사이트 전역의 Footer 내 Logs & Critique 카테고리에 변경 이력(Changelog) 링크를 상시 노출하도록 연결했습니다. 여기에 더해, 기존에 변경 이력(Changelog)과 개발 블로그(Blog) 글이 유기적으로 이어지지 않아 상세 구현 내역을 바로 확인하기 어려웠던 단점을 보완하고자 'Frontmatter 메타데이터 기반 상호 자동 연동' 시스템을 도입했습니다. 블로그 상세 포스트와 변경 이력 항목이 서로의 참조 키를 가질 때 양방향 링크 카드 및 버튼을 동적으로 생성하며, 블로그에서 유도된 링크를 통해 Changelog 페이지로 진입 시 해당 릴리즈 카테고리 필터가 URL 파라미터(`?filter=...`)에 반응해 로드 시점에 자동 활성화(클릭)되도록 유기적인 동선을 구축했습니다.

Matcha Logic의 정체성을 강화하고, 탐색 및 렌더링 시스템의 완성도를 높이기 위해 페이지 개편과 태그 필터링 로직 수정, 그리고 SEO 친화적인 타이틀 렌더링 로직을 반영했습니다. 먼저, 기존에 단순 태그 상자만 나열되어 있던 Flavors 페이지를 대대적으로 개편했습니다. 다실의 시그니처 메뉴인 세 가지 관심사(AI Coding, ARM Windows, DX / Automation) 카드를 전면에 배치하고, 2020년부터 다져온 생각의 이정표와 발효 과정을 시각화한 침출 연대기(Steeping Timeline)를 수록하여 블로그가 궁극적으로 지향하는 핵심 주제와 역사를 직관적으로 전달하는 정체성 공간으로 업그레이드했습니다. 태그 탐색 및 필터링 시스템의 고도화도 함께 진행했습니다. 블로그 허브에서 상위 10개 태그 목록에 포함되지 않은 마이너 태그를 주소창 파라미터(?tag=...)로 넘겨받을 경우 필터링이 풀리던 오류를 방지하기 위해, 존재하지 않는 태그 유입 시 임시 활성 태그 버튼을 돔에 동적으로 렌더링하여 필터를 연결하는 예외 처리를 도입했습니다. 이 과정에서 동적 버튼 추가 시 다른 버튼을 클릭했을 때 클래스가 정상적으로 해제되도록 정적 쿼리를 실시간 돔 조회 방식으로 전환했으며, 단순 부분 문자열 매칭(includes) 대신 태그 리스트를 분할하여 정확한 단어로 비교하는 방식으로 필터 정밀도를 보완했습니다. 마지막으로, 블로그 상세 페이지의 제목 렌더링 방식을 개선했습니다. 글 제목에 포함된 콜론(:) 기호를 기준으로 앞쪽과 뒤쪽 텍스트를 자동으로 분할하여 두 줄로 렌더링하도록 수정했습니다. 이로써 마크다운 Frontmatter 내 제목은 줄바꿈 없는 깔끔한 한 줄 텍스트로 보존되어 메타태그 및 검색봇 수집 등 SEO 규격을 준수하고, 시각적으로는 줄바꿈이 반영된 완성도 높은 위계를 안정적으로 연출할 수 있게 되었습니다.

Matcha Logic의 가독성 및 시각적 위계를 한 단계 더 끌어올리기 위해 블로그 상세 페이지 및 아카이브 허브의 타이포그래피 스펙을 미세 조정하고 디자인 가이드라인과 동기화했습니다. 먼저 가독성을 극대화하기 위해 본문 텍스트 기준 크기를 기존 15px에서 16px로 상향 조정하고 줄 간격을 1.8로 넉넉하게 설정했습니다. 반면 코드 스니펫 및 블록은 14px를 유지하여 시각적 대비를 주었습니다. 또한 과도하게 강조되었던 본문 내 bold 서체 가중치를 한 단계씩 완화(일반 strong 800->700, 리스트 항목 strong 600)하여 텍스트의 피로도를 낮추고 시각적 균형을 복원했습니다. 상세 페이지 하단은 프로필 영역과 연관 글("More Brewing") 섹션을 분리 배치하여 레이아웃을 직관적으로 개선했습니다. 연관 글 섹션은 `about.astro`의 마일스톤 헤더 디자인 사양을 반영하여 상위 라벨과 하위 대문자 타이틀 구조로 개편하고, 흰색 카드와 미색 배경의 조합으로 시각적 통일성을 확보했습니다. 또한 미색 배경 영역이 화면 해상도와 관계없이 좌우 끝까지 뻗어 나가도록 뷰포트 아웃 브레이크아웃 설정을 적용하고 하단 푸터 영역까지 끊김 없이 이어지도록 스무스한 그라데이션 전환 마스크 처리를 더했습니다. 마지막으로, 아카이브 허브(`index.astro`) 카드 내 설명글의 서체 굵기를 한 단계 낮춰(semibold->medium) 가독성을 한층 더 높였으며, 디자인 가이드라인 문서(`kitchenData.ts`)의 스펙 데이터 또한 48px Display 타이틀, 30px 섹션 타이틀, 24px 카드 타이틀 및 16px 본문 표준 크기로 정밀 업데이트하여 실제 구현체와의 사양 불일치를 완벽히 해소했습니다.