Update History.

말차 로직이 걸어온 발자취와 뿌리를 담은 독립 보관소 페이지 Legacy Archive (/legacy)를 신설했습니다. 처음엔 명확한 의도로 만들어졌으나 현재 시점에서는 잠시 메인 메뉴에서 벗어난 4가지 고유 페이지들(Flavors, Brewing Logs, Tasting Notes, Search Log)의 역사를 돌아보고, 앞으로의 새로운 시도와 미래 방향성을 한눈에 감상할 수 있도록 구성했습니다.

1. Legacy Archive 보관소 인덱스 신설 (/legacy)

• 4대 Legacy 콘텐츠 역사 및 방향성 소개:
  • Flavors: 초기 태그 모음(tags)에서 3가지 시그니처 테마로 발전하고, 현재 보관소로 이동하기까지의 5단계 버전 변화 과정 수록
  • Brewing Logs: 블로그 아티클 발행을 잠시 멈추게 된 이유와 고유 콘텐츠로서의 발전 고민 서술
  • Tasting Notes: 4가지 비평 항목 점수 매기기 실험의 의의와 향후 평가 체계화 계획 명시
  • Search Log: 검색 전용 페이지 구축 배경 및 블로그 검색 기능 보류 후 새로운 활용 방향 고민 제시

2. 레이아웃 컴포넌트 기능 고도화 (SectionSplit & SectionCentered)

• SectionSplit 그리드 비율 및 자연스러운 줄바꿈 옵션 확장:
  • 긴 회고 텍스트 전달력을 높이기 위해 6:4 스플릿 비율(leftSpan={7}, rightSpan={5}) 지원
  • 어색한 단어 끊김을 방지하는 위치 기반 자연스러운 줄바꿈(breakKeep={false}) 속성 추가
• 본문 description 파트 HTML 렌더링 지원:
  • SectionSplit 및 SectionCentered 컴포넌트 본문에 set:html 속성을 도입해, Flavors, Tools, Studio, Recipe 등 고유명사가 본문 맥락과 조화롭게 구분되도록 태그 뱃지 스타일 지원

3. 사이트 푸터, 네비게이션 및 브랜드 표기 일관성 확보

• 푸터 3대 코스 헤더 전면 링크화 & 코스 메뉴 연동:
  • Footer.astro 하단 메뉴의 3대 코스 헤더(Course 01 Main, Course 02 Kitchen, Course 03 Legacy Archive) 전체에 클릭 가능한 코스 메인 연결 링크(href="/", href="/kitchen", href="/legacy")를 일관되게 구축
  • 하단 3코스를 /legacy (Legacy Archive 메인) 및 /search (Search Log)로 링크 재정돈
  • src/data/navigation.ts 내 LEGACY_MENU 서브 네비게이션 정의 및 3코스 탭 연동
• 페이지 고유명사 대소문자 표기 통일:
  • 본문 문장 내 메뉴/페이지 명칭을 고유명사 규칙(첫 글자 대문자 Legacy, Flavors, Tools, Studio 등)으로 일관되게 적용

월배당·분기배당 주식의 수령 배당금과 미래 주가 변동 시 주식 평가금액을 합산하여 최종 실질 총자산(Total Return)과 손익분기 주가를 실시간 시뮬레이션할 수 있는 배당주 실질 총수익 계산기를 새롭게 출시했습니다.

1. MatchaLogic Tools 최초 와이드 2컬럼 실시간 인터페이스 도입 (/tools/stock-dividend-calculator)

• 좌측 입력 / 우측 실시간 결과 분리 스플릿 레이아웃:
  • 기존 1컬럼 카드 형식을 벗어나, 넓은 화면을 효율적으로 활용하는 와이드 2컬럼 데스크톱 윈도우 스타일을 최초 적용했습니다.
• 다양한 입력 조건 및 실시간 인터랙션:
  • 최초 매수가, 보유 수량, 주당 1회 배당금, 보유 기간(개월) 입력
  • 배당 지급 주기 선택: 월배당(연 12회), 분기배당(연 4회), 반기배당(연 2회), 연배당(연 1회) 유연 전환
  • 배당소득세율 자유 설정: 국내 일반과세(15.4%), 미국 배당세(15.0%), 비과세/ISA(0%), 사용자 직접 입력 % 옵션 추가
  • 미래 주가 시나리오 Quick Presets: -30%, -20%, -10%, 0%, +10%, +20% 원클릭 빠른 시뮬레이션 지원
• 실시간 결과 하이라이트:
  • 통장 누적 배당금(세후), 미래 주식 평가금, 총 투자 원금, 실질 총 손익금 및 수익률(%) 즉시 계산
  • 원금 유지 손익분기 주가 메인 카드 배치: 배당 수령액 덕분에 주가가 떨어져도 내 원금이 유지되는 마지노선 주가를 가장 눈에 띄게 강조

2. 시각화 차트 및 원리 계산 가이드

• SVG 배당 방어 효과 차트 & 시나리오 수치 데이터표:
  • 주가 변동률 대비 실질 총자산(녹색선)과 단순 주식 평가액(회색 점선)의 차이를 비교 시각화
  • 주가 -20% 하락 시에도 배당 쿠션으로 실질 손실률이 완화(-14.9%)되는 과정 3단계 공식 설명 수록

3. 객관적 위험 시나리오 5종 및 준법 가이드

• 배당주의 한계를 짚어주는 위험 시나리오:
  • 주가 하락, 배당 삭감, 구조적 오해, 금리 리스크, 환차손 등 배당주 투자가 독이 될 수 있는 5가지 위험 케이스 소개
• 투자의 원칙을 상기시키는 제작자 코멘트 & 2026년 세법 기준 면책 고지:
  • “배당수익률은 얼마를 돌려받았는가만 보여줄 뿐, 원금이 얼마나 줄었는가는 알려주지 않으므로 실질 총수익(Total Return)을 함께 확인해야 함”을 명시

4. 네비게이션 및 디자인 시스템 표준화

