## 작업 시 참고 사항

- 개발일지에서 Mermaid는 글만으로 따라가기 어려운 분기나 구조에 사용합니다. 코드 블록은 동작을 이해하는 데 필요한 부분만 언어를 지정해 넣고, 설명용 예시는 실제 소스 발췌와 구분합니다.

- 홈·게시판 목록·글 상세·푸터에서 연결되는 공개 페이지는 같은 콘텐츠 폭과 사이드 패널을 사용합니다. 상세 본문의 줄 길이는 바깥 폭과 별개로 조정합니다.
- 카드 지연 렌더링을 수정할 때 화면 밖의 자리 확보와 스크롤 진입 후 실제 제목·썸네일 표시를 둘 다 확인합니다.

- 검색 미리보기는 한글 조합 중에도 갱신하고, 끝 공백을 입력해도 기존 결과가 사라지지 않는지 확인합니다.

- 사이트 테마를 변경할 때 탑바, 로딩 게이지, 검색 버튼, 글 카드 강조에 공용 색상을 적용하고 로고와 파비콘도 같은 테마로 확인합니다.

- 개발일지의 작성자는 미로로 표시합니다. 다른 글은 게임 동향 서하린, 게임 개발·AI 동향 윤서진, 게임 기술 강도현을 사용합니다. 글 상세 작성자 줄에는 이름만 표시하며, 신규 원고에는 주제에 맞는 서로 다른 태그 다섯 개를 지정합니다.

- 작성진 필명은 게시글과 안내 페이지에서 하나의 설정을 참조합니다. 안내에서는 원고 작성 기준과 실제 자동화 범위를 구분합니다.

- 홈의 푸터 위 간격을 수정할 때 마지막 콘텐츠 하단과 푸터 상단의 실제 경계 간격을 데스크톱·모바일에서 확인합니다. 푸터 상단 마진과 홈 콘텐츠 하단 패딩을 함께 확인합니다.

- 탑바와 모바일 메뉴의 비동기 영역은 첫 프레임부터 공간을 확보하고, 새로고침 중 본문 시작 위치가 변하지 않는지 확인합니다.
- 모바일 가로 스크롤 UI를 바꾸면 기기 폭, 문서의 clientWidth와 scrollWidth를 대조하고 내부 스크롤이 따로 동작하는지 확인합니다. innerWidth는 넘침에 따라 함께 커질 수 있습니다.

- 페이지 전환 중 탑바는 첫 프레임부터 표시합니다. 본문은 짧고 약하게 페이드하며, 모션 줄이기 설정에서는 페이드를 생략합니다.

- OG 카드는 흰색과 하늘색의 라이트 테마를 사용합니다. 홈은 파란 로고·MIRO·소개 문구를 가운데 배치합니다. 게시글은 왼쪽에 로고와 MIRO·제목·발행일, 오른쪽에 원래 비율의 썸네일을 배치합니다. 썸네일이 없으면 제목과 설명으로 공유합니다. 원고와 썸네일을 바탕으로 사이트 빌드에서 자동 생성하고 카드 내용이 바뀌면 이미지 URL도 갱신합니다.

## 근거가 된 작업

- [홈과 게시판의 지연 렌더링](reports/2026-11-09-result-20261109133936320-v1.0.0.html)
- [홈과 게시판의 공통 폭](reports/2026-11-09-result-20261109133032789-v1.0.0.html)
- [글 상세 공통 폭과 본문 여백](reports/2026-11-09-result-20261109150854869-v1.0.0.html)
- [한글 입력 중 검색 미리보기](reports/2026-11-09-result-20261109153129008-v1.0.0.html)