같은 뉴스, 다른 지면
해커뉴스(Hacker News)를 매일 보는 분이라면 그 화면이 눈에 선하실 거예요. 오렌지색 상단 바, 회색 작은 글씨, 번호가 매겨진 링크 30개. 15년 넘게 거의 바뀌지 않은 아주 미니멀한 디자인이죠. 빠르게 훑어보기엔 최고지만, 솔직히 '읽는 맛'이 있는 화면은 아니에요.
Hacker Times는 이 해커뉴스 콘텐츠를 뉴욕타임스 같은 신문 지면 스타일로 다시 편집해서 보여주는 사이드 프로젝트예요. 뉴욕타임스 스타일이라고 하면 떠오르는 것들이 있잖아요. 고풍스러운 블랙레터 제호, 큼직한 세리프 헤드라인, 여러 단으로 나뉜 칼럼, 그리고 중요한 기사일수록 크게 배치하는 1면 편집 같은 것들이요. 이런 신문 지면의 문법을 개발자 뉴스에 입힌 거예요. 데이터는 그대로고 담는 그릇만 바꿨는데도 완전히 다른 경험이 된다는 게 이 프로젝트의 재미 포인트예요.
어떻게 만들 수 있을까
이런 서비스는 생각보다 만들기 쉬워요. 해커뉴스가 공식 API를 공개하고 있거든요.
- 공식 API(Firebase 기반):
/v0/topstories.json을 호출하면 지금 1면에 있는 글의 ID 목록을 받을 수 있어요. 그다음/v0/item/{id}.json으로 글마다 제목, 점수, 작성자, 링크를 가져오면 돼요. 인증도 필요 없어요. - Algolia HN Search API: 키워드로 검색하거나 기간별로 조회해야 한다면 이쪽이 더 편해요.
- 비용 0원으로 시작하기: GitHub Actions의 스케줄 실행으로 하루 한두 번 API를 호출해서 정적 HTML을 만들고, GitHub Pages나 Cloudflare Pages에 올리면 서버 없이도 운영할 수 있어요.
- 한국어 버전으로 응용하기: GeekNews 같은 국내 커뮤니티 콘텐츠나 여러 기술 블로그의 RSS를 모아 '한국 개발자 조간신문'을 만들어봐도 재밌을 거예요. 다만 공식 API가 없는 사이트를 긁어올 때는 이용약관과 서버 부하를 꼭 신경 써야 해요.
- 한글 타이포그래피 연습하기: Noto Serif KR 같은 명조 계열 웹폰트로 신문 지면을 만들어보면, 한글 세리프 조판이 영문과 얼마나 다른지 직접 체감할 수 있어요.
다만 공식 API에는 함정이 하나 있어요. 목록 API가 ID만 돌려주기 때문에 글 30개를 보여주려면 요청을 30번 더 보내야 하거든요. 이걸 흔히 N+1 문제라고 불러요. 쉽게 말해 '목록 1번 + 항목 N번'만큼 요청이 늘어나는 거예요. 그래서 보통은 서버에서 한꺼번에 받아 캐싱해 두고, 사용자에게는 완성된 페이지만 보내주는 구조로 만들어요.
신문처럼 보이게 하는 핵심은 레이아웃 알고리즘이에요. 점수, 댓글 수, 올라온 시간을 조합해서 어떤 글을 1면 톱에 올리고 어떤 글을 옆 칼럼에 작게 넣을지 정해야 하거든요. 여기에 링크된 페이지의 대표 이미지(og:image 메타 태그)를 가져오거나 LLM으로 짧은 리드 문단을 만들어 붙이면, 진짜 신문 기사 같은 느낌이 나요.
타이포그래피도 중요해요. 뉴욕타임스 전용 서체는 라이선스 문제로 그대로 쓸 수 없지만, Playfair Display나 Libre Baskerville 같은 무료 세리프 웹폰트에 제호용 블랙레터 폰트를 더하면 꽤 비슷한 분위기를 낼 수 있어요. 신문 특유의 다단 레이아웃도 CSS Grid와 column-count 속성으로 어렵지 않게 만들 수 있고요.
해커뉴스 '대체 프론트엔드'라는 작은 생태계
해커뉴스 화면을 새로 만드는 프로젝트는 사실 꽤 많아요. 인기 글만 하루 단위로 정리해주는 사이트도 있고, 원하는 조건으로 RSS 피드를 만들어주는 hnrss.org, 안드로이드용 Harmonic 같은 모바일 클라이언트도 있죠. 대부분은 더 빠르고 편하게 보는 데 초점을 맞춰요.
Hacker Times가 흥미로운 건 방향이 반대라는 점이에요. 신문은 원래 '하루 한 번 완결되는 편집본'이잖아요. 끝없이 새로고침되는 피드와 달리 다 읽으면 끝이 나는 경험이죠. 무한 스크롤에 지친 사람들이 뉴스레터나 하루 한 번 오는 요약 서비스를 찾는 요즘 흐름과도 맞닿아 있어요. 기능을 더하는 대신 읽는 경험 자체를 새로 디자인했다는 데 의미가 있는 거예요.
한국 개발자에게 주는 힌트
사이드 프로젝트 아이디어를 찾는 분이라면 좋은 참고 사례예요. 공개 API라는 재료에 디자인이라는 해석만 더해도 완성도 있는 결과물을 만들 수 있다는 걸 보여주거든요.
마무리
한 줄로 정리하면, 같은 데이터라도 어떤 그릇에 담느냐에 따라 완전히 다른 제품이 된다는 걸 보여주는 작지만 매력적인 프로젝트예요.
여러분은 개발 뉴스를 주로 어떻게 보세요? 끝없이 흘러가는 피드가 편한가요, 아니면 하루 한 번 '마감된' 지면 같은 경험이 더 끌리시나요?
🔗 출처: Hacker News