Thinking in
Soft Logic.

MatchaLogic에 실시간 차(Tea) 우림 API 및 테스트 가능한 인터랙티브 샌드박스를 통합하고, 서버리스 Edge 레벨의 동적 제어를 구축했습니다. 1. **실시간 차(Tea) 우림 API 개발** - 블로그 포스트 실시간 메타데이터 통계를 조회하는 `/api/brew/matcha.json`을 추가했습니다. - 시스템 변경 이력(Changelog) 최신 데이터를 반환하는 `/api/brew/sencha.json`을 추가했습니다. - 사이트 내 사용 기술 스택 명세를 반환하는 `/api/brew/hojicha.json`을 추가했습니다. - 찻주전자 에러를 반환하는 `/api/brew/coffee.json`을 추가했습니다. (HTTP 418 I'm a teapot 에러 반환) 2. **Edge 런타임 보안 및 트래픽 제한 (403, 429)** - 동일 출처(`Referer`) 여부를 검증하여 외부 무단 호출을 방어하는 **HTTP 403 Forbidden** 필터를 적용했습니다. - 동일 IP 기준 1.5초 내 연속 호출 감지 시 **HTTP 429 Too Many Requests** 레이트 리미터를 구축했습니다. - **이중화 구현**: Cloudflare Pages Functions (`functions/api/brew/[drink].json.js`)에서 런타임 보안 필터를 동적 처리하고, 로컬 개발 환경(`npm run dev`) 역시 동일하게 시뮬레이션되도록 이중으로 구현했습니다. 3. **인터랙티브 테스터 및 이스터에그 페이지** - 홈페이지 하단에 API 호출 결과를 즉시 모니터링할 수 있는 대화형 콘솔 시뮬레이터 `<ApiPlayground />`를 추가했습니다. - `/api-docs` 페이지를 새롭게 신설하여 Swagger UI 스타일의 명세와 사용자가 경로를 직접 타이핑하여 검증할 수 있는 "실시간 API 요청 워크벤치"를 내장했습니다. - `coffee.json` 호출 시 티팟 증기 모션과 고장 경고를 테마로 디자인된 전용 `/418` 이스터에그 에러 페이지로 연결되는 동적 구조를 구축했습니다.

`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 규격을 준수하고, 시각적으로는 줄바꿈이 반영된 완성도 높은 위계를 안정적으로 연출할 수 있게 되었습니다.