타입스크립트로 캔버스 그래픽 구현하기 🎨✨

안녕하세요, 여러분! 오늘은 정말 흥미진진한 주제로 여러분과 함께 시간을 보내려고 해요. 바로 타입스크립트를 사용해 캔버스 그래픽을 구현하는 방법에 대해 알아볼 거예요. 🚀 이 여정을 통해 우리는 코드의 세계와 시각적 예술의 세계를 멋지게 융합해볼 거예요!

여러분, 혹시 프로그래밍을 하면서 "내가 만든 코드로 그림을 그릴 수 있다면 얼마나 멋질까?"라고 생각해본 적 있나요? 오늘 우리는 그 꿈을 현실로 만들어볼 거예요. 마치 화가가 붓을 들고 캔버스 앞에 서는 것처럼, 우리는 키보드를 들고 타입스크립트의 세계로 뛰어들 준비가 되었나요? 😊

이 글을 통해 여러분은 단순히 기술을 배우는 것을 넘어서, 창의성을 마음껏 발휘할 수 있는 새로운 도구를 손에 쥐게 될 거예요. 마치 재능넷에서 다양한 재능을 발견하고 공유하는 것처럼, 우리도 오늘 타입스크립트와 캔버스라는 재능을 발견하고 함께 나눠볼까요?

자, 이제 우리의 모험을 시작해볼까요? 안전벨트를 매시고, 창의력 엔진을 가동시켜주세요. 타입스크립트와 캔버스의 마법같은 세계로 여러분을 초대합니다! 🌈🖌️

1. 타입스크립트와 캔버스: 완벽한 콤비 🤝

자, 여러분! 타입스크립트와 캔버스가 무엇인지 간단히 알아볼까요? 이 두 가지는 마치 피자와 치즈처럼 찰떡궁합이랍니다! 😋

타입스크립트 (TypeScript): 자바스크립트의 슈퍼셋 언어로, 정적 타입을 지원해요. 마치 우리가 옷을 고를 때 사이즈를 확인하는 것처럼, 코드의 타입을 미리 체크해서 오류를 줄여줍니다.

캔버스 (Canvas): HTML5의 강력한 기능 중 하나로, 웹 페이지에 그래픽을 그릴 수 있게 해주는 요소예요. 마치 디지털 스케치북이라고 생각하면 됩니다!

이 두 가지를 합치면 어떤 일이 일어날까요? 바로 타입 안정성과 그래픽 표현의 자유로움이 만나는 마법 같은 순간이 탄생합니다! 🎭✨

타입스크립트를 사용하면 우리는 더 안전하고 예측 가능한 코드를 작성할 수 있어요. 그리고 이 코드로 캔버스에 그림을 그리면? 와우! 상상력의 한계는 없어집니다. 마치 재능넷에서 다양한 재능이 만나 시너지를 내는 것처럼 말이죠.

예를 들어볼까요? 타입스크립트로 간단한 원을 그리는 코드를 한번 살펴봐요:


const canvas: HTMLCanvasElement = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx: CanvasRenderingContext2D = canvas.getContext('2d')!;

function drawCircle(x: number, y: number, radius: number, color: string): void {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
}

drawCircle(100, 100, 50, 'red');

이 코드에서 우리는 타입스크립트의 힘을 빌려 각 변수와 함수의 타입을 명확히 지정했어요. 덕분에 실수로 잘못된 타입의 값을 넣는 실수를 미리 방지할 수 있죠. 그리고 캔버스의 마법으로 화면에 빨간 원이 그려집니다! 🔴

이제 우리는 코드의 안정성과 그래픽의 아름다움을 동시에 얻을 수 있게 되었어요. 마치 과학자와 예술가가 손을 잡은 것 같지 않나요? 🧑‍🔬🧑‍🎨

다음 섹션에서는 이 환상의 콤비를 어떻게 더 효과적으로 활용할 수 있는지 자세히 알아보도록 해요. 여러분의 창의력을 한껏 발휘할 준비가 되셨나요? Let's go! 🚀

2. 타입스크립트로 캔버스 시작하기: 기본 설정 🛠️

