Matcha Course
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)' 구조 확립.