• 주식 도구 메뉴 명칭 직관 한글화: STUDIO_SIMULATOR_MENU 및 TOOLS_STOCK_MENU 내 라벨을 물타기 계산기, 배당주 계산기, 물타기 시뮬레이터로 일괄 정돈
• 도구함 메인 히어로 뱃지 적용: /tools 메인 히어로 섹션에 Collaboration Workflow 명세(/recipe#type-b)와 연결된 Type B (Blend Council) 뱃지를 적용
• 카드 스타일 일관성 확보: 위험 시나리오 컨테이너, 면책조항 카드, 제작자 코멘트 카드를 border-matcha-200/80 및 shadow-atmosphere 스타일로 통일

주식 평단가 물타기 시뮬레이터 및 과제 마감 완수 시뮬레이터 페이지의 공통 Studio 프레임워크 리팩토링과 함께, 거대한 인라인 스크립트를 별도 TypeScript 모듈로 분리하고 푸터 및 시스템 API의 버전 표기 오류를 전면 수정했습니다.

1. Studio 공통 프레임워크 레이아웃 적용

• StudioSimulatorLayout 통합: 기존 페이지별로 개별 구현되어 있던 3컬럼 스플릿 레이아웃과 네비게이션 드롭다운 메뉴(STUDIO_SIMULATOR_MENU), 면책 조항 알림 바를 공통 StudioSimulatorLayout 규격으로 통합했습니다.

2. 모듈형 콘솔 및 리포트 섹션 구조화

• StudioConsoleSection 적용 (입력 콘솔):
  • 1. 보유 주식 (초기 위치): 초기 평단가, 보유 수량 입력 폼 및 초기 총 투입 금액 카드 모듈화
  • 2. 단계별 추가 매수 레이어: 추가 매수 단계 셀 테이블, 직접 입력/자동 규칙 스위치 및 자동 규칙 산출 콘솔을 아코디언 섹션으로 체계화
• StudioReportSection 적용 (결과 리포트):
  • 1. 시뮬레이션 최종 결과 요약: 최종 평단가, 총 보유량, 총 누적 투입 자금 및 초기 대비 변동률 요약 카드
  • 2. 차수별 독립 결과: 각 차수별 당회 목표가, 수량, 투입금 독립 데이터표
  • 3. 차수별 누적 결과: 차수별 최종 누적 평단가 및 투자 자금 데이터표
• StudioCanvasContainer 적용 (메인 캔버스):
  • SVG 듀얼 축 좌표평면 차트 주변의 상단 범례/축 설명 카드(header-badges), 플로팅 마우스/터치 툴팁(tooltip), 패널 접기/펼치기 토글 버튼을 공통 캔버스 컨테이너 규격으로 표준화했습니다.

3. 시뮬레이터 클라이언트 스크립트 TS 모듈 분리 및 불필요 코드 소멸 (최적화)

• 클라이언트 스크립트 외부 모듈화 (src/scripts/simulators/):
  • stock-average-simulator.astro 내의 인라인 스크립트를 독립 모듈 src/scripts/simulators/stock-average.ts로 분리했습니다.
  • deadline-crunch-simulator.astro 내의 인라인 스크립트를 독립 모듈 src/scripts/simulators/deadline-crunch.ts로 분리했습니다.
• 페이지 파일 대폭 다이어트 (.astro 파일 약 70% 감소):
  • 주식 평단가 시뮬레이터: 1,816줄 ➔ 552줄 (1,264줄 / 약 69.6% 축소)
  • 과제 마감 시뮬레이터: 1,713줄 ➔ 504줄 (1,209줄 / 약 70.6% 축소)
• TS 전환으로 제거된 불필요 코드 및 상세 수치 (총 485줄 순감소):
  • 중복 잔재 코드 소멸: 공통 컴포넌트(StudioConsoleSection, StudioReportSection)에 이미 접기/펼침 로직이 탑재되어 있었음에도 각 스크립트에 남아있던 과거 잔재 토글 이벤트 로직(setupRightSecToggle)을 TS 전환 과정에서 발견하고 완전히 제거했습니다.
  • 템플릿 개행 및 공백 최적화: 백틱(...) 기반 HTML 동적 생성 템플릿에 포함되어 있던 수백 줄의 무의미한 개행과 불필요한 들여쓰기를 정돈했습니다.
  • 보일러플레이트 & 중복 타입 단언 감축: 반복적인 DOM 탐색과 as HTMLInputElement 타입 캐스팅 구문을 옵셔널 체이닝 및 유틸 헬퍼로 간소화했습니다.
  • 시뮬레이터별 최종 코드량(HTML + TS) 비교:
    • 주식 평단가: 기존 1,816줄 ➔ 총 1,613줄 (Astro 552줄 + TS 1,061줄) = 203줄 감축
    • 과제 마감: 기존 1,713줄 ➔ 총 1,431줄 (Astro 504줄 + TS 927줄) = 282줄 감축
    • 전체 합계: 기존 3,529줄 ➔ 3,044줄 (총 485줄 / 약 13.7% 순감소)

4. 푸터 및 시스템 버저닝 정렬 로직 오류 수정 (Fix)

• 시맨틱 버저닝(SemVer) 우선 정렬 도입: 푸터(Footer.astro) 및 시스템 API 라우트(kitchen/api.astro, [drink].json.ts)에서 일자(date)만으로 업데이트를 정렬할 때 동일 날짜 건에 대해 최신 버전 대신 과거 버전(v4.1.0)이 표기되던 버그를 수정했습니다.
• 버전 파싱 확장 (parseVersion): changelogConfig.ts의 parseVersion 유틸리티를 확장하여 v4-2-1 형태와 4.2.1 형태 모두 지원하고, Major ➔ Minor ➔ Patch 내림차순 및 2차 날짜 정렬 알고리즘을 적용했습니다.

스튜디오(Studio) 라인업을 확장하고 복잡한 다중 변수 시뮬레이션을 위한 공통 3컬럼 레이아웃 프레임워크와 **과제 미루기 한계선과 마감 완수 시뮬레이터 (/studio/deadline-crunch-simulator)**를 신규 구축했습니다.

1. Studio 공통 시뮬레이터 프레임워크 컴포넌트화

• 3컬럼 반응형 그리드 레이아웃 (StudioSimulatorLayout.astro): 좌측 입력 콘솔, 중앙 시각화 캔버스, 우측 분석 리포트로 구성된 3컬럼 가로 확장형 UI 표준을 컴포넌트화했습니다.
• 모듈형 콘솔 & 보고서 섹션 (StudioConsoleSection, StudioReportSection): 각 섹션 헤더를 클릭하여 영역을 접고 펼칠 수 있는 인터랙티브 아코디언 기능과 배지 스타일을 제공합니다.
• 안내 바 & 푸터 (StudioNoticeBar, StudioFooter): 시뮬레이터 페이지 상단 공지사항 및 공통 푸터 스타일을 표준화했습니다.

2. 과제 미루기 한계선과 마감 완수 시뮬레이터 (/studio/deadline-crunch-simulator)

• 단일 통합 좌표계 차트 (Shared X-Axis, Dual Y-Axes):
  • 공통 시간축 (X축, 경과 일수): 착수일과 마감 D-Day가 동일한 가로축을 공유하여 “몇 일 만에 조기 완주하는지”와 “착수를 미룰 때 일일 필요 작업량이 어떻게 폭증하는지”를 한눈에 직관적으로 비교합니다.
  • 좌측 Y1축 (누적 진도율, 0% ~ 100%):
    • 조기 완주 곡선 & 자동 종료: 매일 투입하는 시간대별 페이스 진도율 곡선이 100% 완주 즉시 선이 멈추고 Day N 완주 (D-M일) 배지가 텍스트 길이에 맞춰 유동적으로 부착됩니다.
    • 번다운 모드 1클릭 전환: 상단 토글 버튼으로 진도율 축 방향(0% ➔ 100% 번다운 하강 또는 0% ➔ 100% 상승)을 즉시 전환할 수 있습니다.
    • 100% 조기 완주 기준선: 초록 점선 기준선(100%(완주))을 통해 모든 페이스의 결승점을 명확히 제시합니다.
  • 우측 Y2축 (하루 필요 작업량, 0h ~ 24h/일):
    • 단일 기하급수 미루기 파멸 곡선 ($y = \frac{\text{총량}}{\text{D-Day} - x}$): 착수 시점을 늦출수록 D-Day 잔여일이 줄어들어 매일 쏟아부어야 하는 작업 시간이 수직에 가깝게 치솟는 파멸 곡선을 붉은 곡선으로 시각화합니다.
    • 한도 가이드라인 & 과부하 음영 구역: 매일 집중 가능한 시간(시간/일) 가이드라인 점선과 16h 마지노선 점선, 정상 한도 초과 시 은은하게 강조되는 과부하 음영 구역을 제공합니다.
    • 교점 마일스톤: 마지노선(골든타임) 세로 점선과 파멸 곡선이 만나는 정확한 교점에 도트와 일일 필요 작업량 텍스트를 배치합니다.
• 마감 파멸 마지노선 (Point of No Return) 골든타임 배너:
  • 인간 한계(16h/일)를 기준으로, 물리적으로 마감을 맞출 수 없는 절대 착수 한계일(Day N일 이후 착수 시 완주 불가능)을 실시간 계산하여 알림 배너로 경고합니다.
• 작업 및 페이스 입력 콘솔 (Console):
  • 총 순수 작업량(시간), 목표 마감 기한(일), 매일 집중 가능한 시간(시간/일)을 직관적인 인라인 단위가 포함된 입력창으로 지원합니다.
  • 최대 8개까지 커스텀 페이스(페이스명, 하루 투입 시간)를 자유롭게 추가, 실시간 인라인 편집 및 개별 삭제할 수 있습니다.
• 정밀 인터랙티브 호버 커서 & 듀얼 툴팁 (CTM 역행렬 매핑):
  • SVG 표준 getScreenCTM().inverse() 좌표 역변환 행렬을 적용하여 화면 배율이나 마진에 구애받지 않고 1:1 완벽하게 마우스 포인터를 추적합니다.
  • 툴팁에 “이 날 착수 시 하루 필요 작업량과 상태 판정(정상 안전권/과부하/물리적 불능)“과 “각 페이스별 Day N 시점 누적 진도율(또는 완주 일자)“을 동시 대조하여 안내합니다.
• 우측 분석 리포트:
  • 1. 페이스별 조기 완주 & 여유 일수 요약 카드: 각 페이스별 완주 소요 일수 및 마감 전 잔여 일수를 성공/지연 상태 배지와 함께 제공합니다.
  • 2. 착수일별 하루 필요 작업량 데이터표: 착수일(Day 0~N)에 따른 일일 필요 작업량과 안전권 / 과부하 / 물리적 불능 판정 상태를 매트릭스 표로 제공합니다.

3. Studio 메인 데크 (/studio) 라인업 반영

• 스튜디오 공식 라인업 슬라이드에 **과제 미루기 한계선과 마감 완수 시뮬레이터 (/studio/deadline-crunch-simulator)**를 LIVE 시뮬레이터 카드로 정식 등록했습니다.

4. 도구 모음 메인 페이지 (/tools) 시뮬레이터 전용 섹션 신설

• 계산기와 시뮬레이터 도구 분리: 기존 계산기 중심 구성에서 벗어나, 독립 뷰포트와 인터랙티브 캔버스를 지원하는 시뮬레이터 도구를 위한 **“시뮬레이터” 섹션 (#simulators)**을 계산기 섹션 바로 아래에 신규 배치했습니다.
• 스튜디오 연동 라인업 카드: 주식 평단가 시뮬레이터와 과제 미루기 한계선과 마감 완수 시뮬레이터 카드를 배치하고 STUDIO 배지를 부착하여 인터랙티브 시각 분석 도구로서의 정체성을 강화했습니다.
• 아코디언 업데이트 연동: 하단 도구별 업데이트 내역 아코디언에도 신규 시뮬레이터 그룹이 자동으로 포함되도록 데이터 바인딩을 확장했습니다.

동영상을 배속으로 시청할 때 단축되는 소요 시간과 시간 절약률(%)을 실시간으로 산출해 주는 **동영상 배속 재생 시간 계산기 (/tools/video-speed-calculator)**를 신규 구축했습니다.

1. 동영상 배속 재생 시간 계산기 (/tools/video-speed-calculator)

• 실시간 소요 시간 & 절약률 산출: 원래 영상 길이(시간/분/초)와 재생 배속을 입력하면 실제 시청 소요 시간, 절약된 시간, 시간 절약률(%)을 실시간으로 계산합니다.
• 결과 직관화: 계산 결과를 별도 복잡한 설명 없이 1시간 ➔ 50분 형태로 한눈에 알아볼 수 있도록 직관화했습니다.
• 저배속(<1.0x) 계산 지원: 0.5배속, 0.75배속 등 영상을 느리게 시청할 때 늘어나는 재생 시간(+X분 증가) 및 시간 변화를 정확히 산출합니다.
• 자주 쓰는 시간 퀵 버튼: 10분, 30분, 1시간 등 자주 사용하는 영상 길이를 한 번의 클릭으로 입력할 수 있는 칩 버튼을 제공합니다.

2. 배속 계산 원리 해설 및 주요 배속별 비교표

• 시간 절약률 공식 ($1 - 1/배속$): 배속 증가율과 시간 절약률이 일치하지 않는 수학적 원리(예: 1.2배속 적용 시 속도는 20% 늘지만 시간은 16.7% 절약)를 알기 쉽게 해설합니다.
• 주요 배속별 소요 시간 비교표: 0.5x부터 3.0x까지 주요 배속별 1시간 영상 시청 시 단축되는 시간과 10개 강의(총 10시간) 몰아볼 때 아낄 수 있는 총 시간을 한눈에 비교할 수 있는 표준 데이터를 제공합니다.

3. 목표 시간 맞춤 배속 역산기 (Target Speed Calculator)

• 여유 시간 기반 필요 배속 역산: 영상 원래 길이와 약속/이동 시간 등 내가 가진 여유 시간을 입력하면 남은 시간 내 시청을 마치기 위해 필요한 최저 권장 배속을 산출해 줍니다.
• 실생활 수강 시나리오: 지하철 이동(25분), 점심시간(45분), 시험 전날 벼락치기(3시간) 등 대표적인 실생활 상황별 권장 배속 예시를 함께 제공합니다.

4. 배속 시청 팁 및 LMS 출석 인정 주의사항

• 배속 수강 이해도 유지 팁: 0.1x~0.2x 점진적 적응, 강사 말속도별 조절, 피치(Pitch) 보정, 자막(CC) 동시 활용 등 청취 인지 속도를 고려한 4가지 팁을 안내합니다.
• 온라인 강의 출석 인정 주의사항: 일부 LMS(학습관리시스템)나 교육 플랫폼은 동영상 진도율(%)뿐만 아니라 실제 재생된 누적 시청 시간(초)을 함께 검증하므로, 고배속 시청 시 진도율 100%여도 출석이나 수강 이수가 미인정될 수 있다는 유의사항을 안내합니다.

5. 도구 모음 메인 페이지 (/tools) 기능 개편

• 도구별 아코디언 업데이트 목록: 도구 모음 메인 페이지의 최신 업데이트 섹션을 도구별 아코디언 메뉴로 구성하여, 각 도구를 클릭하면 관련 기능 개선 내역을 한눈에 확인할 수 있도록 개편했습니다.
• 업데이트 목록 마우스 호버 툴팁: 메인 페이지 업데이트 목록 항목에 마우스를 올리면 전체 제목 내용이 툴팁으로 표시되도록 조치했습니다.

기존 4인 체제에서 신규 크루 멤버 ChatGPT(The Scout)가 합류하여 **5인 크루 체제(v4.0.0)**로 개편되었습니다. 배포 후 fetch 기능 및 다중 페이지 분석 역량을 갖춘 ChatGPT와 세밀한 비평의 Claude를 상황에 따라 유연하게 선택해 활용하는 5인 AI 오케스트레이션 메이저 업데이트를 단행했습니다.

1. ChatGPT 합류 및 5인 크루 체제 개편 (About, Index, Recipe, Origin 페이지)

   • 신규 크루 멤버 ChatGPT (The Scout) 프로필 및 스토리 항목 추가 (뱃지: Fetch, Fast-Scan)
   • The Scout 정체성에 맞추어 크루 아이콘을 망원경(Telescope) SVG 심볼로 전면 적용 (Index, Recipe, Origin)
   • The Crew 6열 그리드 밸런스 완성: Index 페이지에 미지의 팀원을 나타내는 점선 티저 카드(Unknown / Awaiting steep...)를 신설하여 2×3 대칭 그리드 구축 및 열린 성장 가능성 시각화

2. ChatGPT 크루 컬러 매핑 반영 (Palette 페이지 & Tailwind Token)

   • 기존 말차 로직의 팔레트 중 ChatGPT의 분위기와 가장 부합하는 **Slate-Modern 800 (#1D201D)**을 크루 대표 색상(brand.chatgpt)으로 매핑하여 전역 테마 토큰 및 CSS 시스템에 등록
   • kitchen/palette 디자인 토큰 페이지의 Brand Identity 스펙트럼 및 5열 반응형 그리드 명세서 업데이트

3. Origin Story Stage 04 신설 (Origin 페이지)

   • STAGE 4 (v4.0.0, 2026.09): ChatGPT 합류와 유연한 5인 협업 체제 단계 신설
   • Stage 3 및 Stage 4 타이틀 줄바꿈 및 타이포그래피 정제
   • 2인 체제(Gemini) ➔ 3인 체제(Antigravity) ➔ 4인 체제(Claude) ➔ **5인 체제(ChatGPT)**로 이어지는 4단계 성장 연대기 완성

4. 선택적 분석의 시음과 교차 검토 정립 (Recipe 페이지)

   • 사후 검증(Taste Test) 섹션에 ChatGPT와 Claude의 개별 분석 역할을 분리 정립
   • ChatGPT (Scout): 배포 후 fetch 기능과 다중 페이지 동시 탐색을 통한 사이트 전체 뼈대와 방향성 입체 스캔
   • Claude (Inspector): 갓 우려낸 글과 코드의 세세한 문맥 비평 및 디테일 심층 교차 검증

5. ChatGPT 편입 및 4.0 업데이트 단독 페이지 신설 (/about/scout)

   • 블로그 형식이 아닌 SubLayout 기반의 단독 소개 아티클 페이지 구축
   • 헤더 & 메타 조합: The Origin Story / Stage 04: The Scout. / Milestone v4.0.0 / Brewed on 2026.09.18
   • 배경 지브라 패턴: SectionWrapper를 적용한 풀 위드(Full-bleed) 그레이시 그린(bg-[#f6f8f5]) 본문 영역 완성
   • 서사 수록: 3.x 버전대 Tools & Studio 첫 구현 경험, ChatGPT와의 정찰 협업 테스트 과정, 그리고 4.0 이후 새로운 도구들을 직접 고민하고 만들어나가겠다는 창작 비전 기록
   • 연동 체계 구축: Origin 페이지 Stage 4 카드 바로가기 및 Changelog 릴리즈 데이터베이스(4.0.0)와 상호 연결

6. About 디렉토리 라우팅 아키텍처 표준화 (/about)

   • 하위 페이지(/about/scout) 추가에 발맞추어 src/pages/about.astro를 Astro 표준 디렉토리 라우팅 방식인 **src/pages/about/index.astro**로 마이그레이션
   • kitchen/, tools/, studio/ 디렉토리와 완벽히 통일된 라우팅 체계 정립

7. Studio 인터랙티브 아키텍처 모듈화 및 컴포넌트 리팩토링 (/studio)

   • StudioLoader 독립 분리: 본체 캔버스 진입 전 3초 부팅 시뮬레이션 화면과 로딩 애니메이션 스크립트를 자체 컴포넌트로 완벽 격리하여 본체 코드와의 결합도 제거
   • StudioSlideDeck 슬라이드 컨트롤러 구축: 휠 스크롤 감지, 수직/수평 슬라이드 트랜지션 로직을 공통 컴포넌트화하고, data-direction="down" | "right" 속성 하나로 각 섹션의 전환 애니메이션 방향을 선언적으로 제어할 수 있도록 고도화
   • StudioSectionHeader 타이포그래피 표준화: 섹션마다 중복되던 거대 타이틀 및 그라디언트 텍스트 마크업을 단일 헤더 컴포넌트로 통합하고, 히어로 메인 타이틀을 "복잡함을 맑게 우려낸,"으로 정제하여 가독성 개선
   • 코드베이스 최적화 수치: 단일 파일에 비대하게 집중되어 있던 기존 1,279줄의 코드를 871줄로 총 408줄(약 31.9%) 대폭 감축하여 향후 확장을 위한 유지보수성 확보

8. 콘텐츠 아카이브 디렉토리 구조 최적화 (src/content/updates/)

   • 누적 60여 개 이상의 변경 이력 마크다운 파일 관리 피로도를 해소하기 위해 메이저 버전별 서브디렉토리 체계(v1/, v2/, v3/) 구축
   • Astro Content Layer의 Glob Loader(**/[^_]*.md)를 완벽히 유지하여 서브디렉토리 깊이에 관계없이 이전 릴리즈 로그 66개 전체의 무결성 보존 및 렌더링 검증 완료

9. Origin 데이터 아키텍처 디커플링 및 소스 로직 뷰어 확장 (/origin, /kitchen/source)

   • origin.astro 프론트매터 슬림화: 페이지 내에 인라인으로 거대하게 중복 정의되어 있던 5인 크루 구성 객체, Stage별 타이틀, SVG 아이콘들을 src/data/originData.ts로 완전 이관 및 선언적 결합 구조로 리팩토링하여 코드베이스 106줄(약 40.3%) 대폭 감축
   • kitchen/source 소스 로직 탐색기 라인업 강화 (총 9개 페이지 확장):
     • 4.0 라우팅 및 신규 모듈에 맞추어 about/index.astro, origin.astro, studio/index.astro 경로 갱신
     • 협업 워크플로우의 은유적 모델이 담긴 **recipe.astro (Type A/B/C 명세)**와 동적 데이터 집계 사양을 보여주는 **kitchen/api.astro (REST 엔드포인트 명세)**를 신규 편입

MatchaLogic Studio의 비전과 라인업을 통합 소개하는 **MatchaLogic Studio 전용 브랜드 메인 랜딩 페이지 (/studio)**를 신규 구축하고, 스크롤 반응형 인터랙티브 패널 시스템, 헤더 로고 랜딩, 전용 네비게이션 메뉴 및 푸터 레이아웃 체계를 일체감 있게 개편했습니다.

1. MatchaLogic Studio 전용 브랜드 메인 랜딩 페이지 신설 (/studio)

• 몰입형 풀스크린 슬라이드 뷰포트 레이아웃: 상단 헤더 및 스튜디오 전용 서브헤더([SubHeader])와 통합 연동되어, 뷰포트 높이에 맞춘 6개 독립 인터랙티브 섹션을 구축했습니다.
• 웹 기반 진입 로더 카드 디자인 (ENABLE_STUDIO_LOADER): 초기 진입 시 녹색 콘솔 헤더와 점멸 점 이펙트가 적용된 깔끔한 카드 스타일의 워크스페이스 준비 로더 화면을 제공합니다.
• slate-modern 디자인 시스템 적용: 페이지 전체 배경 및 텍스트 톤앤매너를 slate-modern 모던 감성 계열로 통일했습니다.

2. 스크롤 인터랙티브 패널 & 울트라와이드 캔버스 시뮬레이션

• 21:9 울트라와이드 캔버스 인플레이스 확장 (Section 02): 스크롤 동작에 반응하여 표준 캔버스에서 21:9 파노라마 울트라와이드 모드로 제자리 동적 확장되는 디스플레이 반응형 시뮬레이션을 구현했습니다.
• 2단계 순차 스크롤 접이식 도킹 패널 (Section 03): 휠 스크롤 시 좌측 패널이 매끄럽게 접히며, 우측 설명문이 중앙으로 스프링 모핑 이동하는 양방향 순차 애니메이션을 구축했습니다.
• MatchaLogic Studio 기능 제안 및 이동 슬라이드 (Section 05 & 06): 브라우저 위 인터랙티브 도구 제안 CTA 카드 및 스크롤로 등장하는 애니메이션 스튜디오 푸터 슬라이드를 배치했습니다.

3. 헤더 로고 랜딩 & 네비게이션(Nav) 메뉴 개편

• 헤더 로고 Studio 랜딩 연결: /studio 및 /studio/stock-average-simulator 헤더 로고 클릭 시 /studio로 랜딩되도록 연결 경로를 설정했습니다.
• 페이지별 서브 네비게이션 체계 정립:
  • Studio: Studio, Tools, Contact
  • Studio Simulator: Studio, Tools, Stock Average Calculator, Stock Average Simulator, Contact
  • Tools: Tools, Studio, Contact
  • Tools Download Calculator: Tools, Studio, Download Time Calculator, Contact
  • Tools Stock Calculator: Tools, Studio, Stock Average Calculator, Stock Average Simulator, Contact
• 메인 헤더 네비게이션 메뉴 순서 정렬: About ➔ Brewing ➔ Flavors ➔ Recipe ➔ Tools ➔ Studio ➔ Kitchen 순으로 배치했습니다.

4. 푸터(Footer) 디자인 및 정보 구조 개선

• Main 코스 목록 연결: Course 01(Main) 그룹에 Studio (시뮬레이터) 항목을 신규 추가하였습니다.
• 컴팩트 레이아웃 및 여백 조절: 푸터 상하 패딩과 여백을 단축하여 전반적인 푸터 높이를 슬림화했습니다.
• 타이포그래피 계층 재정립:
  • Matcha Course Selection 타이틀: 24px (text-[24px])
  • Main, Kitchen, Legacy Archive 그룹 헤더: 16px (text-[16px])
  • 코스별 메뉴 링크 및 설명문: 14px (text-[14px])
  • 라벨, 카피라이트 및 하단 정책 링크: 12px (text-[12px])

독립된 전면 앱 워크스페이스인 **Studio 주식 평단가 시뮬레이터 (/studio/stock-average-simulator)**를 신규 구축하고, 주식 평단가 계산기와의 상호 연동 및 네비게이션 체계를 대폭 강화했습니다.

1. Studio 전용 주식 평단가 시뮬레이터 앱 워크스페이스 신설 (/studio/stock-average-simulator)

• SaaS 스타일 100% 뷰포트 워크스페이스: 헤더/푸터를 분리하고 화면 높이에 맞춘 좌측 입출력 콘솔 및 우측 SVG 차트 좌표평면 스플릿 레이아웃 구축
• 듀얼 Y축 SVG 좌표평면 차트: X축 수량(주), Y1축 주가(원), Y2축 총 투자금액(원) 듀얼 축 인터랙티브 캔버스 구현. 호버 시 단계별 데이터 툴팁 및 연결 가이드라인 가시화
• 정밀 스케일 림 및 소수점 2자리 정밀 계산: 수량 및 주가 축 눈금을 00 / 000 단위로 깔끔하게 절삭하고, 해외주식 및 코인 거래를 위한 소수점 둘째 자리 정밀 포맷팅 지원
• 동적 매수 레이어 UI (Excel-like): 1차~10차 물타기/불타기 매수 시나리오 레이어를 자유롭게 추가/삭제하며 실시간 희석 경로 추적
• 모바일 맞춤형 세로 렌더링 체계: 모바일 디바이스 접속 시 입력 콘솔 → 그래프 캔버스 → 결과 리포트 표 → 면책 조항 → 푸터 순으로 직관적인 세로 배치 조율 (데스크톱 스플릿 뷰 보존)

2. 주식 평단가 계산기와의 시너지 연동 (Navigation & Promotion)

• 계산기 Hero 프로모션 카드 도입: stock-average-calculator 페이지 면책 조항 하단에 시뮬레이터 이동 전용 프로모션 카드 구축 (독립 사각형 NEW STUDIO 뱃지 및 연두색 테두리 버튼 적용)
• CTA 3단 버튼 스택 구현: 계산기 하단 CTA 영역에 Tools 둘러보기, 평단가 시뮬레이터, 맨 위로 이동 3단 스택 배치 및 다크 그라데이션 시뮬레이터 버튼 탑재
• 전역 메뉴 및 SEO 설정 강화: data/navigation.ts 네비게이션 정리 및 /studio/stock-average-simulator 전용 메타 타이틀/디스크립션 최적화

기존 기본 입력 계산기 폼만 제공되던 주식 평단가 계산기 (stock-average-calculator) 페이지에 가중 평균 수식 해설, 물타기 단계별 필요 자금 폭증 그래프, 5단계 물타기 자가 진단 체크리스트, 그리고 제작자 코멘트 카드를 대폭 신설하여 전문적인 주식 분석·교육 종합 도구 페이지로 개편했습니다.

1. 주식 평단가 계산 수식 및 대입 원리 해설 (Section 1)

• 가중 평균(Weighted Average) 수식 시각화: 단순 산술 평균과의 차이점을 한눈에 파악할 수 있도록 평단가 산출 공식 배치
• 실제 숫자 대입 수식 라인 추가: 공식 직하단에 입력값 대입 과정을 한 줄(약 9,333원 = ((10,000원 × 10주) + (8,000원 × 5주)) ÷ (10주 + 5주))로 상세히 표시하여 직관적인 이해 제공
• 10,000원(100주) 기준 수치 정밀성 통일: 페이지 전체 시뮬레이션 예시의 기초 데이터를 일관되게 정립

2. 물타기 단계별 효과 및 좌표평면 그래프 구축 (Section 2)

• 기본 시뮬레이션 전제 카드 고정: “10,000원에 100주를 샀는데 8,000원으로 하락한 상황”을 상단 중앙에 명시하여 모든 시뮬레이션의 기준을 명확히 제시
• 상황 1 vs 상황 2 비교 카드: 1차 물타기(100주 추가)와 2차 물타기(200주 추가)의 평단가 인하 효과 차이를 비교 카드 형태로 배치. 총 보유량/총 금액 분리 표시 및 2차 물타기에 Rose 강조 테마 적용으로 시각적 대비 극대화
• 단계별 필요 매수 수량 지수 곡선 (SVG 좌표평면 그래프): 100주~800주 선형 Y축 스케일 및 회차별 필요 수량이 2차 함수 곡선 형태로 가파르게 상승하는 SVG 그래프 구현. 포인트별 2줄 뱃지(수량 및 매수 금액) 배치
• 물타기 단계별 투입 자금 비교 표 (Table UI): 1차부터 4차 물타기까지 진행될 때 필요 주식 수(1,600주)와 총 투입 자금(1,300만 원)이 기하급수적으로 늘어남을 한눈에 파악할 수 있는 비교 표 구축

3. 물타기 전 필수 자가 진단 체크리스트 표 구축 (Section 3)

• 물타기 특화 5단계 수비적 체크리스트 (Table UI): 하락장에서 손실 확대를 막기 위한 5가지 검토 항목(01. 하락 원인 진단, 02. 물타기 횟수 & 비중 상한, 03. 매수 타이밍 규칙, 04. 자금 유동성 성격, 05. 최우선 손절 시나리오) 구성
• 원칙 중심의 가이드 문구: 특정 고정 수치를 강제하는 대신 투자자 스스로 자율적인 기준과 상한선을 설정하도록 유도하는 표현 채택

4. 면책 조항 및 제작자 코멘트 하단 카드 구축 (Bottom Area)

• 페이지 전체 포괄 면책 조항 카드: 계산기 결과뿐만 아니라 체크리스트 및 가이드 아티클 전반에 적용되는 투자 책임 안내 문구 적용
• 중앙 정렬 제작자 코멘트 카드: 배지 태그를 과감히 제외하고 인용구(“...”) 및 14px 얇은 폰트 규격을 적용하여 “무조건 추가 매수”보다 “언제 멈출지”를 먼저 결정하는 책임 있는 투자 메시지 전달

기존 메인 계산기 기능만 제공되던 다운로드 시간 계산기 (download-time-calculator) 페이지에 필요 회선 속도 역산기, 상황별 요금제 추천 카드, 원인 분석 가이드, 그리고 환경 자가 진단 체크리스트 표를 대폭 신설하여 완성도 높은 종합 도구 페이지로 확장했습니다.

1. 필요 속도 역산기 및 2단 시나리오 카드 구축 (Section 4)

• 속도 역산기 카드 (Speed Requirement Calculator): 목표 파일 용량(GB)과 목표 소요 시간(분)을 입력하면 필요한 최저 인터넷 회선 속도(Mbps)를 즉시 산출하고, 100M/200M/500M/1G 상품별 추천 뱃지를 실시간으로 표시
• 컴퓨터 윈도우 스타일 콘솔 UI: 메인 계산기 콘솔 스타일과 통일된 디자인 톤앤매너 적용
• 상황별 시나리오 카드 리스트: PC 게임 패키지(100GB), 모바일 오픈월드(35GB), 대형 패치(10 GB) 등의 실생활 상황을 동등한 높이(items-stretch, flex-1)로 직관적 배치

2. 다운로드 속도 손실 원인 분석 가이드 (Section 5)

• 직관적인 넘버링 타이포그래피: 01~04 대형 인디케이터 디자인을 적용하여 서버 대역폭 제한, Wi-Fi 간섭, 동일 네트워크 타 기기 트래픽, 디스크 처리 병목 등 4가지 원인을 가독성 높게 전달

3. 다운로드 환경 자가 진단 체크리스트 표 구축 (Section 6)

• 실용적인 자가 진단 표 (Table UI): 무분별한 외부 링크 대신 사용자가 직접 본인의 회선 및 네트워크 상태를 점검할 수 있는 3단계 체크리스트 테이블 구현
• 중립적 가이드 표현: 특정 타사 브랜드명 대신 인터넷 속도 측정 사이트 이용, 5GHz Wi-Fi 또는 유선 LAN 연결 등의 직관적 가이드 제공

4. 메인 페이지 Tools 업데이트 리스트 말줄임표(…) UI 개선

• 텍스트 넘침 예외 처리: index.astro 메인 페이지의 Tools 업데이트 내역 중 긴 제목이 노출될 때 2줄로 끊기는 대신 truncate 및 min-w-0을 적용하여 깔끔하게 ...으로 생략 처리되도록 시각적 디테일 개선

5. 모바일 서브 레이아웃 여백 및 히어로 배치 UX 최적화

• SectionWrapper 모바일 상하 여백 규격화: 비표준 Tailwind 클래스(py-30) 사용으로 인해 모바일 환경에서 섹션 간 여백이 0px로 붙어서 표시되던 현상을 Tailwind 표준 수치인 py-32(8rem / 128px)로 표준화
• Hero 스플릿 레이아웃 모바일 요소 순서 개선: 모바일 화면 진입 시 그래픽 카드가 타이틀보다 먼저 출력되던 순서를 조정하여, 페이지 타이틀/설명(Hero Text)이 최상단에 먼저 나오도록 렌더링 순서 최적화
• 스크롤 인디케이터 모바일 중앙 정렬 및 겹침 해결: absolute bottom-10 고정으로 인해 모바일에서 타이틀 텍스트와 겹치던 위치 이슈를 해결하고, 모바일 뷰포트에서 요소를 문서 흐름 하단 중앙(w-full justify-center mt-8)에 자연스럽게 가로 정렬되도록 개선

서브페이지 전반의 구조적 일관성을 위해 tools 인덱스 페이지를 공통 Sub 컴포넌트로 리팩토링하고, 하단 SectionCta 통합 및 신규 Contact 소통 페이지를 이식했습니다.

1. 하단 CTA 공통 컴포넌트(SectionCta.astro) 신설 및 코드 절감

• 구조 규격화 & 코드 다이어트: index, about, origin, recipe, tools 등 주요 페이지 하단에 파편화되어 있던 보일러플레이트 코드를 공통 컴포넌트로 통합 (페이지당 약 20여 줄 절감)
• 지브라 무늬 연동 (bgVariant): 직전 섹션 배경색에 따라 white 및 grayish(#f6f8f5) 배경 및 테두리 스타일이 유연하게 결정되도록 지원
• 커스텀 레이아웃 확장 (Slot): 기본 액션 버튼 구성뿐만 아니라, recipe.astro와 같이 커스텀 버튼 배치나 3개 이상의 액션이 필요한 경우 <slot />을 통해 자율성 보장

2. tools 인덱스 페이지 서브 컴포넌트화 & 계산기 분류 적용

• 공통 컴포넌트 이식: SubPageTitle, SectionCentered, SectionCta를 적용하여 about 및 recipe 페이지와 시각적/구조적 통일감 형성
• 계산기 섹션 재정립: 개별 카드의 중복 태그를 제거하고 섹션 자체를 “계산기” 도구함으로 명확하게 그룹화

3. 신규 소통 페이지 (contact.astro) 신설 & 찻주전자 아트워크

• 단일 Hero 소통 공간: 404.astro 스타일의 깔끔한 단일 Hero 레이아웃을 기반으로 신규 소통 인덱스 구축
• 보안 이메일 마스킹: 이메일 주소를 스크립트 기반 동적 조립 방식으로 처리하여 스팸 수집 봇 노출 방지
• 맞춤형 찻주전자 캐릭터: 찻주전자와 도자기 찻잔, 그리고 모락모락 피어오르는 녹차 김 애니메이션이 조화된 환대 인터랙티브 SVG 이식

전역 레이아웃의 스크롤 안정성을 확보하고, 브랜드의 핵심 세계관인 찻집 메뉴판(The Menu) 컨셉을 푸터 네비게이션으로 통합·재정립했습니다.

1. 전역 레이아웃 가로 스크롤 이슈 보완

• 원인 조치: w-screen(100vw) 사용 섹션으로 인해 세로 스크롤바 두께만큼 헤더 너비와 차이가 발생하던 현상 보완
• 스크롤 안정화: SubLayout 및 BaseLayout 최상위 요소(html, body)에 overflow-x-hidden 및 w-full 속성을 부여하여 가로 스크롤 박리 방지

2. 푸터 ‘The Menu / Matcha Course Selection’ 컨셉 통합

• 브랜드 서사 완성: 사이트 개편 후 무대 뒤로 물러났던 The Menu 찻집 코스 셀렉션 컨셉을 사이트 전체 지도를 담당하는 푸터로 이식
• 시각적 위계 정돈: 푸터가 본문 콘텐츠와 시선 경쟁을 하지 않도록 아담하고 정돈된 폰트 위계로 억제하여 차분한 마감감 제공
• 코스 레이아웃 구조화: 하단 네비게이션 컬럼을 Course 01 (Main), Course 02 (Kitchen), Course 03 (Legacy Archive)로 대등하게 구조화하여 메뉴판 본연의 브랜드 정체성 강화

웹사이트 주요 페이지 하단에 다음 단계 탐색과 상단 이동을 돕는 CTA 섹션 구조를 통일하고 연결 흐름을 완성했습니다.

1. 페이지별 CTA 랜딩 섹션 적용

• Index 페이지: 하단에 About 랜딩 CTA 섹션 신설
• About 페이지: 하단에 Origin 랜딩 CTA 섹션 신설
• Origin 페이지: 하단에 Recipe 랜딩 CTA 섹션 신설
• Recipe 페이지: 하단에 Tools 및 Kitchen 세로 3행 CTA 랜딩 섹션 신설

2. CTA 버튼 디자인 및 레이아웃 통일

• <Button> 공통 컴포넌트 적용: 모든 랜딩 버튼을 공통 컴포넌트로 일원화하여 일관된 둥근 버튼 및 SVG 아이콘 스타일 적용
• 버튼 스타일 및 색상 시스템 정돈:
  • 탐색 랜딩 버튼: 화이트 차분한 레이아웃 (variant="secondary")
  • 맨 위로 이동 버튼: 브랜드 대표 색상인 녹색 강조 (variant="primary")
• Recipe 페이지 전용 레이아웃: Tools 둘러보기, Kitchen 들여다보기, 맨 위로 이동 버튼을 세로 3행 정렬 구조 및 동일한 너비(w-60)로 맞춰 시각적 균형감 확보

Recipe 및 About 페이지의 레이아웃과 섹션 구조를 핵심 중심으로 정돈했습니다.

1. Recipe 페이지 개편

• 섹션 통합 및 레이아웃 정리: 협업 방식(Type A, B, C) 및 퀴즈 섹션을 SectionCentered 표준 구조로 교체하고, 세부 카드 간격을 대폭 줄여 유기적으로 구성했습니다.
• AI 협업 사례 카드 도입: 실제 대화 모음 섹션을 신설하고 흰색 대화 상자 및 미세 그림자 스타일을 적용했습니다.
• 타이틀 및 라벨 한글화: 영문 표기(Collaboration Mode, Taste Test)를 직관적인 한글 표기(세 가지 협업 방식, 시음과 교차 검토)로 전환하고 뱃지 위치를 개선했습니다.

2. About 페이지 단순화

• 중복 섹션 삭제: Recipe 페이지로 통합된 우리가 협업하는 방식 섹션과 Ingredients & Blend 섹션을 제거하여 인물 소개와 미션 중심의 간결한 구조로 재편했습니다.

Origin 페이지(src/pages/origin.astro)의 레이아웃 위계와 비주얼 요소를 사이트 공용 컴포넌트 시스템에 맞춰 전면 재정돈했습니다.

1. 크루 멤버 캐릭터 미니 카드 도입

• Stage별 크루 아이콘 카드 추가: 각 Stage 연대기 시점에 참여한 크루 멤버들의 정체성을 보여주는 정사각 아이콘 카드(72px * 72px)를 추가했습니다.
• 멤버 고유 브랜드 컬러 및 SVG 결합: JIYU, Gemini, Antigravity, Claude 각 크루의 브랜드 색상과 48px SVG 아이콘을 결합해 체제의 성장을 한눈에 파악할 수 있도록 구현했습니다.

2. 레이아웃 및 디자인 시스템 통합

• SubLayout 및 SubPageTitle 전환: 기존 BaseLayout 기반 레이아웃을 SubLayout으로 바꾸고, 상단 히어로 영역을 SubPageTitle 컴포넌트로 통일하여 시각적 연속성을 강화했습니다.
• SectionWrapper 상하 여백 확충: 메인 페이지(index.astro)와 동일한 SectionWrapper 표준 상하 여백(py-30 md:py-36)을 적용하여 호흡이 여유로운 레이아웃을 완성했습니다.

3. SEO 및 메시지 톤앤매너 다듬기

• 따뜻한 개인 블로그 톤으로 SEO 메타데이터 업데이트: Philosophy 등 거창했던 표현을 지우고, 메인 페이지의 다정한 톤앤매너에 맞추어 Origin Story - 말차 로직의 시작으로 메타 타이틀 및 설명, 히어로 타이틀을 정돈했습니다.

웹사이트의 핵심 모체인 메인 인덱스 페이지, 글로벌 푸터, 그리고 네비게이션 시스템을 설계 위계에 맞춰 재구조화하고 디자인 최적화를 진행했습니다.

1. 메인 인덱스 페이지 (index.astro) 전면 개편

기존 인덱스 페이지와 대비하여 다음과 같이 구조적·비주얼적 전면 개편이 수행되었습니다.

• 레이아웃 아키텍처 전환: 기존의 BaseLayout과 개별 홈 컴포넌트(Hero, MatchaGuide, LatestBrewing, SystemLogs) 정적 조합을 걷어내고, 공용 시스템 빌딩 블록인 SubLayout, SectionCentered, SectionSplit 기반의 통합 격자 레이아웃으로 전면 리빌딩했습니다.
• Welcome Preamble 개선: 단순 타이틀과 텍스트로 이루어져 있던 환영 섹션 하단에 뚜껑(모자)을 들어 올리며 감은 눈으로 예의 바르게 인사하는 귀여운 **인사 주전자 벡터 그래픽(SVG)**을 탑재했습니다.
• MatchaLogic Tools 목록 스타일 통일: 메인 페이지 하단의 변경 내역 목록을 Kitchen의 시스템 로그 레이아웃 형태로 일치시켜 시각적 통일성을 강화했습니다.
• The Kitchen 섹션 신설 및 색상 반전: 기존 백업본에는 아예 부재했던 아키텍처/디자인 가이드 섹션인 **실험실(Kitchen)**을 완전히 새롭게 구축했습니다. 독자적인 어두운 톤(bg-slate-modern-800)으로 배경을 반전시키고, 배지나 텍스트 대신 실제 컴포넌트 프리뷰와 유리 질감 터미널 창을 카드 형태로 크게 구현했습니다.

2. 글로벌 푸터 (Footer.astro) 재구조화

사이트 내 페이지 위계를 쉽게 파악할 수 있도록 푸터의 전체 구성을 전면 재정렬했습니다.

• 3대 메뉴 그룹핑 구축: 푸터 링크들을 사이트 구조에 맞춰 Main (1그룹: Root 레벨 페이지), Kitchen (2그룹: 실험실 사양 목록), Legacy Archive (3그룹: 블로그 및 비평 아카이브)로 구분하여 재정치했습니다.
• 기타 섹션 정리: 최하단 유틸리티 링크를 Privacy, Open API, Sitemap 3개 항목만 남기고 깔끔하게 정리했습니다.
• 로고 디자인 정돈: 로고에서 불필요한 마침표를 제거하여 MatchaLogic으로 단순화하고, 앞뒤 폰트 가중치와 서체를 하나로 통일하여 깔끔한 비주얼을 연출했습니다.

3. 네비게이션 및 이동 경로 최적화 (SubHeader / BottomNav)

사용자 흐름에 따라 상/하단 탐색바의 동작을 섬세하게 보정했습니다.

• 서브헤더 네비게이션 확장: SubHeader의 메인 메뉴군을 확장하여 홈, 소개, 여정, 레시피, 도구, 실험실로 이어지는 주요 축들을 한번에 탐색할 수 있도록 구성했습니다.
• 홈페이지 순환 이동 제거: 이미 홈페이지(Root)에 있는 상태에서 페이지 최하단의 Back to Home cta 버튼이 중복 노출되지 않도록 조건부 동적 렌더링을 적용해 버튼을 감추고 Scroll to Top만 깔끔하게 노출되도록 보정했습니다.

기존에 개별 독립 페이지로 존재하던 Ingredients(상세 장비 도감)를 주방 서브시스템(/kitchen/ingredients) 하위로 공식 편입하고, 최신 개발 명세에 맞추어 콘텐츠와 디자인을 완전히 새로 빌딩했습니다.

• System Ingredients 페이지 Kitchen 하위 편입:

  • 기존에 독립 경로(/ingredients)에 혼재하던 오래된 장비 정보와 레거시 컴포넌트를 버리고, 주방 시스템의 핵심 재료들을 투명하게 브리핑하는 공간으로 처음부터 다시 구축했습니다.
  • 이에 맞춰 /kitchen/ingredients 하위 경로를 신설하고, 푸터(Footer), 어바웃(About) 페이지, 개별 블로그 글 내비게이션, 타임라인 및 코스 정보에 연결된 구버전 링크를 모두 새 경로로 안전하게 통합 전환하였습니다.

• 대시보드 스타일의 일관된 표(Table) 형태 레이아웃 적용:

  • 주방 인덱스 페이지의 System Profile 표 설계를 확장 적용하여, 장비 정보들을 카테고리별 SectionCentered 섹션 내에 단정하게 정리된 표 형식의 로우(Row) 레이아웃으로 개편했습니다.
  • 핵심 환경 명세(Ubuntu, ARM64 등)를 아이템명에 괄호로 병기하였습니다.

• 실제 브랜드 고유색 포인팅:

  • 각 스택 및 시스템의 정체성을 강화하기 위해, 리스트 앞부분의 고유 지시 점(Dot Color)들을 각각의 공식 브랜드 컬러와 그림자 효과로 디테일하게 업데이트했습니다.
  • 특히 4인 크루(동료)의 정체성을 가진 Antigravity AI 대신 프로그램/도구 관점의 VS Code & Antigravity IDE Integration 명칭을 사용하고 어두운 초록색 컬러를 배치하여 톤앤매너의 정합성을 확립했습니다.

모바일 사용성을 개선하기 위해 서브헤더에 반응형 토글 내비게이션을 구축하고, 개인정보처리방침 페이지에 브랜드 캐릭터 일러스트를 결합하여 브랜딩을 강화했습니다.

• SubHeader 반응형 모바일 햄버거 메뉴 및 내비게이션 신설:

  • 모바일이나 창이 좁은 뷰포트에서 메뉴 겹침 현상을 해결하기 위해, SubHeader 컴포넌트 내에 반응형 미디어 쿼리와 바닐라 JS 토글로 구동되는 모바일 전용 햄버거 메뉴 및 드롭다운 내비게이션을 신규 구현했습니다.

• Privacy (개인정보처리방침) 페이지 찻주전자 캐릭터 탑재:

  • 브랜딩 고도화의 일환으로 Privacy 페이지 내에 브랜드 캐릭터 일러스트(SVG 찻주전자)를 신규 탑재하여 시각적 정합성과 브랜드 아이덴티티를 보강했습니다.
  • 아울러, 여러 서브페이지별로 미세하게 드로잉 외곽선 두께나 유자 꼭지 포인트 컬러가 어긋나던 찻주전자 SVG 마크업 규격을 정교하게 일치시켰습니다.

• 표준 레이아웃 템플릿(3종) 구조화 및 로직 모듈화:

  • 페이지마다 여백 불일치가 일어나던 영역을 단일화하기 위해 SectionWrapper, SectionCentered, SectionSplit 3종의 표준 레이아웃 템플릿 컴포넌트를 설계하여 관련 페이지에 적용을 마쳤습니다.
  • 기존 루트 레벨에 배치되어 있던 api-docs.astro 파일을 src/pages/kitchen/api.astro 경로로 안전하게 이동하여 주방 내부 주소 체계 통합을 마무리했습니다.
  • kitchen/index.astro 및 ApiPlayground.astro 에 각각 작성되던 fetch 비즈니스 스크립트를 src/utils/brewHelper.ts 모듈로 캡슐화해 200여 줄의 중복 코드를 제거했습니다.
  • 브라우저 경로를 파싱해 자동으로 부모 경로 매핑 및 탑 스크롤을 핸들링해 주는 BottomNav.astro 공용 컴포넌트를 이식했습니다.
  • 모바일 가독성 향상을 위해 기존 11px 사양을 12px 기반 표준으로 전격 상향 교정하고 가이드라인(components.astro, palette.astro)을 대대적으로 정돈했습니다.

Kitchen 서브시스템의 진입 페이지를 기존 목업 전람형에서 실제 개발 스펙과 설계도를 브리핑하는 **종합 개발 대시보드(Overview Hub)**로 격상하고, 차분한 Slate-Modern 색상 체계를 확립하여 인터페이스를 대규모로 리뉴얼했습니다.

• Kitchen 종합 개발 대시보드 (Overview Hub) 전환:

  • 기존에 임시 목업 위주로 나열되어 단순 컴포넌트 목록을 조회하던 kitchen.astro.bak 구조를 폐지했습니다.
  • 실제 Matcha Logic의 설계(The Source), 스타일 사양(Design Tokens), 상용 컴포넌트(UI Components), 시스템 변경 로그(Changelog)의 핵심 실시간 요약을 한곳에서 브리핑하는 주방의 핵심 요약 대시보드 형태로 전면 개편했습니다.

• Zebra형 수평 면 분할 및 비주얼 정돈:

  • 복잡한 그래디언트 빗살무늬 패턴 이미지를 걷어내고 차분한 단색 톤으로 배경을 정리했습니다.
  • 상단 Hero 영역부터 System Profile, 본문으로 이어지는 구간에 흰색과 연녹색 미색(bg-[#f6f8f5]) 배경을 교차시키는 수평 Zebra 레이아웃을 통해 가독성과 면 분할의 안정감을 확보했습니다.

• Slate-Modern 색상 테마 전격 확립 및 통합:

  • 기존의 강한 연두색 계열 하이라이트와 보더를 차분하고 정갈한 회녹색인 #2F322F (slate-modern-800) 및 #EBECEB (slate-modern-150) 스펙트럼으로 전면 전환하여 디자인 톤앤매너를 일치시켰습니다.
  • 파편화되어 존재하던 릴리즈 로그 영역을 주방 인덱스 페이지 최하단 Zebra 컨테이너 내부로 완전 이식하고, 와이드한 아코디언 컨테이너 구조로 새롭게 개편했습니다.

웹사이트의 설계 및 디자인 관련 페이지들의 도메인 주소 정합성을 맞추고, 반복적으로 사용되는 서브페이지들의 공통 구조 및 레이아웃을 범용 규격으로 단일화했습니다.

• 디자인/설계 도메인 주소 체계 격리 및 단일화:

  • 기존 루트 레벨에 개별적으로 흩어져 있던 팔레트(palette.astro) 및 변경 이력(changelog.astro) 페이지를 src/pages/kitchen/ 서브 디렉토리 하위로 이동하여 주소 구조의 정합성을 확보했습니다.
  • 기존의 임시 kitchen.astro 페이지 구조를 단일 인덱스 파일(src/pages/kitchen/index.astro) 경로로 깨끗하게 병합 및 통합 완료했습니다.

• 공용 레이아웃 체계화 및 공통 헤더 컴포넌트화:

  • 서브페이지마다 다르게 분산 사용되던 ToolsLayout을 범용적이고 포괄적인 SubLayout.astro로 개편하고 레이아웃 폴더 루트로 상향 통합했습니다.
  • 서브 섹션 디자인 규격을 일관되게 정돈해 주는 공용 SectionHeader.astro 컴포넌트를 설계하고, 주방 내 주요 쇼케이스 페이지들에 교체 적용했습니다.
  • 상단 로고의 클릭 텍스트 영역을 분할해 최상위 홈(/) 및 각 서브디렉토리 메인(/kitchen)으로 각각 유동적으로 매핑되도록 이중 링크 UX를 반영했습니다.

• 레거시 정리 및 동적 정보 연동:

  • 리팩토링이 완료된 후 사용처가 없어진 구형 Kitchen 헤더/푸터 컴포넌트 등 총 8종의 Dead Code 파일을 영구 제거하여 프로젝트 구조를 경량화했습니다.
  • 푸터 하단의 디자인 시스템 버전 정보를 updates 콘텐츠 아카이브에서 실시간으로 자동 빌드 파싱하여 렌더링되도록 실데이터 연동(자동화)을 완료했습니다.

말차 로직의 새로운 유틸리티 섹션인 MatchaLogic Tools를 신설하고, 디자인 시스템의 slate 색상군을 slate-modern으로 업그레이드하며 블로그 페이지의 디테일을 보정했습니다.

• MatchaLogic Tools 신설 및 계산기 2종 배포:

  • 일상 유틸리티 도구를 모아볼 수 있는 허브 페이지(/tools)를 새로 구축했습니다.
  • 파일 용량과 다운로드 속도를 입력하여 소요 시간을 상세히 예측해 주는 다운로드 시간 계산기와 물타기 후 최종 평단가를 시뮬레이션해 주는 주식 평단가 계산기를 추가했습니다.
  • 공용 푸터(Footer.astro)의 Workspace & Tooling 섹션에 도구함 링크를 연동했습니다.

• 디자인 시스템 slate-modern 도입 및 블로그 레이아웃 보완:

  • 기존의 딱딱한 slate 컬러 스키마를 보다 현대적이고 따뜻한 감성을 지닌 slate-modern 색상군으로 전면 교체했습니다.
  • 새로운 색상 체계 변경에 발맞추어, 블로그 포스트 상세 본문 및 리스트 영역의 가독성과 배경/테두리 대비 등 디자인 디테일을 전체적으로 정교하게 다듬었습니다.
  • 기존 푸터 내 Tool Cabinet 항목을 디자인 콘셉트에 맞게 Ingredients (상세 장비)로 명칭을 함께 개편했습니다.

더 이상 사용하지 않는 Git 기반 CMS인 Decap CMS(구 Netlify CMS) 관련 설정과 UI 요소를 프로젝트에서 완전히 제거하고 시스템을 최적화했습니다.

• CMS 파일 및 관리자 페이지 제거: public/admin/ 폴더 내의 CMS 설정(config.yml)과 진입점(index.html)을 삭제하여 /admin 경로를 통한 CMS 접근을 차단했습니다.
• 라우팅 및 크롤러 규칙 업데이트: public/_redirects 파일에서 /admin 리다이렉트 규칙을 제거하고, public/robots.txt에서 크롤러 대상 Disallow: /admin/ 규칙을 삭제했습니다.
• UI 및 환경 설정 정보 정리: src/pages/kitchen.astro 파일 트리 텍스트 및 Core Dependencies의 Decap CMS 카드 요소를 제거하였으며, 푸터의 관련 외부 링크와 siteConfig.ts 내 버전 관리 정보를 모두 정리했습니다.

웹사이트의 서비스 분석을 위해 구글 애널리틱스 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-modern-700으로 통일했습니다.
   • 페이지 하단에 실제 제작 방식을 퀴즈 형태로 확인할 수 있는 콤팩트한 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-modern-700으로 부드럽게 매핑했습니다.
   • 강조 텍스트 (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 배포 완료 및 도메인 연결.