본문으로 건너뛰기
J
피드

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

frontend 약 3분
tags
#canvas#html#threejs#playcanvas
vote
0
댓글
북마크

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

  • 1

    HTML-in-Canvas 생태계 데모를 모아둔 큐레이션 자료

  • 2

    Wes Bos 등 서드파티 개발자가 만든 실험 데모 포함

  • 3

    Three.js와 PlayCanvas가 HTML 텍스처 관련 샘플을 제공

  • 크롬 랩스 쪽 저장소에 HTML-in-Canvas 데모 모음이 올라옴

    • 말 그대로 HTML UI를 캔버스나 3D 그래픽 환경 안에 넣어보는 실험들을 한곳에 모은 큐레이션임
    • 구글이 직접 만든 데모만 있는 건 아니고, 생태계 개발자들이 만든 서드파티 데모 링크도 같이 정리돼 있음

  • 데모 목록이 꽤 장난감 같으면서도 프론트엔드 관점에선 흥미로움

    • Wes Bos의 Duck Hunt 데모는 폼 자체를 슈팅 게임처럼 다루는 예제로 소개됨
    • Wobble Buttons는 물결 효과가 들어간 인터랙티브 버튼 데모임
    • Compiz Web은 셰이더 기반 웹 페이지 전환을 보여주는 실험이고, HTML cloth는 게임 안에서 천에 매달린 폼을 커스터마이즈하는 식의 데모임

  • 프레임워크 쪽 지원도 같이 언급됨

    • Three.js는 WebGL과 WebGPU 기반 3D 그래픽 라이브러리이고, HTMLTexture 샘플이 연결돼 있음
    • PlayCanvas도 html-texture 샘플을 제공하는 프레임워크로 정리돼 있음

  • 아직은 “당장 프로덕션에 넣자”보다 “이런 UI도 가능해지는구나”에 가까움

    • 특히 게임 UI, 3D 에디터, 인터랙티브 제품 데모처럼 DOM과 캔버스 경계가 자주 부딪히는 영역에서 참고할 만함
    • 저장소에서도 서드파티 데모는 구글이 만들거나 유지보수하는 게 아니라고 선을 긋고 있어서, 안정성보다는 아이디어 탐색용으로 보는 게 맞음

아직 제품 기능 발표라기보다는 실험실 느낌이 강하지만, 웹 UI와 3D 캔버스 경계가 점점 흐려지는 흐름을 보기엔 꽤 괜찮은 자료다. 게임 UI, 인터랙티브 랜딩, 3D 에디터 쪽 하는 프론트엔드 개발자라면 한 번 훑어볼 만함.

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