3 min to read
Three.js로 3D 플랫폼 개발 [Dom/SVG/Canvas]
3D 플랫폼 개발에 앞서, 기본 배경 지식 정리
How GPT tell Us?
DOM, SVG, Canvas 비교
1. DOM (Document Object Model)
렌더링 방식
- HTML 요소 기반 렌더링.
- DOM 트리 구조로 구성되어 각 요소를 개별적으로 관리.
- CSS와 JavaScript를 통해 스타일링 및 동적 조작 가능.
특징
- 텍스트 및 기본적인 인터페이스 요소를 쉽게 표현.
- 이벤트 처리와 상호작용이 간단.
- 복잡한 그래픽 작업에는 적합하지 않음.
장점/단점
장점
- 접근성이 뛰어남 (스크린 리더 등과 연동 가능).
- SEO(검색 엔진 최적화)에 유리.
단점
- DOM 업데이트가 많아지면 성능 저하.
2. SVG (Scalable Vector Graphics)
렌더링 방식
- 벡터 기반 그래픽으로 XML 문법 사용.
- 브라우저에서 DOM의 일부로 처리되며, 각 요소가 독립적으로 렌더링.
특징
- 선, 도형, 텍스트 등 벡터 그래픽에 적합.
- 해상도 독립적: 확대/축소해도 품질 유지.
- CSS와 JavaScript로 스타일링 및 애니메이션 가능.
장점/단점
장점
- 정적 그래픽 및 간단한 애니메이션에 적합.
- 개별 요소에 대한 상호작용(클릭, 드래그 등)이 용이.
단점
- 많은 요소를 렌더링할 경우 성능 저하.
- 픽셀 기반 그래픽에는 적합하지 않음.
3. Canvas
렌더링 방식
- 비트맵 기반 그래픽으로 JavaScript를 통해 픽셀 단위 렌더링.
- 상태를 유지하지 않는 방식(stateless).
특징
- 동적 그래픽(게임, 시뮬레이션 등)에 적합.
- 2D 및 3D 그래픽 구현 가능(Three.js와 같은 라이브러리 사용).
장점/단점
장점
- 복잡한 그래픽 처리와 빠른 렌더링에 적합.
- 비트맵 기반으로 고급 그래픽 효과 구현 가능.
단점
- 해상도 의존적: 확대/축소 시 품질 저하.
- 개별 요소에 대한 상호작용 구현이 복잡.
주요 비교 요약
| 특징 | DOM | SVG | Canvas |
|---|---|---|---|
| 그래픽 유형 | 텍스트 및 UI 요소 | 벡터 그래픽 | 비트맵 그래픽 |
| 해상도 독립성 | 해상도에 의존적 | 해상도 독립적 | 해상도에 의존적 |
| 상호작용 | 용이 | 개별 요소와 용이 | 복잡한 추가 작업 필요 |
| 성능 | DOM 업데이트가 많으면 느림 | 요소가 많으면 느려질 수 있음 | 복잡한 그래픽에 최적화 |
| 사용 사례 | 일반 웹 페이지 | 데이터 시각화, 아이콘 | 게임, 애니메이션, 동적 그래픽 |
Beyond GPT
Ctrl + F (브라우저 Find 기능)
- Html을 바탕으로 한 계층구조는, 요소들을 분리해서 이벤트를 선택할 수 있도록 한다.
- Canvas의 경우 Canvas 자체만 Html을 선택하고, 그 안의 내용들은 JS를 사용하기 때문에, HTML이나 DOM요소를 검색하는 브라우저의 find기능은 지원되지 않는다.
웹표준, 웹접근성
- 마찬가지로, DOM과 SVG는 HTML을 사용하기 때문에, 다양한 환경에서 일관되게 동작하고, 모든 사용자가 장애 유무에 관계없이 접근할 수 있도록 하는 중요한 원칙인 웹표준과 웹 접근성을 따라간다.
- 브라우저 간 호환성
- 반응형 디자인
- 미디어 및 그래픽 표준
- 대체 텍스트 (Alt Text)
- 스크린 리더 호환성
- 확대/축소 지원
- 반면, Canvas의 경우 그렇지 않기 때문에 위 내용들이 지원되기 어렵다.
SEO 검색 최적화
- SEO의 경우 홈페이지들의 DOM요소들을 이용해 검색엔진을 최적화하는 걸 의미하는데, Canvas의 경우 DOM요소를 이용한 구조가 아니기 때문에 취약할 수 밖에 없다.
파트 선택에서의 차이점
1. DOM 구성
위 그림에서와 같이 정확한 별을 그린다기 보다는, 네모난 영역의 Div를 CSS로 별의 영역만을 그린다고 생각하면 되겠다.
그래서 별을 선택하는 Onclick 이벤트가 있다고 생각해보면, 별 밖이더라도 해당 Div를 선택하면 Onclick 이벤트가 실행되는 걸 볼 수 있다.
2. SVG 구성
물론 SVG에서도 구역으로 본다면, 네모난 구역을 볼 수 있지만 HTML코드를 통해 각 지점이 정해져있음을 알 수 있다.
<polygon points="250,160 190,330 340,210 160,210 310,330" fill="green" onclick="clickSvg()"></polygon>
Point들로 이루어져 있기 때문에, 정확한 “별”의 영역을 그려낸다. → 그래서 DATA Visualization에 많이 쓰이기도 한다. + Scalable
1. DOM 프레임워크
Dom의 경우는 jQuery로 시작했지만, 이제는 React가 대세일 수 밖에 없는 시대이다.
2. SVG 프레임워크
D3.js로 차트나 데이터 비주얼라이제이션을 많이 하는거로 보인다. 리액트에서 호환성있게 사용하기 위해서 ReactD3가 또 있다고 함.
3. Canvas 프레임워크
- 2D Canvas의 경우 물리 엔진을 이용하여 pixi.js가 있는 것으로 알려졌고,
- 3D Canvas의 경우 우리가 WebGL이라고 부르며, 가장 대표적으로 앞으로 공부할 Three.js가 있다. 이 또한 react에서 쓰기 편하도록 React Three.js Fiber라는 것이 있다고 한다.
사용 사례 추천
- DOM: 기본적인 웹 콘텐츠(텍스트, 버튼, 링크 등).
- SVG: 데이터 시각화(차트, 그래프), 로고, 아이콘 등.
- Canvas: 게임 개발, 이미지 편집 도구, 실시간 그래픽 애니메이션.
Comments