Thinking in
Soft Logic.

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

• 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 내 버전 관리 정보를 모두 정리했습니다.