[canvas] Canvas 튜토리얼(1)_Canvas를 활용한 게임 개발과 보안 강화

현재 진행 중인 프로젝트에서 게임을 개발하는 새로운 경험을 하게 되었다.

그러나 게임 페이지는 웹에서도 접근 및 동작이 가능한 페이지이기에 해킹을 방지하고자 canvas로 작업하게 되었고 이번엔 작업하면서 알게 된 canvas의 특징에 대해 정리해보고자 한다.

---

1. HTML Canvas란?

HTML Canvas는 HTML5에서 도입된 그래픽을 그릴 수 있는 요소로, 자바스크립트를 사용해 픽셀 단위로 그래픽을 직접 조작할 수 있다.

<canvas> 요소는 벡터 기반이 아닌 비트맵 기반으로 동작하여, 정적인 이미지부터 복잡한 애니메이션, 게임, 데이터 시각화까지 다양한 콘텐츠를 구현할 수 있다.

 

(1) Canvas의 구조와 특징

Canvas는 HTML 코드에 삽입되며, 자바스크립트를 통해 다양한 그래픽 요소를 동적으로 생성한다.

캔버스 요소 자체는 단순한 사각형이지만, 내부의 픽셀을 직접 제어할 수 있다.

<canvas id="gameCanvas" width="800" height="600"></canvas>

 

위 코드는 800*600 크기의 캔버스를 생성하는 예시이다.

캔버스 자체는 기본적으로 투명한 사각형이며, 그 안에 자바스크립트를 통해 원하는 그래픽을 그리는 것이다.

 

2. Canvas의 동작 원리

Canvas는 DOM 요소이지만, 내부의 그래픽은 DOM 트리에 포함되지 않는다.

이를 통해 렌더링된 콘텐츠가 DOM 조작 도구나 개발자 도구로 쉽게 접근되지 않도록 하여 보안성을 높일 수 있다.

 

캔버스는 2D와 WebGL(3D) 렌더링 컨텍스트를 지원하며, 2D 컨텍스트에서는 기본 도형, 이미지, 텍스트 등을 그릴 수 있다.

렌더링 컨텍스트(Rendering Context)란?
HTML Canvas 요소에서 실제 그래픽을 그리는 데 사용되는 환경이다.
Canvas는 자체적으로는 단순한 빈 사각형일 뿐이며, 어떤 그래픽을 그릴지 정하기 위해서는 렌더링 컨텍스트를 설정해야 한다.

즉, 내가 canvas에 어떤 환경에서 그래픽을 그릴지 설정하는 부분으로, 크게 2D와 3D로 나뉜다.

 

(1) 렌더링 컨텍스트의 종류

• 2D Context: 기본 도형, 이미지, 텍스트 등 2D 그래픽 작업에 사용
• WebGL Context: 3D 그래픽 작업에 사용되며, 복잡한 렌더링과 게임 개발에 적합

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 사각형 그리기
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 200, 100);

// 원 그리기
ctx.beginPath();
ctx.arc(400, 300, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();

 

3. Canvas의 활용 사례

(1) 게임 개발

DOM 기반 요소들은 속도와 효율성에서 한계가 있지만, Canvas는 픽셀 단위로 직접 그리기 때문에 빠르고 복잡한 게임 로직 구현에 유리하다.

 

(2) 해킹 방지

Canvas는 DOM 요소가 아닌 픽셀로 렌더링되기 때문에, 게임 내 중요한 UI나 로직이 노출되지 않는다.

일반적인 HTML 요소는 개발자 도구에서 쉽게 접근할 수 있지만, Canvas에 그려진 요소들은 코드나 데이터로 직접 접근하기 어렵다.

 

(3) 데이터 시각화 및 애니메이션

고성능의 차트, 그래프, 실시간 데이터 시각화에 활용되며 애니메이션을 직접 구현할 수 있어 게임 외의 인터랙티브 콘텐츠 제작에도 적합하다.

 

4. Canvas의 고급 기능

(1) 고해상도 디스플레이 대응

고해상도 디스플레이에서는 픽셀이 더 촘촘하게 배치되어 저해상도 캔버스는 흐릿하게 보일 수 있다.

이를 해결하기 위해 window.devicePixelRatio 값을 이용해 캔버스의 해상도를 조정할 수 있다.

const scale = window.devicePixelRatio;  // 디바이스 픽셀 비율
canvas.width = 800 * scale;  // 물리적 해상도 증가
canvas.height = 600 * scale;
ctx.scale(scale, scale);  // 그래픽 크기 조정

 

• devicePixelRatio: 디바이스의 물리적 픽셀과 CSS 픽셀 비율로, 일반 디스플레이는 1, 고해상도는 2 이상이다.
• 해상도 조정: 캔버스의 실제 해상도를 scale 배수로 확대해 고해상도 디스플레이에서도 선명하게 보이도록 만든다.
• 스케일 조정: 확대된 캔버스를 실제 렌더링 시 ctx.scale()로 비율을 맞춰 크기를 보정한다.

 

 

(2) 복합 애니메이션 구현

Canvas에서는 requestAnimationFrame을 사용해 부드럽고 효율적인 애니메이션을 구현할 수 있다.

const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 이전 프레임 지우기
  ctx.fillStyle = 'orange';
  ctx.fillRect(Math.random() * 800, Math.random() * 600, 50, 50);  // 무작위 위치에 사각형 그리기
  requestAnimationFrame(draw);  // 다음 프레임 예약
}
draw();

 

• clearRect: 이전 프레임의 그림을 지워 캔버스의 화면을 리셋시켜준다.
• fillRect: 매 프레임마다 다른 위치에 사각형을 그려 사각형이 움직이는 것처럼 보이게 한다.
• requestAnimationFrame: 브라우저 최적화 애니메이션 실행 함수로, 초당 60프레임(60fps)으로 자연스럽게 반복 실행된다.

 

 

5. Canvas 활용 시 주의할 점

1. 성능 최적화: 매 프레임마다 전체를 다시 그려야 하기 때문에, 불필요한 연산을 줄이고 효율적인 렌더링 전략이 필요하다.
2. 반응형 디자인: 고해상도 디스플레이(예: 레티나 디스플레이)에서 깨지지 않도록 해상도 조정이 필요하다.
3. 접근성: 캔버스는 시각적인 요소만 제공하므로, 스크린 리더나 키보드 내비게이션에 취약하여 필요한 경우 대체 텍스트나 ARIA 속성을 추가해야 한다.

---

 

이렇게 간단하게 canvas의 기본에 대해 알아봤는데,

다음에는 canvas를 활용해 간단한 인터랙션 요소를 만드는 방법에 대해 알아보자.