자, 이제 본격적으로 타입스크립트와 캔버스의 세계로 뛰어들어볼까요? 먼저 우리의 작업 환경을 설정해야 해요. 마치 화가가 그림을 그리기 전에 이젤을 세우고 팔레트를 준비하는 것처럼 말이에요! 🎨

2.1 프로젝트 설정하기

먼저, 새로운 프로젝트 폴더를 만들고 그 안에서 터미널을 열어주세요. 그리고 다음 명령어를 차례로 실행해볼까요?


npm init -y
npm install typescript --save-dev
npx tsc --init

이 명령어들은 각각 다음과 같은 일을 해요:

npm init -y: 새로운 Node.js 프로젝트를 시작합니다. '-y' 옵션은 모든 질문에 자동으로 '예'라고 대답해줘요.
npm install typescript --save-dev: 타입스크립트를 개발 의존성으로 설치합니다.
npx tsc --init: 타입스크립트 설정 파일(tsconfig.json)을 생성합니다.

와우! 이제 우리의 캔버스 작업실이 거의 준비되었어요. 🏗️

2.2 HTML 파일 만들기

이제 우리의 캔버스를 담을 HTML 파일을 만들어볼까요? 프로젝트 폴더에 'index.html' 파일을 만들고 다음 내용을 입력해주세요:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Canvas Magic</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script src="dist/app.js"></script>
</body>
</html>

여기서 우리는 800x600 크기의 캔버스를 만들었어요. 마치 화가의 캔버스처럼 이제 우리의 디지털 캔버스가 준비되었답니다! 🖼️

2.3 타입스크립트 파일 생성하기

이제 우리의 마법 지팡이, 아니 타입스크립트 파일을 만들어볼까요? 'src' 폴더를 만들고 그 안에 'app.ts' 파일을 생성해주세요. 그리고 다음 코드를 입력해볼까요?


const canvas: HTMLCanvasElement = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');

if (ctx) {
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 100, 100);
}

이 코드는 캔버스에 파란색 사각형을 그려요. 아주 기본적이지만, 이것이 바로 우리의 첫 걸음이에요! 🚶‍♂️

2.4 타입스크립트 컴파일하기

마지막으로, 우리의 타입스크립트 코드를 자바스크립트로 변환해야 해요. 터미널에서 다음 명령어를 실행해주세요:


npx tsc

이 명령어는 'src/app.ts' 파일을 컴파일하여 'dist/app.js' 파일을 생성해요. 마치 마법사가 주문을 외우는 것처럼, 타입스크립트가 우리의 코드를 브라우저가 이해할 수 있는 언어로 변환하는 거죠! 🧙‍♂️✨

자, 이제 모든 준비가 끝났어요! 'index.html' 파일을 브라우저에서 열어보세요. 파란색 사각형이 보이나요? 축하합니다! 여러분은 방금 타입스크립트로 첫 캔버스 그래픽을 만들었어요! 🎉

이것은 단지 시작일 뿐이에요. 마치 재능넷에서 새로운 재능을 발견하는 것처럼, 우리는 이제 막 타입스크립트와 캔버스라는 새로운 재능을 발견했답니다. 앞으로 우리가 이 재능으로 어떤 멋진 작품들을 만들어낼 수 있을지, 정말 기대되지 않나요? 😊

다음 섹션에서는 더 다양하고 복잡한 도형들을 그리는 방법을 알아볼 거예요. 여러분의 상상력을 마음껏 펼칠 준비가 되셨나요? Let's keep going! 🚀

3. 기본 도형 그리기: 선, 사각형, 원 🔲🔴

자, 이제 우리의 캔버스에 더 다양한 도형들을 그려볼 시간이에요! 마치 레고 블록을 조립하듯이, 우리는 기본적인 도형들을 조합해서 복잡한 그림을 만들어낼 수 있어요. 시작해볼까요? 🏗️

3.1 직선 그리기

가장 기본적인 요소인 직선부터 시작해볼게요. 직선은 모든 그림의 기초가 되죠. 다음 코드를 'app.ts' 파일에 추가해보세요:


function drawLine(ctx: CanvasRenderingContext2D, startX: number, startY: number, endX: number, endY: number, color: string = 'black'): void {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = color;
    ctx.stroke();
}

