HTML5 Canvas와 SVG를 활용한 그리드(Grid) 그리기 완벽 가이드

HTML5 Canvas로 그리드 그리기

웹 페이지에서 격자 형태의 그리드를 그려야 할 때 HTML5의 <canvas> 요소를 활용하면 간단하게 구현할 수 있습니다. 이 글에서는 그리드의 너비와 높이를 정의하고, 캔버스 크기를 설정한 뒤, 실제로 그리드를 캔버스에 그리는 전체 과정을 단계별로 살펴보겠습니다.

1단계: 그리드 및 캔버스 크기 정의

먼저 그리드의 너비와 높이를 설정하고, 그리드 주변에 여백(padding)을 지정합니다. 그런 다음 여백을 포함한 전체 크기로 캔버스를 생성합니다.

// 그리드의 너비와 높이 설정
var grid_w = 200;
var grid_h = 200;

// 그리드 주변 여백 설정
var gridp = 15;

// 너비와 높이를 지정하여 캔버스 크기 정의
var canvas_w = grid_w + (gridp*2) + 1;
var canvas_h = grid_h + (gridp*2) + 1;
var canvas = $('<canvas/>').attr({width: canvas_w, height: canvas_h}).appendTo('body');
var ctx = canvas.get(0).getContext("2d");

위 코드에서 gridp * 2를 더하는 이유는 그리드 양쪽(좌우, 상하) 모두에 여백을 확보하기 위함이며, 마지막 + 1은 선이 경계에서 잘리지 않도록 하는 여유 픽셀입니다.

2단계: drawBoard 함수 작성

그리드를 실제로 그리는 함수입니다. 반복문을 사용하여 일정한 간격(여기서는 50px)으로 세로 선을 그립니다.

function drawBoard(){
    for (var a = 0; a <= grid_w; a += 50) {
        ctx.moveTo(0.5 + a + gridp, gridp);
        ctx.lineTo(0.5 + a + gridp, grid_h + gridp);
    }
}

3단계: 가로선 추가하고 선 그리기

세로선과 같은 방식으로 가로선도 추가한 후, stroke() 메서드를 호출해야 실제로 화면에 선이 나타납니다.

function drawBoard(){
    // 세로선 그리기
    for (var a = 0; a <= grid_w; a += 50) {
        ctx.moveTo(0.5 + a + gridp, gridp);
        ctx.lineTo(0.5 + a + gridp, grid_h + gridp);
    }
    // 가로선 그리기
    for (var b = 0; b <= grid_h; b += 50) {
        ctx.moveTo(gridp, 0.5 + b + gridp);
        ctx.lineTo(grid_w + gridp, 0.5 + b + gridp);
    }
    // 선 색상 지정 후 그리기
    ctx.strokeStyle = "#000";
    ctx.stroke();
}
drawBoard();

SVG를 사용한 대안

Canvas 대신 SVG를 사용할 수도 있습니다. SVG는 벡터 기반이므로 확대해도 선이 깨지지 않고, DOM 요소로 다룰 수 있어 개별 셀에 이벤트를 연결하기에 유리합니다.

<svg width="230" height="230" xmlns="https://www.w3.org/2000/svg">
  <rect width="200" height="200" x="15" y="15" fill="none" stroke="#000"/>
  <line x1="65" y1="15" x2="65" y2="215" stroke="#000"/>
  <line x1="115" y1="15" x2="115" y2="215" stroke="#000"/>
  <line x1="165" y1="15" x2="165" y2="215" stroke="#000"/>
  <line x1="15" y1="65" x2="215" y2="65" stroke="#000"/>
  <line x1="15" y1="115" x2="215" y2="115" stroke="#000"/>
  <line x1="15" y1="165" x2="215" y2="165" stroke="#000"/>
</svg>

Canvas vs SVG, 무엇을 선택할까?

Canvas: 픽셀 기반으로 많은 도형을 빠르게 그릴 때 적합하며, 게임이나 애니메이션에 유리합니다.
SVG: 벡터 기반으로 확대·축소 시 품질이 유지되며, 각 요소를 개별적으로 조작하거나 CSS로 스타일링하기 좋습니다.

정적인 그리드나 상호작용이 필요한 UI라면 SVG를, 고성능 렌더링이 필요하다면 Canvas를 선택하는 것이 좋습니다.