본문으로 건너뛰기
피드

HN이 뽑은 가장 아름다운 개인 블로그 UI 모음

frontend 약 5분
vote
0
댓글
북마크

HN 커뮤니티가 공유한 아름다운 개인 블로그 디자인 모음. S-TIER 인터랙티브 사이트부터 미니멀, 맥시멀, 타이포그래피 중심까지 스타일별로 분류됨.

  • 1

    S-TIER: ciechanow.ski, lumafield 등 인터랙티브 시각화 블로그

  • 2

    스타일별 분류: tasteful, artsy, simple, maximalist, old-school, ASCII, typography

  • 3

    블로그 발견 도구: indieblog.page, personalsit.es 등

  • 4

    디자인 핵심: 비례 스케일, 왼쪽 정렬, 고유한 비주얼 아이덴티티

S-TIER: 인터랙티브하고 시각적으로 압도적인 블로그

  • growingswe.com/blog - 애니메이션과 인터랙션이 인상적이지만, 서브페이지 진입에 3번 클릭이 필요하고 로딩 표시가 없다는 지적도 있었음
  • ciechanow.ski - 인터랙티브 시각화로 유명한 블로그. 이미 널리 알려진 사이트임
  • mlu-explain.github.io - ML 개념을 시각적으로 설명하는 사이트. 밑줄 친 헤더가 링크가 아니라는 UX 이슈가 지적됨
  • seeing-theory.brown.edu - 확률/통계 시각화 교육 사이트. 스크롤과 뒤로가기 버튼을 하이재킹한다는 비판이 있음
  • svg-tutorial.com - SVG 튜토리얼
  • lumafield.com Scan of the Month - CT 스캔 기반 제품 분석. 예외적으로 뛰어남

스타일별 분류

블로그 발견 도구

  • indieblog.page/random - 랜덤으로 개인 블로그를 탐색할 수 있음. 프론트엔드/디자인 엔지니어 블로그가 대체로 예쁨
  • internetphonebook.net - 개인 사이트 디렉토리
  • personalsit.es - 스크린샷으로 개인 사이트를 브라우징할 수 있음

디자인 조언

  • 모든 마진과 여백에 의도를 담고, utopia.fyi 같은 비례 스케일을 사용하면 훨씬 보기 좋아짐
  • 중앙 정렬보다 왼쪽 정렬이 대부분의 경우 더 나은 선택임 (모바일 네비게이션, 긴 캡션 등)
  • 가장 아름다운 사이트들은 결국 고유한 테마나 비주얼 아이덴티티를 갖고 있었음. 하지만 콘텐츠가 좋으면 기본적인 가독성 높은 사이트도 충분히 사랑받음

결국 가장 아름다운 블로그는 고유한 테마와 비주얼 아이덴티티를 가진 사이트였지만, 콘텐츠가 좋으면 기본적인 디자인도 충분히 통한다는 것이 커뮤니티의 공통 의견임.

댓글

댓글

댓글을 불러오는 중...

frontend

요즘 픽셀 폰트가 그냥 복고 감성이 아닌 이유

1990년대 기기 화면 느낌을 현대 폰트 시스템으로 재해석한 픽셀 폰트 몇 가지를 소개한 글이다. 핵심은 예쁜 복고풍 글자 모양만이 아니라, 실제 제품에서 쓸 수 있게 기준선, 자간, 메타데이터, 세로 메트릭까지 챙기는지가 중요하다는 점이다.

frontend

HTML의 `<dl>`이 생각보다 쓸모 많은 이유

이 글은 HTML의 description list, 즉 `<dl>`, `<dt>`, `<dd>`가 단순 용어 사전용 태그가 아니라 이름-값 쌍 UI를 표현하는 꽤 강력한 시맨틱 도구라고 설명한다. 숙소 편의시설, 요금 내역, 기술 용어 설명, 게임 능력치표처럼 흔한 패턴을 중첩 `<div>` 대신 의미 있는 HTML로 만들 수 있다는 얘기다.

frontend

HTML을 캔버스 안에 넣는 데모 모음이 등장함

구글 크롬 랩스 저장소에 HTML-in-Canvas 관련 데모와 프레임워크 지원 목록이 정리됐다. Duck Hunt 스타일 폼, 흔들리는 버튼, 셰이더 기반 페이지 전환, 천처럼 매달린 폼 같은 실험적 예제가 포함돼 있고 Three.js와 PlayCanvas 쪽 샘플도 연결돼 있다.

frontend

싱글 페이지 앱이 웹을 너무 비싸게 만들었다는 불평

이 글은 싱글 페이지 앱(SPA)이 사용자 경험을 좋게 만든다는 명분 아래 웹의 초기 로딩 비용, 도구 복잡도, 개발 진입 장벽을 키웠다고 비판한다. 페이스북 로그인 페이지의 CSS 3.8MB, 레딧 몇 개 클릭 후 33MB 다운로드 같은 숫자를 들며, 지금의 프론트엔드 생태계가 사람보다 대기업의 요구에 맞춰져 있다고 주장한다.

frontend

네이티브로 끝까지 가려다 텍스트에서 막힌 macOS 개발자의 고백

20년 가까이 macOS와 iOS 네이티브 개발을 해온 작성자가 SwiftUI, AppKit, TextKit 2로 마크다운 채팅 UI를 만들다 결국 WebKit과 Electron 쪽이 훨씬 낫다는 결론에 도달한 글이다. 문제는 성능 하나가 아니라 선택, 스트리밍, 스크롤, 접근성, 텍스트 상호작용 같은 ‘사용자가 당연히 기대하는 기본기’가 네이티브 조합에서 계속 깨진다는 점이다.