if (ctx) {
    drawLine(ctx, 50, 50, 200, 200, 'red');
}

이 코드는 (50, 50)에서 시작해서 (200, 200)으로 끝나는 빨간색 직선을 그려요. 마치 첫 번째 붓 터치를 하는 것 같지 않나요? 🖌️

3.2 사각형 그리기

이제 사각형을 그려볼까요? 사각형은 우리 주변에서 가장 흔히 볼 수 있는 도형 중 하나죠. 다음 함수를 추가해보세요:


function drawRectangle(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, fillColor: string, strokeColor: string = 'black'): void {
    ctx.fillStyle = fillColor;
    ctx.fillRect(x, y, width, height);
    ctx.strokeStyle = strokeColor;
    ctx.strokeRect(x, y, width, height);
}

if (ctx) {
    drawRectangle(ctx, 300, 100, 150, 100, 'yellow', 'blue');
}

이 코드는 (300, 100) 위치에 150x100 크기의 노란색 사각형을 그리고, 파란색 테두리를 둘러요. 마치 우리가 창문을 그린 것 같아요, 그렇죠? 🪟

3.3 원 그리기

이제 우리의 그림에 부드러움을 더해줄 원을 그려볼까요? 원은 자연에서 가장 완벽한 형태 중 하나로 여겨지죠. 다음 함수를 추가해보세요:


function drawCircle(ctx: CanvasRenderingContext2D, x: number, y: number, radius: number, fillColor: string, strokeColor: string = 'black'): void {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = fillColor;
    ctx.fill();
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}

if (ctx) {
    drawCircle(ctx, 500, 300, 75, 'green', 'purple');
}

이 코드는 (500, 300) 위치에 반지름이 75인 초록색 원을 그리고, 보라색 테두리를 둘러요. 마치 신비로운 행성을 그린 것 같아요! 🌍

3.4 복합 도형 만들기

이제 우리가 배운 기본 도형들을 조합해서 더 복잡한 그림을 만들어볼까요? 예를 들어, 간단한 집 모양을 그려볼게요:


function drawHouse(ctx: CanvasRenderingContext2D, x: number, y: number): void {
    // 집의 몸체
    drawRectangle(ctx, x, y, 200, 150, 'lightblue', 'blue');
    
    // 지붕
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + 100, y - 75);
    ctx.lineTo(x + 200, y);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.strokeStyle = 'darkred';
    ctx.stroke();
    
    // 문
    drawRectangle(ctx, x + 80, y + 70, 40, 80, 'brown', 'black');
    
    // 창문
    drawRectangle(ctx, x + 20, y + 20, 50, 50, 'white', 'black');
    drawRectangle(ctx, x + 130, y + 20, 50, 50, 'white', 'black');
}

if (ctx) {
    drawHouse(ctx, 50, 350);
}

와우! 우리가 방금 타입스크립트와 캔버스를 사용해서 귀여운 집을 그렸어요! 🏠 이것이 바로 기본 도형들의 조합으로 만들어낸 복합 도형이에요.

이렇게 우리는 선, 사각형, 원이라는 기본 도형들을 배우고, 이를 조합해 더 복잡한 그림을 그리는 방법을 알아봤어요. 마치 재능넷에서 다양한 재능들이 모여 하나의 멋진 프로젝트를 만들어내는 것처럼, 우리도 기본 도형들을 조합해 멋진 그림을 만들어냈죠!

여러분의 상상력을 마음껏 발휘해보세요. 어떤 모양을 그려보고 싶나요? 집 말고도 자동차, 꽃, 동물 등 무엇이든 가능해요. 여러분만의 독특한 그림을 만들어보는 건 어떨까요? 🎨

다음 섹션에서는 더 나아가 애니메이션을 만드는 방법을 알아볼 거예요. 우리의 그림이 움직이기 시작한다면 얼마나 신나는 일일까요? 준비되셨나요? Let's move on! 🚀

4. 색상과 그라데이션: 캔버스에 생명 불어넣기 🌈

자, 이제 우리의 그림에 색채의 마법을 불어넣어볼 시간이에요! 색상과 그라데이션은 단순한 도형들을 생동감 넘치는 예술 작품으로 변신시키는 힘을 가지고 있죠. 마치 흑백 영화가 컬러 영화로 바뀌는 순간을 상상해보세요. 정말 놀랍지 않나요? 😮

