Hacker News Flipboard: Split-Flap 디스플레이를 통한 상위 스토리 시각화

Hacker News Flipboard는 Hacker News의 상위 20개 스토리를 시뮬레이션된 split-flap 출발 안내판에 렌더링하는 디지털 시각화 도구입니다. 이 프로젝트는 표준 텍스트 기반의 메인 페이지를 기계식 스타일의 디스플레이로 변환하여, 개별 플랩 셀에 순위, 점수 및 제목을 표시합니다.

Quickish Cloud Functions를 통한 실시간 데이터 통합

이 보드는 Quickish Cloud Function을 통해 구동되며, 이 함수는 정해진 일정에 따라 Hacker News 메인 페이지를 가져와 모든 활성 보드에 데이터를 브로드캐스트합니다. 이러한 아키텍처는 개별 페이지 새로고침 없이도 서로 다른 클라이언트 간에 디스플레이가 동기화된 상태를 유지하도록 보장합니다.

디스플레이 레이아웃 및 시각적 로직

이 시각화 도구는 실제 기차역 안내판을 모방하기 위해 콘텐츠를 특정 구조적 레이아웃으로 구성합니다:

• Row Structure: 각 스토리는 RANK · POINTS · TITLE 형식을 따르는 행으로 표현됩니다.
• Color Coding: 순위는 Hacker News의 상징적인 주황색으로 표시되며, 점수 색상은 포인트 수에 따라 동적으로 변경됩니다.
• Content Trimming: 스토리 제목은 사용 가능한 플랩 셀에 맞게 자동으로 잘립니다.
• Pagination: 각 페이지는 빈 리드 행, 10개의 스토리, 스페이서 행, 그리고 작은 푸터로 구성됩니다.
• Header: 상단의 앰버 라인은 Hacker News의 현재 1위 스토리를 표시하는 데 사용됩니다.

대화형 컨트롤 및 사용자 정의

인터페이스는 사용자 상호작용 및 보드 관리를 위한 여러 도구를 제공합니다:

• Audio Feedback: 토글 버튼(♪)을 통해 플랩 전환 시 발생하는 기계식 클릭 소리를 활성화하거나 비활성화할 수 있습니다.
• Display Modes: 몰입형 시청을 위해 전체 화면 토글(⛶)을 사용할 수 있습니다.
• Board Settings: 설정 메뉴(⚙)를 통해 페이지 타이밍(페이지가 뒤집히기 전 표시되는 지속 시간)을 조정하고 보안 토큰을 관리할 수 있습니다.
• External Integration: 보드는 개인 토큰을 사용하여 클라우드 함수에 POST request를 보내는 외부 업데이트를 지원합니다. 이를 통해 스크립트, crons 또는 webhooks를 통해 헤드라인을 제어할 수 있습니다.
• Manual Overrides: 사용자는 어떤 행이든 클릭하여 라이브 데이터 피드 위에 사용자 정의 텍스트를 고정할 수 있습니다.

기술적 토대

Hacker News Flipboard는 원본 Quickish flipboard 프로젝트의 리믹스 버전이며, Quickish 플랫폼의 라이브 데이터 브로드캐스트 및 클라우드 기반 스케줄링 기능을 활용합니다.