The Kitchen.

기존 메인 계산기 기능만 제공되던 다운로드 시간 계산기 (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 섹션을 제거하여 인물 소개와 미션 중심의 간결한 구조로 재편했습니다.