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