4.1 다양한 색상 사용하기

캔버스에서 색상을 지정하는 방법은 여러 가지가 있어요. RGB, HEX, 색상 이름 등을 사용할 수 있죠. 다음 예제를 통해 알아볼까요?


function drawColorfulShapes(ctx: CanvasRenderingContext2D): void {
    // RGB 사용
    ctx.fillStyle = 'rgb(255, 0, 0)';  // 빨강
    ctx.fillRect(50, 50, 100, 100);

    // HEX 사용
    ctx.fillStyle = '#00FF00';  // 초록
    ctx.fillRect(200, 50, 100, 100);

    // 색상 이름 사용
    ctx.fillStyle = 'blue';  // 파랑
    ctx.fillRect(350, 50, 100, 100);

    // RGBA 사용 (알파 값으로 투명도 조절)
    ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';  // 반투명 노랑
    ctx.fillRect(500, 50, 100, 100);
}

if (ctx) {
    drawColorfulShapes(ctx);
}

와! 우리의 캔버스가 갑자기 무지개처럼 화려해졌어요! 🌈 각각의 색상 지정 방식은 상황에 따라 유용하게 사용될 수 있어요. 특히 RGBA를 사용하면 투명도까지 조절할 수 있어 더욱 다채로운 표현이 가능해집니다.

4.2 선형 그라데이션

이제 색상들을 부드럽게 섞어 그라데이션을 만들어볼까요? 먼저 선형 그라데이션부터 시작해볼게요:


function drawLinearGradient(ctx: CanvasRenderingContext2D): void {
    const gradient = ctx.createLinearGradient(0, 0, 400, 0);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.5, 'green');
    gradient.addColorStop(1, 'blue');

    ctx.fillStyle = gradient;
    ctx.fillRect(50, 200, 400, 100);
}

if (ctx) {
    drawLinearGradient(ctx);
}

이 코드는 빨강에서 시작해 초록을 거쳐 파랑으로 끝나는 아름다운 그라데이션을 만들어냅니다. 마치 일출부터 일몰까지의 하늘 색 변화를 한 번에 보는 것 같아요! 🌅

4.3 원형 그라데이션

선형 그라데이션도 멋지지만, 원형 그라데이션은 어떨까요? 이것은 마치 물방울이 퍼져나가는 것처럼 중심에서부터 색상이 변화해요:


function drawRadialGradient(ctx: CanvasRenderingContext2D): void {
    const gradient = ctx.createRadialGradient(300, 400, 10, 300, 400, 100);
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(0.5, 'yellow');
    gradient.addColorStop(1, 'orange');

    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(300, 400, 100, 0, Math.PI * 2);
    ctx.fill();
}

if (ctx) {
    drawRadialGradient(ctx);
}

와우! 이제 우리의 캔버스에 태양이 떠올랐어요! ☀️ 원형 그라데이션은 빛나는 효과나 입체감을 표현할 때 특히 유용해요.

4.4 패턴 만들기

색상과 그라데이션을 넘어, 이제 반복되는 패턴을 만들어볼까요? 이는 마치 멋진 벽지를 만드는 것과 같아요:


function createPattern(ctx: CanvasRenderingContext2D): void {
    const patternCanvas = document.createElement('canvas');
    const patternContext = patternCanvas.getContext('2d')!;

    patternCanvas.width = 50;
    patternCanvas.height = 50;

    patternContext.fillStyle = 'yellow';
    patternContext.fillRect(0, 0, 25, 25);
    patternContext.fillRect(25, 25, 25, 25);

    const pattern = ctx.createPattern(patternCanvas, 'repeat')!;
    ctx.fillStyle = pattern;
    ctx.fillRect(50, 500, 400, 150);
}

if (ctx) {
    createPattern(ctx);
}

짜잔! 우리가 방금 체스판 같은 패턴을 만들었어요. 이 런 패턴은 배경이나 특별한 효과를 만들 때 아주 유용하답니다. 마치 재능넷에서 다양한 재능들이 모여 하나의 아름다운 모자이크를 만드는 것처럼요! 🧩

