- 블로그의 사용자 경험을 향상시키는 마이크로 기능들에 대한 소개
사이드노트
- 본문을 방해하지 않고 추가 정보를 제공하는 기능
- 독자가 추가적인 세부 사항이나 출처를 쉽게 확인할 수 있게 해줌
- Gwern의 사이드노트 사용이 특히 인상적임. 그의 글은 사이드노트를 매우 많이 사용하며, 주 내용의 흐름을 방해하지 않으면서 추가적인 정보를 제공함.
- 사이드노트를 사용하면, 주석을 페이지 하단으로 스크롤하지 않고도 쉽게 참조할 수 있음.
- Tufte CSS에서 영감을 받은 다양한 접근 방식을 볼 수 있음.
목차
- 목차는 글의 주요 주제를 한눈에 볼 수 있게 해주며, 원하는 부분으로 쉽게 이동할 수 있게 해줌.
- 정적 사이트 생성기(예: Hugo)는 목차를 자동으로 생성할 수 있음.
- Lars Hupel’s 사이트는 시리즈 내의 목차를 제공하여 탐색을 용이하게 함.
보너스: 페이지 진행 상황 표시
- 페이지 진행 상황 표시줄은 독자가 페이지 어디에 있는지를 시각적으로 보여줌.
- Quanta Magazine에서 이러한 기능을 볼 수 있음.
- CSS Tricks의 자습서를 통해 구현 방법을 배울 수 있음.
쉽게 링크 가능한 헤딩
- HTML 요소의 ID를 이용해 특정 페이지 섹션을 링크할 수 있음.
- 사용자에게는 보이지 않으므로, 각 요소를 링크로 만들어 쉽게 참조할 수 있게 함.
- Hugo 문서에서 이러한 기능을 볼 수 있음.
시리즈 게시물 그룹화
- 여러 주제에 대해 길게 쓰고 싶을 때 시리즈로 나눠 게시하면 독자에게 더 쉽게 전달할 수 있음.
- 자동으로 "다음", "이전" 버튼을 추가하거나 네비게이션 허브를 생성할 수 있음.
- Chapel 언어 블로그에서 이러한 기능을 볼 수 있음.
대화형 글
- 대화형식 글은 독자의 입장에서 질문을 던지고, 덜 경험 있는 관점에서의 우려를 표현함으로써 글을 더 재미있고 이해하기 쉽게 만듦.
- Xe Iaso’s 사이트와 Faster than Lime에서 대화형 글을 자주 사용함.
코드 블록의 출처 표시
- 코드를 작성할 때 코드 블록에 파일명과 줄 번호를 표시하여 독자가 더 쉽게 이해할 수 있게 함.
- 예: Crafting Interpreters
보너스: 클릭 가능한 링크가 포함된 코드 블록
- Agda 프로그래밍 언어는 HTML 코드 블록을 생성하여 각 기호를 정의된 곳으로 링크함.
- Programming Languages Foundations in Agda에서 이러한 기능을 볼 수 있음.
외부 링크 표시
- 외부 도메인으로 가는 링크를 작은 아이콘으로 표시함.
- James’ Coffee Blog ☕에서 이러한 기능을 볼 수 있음.
보너스: 다른 목적지에 대한 다른 마커
- Gwern’s 웹사이트는 링크의 목적지에 따라 아이콘을 변경함.
- 예: Wikipedia 링크에는 "W", Haskell.org 링크에는 람다 기호가 표시됨.
보너스: 링크 미리보기
- 링크를 마우스 오버할 때 페이지 미리보기를 표시함으로써 클릭하기 전에 내용을 미리 볼 수 있게 함.
- Gwern’s 웹사이트에서 이러한 기능을 볼 수 있음.
RSS 피드
- RSS는 사이트가 업데이트를 게시할 수 있게 해주는 피드 표준임.
- 독자들이 사이트를 직접 방문하지 않고도 업데이트를 받아볼 수 있게 해줌.
다른 사이트로의 링크
- 다른 블로그나 사이트의 게시물 링크를 포함하여 관련 콘텐츠를 홍보함.
- Drew DeVault’s 블로그에서 이러한 기능을 볼 수 있음.
결론
- 이러한 마이크로 기능들은 사이트를 더 유용하고 매력적으로 만들 수 있음
- 자신의 사이트에 이러한 기능들을 통합하는 것이 좋은 아이디어라고 생각함