블로그/개인 웹사이트에서 좋아하는 마이크로 기능들

• 블로그의 사용자 경험을 향상시키는 마이크로 기능들에 대한 소개

사이드노트

• 본문을 방해하지 않고 추가 정보를 제공하는 기능
• 독자가 추가적인 세부 사항이나 출처를 쉽게 확인할 수 있게 해줌
• 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 블로그에서 이러한 기능을 볼 수 있음.

결론

• 이러한 마이크로 기능들은 사이트를 더 유용하고 매력적으로 만들 수 있음
• 자신의 사이트에 이러한 기능들을 통합하는 것이 좋은 아이디어라고 생각함

[tsboard]

마침 저만의 블로그를 만들고 있었는데 이런 유용한 뉴스라니 감사합니다 ㅎㅎ

[GN⁺]

Hacker News 의견

• 몇몇 제안들은 좋지만, 진행 바(progress bar)는 너무 산만하고 불필요함. 이미 스크롤 바가 있으므로 추가적인 스크롤 바는 필요하지 않음.
• 링크 장식은 필요하지 않음. 브라우저가 이미 링크 위치를 잘 표시해주고 있음. 미리보기 팝업도 불필요한 방해 요소임.
• 블로그에 모든 게시물의 단일 페이지 인덱스를 구현하는 것이 좋음. 제목을 한눈에 볼 수 있고, 검색도 용이함.
• 블로깅 주제가 해커뉴스에 올라와서 기쁨. 자신이 개발 중인 블로깅 서비스는 미니멀리즘에 초점을 맞추고 있음. ASCII 아트가 안드로이드에서 제대로 표시되지 않는 문제를 해결하고 싶음.
• 여러 "마이크로 기능"이 마음에 듦. 자바스크립트를 요구하지 않는 기능을 선호함. 블로그에 다양한 마이크로 기능을 구현하고 있음.
• 게시물에 전체 날짜를 포함하는 것을 선호함. 기술 콘텐츠의 경우 작성 시점을 아는 것이 중요함.
• 다이얼로그 형식의 설명을 좋아하지 않음. 별도의 문단으로 설명하는 것이 더 나음.
• 링크 미리보기 기능에 동의하지 않음. 프라이버시 문제로 인해 링크를 클릭하기 전에 URL을 확인하는 것을 선호함.
• RSS는 '마이크로' 기능이 아니라 핵심 기능이어야 함.
• Gwern의 웹사이트는 너무 많은 기능을 시도해서 브라우저가 느려짐. 특히 모바일에서 문제가 심각함.
• 목차 기능은 웹 브라우저에서 구현되어야 함. 페이지 진행, 링크 가능한 제목, 링크 미리보기 등도 브라우저에서 처리해야 함. 문서 작성자는 폰트와 색상을 지정할 필요가 없음.