Thinking in
Soft Logic.

웹사이트의 서비스 분석을 위해 구글 애널리틱스 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**로 넉넉하게 확장하여 테두리와 글자 사이에 쾌적한 호흡을 주었습니다.