[3차] 폰트를 통일하고 예시 콘텐츠 채우기

작업 전 상태

사이트가 운영체제의 기본 폰트에 의존했고 글자 크기와 간격이 여러 CSS 선택자에 흩어져 있었습니다. 프로젝트와 로그도 2개씩이라 목록과 필터의 실제 모습을 판단하기 어려웠습니다.

요청한 내용

영문 강조 요소와 한글 본문 폰트를 구분하고, 공통 디자인 값을 만들었습니다. 모든 카테고리와 데모 유형을 확인할 수 있도록 예시 콘텐츠도 늘렸습니다.

변경한 내용

추가

• Space Grotesk와 Noto Sans KR
• 글자 크기, 8px 간격, transition CSS 변수
• 프로젝트 예시 4개와 로그 예시 4개
• 새 콘텐츠를 위한 기하학적 SVG 8개
• 모든 예시 MDX의 PLACEHOLDER 주석

수정

• 하드코딩된 글자 크기와 간격을 공통 변수 중심으로 정리
• 제목/UI와 본문에 서로 다른 폰트 역할 적용

삭제

• Arial 중심의 시스템 폰트 설정

왜 이렇게 변경했나

폰트와 간격을 변수로 관리하면 여러 화면의 분위기를 한곳에서 조정할 수 있습니다. 콘텐츠를 다양하게 만든 이유는 디자인을 꾸미기 위해서뿐 아니라 공개 여부와 필터 분기를 실제 데이터로 검사하기 위해서입니다.

초보자가 알아둘 점

CSS 변수는 반복해서 사용하는 값을 이름으로 저장합니다. 예를 들어 --space-4를 여러 곳에서 사용하면 간격 기준이 바뀌어도 한곳만 수정할 수 있습니다.

확인한 내용

자동 검사

• npm run lint
• npm run type-check
• npm run format:check
• npm run build

직접 확인

• Featured 최신 3개 확인
• 프로젝트 카테고리 4종 확인
• MDX 공유 태그에 로그 2개 표시 확인
• 비공개 프로젝트가 노출되지 않는지 확인

관련 파일

• src/app/layout.tsx
• src/styles/globals.css
• src/content/projects/
• src/content/logs/
• public/images/

남아 있는 점

추가한 콘텐츠는 레이아웃 검사용 예시이며 실제 프로젝트 정보로 교체해야 합니다.

다음에 할 일

모바일에서 Hover에 의존하는 이미지 효과와 좁은 화면의 Hero 제목을 점검합니다.