Update History.

웹사이트의 서비스 분석을 위해 구글 애널리틱스 4(GA4)를 도입하고, 법적 고지 준수와 스팸 차단을 동시에 달성할 수 있도록 전용 개인정보처리방침 페이지를 신설했습니다.

• 환경 변수 기반 GA4 연동: PUBLIC_GA_ID 환경 변수를 사용하여 GA4 추적 스크립트를 조건부로 로드하도록 구현했습니다. 로컬 개발 환경(.env)에서는 비워둠으로써 실제 수집 서버로 더미 트래픽이 쌓이지 않도록 안전장치를 마련했습니다.
• 개인정보처리방침 페이지 신설: UtilityPageLayout.astro 템플릿을 기반으로 /privacy 페이지를 추가하여 GA4 데이터 수집 사실을 고지했습니다. 검색 엔진에 과하게 노출되는 것을 제어하기 위해 noindex={true}를 설정했습니다.
• 이메일 수집 봇 스팸 방지: 개인정보 책임자 문의 이메일 노출 시, 스패머 수집 봇에 긁히지 않도록 PUBLIC_CONTACT_EMAIL 환경 변수를 받아와 브라우저 단에서 자바스크립트로 분할 결합(Obfuscate) 후 렌더링되게 설계했습니다.
• 하단 내비게이션 연결: 웹사이트 최하단 푸터(Footer.astro) 컴포넌트에 Privacy 링크를 추가하여 방문자가 언제든 고지 문서에 접근할 수 있도록 동선을 다듬었습니다.

말차 로직의 태동과 성장 역사를 한눈에 탐색할 수 있도록 Origin 페이지를 전면 리팩토링하고 신규 기능을 도입했습니다.

• 데이터 계층 분리: origin.astro에 내장되어 있던 연대기 데이터를 독립된 데이터 모듈(src/data/originData.ts)로 분리해 정규화하고 유지보수 효율을 높였습니다.
• STAGE 요약 섹션 신설: 히어로 영역 바로 아래에 각 단계를 대표하는 아이콘들과 부드러운 점선으로 연결된 헤더 요약 맵을 배치했습니다. 클릭 시 해당 단계 카드로 부드럽게 스크롤링되는 앵커 네비게이션을 지원합니다.
• 디렉티브 디자인 조율: 각 단계 아이콘은 고유한 크루 테마색을 활용하되 Stage 1, 2는 연한 투명도로 스며들게 구성하고 Stage 3는 선명하게 대비를 주었습니다.
• 콘텐츠 및 규격 동기화: about.astro 페이지의 스토리 요약 텍스트를 수정하고, 적용된 슬레이트(Slate) 색 스펙트럼 명세를 /palette 페이지에 정식 등록했습니다.

About 페이지에 크루 클로드(Claude)와의 심층 비평 협업 대화를 추가하고 배경 설명 영역의 디자인을 개편했습니다. 또한, 특정 비정상적인 접근 시 지정된 에러 페이지로 부드럽게 안내하도록 우회 리다이렉트 경로 규칙을 적용했습니다.

기존 3인 체제에서 신규 크루 멤버 Claude가 합류하여 4인 체제로 개편되었습니다. 또한 버전 결정 기준과 협업 워크플로우에 대한 명세 가이드를 추가하여 메이저 업데이트를 단행했습니다.

1. Claude 합류에 따른 4인 체제 개편 (About 페이지)

   • 신규 크루 멤버 Claude(The Inspector)의 프로필 카드를 추가하고 소개 텍스트를 은유적 문체로 수정했습니다.
   • 크루 카드 배치를 2x2 그리드 레이아웃으로 개편하여 한눈에 들어오도록 구조를 개선했습니다.

2. 말차 로직 업데이트 버전 결정 기준 정의 (Changelog 페이지)

   • 업데이트 분류 체계를 명확히 규정하고, 세 자리 버전 번호(MAJOR.MINOR.PATCH)가 가지는 중요도 가이드를 아코디언 컴포넌트로 문서화했습니다.
   • 데이터베이스 스키마 테이블 도입 및 배지 룰(Badge Rule) 푸터 통합을 통해 정렬 및 구조적 완성도를 높였습니다.
   • 히어로 섹션 하단에 Recipe 페이지에서 정비한 기록 작성 방식 배지(Type A)를 직접 연동 및 노출하여 사이트 전반의 기획 일관성을 더했습니다.

