본문으로 건너뛰기
피드

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

타입스크립트 7.0, Go 네이티브 포팅으로 빌드가 8~12배 빨라졌다

마이크로소프트가 타입스크립트 7.0을 출시하면서 기존 자바스크립트 기반 구현을 Go로 네이티브 포팅했다. 전체 빌드는 평균 8~12배 빨라졌고, VS코드 빌드는 125.7초에서 10.6초로 줄었으며, 슬랙은 CI 타입 검사 시간을 7.5분에서 1.25분으로 낮췄다.

frontend

타입스크립트 7 공개, 고 포팅으로 빌드가 최대 10배 이상 빨라짐

마이크로소프트가 고(Go)로 네이티브 포팅한 타입스크립트 7을 공개했다. 전체 빌드는 보통 8~12배 빨라지고, VS 코드 코드베이스에서는 125.7초가 10.6초로 줄었으며, 편집기 첫 오류 표시도 17.5초에서 1.3초 미만으로 내려갔다.

frontend

“98% 지원”이 생각보다 별로 안 넉넉한 이유

브라우저 기능 지원률 98%는 얼핏 높아 보이지만, 실제 서비스에서는 2%의 사용자를 깨진 화면 앞에 세우는 숫자일 수 있다는 글이다. 특히 일반 통계와 내 서비스 방문자 분포는 다를 수 있고, 실제 사례로 어떤 사이트는 최신 중첩 CSS 기능 지원 브라우저가 방문자의 약 70%뿐이었다.

frontend

메타, AI가 읽고 쓰는 디자인 시스템 ‘Astryx’ 오픈소스로 공개

메타가 내부 디자인 시스템 Astryx를 오픈소스로 공개했다. React와 StyleX 기반의 150개 이상 접근성 지원 컴포넌트, 디자인 토큰, 테마, 템플릿, CLI를 제공하며, 특히 AI 에이전트가 컴포넌트 구조를 이해하고 UI를 생성·수정할 수 있도록 MCP 서버까지 포함한 점이 핵심이다.

frontend

shadcn/ui, 기본 컴포넌트 라이브러리를 Radix에서 Base UI로 변경

shadcn/ui가 새 프로젝트의 기본 컴포넌트 라이브러리를 Radix가 아니라 Base UI로 바꿨어. Radix 지원은 계속되지만, Base UI가 안정화됐고 주간 다운로드 600만 이상, shadcn/create 신규 프로젝트 선택 비율 2대1이라는 이유로 기본값을 바꾼 거야. 동시에 채팅 UI용 MessageScroller와 관련 컴포넌트, headless 패키지인 @shadcn/react도 공개됐어.