[6차] 작업 Log를 기술 블로그처럼 읽기 쉽게 만들기

작업 전 상태

Log 본문은 18px 글자와 h2, 목록 정도만 꾸며져 있었습니다. 제목 단계, 체크박스, 코드, 표, 인용문이 서로 충분히 구분되지 않아 내용이 길어질수록 구조를 빠르게 파악하기 어려웠습니다.

참고하고 정한 방향

우아한형제들 기술블로그와 토스 테크의 큰 제목, 짧은 도입, 단계적인 소제목, 여유 있는 본문 흐름을 참고했습니다. 특정 사이트를 복제하지 않고 BUILD & LEARN의 검정·흰색·주황색 디자인을 유지했습니다.

긴 글도 제목과 증거 블록만 훑으면 작업 흐름을 이해할 수 있게 만드는 것이 핵심입니다.

변경한 내용

추가

• Callout 안내 블록
• InputBox 읽기 전용 정보 블록
• 체크박스와 표를 지원하는 GFM 문법
• 2·3·4단계 제목, 인용, 링크, 인라인 코드, 코드 블록, 표 스타일

수정

• Log와 Project가 같은 MDX 컴포넌트와 문법을 사용하도록 통합
• 작업 로그 템플릿에 블록별 작성법과 복사 가능한 예시 추가
• 모바일에서도 코드와 표가 페이지 전체를 밀어내지 않도록 가로 스크롤 범위 제한

삭제

• 없음

블록은 언제 사용할까

블록	적합한 내용	피해야 할 사용
제목	글의 큰 흐름과 세부 단계	모든 문장을 제목으로 만들기
체크박스	실제 검증 여부	하지 않은 일을 완료로 표시하기
InputBox	범위, 환경, 핵심 결과	긴 본문 전체 넣기
Callout	주의, 성공, 초보자 설명	강조할 필요 없는 일반 문장
코드	실제 명령과 구현 예시	실행하지 않은 코드를 결과처럼 표현하기

확인한 내용

자동 검사

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

직접 확인

• 체크박스가 실제 체크 UI로 보이는지 확인
• Callout과 InputBox가 구분되는지 확인
• 코드와 표의 모바일 가로 넘침 확인
• 기존 Log와 Project 상세 페이지 회귀 확인
• 브라우저 콘솔 오류 확인

관련 파일

• src/components/mdx/MdxComponents.tsx
• src/app/log/[slug]/page.tsx
• src/app/projects/[slug]/page.tsx
• src/styles/globals.css
• docs/templates/WORK_LOG_TEMPLATE.md

남아 있는 점

문법 강조 색상과 자동 목차는 현재 작업 범위에 포함하지 않았습니다. 실제 글이 더 길어졌을 때 필요성을 판단합니다.

다음에 할 일

새 작업 Log부터 템플릿에서 필요한 블록만 골라 사용합니다.