[Academic Homepage 3/3] 블로그 글과 카테고리 페이지 톤을 새 홈 UI와 맞추기

[Ridealist]

목표

홈(/)을 Minimal Light/kihoon-son 스타일의 개인 연구자 홈페이지로 전환한 뒤, 기존 블로그 글 상세 페이지와 카테고리/아카이브 페이지가 새 홈 UI와 지나치게 이질적으로 보이지 않도록 시각 톤을 맞춘다.

이번 이슈는 전체 블로그를 새 테마로 갈아엎는 작업이 아니다. 기존 Minimal Mistakes 기반의 안정적인 글/카테고리 구조를 유지하면서, 색상, 타이포그래피, 여백, 링크, 사이드바, 목록 밀도를 홈 UI와 조화롭게 조정하는 작업이다.

선행 조건

• #19 완료 후 진행한다.
• 가능하면 #20 완료 후 진행한다.
• 홈(/)은 Minimal Light 계열의 개인 연구자 홈페이지 UI를 가진 상태라고 가정한다.
• News와 Publications가 홈에 들어간 경우, 블로그 영역은 Writing / Notes 성격으로 유지한다.

참고 자료

• 목표 UI: https://kihoon-son.github.io/
• 로컬 reference 코드: references/yoonsu0816.github.io
• 현재 Minimal Mistakes Sass: _sass/minimal-mistakes/
• 현재 전역 stylesheet entry: assets/css/main.scss
• 현재 홈 전용 stylesheet: assets/css/homepage.scss
• 카테고리 페이지: _pages/category-*.md
• 카테고리/아카이브 관련 include: _includes/archive-single.html, _includes/category-list.html, _includes/posts-category.html, _includes/sidebar.html
• 글 상세 layout 후보: _layouts/single.html, _layouts/posts.html, _layouts/default.html
• 카테고리/archive layout 후보: _layouts/archive.html, _layouts/category.html, _layouts/categories.html, _layouts/archive-taxonomy.html

배경

1차/2차 작업 이후 홈은 연구자 홈페이지 톤으로 정리되지만, 기존 글 상세와 카테고리 페이지는 Minimal Mistakes 기본 블로그 UI를 많이 유지한다. 이 상태에서 사용자가 홈에서 글이나 카테고리로 이동하면 다음 문제가 생길 수 있다.

• 홈과 글 상세 페이지의 색상/타이포그래피가 크게 다름
• 카테고리 목록의 제목 크기와 링크 스타일이 홈보다 무겁거나 거칠게 보임
• 사이드바, breadcrumb, taxonomy, footer가 홈과 다른 시각 밀도를 가짐
• 다크모드 톤이 홈과 다르게 느껴짐
• 모바일에서 홈은 compact한데 글/카테고리 페이지는 과하게 큼

이번 이슈는 이런 이질감을 줄이는 것이 목적이다.

작업 범위

1. 현재 블로그 페이지 UI 감사

다음 화면을 기준으로 현재 UI를 확인한다.

• 홈: /
• 대표 카테고리: /llm/, /hci/, /datascience/, /isd/
• 전체 카테고리: /categories/
• 대표 글 상세: /isd/problem-analysis/
• LLM 대표 글: /llm/fine-tuning-llm/ 또는 실제 존재하는 LLM 글 상세
• 모바일 viewport: 390px 폭 기준
• dark mode

확인할 항목:

• 제목 크기와 색상
• 본문 font size와 line height
• 링크 색상과 hover 스타일
• archive list item 간격
• sidebar 색상과 여백
• breadcrumb/nav 스타일
• taxonomy/category/tag link 스타일
• TOC가 있을 경우 색상과 여백
• code block, table, blockquote 기본 톤
• footer와 copyright 영역

2. 홈 UI와 공유할 시각 토큰 정리

홈 스타일에서 사용하는 기본 토큰을 블로그 페이지에도 맞춘다.

권장 토큰:

• primary text: 기존 본문 black/dark gray 계열
• muted text: gray 계열
• heading/link blue: 홈에서 쓰는 deep blue 계열
• hover blue: 링크 hover용 진한 blue
• border color: light gray
• dark background: #20212b 계열
• dark text: #dadbdf 계열
• dark heading/link: bright blue 계열

구현 방식 후보:

• assets/css/main.scss에서 Minimal Mistakes import 이후 작은 override 파일을 import
• 예시: _sass/site/_academic-tone.scss 또는 _sass/minimal-mistakes/_academic-tone.scss
• override는 되도록 layout class 기반으로 제한

주의사항:

• Minimal Mistakes 원본 vendor Sass를 직접 대량 수정하지 않는다.
• reference의 전역 selector를 그대로 복사하지 않는다.
• homepage 전용 selector와 블로그 page selector를 혼용하지 않는다.

3. 글 상세 페이지 톤 조정

글 상세 페이지에서 다음을 조정한다.

• post title 색상과 크기를 홈 heading과 비슷한 톤으로 조정
• 본문 line-height를 읽기 좋게 유지하되 과하게 커지지 않게 조정
• 링크 색상을 홈과 통일
• 날짜/읽기시간/meta text를 muted tone으로 정리
• category/tag taxonomy link를 더 가볍게 조정
• blockquote, table, code block이 dark mode에서도 읽히도록 확인
• image가 본문 폭을 넘지 않도록 유지
• utterances comment 영역은 유지하되 주변 spacing만 조정

