Thinking in
Soft Logic.

말차 로직의 태동과 성장 역사를 한눈에 탐색할 수 있도록 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 페이지와 동일한 그래픽 높이선을 일치시켰습니다.