Update History.
MatchaLogic이 걸어온 발자취입니다.
UX: Kitchen Mobile & Source Viewer
개발자 전용 공간인 Kitchen의 모바일 사용성과 소스 코드 뷰어의 안정성을 개선했습니다. Kitchen 전용 헤더에 다크 테마 햄버거 메뉴를 적용하여 모바일 접근성 확보, `?raw` import와 프론트매터 추출 로직을 적용하여, 보안을 유지하면서도 실시간 코드를 정확하게 렌더링하도록 개선, Kitchen 컴포넌트 가이드의 폰트 크기 및 레이아웃 디테일 수정.
Architecture: Data Separation & The Source
프로젝트의 유지보수성을 높이고 개발 투명성을 강화하기 위해 대규모 구조 개선을 진행했습니다. `pages` 파일 내에 하드코딩 되어있던 데이터들을 `src/data/*.ts` 파일로 분리하여, 뷰(View)와 데이터(Model)의 관심사를 분리, 실제 구동 중인 `.astro` 파일의 소스 코드를 웹에서 직접 열람할 수 있는 '소스 코드 탐색기' 페이지 신설, 주요 파일의 코드 라인 수를 30~50% 가량 감축하여 가독성 및 유지보수 효율 증대.
Automation: System Version Sync
KitchenFooter.astro를 추가하고 Kitchen 페이지 하단의 시스템 버전 표시 방식을 자동화했습니다. 정적인 `package.json` 버전 대신, 동적인 `Updates` 컬렉션 데이터를 연동, 업데이트 로그를 작성하는 즉시 사이트 전역의 표기 버전이 동기화되는 '단일 진실 공급원(SSOT)' 구조 확립.
Content Fix: Git Case Sensitivity Post
'Git과 대소문자의 숨바꼭질' 포스팅의 기술적 설명(Rename Dance)을 보완했습니다. - **Accuracy:** 파일명 변경 사이사이에 `git add` 과정이 필수임을 명시하여, 독자가 따라 했을 때 혼동이 없도록 수정
Design System Synchronization
Kitchen(디자인 가이드) 페이지의 내용을 실제 사이트 구현 사항과 일치시켰습니다. L1(Display)부터 L9(Micro)까지 폰트 크기와 용도를 명확히 규정하고 가이드 표(Table) 업데이트, 버튼, 배지, 카드(Type A/B/C)의 최신 디자인 스펙을 Kitchen 페이지에 반영하여 '살아있는 문서'로 유지, Kitchen 페이지 내부 코드를 `KitchenSection` 컴포넌트로 구조화하여 코드 중복 제거.
Visual Polish: Badge Color Palette
블로그의 전체적인 톤앤매너와 조화를 이루도록 배지(Badge)의 색상 팔레트를 조정했습니다. 기존의 차가운 'Indigo' 색상을 따뜻하고 생동감 있는 'Coral (Rose)' 색상으로 교체하여, 말차색(Green)과의 보색 대비를 통한 시각적 포인트 강화, 변경된 컬러 시스템을 Kitchen 가이드와 실제 컴포넌트(Card)에 동기화.
System: Universal Button Component
사이트 전반에 사용되는 버튼 스타일을 표준화하고 유지보수성을 높였습니다. 크기, 색상, 아이콘을 옵션으로 조절 가능한 만능 버튼(`Button.astro`) 개발, Home, Recipe, 404 페이지 등의 하드코딩된 버튼 코드를 컴포넌트로 전면 교체, Kitchen 가이드에 실제 컴포넌트를 연동하여 디자인 시스템과 코드의 일치(Sync) 구현.
Refactor: Dynamic Card Styling
카드 컴포넌트의 스타일링 로직을 개선하여 디자인 일관성을 높였습니다. 삼항 연산자(Ternary Operator)를 도입하여 단일 컴포넌트에서 가변적인 여백(Padding)을 처리하도록 개선, 모든 카드의 좌우 여백을 32px(px-8)로 통일하여 시각적 정렬(Alignment) 완성.
Refactor: Design System Standardization
사이트 전체의 디자인 일관성과 유지보수성을 높이기 위해 대규모 리팩토링을 진행했습니다. H1~Body까지 폰트 크기 규칙(Level 1~8)을 정의하고 전체 페이지에 적용, 반복되는 UI 요소인 'Badge'를 독립 컴포넌트로 분리하여 재사용성 확보, Card, PostRow, Ingredients 페이지의 디자인 파편화를 해소하고 시스템으로 통합.
UX: Mobile Navigation & Accessibility
모바일 환경에서의 접근성과 사용성을 강화했습니다. 헤더 메뉴가 많아짐에 따라 모바일 전용 햄버거 메뉴(Expandable Nav) UI 구현, 메뉴 개폐 시 로고 및 버튼 색상이 배경색에 맞춰 반전(Invert)되는 인터랙션 적용, 메뉴가 열려있을 때 배경 스크롤을 방지하여 조작 실수 방지.
Methodology: The Recipe
AI와의 협업 노하우와 개발 철학을 공유하는 'The Recipe' 페이지를 신설했습니다. 아이디어 발상부터 구현까지, AI와 코딩하는 4단계 프로세스(Brewing Guide) 정리, 자동 완성형 AI(IDE) 대신 대화형 AI(Conversation)를 선택한 이유와 '완전한 이해'에 대한 철학 기록, 실제 기능 구현 사례(채팅 로그)를 통해 협업 과정 시각화.
SEO: Brand Messaging & Keywords
검색 엔진과 방문자에게 블로그의 정체성을 명확히 전달하기 위해 메타 데이터를 최적화했습니다. '부드럽게 우려낸(Brewed)'이라는 표현을 사용하여 기술 블로그의 딱딱함을 덜어내고 감성적인 브랜드 이미지 구축, 영문 브랜드명(MatchaLogic)과 국문 키워드(말차 로직)를 전략적으로 배치하여 SEO 검색 범위 확대.
Visual Identity: The Palette & System
Matcha Logic의 디자인 언어를 정립하고, 시각적 가이드를 제공하는 페이지를 추가했습니다. 브랜드 컬러와 디자인 시스템을 한눈에 볼 수 있는 'The Palette' 페이지 오픈, 사이트의 주요 페이지를 아이콘과 함께 소개하는 'The Matcha Course' 섹션 추가 (Dark Zone Design), 각 페이지의 헤더 타이틀 컴포넌트화 및 Ingredients 페이지 UI 디테일 강화.
Design System: Visual Hierarchy & Flow
웹사이트의 시각적 위계질서를 재정립하고 사용자 경험(UX)의 흐름을 완성했습니다. 사이트의 세계관을 안내하는 가로 스크롤 섹션 'The Matcha Course' 추가 (Dark Zone Design), 운영자(JIYU)와 AI 파트너(Gemini)의 관계를 시각적 대비(Contrast)로 표현하는 듀얼 레이아웃 적용, Brewing(과정)' 후 'Tasting(평가)'으로 이어지는 논리적 순서에 맞춰 헤더 메뉴 재배치, 이모지를 SVG 선 아이콘으로 교체하여 모던하고 전문적인 톤앤매너 확립.
Refactor: Universal PageTitle Component
페이지마다 반복되던 헤더 코드를 하나의 컴포넌트로 통합하여 유지보수성을 높였습니다. 'PageTitle.astro'를 확장하여 모든 페이지(About, Flavors, Tasting 등)의 상단 디자인 통일, 'highlight' 속성 유무에 따라 폰트 크기와 그라데이션이 자동 조절되는 반응형 로직 구현, 검색창이나 기준표 등 페이지별 고유 콘텐츠를 유연하게 수용하도록 슬롯 구조 적용.
Polish: AI Persona Description
Tasting Notes의 AI 명함(Critic's Card) 문구를 다듬었습니다. 특정 브랜드 강조보다는 블로그 내에서의 역할(Partner/Critic)을 강조하는 방향으로 수정하여 브랜드 정체성 강화.
New Section: Tasting Notes
Matcha Logic만의 독자적인 비평 섹션 'Tasting Notes'를 신설했습니다. AI 파트너(Gemini)가 블로그의 코드, 디자인, 콘텐츠를 제3자의 시선으로 분석하고 점수를 매기는 '메타 비평' 콘텐츠 추가, Logic, Flavor, Body, Aftertaste 4가지 지표를 통해 프로젝트의 현재와 미래를 진단.
UX: The Brewer's Card & Page Flow
방문자가 콘텐츠를 즐긴 후 자연스럽게 블로그의 철학과 도구를 탐색할 수 있도록 연결 고리를 강화했습니다. 게시물 하단에 'The Brewer's Card'를 배치하여 작가 소개 및 주요 페이지(Origin, Ingredients) 접근성 향상, About 페이지의 중복된 장비 목록을 제거하고, Ingredients 페이지로 유도하는 링크 카드로 대체하여 정보 구조 최적화, 링크 버튼에 직관적인 SVG 아이콘을 적용하여 시각적 일관성 개선.
Refactor: URL Structure & Consistency
페이지의 역할과 URL 주소가 일치하도록 구조를 개편했습니다. '/stack'을 '/ingredients'로, '/tags'를 '/flavors'로 변경하여 브랜드 언어 통일, 기존 주소 접근 시 새 주소로 자동 이동하도록 301 리다이렉트 규칙 적용.
Detail: Specs & Archive UI
Ingredients 페이지의 정보 전달력을 높이기 위해 UI 디테일을 강화했습니다. ARM 기기의 프로세서 정보를 보여주는 스펙 배지와 사용 기간 표시 기능을 추가하고, 은퇴한 기기를 위한 'Museum' 섹션에 다크 테마를 적용하여 현역 장비와 시각적으로 확실하게 구분했습니다.
Structure: Ingredients & Flavors
블로그의 구성 요소를 '재료(Ingredients)'와 '맛(Flavors)'이라는 컨셉으로 재정립했습니다. 기존 'Stack' 페이지를 'Ingredients'로 개편하여 하드웨어와 AI 파트너 등 창작 도구를 체계적으로 분류하고, 태그 아카이브를 'Flavors'로 변경하여 Matcha Logic의 세계관을 완성했습니다.
Navigation Flow & Identity: The Origin
블로그의 철학을 명확히 하고, 방문자가 콘텐츠를 더 쉽게 탐색할 수 있도록 내비게이션 구조를 완성했습니다. 블로그의 기원과 철학을 담은 'The Origin' 페이지 오픈, 헤더에 태그 아카이브 'Ingredients' 메뉴를 추가하여 탐색 경로 확장, Footer를 독립 컴포넌트로 분리(Refactoring)하여 유지보수성 향상.
UX Update: Search System & Archive Layout
검색 기능 도입과 함께 블로그의 탐색 경험(UX)을 대폭 개선했습니다. 단순한 기능 추가를 넘어, 정보를 찾는 방식에 맞춰 디자인 시스템을 확장했습니다. Brewing 페이지 내 실시간 검색 및 태그 필터링 구현, 가독성을 위해 목록 디자인을 카드(Grid)에서 리스트(Row) 형태로 변경, 검색 기능을 응용한 404 페이지 및 태그 아카이브(Ingredient Room) 신설.
Design Polish: Code Block Visibility
기술 블로그의 핵심인 코드 영역의 가독성을 대폭 개선했습니다. 구문 강조(Syntax Highlighting) 테마를 'One Dark Pro'로 교체하고, 배경색을 더 깊은 톤으로 조정하여 텍스트 명암비를 높였습니다. 또한 파비콘과 대표 이메일 설정을 완료하여 브랜딩을 마쳤습니다.
Grand Open: matchalogic.com
도메인 정식 연결과 함께 블로그의 내실을 다졌습니다. matchalogic.com 정식 연결 및 배포 완료, 구글 서치 콘솔 등록, 사이트맵(sitemap.xml) 제출, Web Analytics 적용, 게시물 주소에서 날짜를 제거하고 영문 Slug로 최적화, 본문 타이포그래피(줄간격, 폰트 크기) 및 제목 색상 통일.
배포 시스템 및 라우팅 안정화
관리자 페이지 접근성을 개선하고 배포 설정을 최적화했습니다. /admin 접속 시 자동으로 /admin/으로 이동하도록 규칙 추가, 빌드 설정 및 환경 변수 최적화.
리브랜딩: Thinking in Soft Logic
블로그의 정체성을 'Matcha Logic'으로 재정립했습니다. 로고 및 UI 텍스트 변경, GitHub 저장소 및 Cloudflare Pages 프로젝트 이전, .com 도메인 기반의 브랜딩 준비 완료.
Decap CMS 도입 및 글쓰기 환경 구축
웹 브라우저에서 손쉽게 글을 작성하고 관리할 수 있는 CMS를 도입했습니다. Decap CMS 연동: 관리자 페이지(/admin) 구축, GitHub OAuth: Cloudflare Workers를 활용한 보안 로그인 구현, 카테고리 시스템: AI Coding, ARM Windows 등 4개 분류 체계 적용.
System Logs (변경 이력) 기능 추가
이제 홈페이지의 성장 과정을 기록할 수 있습니다. Content Collections를 활용해 업데이트 내역을 관리하고, 메인 화면에 타임라인 위젯을 배치했습니다.
브랜드 컬러 리뉴얼
말차 색상을 5단계로 세분화하고 다크 모드 헤더 적용.
MatchaLogic 배포 시작
Cloudflare Pages 배포 완료 및 도메인 연결.