수정 후보 파일:

• _layouts/single.html
• _layouts/posts.html
• _includes/page__meta.html
• _includes/page__taxonomy.html
• _includes/toc.html
• Sass override 파일

가능하면 layout markup 수정은 최소화하고 CSS override 중심으로 진행한다.

4. 카테고리/archive 페이지 톤 조정

카테고리 페이지에서 다음을 조정한다.

• category page title 크기와 색상을 홈 heading과 통일
• archive item title 링크 색상을 홈과 통일
• archive item 간격을 과하게 크지 않게 정리
• post excerpt/meta가 있다면 muted tone으로 정리
• sidebar category navigation의 active/hover 상태를 새 톤과 맞춤
• breadcrumb가 너무 무겁게 보이면 spacing/color를 조정

수정 후보 파일:

• _layouts/archive.html
• _layouts/category.html
• _layouts/categories.html
• _layouts/archive-taxonomy.html
• _includes/archive-single.html
• _includes/sidebar.html
• _includes/category-list.html
• Sass override 파일

5. Navigation continuity 확인

홈에서 블로그 영역으로 이동하는 흐름이 자연스러워야 한다.

확인할 흐름:

• 홈 Writing / Notes 또는 category link → /llm/
• 홈 recent post/publication과 별도 writing link → 글 상세
• 카테고리 page → 글 상세
• 글 상세 → 사이드바 category navigation
• 글 상세 → 홈으로 돌아가기

필요하면 masthead/nav 표시 여부를 검토한다. 단, 이번 이슈는 navigation 재설계가 아니라 기존 흐름이 새 톤과 충돌하지 않게 하는 정도로 제한한다.

6. 다크모드 정합성 확인

홈이 prefers-color-scheme: dark에 대응한다면 글/카테고리 페이지도 최소한 다음이 깨지지 않아야 한다.

• 배경과 본문 텍스트 대비
• 제목/링크 색상 대비
• sidebar link 대비
• table border와 code block background
• blockquote border와 text
• footer text

Minimal Mistakes 자체 dark skin으로 완전 교체할 필요는 없다. 홈 톤과 충돌하지 않는 수준의 override를 목표로 한다.

명시적 비범위

이번 이슈에서는 다음을 하지 않는다.

• remote_theme: yaoyao-liu/minimal-light 적용
• Minimal Mistakes 제거
• 글 상세 레이아웃을 완전히 Minimal Light로 재작성
• 모든 글 front matter 수정
• post filename/category/permalink 변경
• _posts 콘텐츠 본문 rewrite
• comments provider 변경
• analytics 변경
• publication/news 데이터 구조 변경. 그 작업은 #20 범위다.
• 검색, pagination, archive 기능 대규모 개편

구현 가이드

권장 접근:

1. 먼저 screenshot으로 현재 홈/카테고리/상세의 차이를 확인한다.
2. 공통 색상/타이포그래피 override를 작은 Sass partial로 만든다.
3. assets/css/main.scss에서 Minimal Mistakes import 이후 override partial을 import한다.
4. CSS specificity는 필요한 만큼만 올린다. !important는 되도록 사용하지 않는다.
5. markup 변경이 필요한 경우 include/layout 하나씩 좁게 수정한다.
6. 기존 permalink와 category archive generation에 영향을 줄 수 있는 front matter 변경은 피한다.
7. 홈 전용 CSS(assets/css/homepage.scss)와 블로그 전용 override를 명확히 분리한다.

완료 기준

• 홈에서 카테고리/글 상세로 이동했을 때 시각 톤이 자연스럽게 이어진다.
• /llm/, /hci/, /datascience/, /isd/, /categories/가 정상 렌더링된다.
• 대표 글 상세 페이지가 정상 렌더링된다.
• 기존 permalink 정책 /:categories/:title/가 유지된다.
• 기존 category routes가 깨지지 않는다.
• utterances comment 설정이 유지된다.
• Google Analytics 설정이 유지된다.
• dark mode에서 글/카테고리 페이지의 주요 텍스트가 읽힌다.
• 모바일에서 글/카테고리 페이지에 가로 스크롤이 생기지 않는다.
• Sass override가 과도하게 전역으로 새지 않는다.

검증 방법

로컬에서 다음을 실행한다.

bundle exec jekyll build
bundle exec jekyll build --safe

로컬 서버로 다음 URL을 확인한다.

• /
• /llm/
• /hci/
• /datascience/
• /isd/
• /categories/
• /isd/problem-analysis/
• /llm/fine-tuning-llm/ 또는 실제 존재하는 대표 LLM 글 상세

브라우저 확인 항목:

• desktop 1440px 이상
• tablet 768px 전후
• mobile 390px 전후
• dark mode
• 홈 → 카테고리 → 글 상세 이동 흐름
• 글 상세의 이미지, table, code block, blockquote
• footer/copyright 영역

산출물

• 새 Sass override partial 또는 수정된 기존 Sass 파일
• 필요 시 수정된 layout/include 파일
• 필요 시 assets/css/main.scss import 정리
• 검증 screenshot 또는 검증 결과 요약
• 변경 전후 주요 화면 차이 요약