▲

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

(danilafe.com)
33P by neo 10일전 | favorite | 댓글 2개
  • 블로그의 사용자 경험을 향상시키는 마이크로 기능들에 대한 소개

사이드노트

  • 본문을 방해하지 않고 추가 정보를 제공하는 기능
  • 독자가 추가적인 세부 사항이나 출처를 쉽게 확인할 수 있게 해줌
  • Gwern의 사이드노트 사용이 특히 인상적임. 그의 글은 사이드노트를 매우 많이 사용하며, 주 내용의 흐름을 방해하지 않으면서 추가적인 정보를 제공함.
  • 사이드노트를 사용하면, 주석을 페이지 하단으로 스크롤하지 않고도 쉽게 참조할 수 있음.
  • Tufte CSS에서 영감을 받은 다양한 접근 방식을 볼 수 있음.

목차

  • 목차는 글의 주요 주제를 한눈에 볼 수 있게 해주며, 원하는 부분으로 쉽게 이동할 수 있게 해줌.
  • 정적 사이트 생성기(예: Hugo)는 목차를 자동으로 생성할 수 있음.
  • Lars Hupel’s 사이트는 시리즈 내의 목차를 제공하여 탐색을 용이하게 함.
보너스: 페이지 진행 상황 표시
  • 페이지 진행 상황 표시줄은 독자가 페이지 어디에 있는지를 시각적으로 보여줌.
  • Quanta Magazine에서 이러한 기능을 볼 수 있음.
  • CSS Tricks의 자습서를 통해 구현 방법을 배울 수 있음.

쉽게 링크 가능한 헤딩

  • HTML 요소의 ID를 이용해 특정 페이지 섹션을 링크할 수 있음.
  • 사용자에게는 보이지 않으므로, 각 요소를 링크로 만들어 쉽게 참조할 수 있게 함.
  • Hugo 문서에서 이러한 기능을 볼 수 있음.

시리즈 게시물 그룹화

  • 여러 주제에 대해 길게 쓰고 싶을 때 시리즈로 나눠 게시하면 독자에게 더 쉽게 전달할 수 있음.
  • 자동으로 "다음", "이전" 버튼을 추가하거나 네비게이션 허브를 생성할 수 있음.
  • Chapel 언어 블로그에서 이러한 기능을 볼 수 있음.

대화형 글

  • 대화형식 글은 독자의 입장에서 질문을 던지고, 덜 경험 있는 관점에서의 우려를 표현함으로써 글을 더 재미있고 이해하기 쉽게 만듦.
  • Xe Iaso’s 사이트와 Faster than Lime에서 대화형 글을 자주 사용함.

코드 블록의 출처 표시

  • 코드를 작성할 때 코드 블록에 파일명과 줄 번호를 표시하여 독자가 더 쉽게 이해할 수 있게 함.
  • 예: Crafting Interpreters
보너스: 클릭 가능한 링크가 포함된 코드 블록

외부 링크 표시

  • 외부 도메인으로 가는 링크를 작은 아이콘으로 표시함.
  • James’ Coffee Blog ☕에서 이러한 기능을 볼 수 있음.
보너스: 다른 목적지에 대한 다른 마커
  • Gwern’s 웹사이트는 링크의 목적지에 따라 아이콘을 변경함.
  • 예: Wikipedia 링크에는 "W", Haskell.org 링크에는 람다 기호가 표시됨.
보너스: 링크 미리보기
  • 링크를 마우스 오버할 때 페이지 미리보기를 표시함으로써 클릭하기 전에 내용을 미리 볼 수 있게 함.
  • Gwern’s 웹사이트에서 이러한 기능을 볼 수 있음.

RSS 피드

  • RSS는 사이트가 업데이트를 게시할 수 있게 해주는 피드 표준임.
  • 독자들이 사이트를 직접 방문하지 않고도 업데이트를 받아볼 수 있게 해줌.

다른 사이트로의 링크

  • 다른 블로그나 사이트의 게시물 링크를 포함하여 관련 콘텐츠를 홍보함.
  • Drew DeVault’s 블로그에서 이러한 기능을 볼 수 있음.

결론

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

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

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