4.5 그림자 효과 추가하기

마지막으로, 우리의 그림에 깊이감을 더해줄 그림자 효과를 추가해볼까요?


function drawShadowedText(ctx: CanvasRenderingContext2D): void {
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    
    ctx.font = '48px Arial';
    ctx.fillStyle = 'purple';
    ctx.fillText('안녕, 캔버스!', 100, 700);
}

if (ctx) {
    drawShadowedText(ctx);
}

와! 이제 우리의 텍스트가 마치 공중에 떠 있는 것처럼 보이네요! 🎈 그림자 효과는 단순한 2D 그래픽에 3D 느낌을 더해줄 수 있어요.

이렇게 우리는 색상, 그라데이션, 패턴, 그리고 그림자 효과를 사용해 우리의 캔버스에 생명을 불어넣었어요. 이제 우리의 그림은 단순한 선과 도형의 모음이 아니라, 감정과 깊이가 있는 작품이 되었죠!

여러분, 이제 여러분만의 색채 세계를 만들어보세요. 밝은 색상으로 기쁨을 표현하고, 어두운 색상으로 신비로움을 더해보는 건 어떨까요? 또는 그라데이션으로 부드러운 변화를, 패턴으로 리듬감을 표현해보세요. 여러분의 창의력에는 한계가 없답니다! 🎨✨

다음 섹션에서는 이 모든 요소들을 움직이게 만드는 애니메이션에 대해 알아볼 거예요. 우리의 정적인 그림이 동적인 작품으로 변하는 마법 같은 순간을 함께 경험해봐요. 준비되셨나요? Let's bring our canvas to life! 🚀

5. 애니메이션: 캔버스에 움직임 더하기 🎬

자, 이제 우리의 그림에 마법을 걸어 움직이게 만들 시간이에요! 애니메이션은 우리의 정적인 그림에 생명을 불어넣어 줍니다. 마치 동화책 속 그림이 살아 움직이기 시작하는 것처럼 말이죠. 준비되셨나요? 시작해볼까요? 🏃‍♂️💨

5.1 기본 애니메이션 원리

애니메이션의 기본 원리는 간단해요. 빠르게 연속된 프레임을 그리는 것이죠. 우리의 눈은 이 빠른 변화를 부드러운 움직임으로 인식하게 됩니다. 타입스크립트에서는 requestAnimationFrame 함수를 사용해 이를 구현할 수 있어요.


function animate(ctx: CanvasRenderingContext2D): void {
    let x = 0;

    function draw() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.fillStyle = 'blue';
        ctx.fillRect(x, 100, 50, 50);
        x += 2;
        if (x > ctx.canvas.width) {
            x = 0;
        }
        requestAnimationFrame(draw);
    }

    draw();
}

if (ctx) {
    animate(ctx);
}

와! 우리의 파란 사각형이 화면을 가로질러 움직이기 시작했어요! 🟦➡️ 이것이 바로 애니메이션의 기본이에요. 각 프레임마다 도형의 위치를 조금씩 변경하고, 캔버스를 지웠다가 다시 그리는 과정을 반복하는 거죠.

5.2 부드러운 움직임 만들기

더 부드러운 움직임을 원한다면 어떻게 해야 할까요? 삼각함수를 사용해 볼 수 있어요. 이를 통해 요소가 마치 춤을 추듯 우아하게 움직이게 만들 수 있죠:


function smoothAnimation(ctx: CanvasRenderingContext2D): void {
    let angle = 0;

    function draw() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        const y = Math.sin(angle) * 100 + 200;
        ctx.beginPath();
        ctx.arc(200, y, 20, 0, Math.PI * 2);
        ctx.fillStyle = 'red';
        ctx.fill();
        angle += 0.05;
        requestAnimationFrame(draw);
    }

    draw();
}

if (ctx) {
    smoothAnimation(ctx);
}

우와! 이제 우리의 빨간 원이 마치 파도를 타듯 부드럽게 오르내리고 있어요. 🔴〰️ 이런 움직임은 보는 이의 눈을 사로잡고, 더욱 생동감 있는 애니메이션을 만들어냅니다.

5.3 인터랙티브 애니메이션

