왜 대형 IT 기업들은 HTML 대신 Canvas로 웹앱을 만들까?
You might want to build your WebApp in Canvas instead of HTML
Google Docs, Sheets, Excel 웹 버전, Miro, Canva 등 대형 IT 기업의 핵심 웹앱은 HTML 대신 Canvas 요소로 구축되었습니다. 이 글은 Hivekit의 스케줄러를 Canvas로 개발한 경험을 바탕으로, Canvas가 DOM보다 빠르고 제어가 쉬우며 일관된 렌더링을 제공하는 이유를 설명합니다. 또한 접근성, 입력 처리 등 DOM의 장점을 고려할 때 Canvas가 적합한 경우와 그렇지 않은 경우를 제시하고, Canvas 구현 시 유의할 점(렌더링 관리, 레이어링, 스타일 분리, 좌표 변환 함수, 히트 테스트 등)을 소개합니다.
Canvas가 단지 빠르다는 이유로 선택하지 마세요. 인터페이스가 더 이상 문서처럼 동작하지 않고 장면(scene)처럼 동작하기 시작할 때 선택하세요.
HN 토론
57- josephg
제발 이러지 마세요.
네이티브 컨트롤에는 수십에서 수백 가지의 미묘한 UI 상호작용이 있습니다. 텍스트 입력 요소를 생각해 보세요. macOS에는 텍스트 단축키가 있습니다 - cmd+A로 전체 선택, cmd+왼쪽/오른쪽으로 이전/다음 단어로 이동, Page Up/Page Down, Home/End, 맞춤법 검사. 약 10개 이상의 옵션이 있는 오른쪽 클릭 메뉴(OS 기반 텍스트 서비스 포함)도 있습니다. iOS나 Android에서 텍스트 입력 요소를 탭하면 시스템 설정에 구성된 네이티브 온스크린 키보드가 나타납니다. 주요 OS 버전마다 UI는 작고 미묘한 방식으로 변경됩니다.
이 기능을 웹 브라우저에서 다시 구현하는 것은 불가능합니다. 브라우저 API는 필요한 많은 키보드 단축키를 가로챌 수 없게 합니다. macOS 텍스트 서비스나 네이티브 iOS 키보드 UI에 접근할 수도 없습니다.
어떤 사람들은 브라우저에서 이 기능을 다시 구현하려고 시도하지만, 항상 사용하기 끔찍합니다. 거의 네이티브에 가깝지만 버벅거립니다. 제대로 보이는 것이 없습니다. 페이지에서 텍스트를 제대로 선택할 수 없습니다. 글꼴이 약간 잘못 렌더링됩니다. 작동하지 않는 키보드 단축키에 대한 근육 기억이 있습니다. 저는 그것이 싫습니다.
- dinkelberg
브라우저의 개발자 도구는 캔버스에 모든 것을 그릴 때 훨씬 쓸모없어집니다. 모든 사람이 캔버스에 그리는 프레임워크를 사용하기 시작하면 슬플 것입니다. Webassembly가 나왔을 때보다 더 슬프다고 할 수 있습니다. 아마도 그 프레임워크를 위한 새로운 개발자 도구를 작성할 수는 있을 것입니다.
또한 이것이 웹 접근성에 큰 퇴보가 될 것이라고 상상합니다.
- groomlake
저는 항상 Google, Microsoft 등의 회사가 웹 앱을 어떻게 만드는지 궁금합니다. 최고급 속도 머신부터 전선만 겨우 연결된 감자 같은 컴퓨터까지 모든 컴퓨터에서 잘 작동해야 하기 때문입니다.
제 경험상 Microsoft 웹앱(현재 많은 데스크톱 앱을 포함)은 상당히 느립니다. Copilot Chat 웹사이트조차도요. 채팅 상자와 세션 기록을 느리지 않게 만드는 것이 얼마나 어려울까요?
- efficax
물론 접근성에 대한 언급은 한 마디도 없네요. 시각 장애인이면 캔버스도 보이지 않습니다. 많은 작업 없이는요. DOM을 접근 가능하게 만드는 것이 훨씬 더 간단합니다.
- lisperforlife
저는 이것을 블루박스 문제라고 부릅니다. SAP에서 일할 때 블루박스 컨트롤이라는 것이 있었는데, C++/MFC 앱에 브라우저(shdocvw)를 내장하는 컨트롤이었습니다. 거의 모든 성가신 UI 버그가 그 컨트롤에서 발생했습니다. 지금은 반대 방향에서 같은 것을 봅니다. 5년마다 우리는 브라우저를 UI 표면을 렌더링하는 상자로 사용하는 분배 엔진으로 사용하는 밝은 아이디어를 떠올립니다. 이것은 역사적으로 결코 성공하지 못했습니다. applets, activex controls, flash, flex(역시 플래시), silverlight, flutter ... 그리고 이제 이것까지 언급하고 싶습니다. 문제는 개발자 도구, 화면 판독기, 브라우저 확장 프로그램 및 고려하기 어려운 기타 모든 작은 것들입니다.