글과 프로젝트를 어두운 편집 디자인으로 정리하는 개인 사이트 구조
글쓰기, 프로젝트 소개, 읽을거리 목록을 어두운 배경의 깔끔한 편집 디자인으로 한곳에 모으고 싶다면 이 저장소가 좋은 출발점입니다. 이 프로젝트는 Next.js 기반의 개인 웹사이트로, 글과 디자인 요소를 일관된 톤으로 정리해 줍니다. 방문자가 글을 읽거나 프로젝트를 볼 때 불필요한 요소 없이 핵심 내용에만 집중할 수 있는 환경을 만듭니다.
편집 디자인과 자동 표지
이 사이트는 어두운 배경에 얇은 선과 모노스페이스 폰트를 조합한 편집적인 분위기를 지닙니다. 글 제목을 기반으로 컨투어 마크가 자동으로 생성되어 표지 이미지를 따로 만들 필요가 없습니다. 로고와 파비콘도 동일한 컨투어 아이덴티티 마크를 사용해 시각적 일관성을 유지합니다. 글 목록에는 왼쪽에 목차가 표시되고, 각 글마다 별도의 디자인 요소가 적용되어 읽는 흐름을 돕습니다.
MDX 글쓰기와 디자인 시스템
글은 MDX 형식으로 작성하며, 코드 블록과 강조 요소를 쉽게 사용할 수 있습니다. 디자인은 Tailwind CSS의 토큰 계층으로 관리되어 색상과 간격을 일관되게 적용합니다. 재사용 가능한 디자인 시스템 원시 요소와 도메인 블록이 분리되어 있어 새로운 요소를 추가하거나 기존 요소를 수정하기 쉽습니다. 글자체는 읽기에는 Geist Sans, 코드에는 Geist Mono를 사용해 가독성을 높였습니다.
로컬 실행과 관리 명령
로컬에서 실행하려면 Node.js 20 이상과 Bun이 필요합니다. 환경 변수 설정은 필요하지 않습니다. bun install로 의존성을 설치하고 bun dev로 개발 서버를 시작합니다. 프로덕션 빌드는 bun run build로, 코드 품질 검사는 bun run check로 수행합니다. Biome을 사용해 린팅과 포맷팅을 자동화하여 코드 스타일을 유지합니다.
라이선스와 콘텐츠 구분
이 저장소는 코드에 대해 MIT 라이선스를 적용하지만, 블로그 콘텐츠와 이미지는 모든 권리를 보유합니다. 따라서 코드를 재사용하되 콘텐츠는 그대로 가져다 쓰지 않도록 주의해야 합니다. 특정 프로젝트 카드 마크나 애니메이션 요소는 외부 프로젝트의 아이덴티티를 따르거나 영감을 받은 것으로, 원본 프로젝트의 라이선스 조건을 확인하는 것이 좋습니다. Reduced motion 설정을 지원하여 접근성을 고려하고 있으며, 애니메이션 루프의 연속성을 확인하는 스크립트도 포함되어 있습니다.