애니메이션을 더욱 재미있게 만들려면 어떻게 해야 할까요? 바로 사용자의 입력에 반응하게 만드는 거예요! 마우스 움직임에 따라 변하는 애니메이션을 만들어볼까요?


function interactiveAnimation(ctx: CanvasRenderingContext2D): void {
    let mouseX = 0;
    let mouseY = 0;

    ctx.canvas.addEventListener('mousemove', (event) => {
        mouseX = event.clientX - ctx.canvas.offsetLeft;
        mouseY = event.clientY - ctx.canvas.offsetTop;
    });

    function draw() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.beginPath();
        ctx.arc(mouseX, mouseY, 20, 0, Math.PI * 2);
        ctx.fillStyle = 'green';
        ctx.fill();
        requestAnimationFrame(draw);
    }

    draw();
}

if (ctx) {
    interactiveAnimation(ctx);
}

신기하죠? 이제 초록색 원이 마우스를 따라 움직이고 있어요! 🟢🖱️ 이렇게 사용자의 입력에 반응하는 애니메이션은 웹사이트나 게임에서 흥미로운 상호작용을 만들어낼 수 있어요.

5.4 복잡한 애니메이션 시스템

이제 우리가 배운 모든 것을 조합해서 더 복잡하고 흥미로운 애니메이션 시스템을 만들어볼까요? 여러 개의 움직이는 원들이 서로 상호작용하는 모습을 상상해보세요:


interface Ball {
    x: number;
    y: number;
    radius: number;
    dx: number;
    dy: number;
    color: string;
}