3. 협업 워크플로우 및 인터랙티브 Q&A 도입 (Recipe 페이지)

   • AI와 기획자 간의 조율을 세 가지 협업 방식(Type A - 정해진 배합, Type B - 사전 블렌딩, Type C - 재탕형)으로 정의하고 스크롤 섹션으로 명세했습니다.
   • Flow Path 영역을 미니멀한 실선과 원형 노드 조합의 수평형 타임라인으로 고도화하고, 텍스트 색상을 text-slate-600으로 통일했습니다.
   • 페이지 하단에 실제 제작 방식을 퀴즈 형태로 확인할 수 있는 콤팩트한 Q&A 상호작용 아코디언 컴포넌트를 이식했습니다.
   • AI 파트너들의 고유한 강점(Claude의 전체 구조 검증, Gemini의 텍스트 보완 탐색)을 나누어 검토하는 ‘사후 검증(Taste Test)’ 섹션을 미니 스퀘어 카드 레이아웃으로 신설했습니다.

4. Claude 테마 컬러 반영 (Palette 페이지)

   • Claude 합류에 따른 고유 테마 컬러(호지차 갈색, #8C6239)를 명세에 반영했습니다.

홈페이지의 System Logs 및 전체 변경 이력(Changelog) 아코디언 내 텍스트의 가독성과 시각 테마 통일성을 위한 패치를 진행했습니다.

1. 마크다운 본문 파싱 전면 도입

   • 렌더링 동기화: 기존 상세 이력 본문에서 마크다운 강조 표시(**) 등이 일반 텍스트로 노출되던 문제를 해결하기 위해, Astro 7의 최신 Content Layer render API를 활용하여 온전한 HTML 컴포넌트로 파싱 렌더링하도록 변경했습니다.
   • 적용 범위: 메인 홈의 System Logs 및 전체 변경 이력(/changelog) 페이지 아코디언 상세 보기 전역에 적용했습니다.

2. 블로그 테마와 디자인 동기화 (Style Unification)

   • 상세 이력 본문의 시각적 톤앤매너를 블로그 포스트 상세 페이지의 타이포그래피 양식과 일치시켰습니다.
   • 텍스트: 기본 컬러를 slate-600으로 부드럽게 매핑했습니다.
   • 강조 텍스트 (strong): 시그니처 쑥색인 matcha-900 색상으로 일체화했습니다.
   • 글머리 기호 (ul, li): 카키 숲빛인 matcha-800 마커 스타일을 적용했습니다.
   • 인라인 코드 (code): 연한 녹차빛 바탕색인 matcha-100 및 matcha-900 텍스트 스타일로 단장했습니다.

3. 아코디언 카드 여백 및 레이아웃 개선

   • 마크다운 파싱 도입 이후 생성된 블록 태그로 인해 답답해 보이던 여백을 개선하고자, 상세 정보 상자의 안쪽 여백을 기존 p-4에서 **px-6 py-5**로 넉넉하게 확장하여 테두리와 글자 사이에 쾌적한 호흡을 주었습니다.

MatchaLogic의 에러 및 상태 유틸리티 페이지들을 표준화하기 위해 공통 레이아웃을 설계하고, 감성적이고 위트 있는 차(Tea) 테마의 인터랙션을 적용했습니다.

1. 공통 상태 페이지 레이아웃 구축 (UtilityPageLayout.astro)

   • 콘텐츠 밀도가 낮은 특수 목적 페이지들의 디자인 일관성을 지키기 위해 공통 레이아웃 컴포넌트를 설계했습니다.
   • 구조 표준화: 중앙 그래픽(w-64 h-64) -> 쑥색 메인 타이틀 -> 설명문 -> 내용 카드 슬롯 -> 하단 2개 CTA 버튼으로 구성된 정렬 규격을 성립했습니다.
   • 페이지 정렬 통일: 컨테이너 가로폭을 max-w-5xl로 확장하여 데스크톱 화면에서 여백과 정렬이 다른 주요 페이지들과 완전히 일치하도록 보정했습니다.

2. 418 티팟 이스터에그 페이지 고도화 (418.astro)

   • 물리 흔들림 모션: 찻주전자 뚜껑 보석 밑에 대롱대롱 매달려 좌우로 흔들리는 실감 나는 티백 꼬리표(418 태그)를 추가했습니다.
   • 압력 증기 가속화: 대기 상태에서는 찻주전자가 조용히 끓다가, 마우스 호버 시 주전자가 흔들림을 멈추고 크기가 커짐과 동시에 증기가 2배 크기로 솟구치며 뿜어나오는 모션을 정교하게 입혔습니다.
   • 어조 정돈: 본문 설명을 더 부드러운 다실 테마의 카피로 윤문하고, 불필요한 메타 배지를 지웠습니다.

3. 404 에러 페이지 일러스트 리뉴얼 (404.astro)

   • 엎질러진 찻주전자 일러스트: 기존 낙엽 이모지 대신 주전자가 비스듬히 넘어져 바닥에 뚜껑이 구르고 주둥이 밑에 둥근 말차 웅덩이가 고여 슬퍼하는(ㅠ_ㅠ 표정) 테마 일러스트를 순수 CSS로 구축했습니다.
   • 타이틀 감성화: 헤드라인 카피를 위트 있는 "앗! 차를 엎질렀습니다." 로 변경하고, 418 페이지와 동일한 그래픽 높이선을 일치시켰습니다.

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

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 본문 표준 크기로 정밀 업데이트하여 실제 구현체와의 사양 불일치를 완벽히 해소했습니다.

Matcha Logic이 2.2 버전 업데이트를 통해 핵심 기술 엔진인 Astro 프레임워크를 v5에서 v7.0.9로 메이저 업그레이드하고 프로젝트 전반의 아키텍처를 정비했습니다.

가장 중대한 변화는 구형 컨텐츠 엔진에서 현대적인 Content Layer API로의 성공적인 전환입니다. 레거시 src/content/config.ts 설정을 제거하고 루트 수준의 src/content.config.ts 내에 glob 로더 기반 수집 방식을 안착시켰습니다.

또한, 신규 렌더링 스펙에 대응하기 위해 각 포스트의 비표준 entry.render()를 글로벌 render(entry) 함수 호출 구조로 일괄 교체했으며, 컨텐츠 객체의 .slug 속성이 .id로 전환됨에 따라 블로그 아카이브, 비평(Tasting) 노드 및 연관 포스트 시스템의 모든 가상 라우팅 논리를 동기화시켰습니다.

마지막으로, 스키마의 안정성을 담보하기 위해 z 유효성 검사 모듈을 astro/zod 임포트로 최적화하고, 빌드 병목을 일으키던 JSX(about, recipe)의 누락된 클로징 태그 구문 문제 및 TypeScript 엄격 모드 하의 제네릭 소트 연산자 타입 경고를 완전히 디버깅하여 100% 무결점 빌드를 보장합니다.

Matcha Logic이 2.1 버전 업데이트를 통해 시각적 불일치를 정화하고, 검색 자산 방어와 정보 은닉 설계를 결합한 고도 정제 단계에 들어섰습니다.

가장 대표적인 변화는 ‘유자 놋쇠빛(Yuzu Gold: #C99A53)’ 포인트 컬러의 도입과 Jiyu 시그니처 쑥색의 matcha-800 (#4A6A45) 단일화입니다. 인공적이고 다소 도드라졌던 코랄 핑크를 덜어내고 전통 찻집 감성의 온화한 대비 배색을 이식했으며, 이를 전역 테마 변수(brand)로 구성하여 코드 유지보수성을 극대화했습니다.

또한, about과 recipe 페이지에 밀집되어 중복되던 정보를 3단 요약 차림표로 단순화하여 가독성을 비약적으로 높였습니다. 동시에 구글에 기등록되어 있던 3대 독립 경로인 /origin (스토리), /flavors (태그 아카이브), /tasting (비평 일지)를 단독 페이지로 재건하여 SEO 가치를 안전하게 보존하고 미래 제품 리뷰용 확장성을 견고히 확보했습니다.

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 컴포넌트 가이드의 폰트 크기 및 레이아웃 디테일 수정.

프로젝트의 유지보수성을 높이고 개발 투명성을 강화하기 위해 대규모 구조 개선을 진행했습니다. pages 파일 내에 하드코딩 되어있던 데이터들을 src/data/*.ts 파일로 분리하여, 뷰(View)와 데이터(Model)의 관심사를 분리, 실제 구동 중인 .astro 파일의 소스 코드를 웹에서 직접 열람할 수 있는 ‘소스 코드 탐색기’ 페이지 신설, 주요 파일의 코드 라인 수를 30~50% 가량 감축하여 가독성 및 유지보수 효율 증대.

KitchenFooter.astro를 추가하고 Kitchen 페이지 하단의 시스템 버전 표시 방식을 자동화했습니다. 정적인 package.json 버전 대신, 동적인 Updates 컬렉션 데이터를 연동, 업데이트 로그를 작성하는 즉시 사이트 전역의 표기 버전이 동기화되는 ‘단일 진실 공급원(SSOT)’ 구조 확립.

‘Git과 대소문자의 숨바꼭질’ 포스팅의 기술적 설명(Rename Dance)을 보완했습니다.

• Accuracy: 파일명 변경 사이사이에 git add 과정이 필수임을 명시하여, 독자가 따라 했을 때 혼동이 없도록 수정

Kitchen(디자인 가이드) 페이지의 내용을 실제 사이트 구현 사항과 일치시켰습니다. L1(Display)부터 L9(Micro)까지 폰트 크기와 용도를 명확히 규정하고 가이드 표(Table) 업데이트, 버튼, 배지, 카드(Type A/B/C)의 최신 디자인 스펙을 Kitchen 페이지에 반영하여 ’살아있는 문서’로 유지, Kitchen 페이지 내부 코드를 KitchenSection 컴포넌트로 구조화하여 코드 중복 제거.

블로그의 전체적인 톤앤매너와 조화를 이루도록 배지(Badge)의 색상 팔레트를 조정했습니다. 기존의 차가운 ‘Indigo’ 색상을 따뜻하고 생동감 있는 ‘Coral (Rose)’ 색상으로 교체하여, 말차색(Green)과의 보색 대비를 통한 시각적 포인트 강화, 변경된 컬러 시스템을 Kitchen 가이드와 실제 컴포넌트(Card)에 동기화.

사이트 전반에 사용되는 버튼 스타일을 표준화하고 유지보수성을 높였습니다. 크기, 색상, 아이콘을 옵션으로 조절 가능한 만능 버튼(Button.astro) 개발, Home, Recipe, 404 페이지 등의 하드코딩된 버튼 코드를 컴포넌트로 전면 교체, Kitchen 가이드에 실제 컴포넌트를 연동하여 디자인 시스템과 코드의 일치(Sync) 구현.

카드 컴포넌트의 스타일링 로직을 개선하여 디자인 일관성을 높였습니다. 삼항 연산자(Ternary Operator)를 도입하여 단일 컴포넌트에서 가변적인 여백(Padding)을 처리하도록 개선, 모든 카드의 좌우 여백을 32px(px-8)로 통일하여 시각적 정렬(Alignment) 완성.

사이트 전체의 디자인 일관성과 유지보수성을 높이기 위해 대규모 리팩토링을 진행했습니다. H1Body까지 폰트 크기 규칙(Level 18)을 정의하고 전체 페이지에 적용, 반복되는 UI 요소인 ’Badge’를 독립 컴포넌트로 분리하여 재사용성 확보, Card, PostRow, Ingredients 페이지의 디자인 파편화를 해소하고 시스템으로 통합.

모바일 환경에서의 접근성과 사용성을 강화했습니다. 헤더 메뉴가 많아짐에 따라 모바일 전용 햄버거 메뉴(Expandable Nav) UI 구현, 메뉴 개폐 시 로고 및 버튼 색상이 배경색에 맞춰 반전(Invert)되는 인터랙션 적용, 메뉴가 열려있을 때 배경 스크롤을 방지하여 조작 실수 방지.

AI와의 협업 노하우와 개발 철학을 공유하는 ‘The Recipe’ 페이지를 신설했습니다. 아이디어 발상부터 구현까지, AI와 코딩하는 4단계 프로세스(Brewing Guide) 정리, 자동 완성형 AI(IDE) 대신 대화형 AI(Conversation)를 선택한 이유와 ’완전한 이해’에 대한 철학 기록, 실제 기능 구현 사례(채팅 로그)를 통해 협업 과정 시각화.

검색 엔진과 방문자에게 블로그의 정체성을 명확히 전달하기 위해 메타 데이터를 최적화했습니다. ’부드럽게 우려낸(Brewed)’이라는 표현을 사용하여 기술 블로그의 딱딱함을 덜어내고 감성적인 브랜드 이미지 구축, 영문 브랜드명(MatchaLogic)과 국문 키워드(말차 로직)를 전략적으로 배치하여 SEO 검색 범위 확대.

Matcha Logic의 디자인 언어를 정립하고, 시각적 가이드를 제공하는 페이지를 추가했습니다. 브랜드 컬러와 디자인 시스템을 한눈에 볼 수 있는 ‘The Palette’ 페이지 오픈, 사이트의 주요 페이지를 아이콘과 함께 소개하는 ‘The Matcha Course’ 섹션 추가 (Dark Zone Design), 각 페이지의 헤더 타이틀 컴포넌트화 및 Ingredients 페이지 UI 디테일 강화.

웹사이트의 시각적 위계질서를 재정립하고 사용자 경험(UX)의 흐름을 완성했습니다. 사이트의 세계관을 안내하는 가로 스크롤 섹션 ‘The Matcha Course’ 추가 (Dark Zone Design), 운영자(JIYU)와 AI 파트너(Gemini)의 관계를 시각적 대비(Contrast)로 표현하는 듀얼 레이아웃 적용, Brewing(과정)’ 후 ’Tasting(평가)’으로 이어지는 논리적 순서에 맞춰 헤더 메뉴 재배치, 이모지를 SVG 선 아이콘으로 교체하여 모던하고 전문적인 톤앤매너 확립.

페이지마다 반복되던 헤더 코드를 하나의 컴포넌트로 통합하여 유지보수성을 높였습니다. ’PageTitle.astro’를 확장하여 모든 페이지(About, Flavors, Tasting 등)의 상단 디자인 통일, ‘highlight’ 속성 유무에 따라 폰트 크기와 그라데이션이 자동 조절되는 반응형 로직 구현, 검색창이나 기준표 등 페이지별 고유 콘텐츠를 유연하게 수용하도록 슬롯 구조 적용.

Tasting Notes의 AI 명함(Critic’s Card) 문구를 다듬었습니다. 특정 브랜드 강조보다는 블로그 내에서의 역할(Partner/Critic)을 강조하는 방향으로 수정하여 브랜드 정체성 강화.

Matcha Logic만의 독자적인 비평 섹션 ’Tasting Notes’를 신설했습니다. AI 파트너(Gemini)가 블로그의 코드, 디자인, 콘텐츠를 제3자의 시선으로 분석하고 점수를 매기는 ‘메타 비평’ 콘텐츠 추가, Logic, Flavor, Body, Aftertaste 4가지 지표를 통해 프로젝트의 현재와 미래를 진단.

방문자가 콘텐츠를 즐긴 후 자연스럽게 블로그의 철학과 도구를 탐색할 수 있도록 연결 고리를 강화했습니다. 게시물 하단에 ’The Brewer’s Card’를 배치하여 작가 소개 및 주요 페이지(Origin, Ingredients) 접근성 향상, About 페이지의 중복된 장비 목록을 제거하고, Ingredients 페이지로 유도하는 링크 카드로 대체하여 정보 구조 최적화, 링크 버튼에 직관적인 SVG 아이콘을 적용하여 시각적 일관성 개선.

페이지의 역할과 URL 주소가 일치하도록 구조를 개편했습니다. ’/stack’을 ’/ingredients’로, ’/tags’를 ’/flavors’로 변경하여 브랜드 언어 통일, 기존 주소 접근 시 새 주소로 자동 이동하도록 301 리다이렉트 규칙 적용.

Ingredients 페이지의 정보 전달력을 높이기 위해 UI 디테일을 강화했습니다. ARM 기기의 프로세서 정보를 보여주는 스펙 배지와 사용 기간 표시 기능을 추가하고, 은퇴한 기기를 위한 ‘Museum’ 섹션에 다크 테마를 적용하여 현역 장비와 시각적으로 확실하게 구분했습니다.

블로그의 구성 요소를 ’재료(Ingredients)’와 ’맛(Flavors)’이라는 컨셉으로 재정립했습니다. 기존 ‘Stack’ 페이지를 ’Ingredients’로 개편하여 하드웨어와 AI 파트너 등 창작 도구를 체계적으로 분류하고, 태그 아카이브를 ’Flavors’로 변경하여 Matcha Logic의 세계관을 완성했습니다.

블로그의 철학을 명확히 하고, 방문자가 콘텐츠를 더 쉽게 탐색할 수 있도록 내비게이션 구조를 완성했습니다. 블로그의 기원과 철학을 담은 ‘The Origin’ 페이지 오픈, 헤더에 태그 아카이브 ‘Ingredients’ 메뉴를 추가하여 탐색 경로 확장, Footer를 독립 컴포넌트로 분리(Refactoring)하여 유지보수성 향상.

검색 기능 도입과 함께 블로그의 탐색 경험(UX)을 대폭 개선했습니다. 단순한 기능 추가를 넘어, 정보를 찾는 방식에 맞춰 디자인 시스템을 확장했습니다. Brewing 페이지 내 실시간 검색 및 태그 필터링 구현, 가독성을 위해 목록 디자인을 카드(Grid)에서 리스트(Row) 형태로 변경, 검색 기능을 응용한 404 페이지 및 태그 아카이브(Ingredient Room) 신설.

기술 블로그의 핵심인 코드 영역의 가독성을 대폭 개선했습니다. 구문 강조(Syntax Highlighting) 테마를 ’One Dark Pro’로 교체하고, 배경색을 더 깊은 톤으로 조정하여 텍스트 명암비를 높였습니다. 또한 파비콘과 대표 이메일 설정을 완료하여 브랜딩을 마쳤습니다.

도메인 정식 연결과 함께 블로그의 내실을 다졌습니다. matchalogic.com 정식 연결 및 배포 완료, 구글 서치 콘솔 등록, 사이트맵(sitemap.xml) 제출, Web Analytics 적용,
게시물 주소에서 날짜를 제거하고 영문 Slug로 최적화, 본문 타이포그래피(줄간격, 폰트 크기) 및 제목 색상 통일.

관리자 페이지 접근성을 개선하고 배포 설정을 최적화했습니다. /admin 접속 시 자동으로 /admin/으로 이동하도록 규칙 추가, 빌드 설정 및 환경 변수 최적화.

블로그의 정체성을 ’Matcha Logic’으로 재정립했습니다. 로고 및 UI 텍스트 변경, GitHub 저장소 및 Cloudflare Pages 프로젝트 이전, .com 도메인 기반의 브랜딩 준비 완료.

웹 브라우저에서 손쉽게 글을 작성하고 관리할 수 있는 CMS를 도입했습니다. Decap CMS 연동: 관리자 페이지(/admin) 구축, GitHub OAuth: Cloudflare Workers를 활용한 보안 로그인 구현, 카테고리 시스템: AI Coding, ARM Windows 등 4개 분류 체계 적용.

이제 홈페이지의 성장 과정을 기록할 수 있습니다. Content Collections를 활용해 업데이트 내역을 관리하고, 메인 화면에 타임라인 위젯을 배치했습니다.

말차 색상을 5단계로 세분화하고 다크 모드 헤더 적용.

Cloudflare Pages 배포 완료 및 도메인 연결.