본문으로 건너뛰기
J
피드

HTML <time> 엘리먼트, 페이지 8%에서 쓰이지만 사실 아무것도 안 한다

frontend 약 3분
tags
#html#semantic-html#accessibility#browser#web-standards
vote
0
댓글
북마크

HTML time 엘리먼트가 시맨틱 마크업으로 널리 쓰이지만, 실제로 브라우저나 보조 기술에서 활용하는 경우가 거의 없음. 구글도 Schema.org를 추천하고, time의 잠재력은 2010년 이후 이행되지 않은 약속으로 남아있음.

  • 1

    Chrome 기준 페이지 로드의 8%에서 time 엘리먼트 사용 중

  • 2

    브라우저가 time을 활용하는 기능은 사실상 없음 — 렌더링만 함

  • 3

    NVDA/Narrator만 타임스탬프를 읽어주지만 UX 개선 여부는 애매

  • 4

    Google은 time 대신 Schema.org의 datePublished/dateModified 추천

  • HTML의 <time> 엘리먼트, 다들 쓰긴 쓰는데 사실 아무것도 안 한다는 이야기
  • 흔한 패턴이 있음: "4시간 전 게시됨" 같은 상대 시간을 보여주면서, 호버하면 정확한 날짜를 툴팁으로 띄우는 거. <time datetime="...">4 hours ago</time> 이렇게 시맨틱하게 쓰면 브라우저가 알아서 뭔가 해줄 것 같은데... 안 해줌
  • Chrome 사용 통계 기준으로 <time>은 페이지 로드의 약 8%에서 사용되고 있는데, 실제로 이걸 활용하는 브라우저나 보조 기술이 거의 없음
  • 업데이트: NVDA와 Narrator 스크린 리더가 타임스탬프를 읽어주긴 하는데, 오히려 사람이 읽기 편한 "4시간 전"을 날짜로 바꿔서 읽어버리니 접근성 개선인지 애매함
  • <time>의 유일한 실용적 쓸모는 검색 엔진이 날짜 스니펫 추출하는 데 쓰는 것 정도인데, Google 공식 문서는 <time>을 언급도 안 하고 Schema.org의 datePublished/dateModified를 추천함
  • 2010년에 Bruce Lawson이 상상한 유스케이스가 지금 봐도 좋음: 브라우저가 이벤트를 캘린더에 추가해주거나, 태국 로컬 브라우저가 그레고리력을 불교력으로 변환하거나, 일본 브라우저가 "16:00"을 "16:00時"로 표시하는 것
  • 결론: 시맨틱 HTML의 이행되지 않은 약속 같은 존재. 그래도 글쓴이는 계속 쓸 거라고 함. Marge Simpson 말처럼 "그냥 멋있으니까(I just think it's neat)"

시맨틱 HTML의 이상과 브라우저 구현 현실의 간극을 보여주는 대표적 사례. 웹 표준이 정의만으로는 부족하고 벤더 구현이 따라와야 한다는 교훈.

prev

이전 기사 (P)

next

다음 기사 (N)

댓글

댓글

댓글을 불러오는 중...

관련 기사

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도 공개됐어.