긴 게시물과 첨부 파일 렌더링 테스트

첨부 이미지

본문 안에서 같은 게시물 폴더의 이미지를 import해서 렌더링한다. 넓어진 본문 폭에서도 이미지가 과하게 커지거나 흐름을 깨뜨리지 않아야 한다.

PDF는 같은 글 폴더의 files/ 아래에 둔다. 빌드 결과에서 링크가 정적 asset URL로 변환되어야 한다.

짧은 WAV 파일을 audio/ 아래에 두고, 브라우저 기본 오디오 컨트롤로 재생 가능한지 확인한다.

이 섹션은 실제 기술 글처럼 문단이 이어질 때 행 길이와 목차 위치가 안정적인지 보기 위한 텍스트다. 게시물 화면은 홈 대문 화면과 달리 장식보다 읽기 흐름이 중요하다. 그래서 본문 폭은 넓히되 한 줄이 지나치게 길어지지 않도록 제한을 둔다.

긴 글에서 중요한 점은 사용자가 현재 위치를 잃지 않는 것이다. 제목, 목차, 소제목, 문단 간격이 일정하면 내용이 길어져도 스크롤 부담이 줄어든다. 코드 블록과 첨부 자료가 섞일 때도 같은 원칙을 유지한다.

이미지, PDF, 오디오처럼 종류가 다른 첨부 파일은 글 폴더 안에 함께 둔다. 이렇게 하면 글을 이동하거나 삭제할 때 관련 파일을 같이 다룰 수 있고, 오래된 파일이 레포 어딘가에 남는 일을 줄일 수 있다.

작성자는 main.mdx를 중심으로 글을 편집하고, 필요한 자료를 images/, files/, audio/에 넣는다. 템플릿은 src/ 아래 Astro 파일이 담당하므로 콘텐츠 작성과 화면 구현의 경계가 분명해진다.

본문 폭을 넓힐 때는 데스크톱 화면만 보지 않고 노트북 화면도 함께 봐야 한다. 너무 좁으면 빈 공간이 많아 보이고, 너무 넓으면 한 줄을 읽는 데 시선 이동이 길어진다. 이번 테스트는 그 중간 지점을 찾기 위한 기준 글이다.

목차는 데스크톱에서는 오른쪽에 붙어 있고, 작은 화면에서는 본문 위로 자연스럽게 내려와야 한다. 이 동작은 긴 게시물에서 특히 중요하다. 목차가 본문을 밀어내거나 본문을 좁게 만들면 읽기 화면 전체가 어색해진다.

첨부 파일 링크는 본문 문맥 안에서 필요한 곳에만 둔다. 테스트 글에서는 파일 형식별 렌더링을 확인하기 위해 노출했지만, 실제 글에서는 독자가 다운로드하거나 재생해야 하는 이유가 분명해야 한다.

긴 글의 하단까지 스크롤했을 때도 문단 간격, 코드 스타일, 인라인 코드의 배경, 링크 스타일이 같은 리듬을 유지해야 한다. 작은 불일치가 반복되면 긴 글에서는 더 크게 보인다.

마지막 섹션은 페이지 하단 여백과 목차 sticky 상태를 보기 위한 구간이다. 본문이 길어져도 마지막 문단이 화면 아래에 붙지 않고 충분한 숨 쉴 공간을 가져야 한다.

이 글은 테스트용이지만 실제 게시물과 같은 content collection, 같은 route, 같은 layout을 사용한다. 따라서 빌드가 통과하면 실제 작성 흐름에서도 같은 방식으로 이미지, PDF, 오디오, 긴 본문을 다룰 수 있다.