function complexAnimation(ctx: CanvasRenderingContext2D): void {
    const balls: Ball[] = [];

    for (let i = 0; i < 20; i++) {
        balls.push({
            x: Math.random() * ctx.canvas.width,
            y: Math.random() * ctx.canvas.height,
            radius: Math.random() * 20 + 10,
            dx: (Math.random() - 0.5) * 4,
            dy: (Math.random() - 0.5) * 4,
            color: `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
        });
    }

    function draw() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        balls.forEach(ball => {
            ball.x += ball.dx;
            ball.y += ball.dy;

            if (ball.x + ball.radius > ctx.canvas.width || ball.x - ball.radius < 0) ball.dx = -ball.dx;
            if (ball.y + ball.radius > ctx.canvas.height || ball.y - ball.radius < 0) ball.dy = -ball.dy;

            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fillStyle = ball.color;
            ctx.fill();
        });

        requestAnimationFrame(draw);
    }

    draw();
}

if (ctx) {
    complexAnimation(ctx);
}

와우! 이제 우리의 캔버스가 살아 움직이는 컬러풀한 공들로 가득 찼어요! 🔴🔵🟢🟡 각각의 공들이 서로 다른 속도와 방향으로 움직이며, 벽에 부딪히면 튕겨나가죠. 이것이 바로 복잡한 애니메이션 시스템의 아름다움이에요.

여러분, 이렇게 우리는 타입스크립트와 캔버스를 이용해 정적인 그림에 생명을 불어넣었어요. 단순한 도형의 움직임부터 복잡한 상호작용까지, 애니메이션의 세계는 무궁무진합니다. 마치 재능넷에서 다양한 재능들이 모여 역동적인 프로젝트를 만들어내는 것처럼, 우리도 다양한 요소들을 조합해 생동감 넘치는 캔버스 세계를 만들어냈죠!

이제 여러분의 차례예요. 어떤 멋진 애니메이션을 만들어보고 싶나요? 별이 반짝이는 밤하늘? 춤추는 꽃들? 아니면 복잡한 기계 장치? 여러분의 상상력이 곧 캔버스의 한계예요. 자, 이제 여러분만의 움직이는 예술 작품을 만들어보세요! 🎨✨

다음 섹션에서는 우리가 배운 모든 것을 종합해 하나의 완성된 프로젝트를 만들어볼 거예요. 여러분의 창의력을 한껏 발휘할 준비가 되셨나요? Let's create something amazing! 🚀

6. 프로젝트: 인터랙티브 파티클 시스템 만들기 🎊

자, 이제 우리가 배운 모든 것을 종합해 멋진 프로젝트를 만들어볼 시간이에요! 오늘 우리가 만들 것은 바로 '인터랙티브 파티클 시스템'입니다. 이 시스템은 마우스 움직임에 반응해 화려한 파티클을 생성하고, 이들이 중력의 영향을 받아 움직이는 모습을 보여줄 거예요. 마치 불꽃놀이를 보는 것 같은 경험을 선사할 거예요! 🎆

6.1 프로젝트 설정

먼저, 우리의 HTML 파일을 다음과 같이 설정해주세요:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Particle System</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    <script src="dist/app.js"></script>
</body>
</html>

이제 'src/app.ts' 파일을 만들고, 다음 코드를 작성해주세요:


interface Particle {
    x: number;
    y: number;
    size: number;
    speedX: number;
    speedY: number;
    color: string;
}

class ParticleSystem {
    private canvas: HTMLCanvasElement;
    private ctx: CanvasRenderingContext2D;
    private particles: Particle[];
    private mouseX: number;
    private mouseY: number;

    constructor() {
        this.canvas = document.getElementById('particleCanvas') as HTMLCanvasElement;
        this.ctx = this.canvas.getContext('2d')!;
        this.particles = [];
        this.mouseX = 0;
        this.mouseY = 0;

        this.resizeCanvas();
        this.addEventListeners();
        this.animate();
    }

    private resizeCanvas(): void {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
    }

    private addEventListeners(): void {
        window.addEventListener('resize', () => this.resizeCanvas());
        this.canvas.addEventListener('mousemove', (e) => {
            this.mouseX = e.clientX;
            this.mouseY = e.clientY;
            this.addParticles(5);
        });
    }

    private addParticles(count: number): void {
        for (let i = 0; i < count; i++) {
            this.particles.push({
                x: this.mouseX,
                y: this.mouseY,
                size: Math.random() * 5 + 1,
                speedX: Math.random() * 3 - 1.5,
                speedY: Math.random() * 3 - 1.5,
                color: `hsl(${Math.random() * 360}, 100%, 50%)`
            });
        }
    }

    private updateParticles(): void {
        for (let i = 0; i < this.particles.length; i++) {
            let p = this.particles[i];
            p.x += p.speedX;
            p.y += p.speedY;
            p.size -= 0.05;

            if (p.size <= 0.3) {
                this.particles.splice(i, 1);
                i--;
            }
        }
    }

    private drawParticles(): void {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        for (let p of this.particles) {
            this.ctx.fillStyle = p.color;
            this.ctx.beginPath();
            this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
            this.ctx.fill();
        }
    }

    private animate(): void {
        this.updateParticles();
        this.drawParticles();
        requestAnimationFrame(() => this.animate());
    }
}

new ParticleSystem();

와우! 이제 우리만의 인터랙티브 파티클 시스템이 완성되었어요! 🎉 이 시스템은 다음과 같은 특징을 가지고 있어요:

마우스를 움직일 때마다 새로운 파티클이 생성됩니다.
각 파티클은 랜덤한 속도와 방향으로 움직입니다.
파티클은 시간이 지남에 따라 크기가 작아지고 결국 사라집니다.
각 파티클은 무지개 색상을 가집니다.
캔버스는 화면 크기에 맞춰 자동으로 조절됩니다.

이 프로젝트는 우리가 지금까지 배운 모든 개념을 활용하고 있어요:

타입스크립트의 인터페이스와 클래스를 사용해 코드를 구조화했습니다.
캔버스 API를 사용해 그래픽을 그렸습니다.
애니메이션 루프를 구현해 지속적으로 화면을 업데이트합니다.
이벤트 리스너를 사용해 사용자 입력에 반응합니다.
수학적 계산을 통해 파티클의 움직임을 제어합니다.

이 프로젝트는 단순해 보이지만, 실제로는 복잡한 시스템을 구현하고 있어요. 마치 재능넷에서 다양한 재능들이 모여 하나의 멋진 프로젝트를 만들어내는 것처럼, 우리도 여러 가지 개념과 기술을 조합해 이 아름다운 파티클 시스템을 만들어냈죠!

여러분, 이제 이 코드를 실행해보세요. 마우스를 움직이면 화면에 마법 같은 파티클들이 나타날 거예요. 마치 여러분이 마법사가 된 것 같지 않나요? ✨🧙‍♂️

이 프로젝트를 기반으로 더 나아가 볼 수 있어요. 어떤 아이디어가 떠오르나요? 파티클의 모양을 다양하게 만들어볼까요? 아니면 중력 효과를 추가해볼까요? 또는 파티클들이 서로 상호작용하도록 만들어볼 수도 있겠죠. 여러분의 상상력이 곧 이 프로젝트의 한계예요!

자, 이제 여러분만의 창의력을 발휘해 이 프로젝트를 더욱 멋지게 발전시켜보세요. 여러분이 만들어낼 놀라운 결과가 정말 기대되네요! 🚀🎨

7. 결론: 당신의 캔버스 여정은 여기서부터 🎨🚀

와우! 정말 긴 여정이었죠? 우리는 타입스크립트와 캔버스의 세계를 함께 탐험하며 정말 많은 것을 배웠어요. 기본적인 도형 그리기부터 시작해서 복잡한 애니메이션과 인터랙티브한 파티클 시스템까지, 우리는 캔버스의 무한한 가능성을 조금이나마 맛보았답니다. 🌈✨

이 여정을 통해 우리는 다음과 같은 것들을 배웠어요:

타입스크립트의 강력한 타입 시스템을 활용해 더 안전하고 예측 가능한 코드를 작성하는 방법
HTML5 캔버스의 기본 사용법과 다양한 그리기 기능들
색상과 그라데이션을 활용해 그래픽에 생동감을 불어넣는 방법
애니메이션 루프를 구현해 동적인 그래픽을 만드는 기술
사용자 입력에 반응하는 인터랙티브한 그래픽 만들기
복잡한 시스템을 설계하고 구현하는 방법

하지만 이것은 단지 시작일 뿐이에요. 캔버스와 타입스크립트의 세계는 우리가 탐험한 것보다 훨씬 더 넓고 깊답니다. 여러분은 이제 이 광활한 세계를 탐험할 수 있는 기본적인 도구와 지식을 갖추게 되었어요. 마치 재능넷에서 새로운 재능을 발견하고 그것을 발전시켜 나가는 것처럼, 여러분도 이제 캔버스라는 새로운 재능을 발견하고 이를 더욱 발전시켜 나갈 수 있을 거예요. 🌱

여러분의 다음 단계는 무엇일까요? 어쩌면 다음과 같은 주제들을 더 깊이 탐구해보고 싶을 수도 있겠네요:

3D 그래픽: WebGL을 사용해 더 복잡하고 현실적인 3D 그래픽 만들기
게임 개발: 캔버스를 사용해 간단한 2D 게임 만들기
데이터 시각화: 복잡한 데이터를 캔버스를 사용해 시각적으로 표현하기
이미지 처리: 캔버스를 사용해 이미지 필터나 효과 만들기
물리 엔진: 실제 물리 법칙을 시뮬레이션하는 시스템 구현하기

기억하세요, 프로그래밍의 세계에서 가장 중요한 것은 호기심과 실험 정신이에요. 두려워하지 말고 새로운 것을 시도해보세요. 실패해도 괜찮아요. 그 과정에서 여러분은 반드시 무언가를 배우게 될 거예요. 🧗‍♂️

그리고 잊지 마세요. 여러분은 혼자가 아니에요. 온라인에는 타입스크립트와 캔버스에 대한 풍부한 자료들이 있답니다. 커뮤니티에 참여하고, 다른 개발자들과 아이디어를 공유하며, 서로에게서 배워나가세요. 마치 재능넷에서 다양한 재능을 가진 사람들이 모여 서로 배우고 성장하는 것처럼 말이에요. 👥💡

자, 이제 여러분만의 캔버스 여정을 시작할 시간이에요. 여러분이 만들어낼 놀라운 작품들이 정말 기대되네요. 상상력을 마음껏 펼치고, 코드로 여러분만의 세계를 그려나가세요. 여러분의 캔버스는 무한한 가능성으로 가득 차 있답니다!

행운을 빕니다, 그리고 즐거운 코딩하세요! 🎨👨‍💻👩‍💻🚀