CSS Paint Workletμ κ°λ ₯ν κΈ°λ₯μ νμ©νμ¬ Canvas APIλ₯Ό ν΅ν΄ CSS λ΄μμ μ§μ μ¬μ©μ μ μμ λμ μ΄κ³ μ±λ₯μ΄ λ°μ΄λ κ·Έλν½μ λ§λμμμ€. λ§μΆ€ν λΉμ£ΌμΌλ‘ μΉ λμμΈμ ν₯μμν€λ λ°©λ²μ λ°°μ°μμμ€.
CSS Paint Worklet: Canvas APIλ‘ λ§μΆ€ν κ·Έλν½ κ΅¬ννκΈ°
μΉ λμμΈ μΈκ³λ λμμμ΄ μ§ννκ³ μμ΅λλ€. κ°λ°μλ‘μ μ°λ¦¬λ νμ λμ± νλΆνκ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ λ§λ€ λ°©λ²μ μ°Ύκ³ μμ΅λλ€. κΈ°μ‘΄ CSSλ μ€νμΌλ§μ μν κ΄λ²μν ν΄ν·μ μ 곡νμ§λ§, λλ‘λ μ¬μ μ μλ λͺ¨μκ³Ό ν¨κ³Όμ μ νμμ λ²μ΄λ μ μλ λ λ§μ κ²μ΄ νμν©λλ€. λ°λ‘ Houdini νλ‘μ νΈμ μΌλΆμΈ CSS Paint Workletμ΄ λ±μ₯νλ κ³³μ λλ€. μ΄λ₯Ό ν΅ν΄ CSS λ΄μμ μ§μ μ¬μ©μ μ μ λλ‘μ ν¨μλ₯Ό μ μνμ¬ μμ ν μλ‘μ΄ μκ°μ κ°λ₯μ±μ μΈκ³λ₯Ό μ΄ μ μμ΅λλ€.
CSS Paint Workletμ΄λ 무μμ λκΉ?
CSS Paint Workletμ κΈ°λ³Έμ μΌλ‘ λ°°κ²½, ν λ리 λλ μ΄λ―Έμ§λ₯Ό νμ©νλ κΈ°ν μμ±μ μ§μ 그릴 μ μλ ν¨μλ₯Ό μ μνλ JavaScript λͺ¨λμ λλ€. μκ°μ μμλ₯Ό 그리기 μν΄ CSSμμ νΈμΆν μ μλ μκ³ νΉμν JavaScript νλ‘κ·Έλ¨μ΄λΌκ³ μκ°νμμμ€. μ΄λ λΈλΌμ°μ μμ 2D κ·Έλν½μ λ§λ€κΈ° μν κ°λ ₯ν λκ΅¬μΈ Canvas APIλ₯Ό νμ©νμ¬ μνλ©λλ€.
Paint Workletμ μ¬μ©νλ μ£Όμ μ΄μ μ μ±λ₯μ λλ€. Worklet API λλΆμ λ³λμ μ€λ λμμ μ€νλλ―λ‘ κΈ°λ³Έ μ€λ λλ₯Ό μ°¨λ¨νμ§ μμ 볡μ‘ν κ·Έλν½μ μ²λ¦¬ν λλ λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ νκ²½μ 보μ₯ν©λλ€.
Paint Workletμ μ¬μ©νλ μ΄μ λ 무μμ λκΉ?
- μ±λ₯: λ³λμ μ€λ λμμ μ€νλμ΄ κΈ°λ³Έ μ€λ λ μ°¨λ¨μ λ°©μ§ν©λλ€. μ΄λ νΉν μ²λ¦¬ λ₯λ ₯μ΄ μ νλ μ₯μΉμμ κ³ νμ§ μ¬μ©μ κ²½νμ μ μ§νλ λ° μ€μν λμ± λΆλλ¬μ΄ μ λλ©μ΄μ κ³Ό λμ± λ°μμ±μ΄ λ°μ΄λ UIλ‘ μ΄μ΄μ§λλ€.
- μ¬μ©μ μ μ: νμ€ CSSμ κΈ°λ₯μ λμ΄μλ λ νΉνκ³ λ³΅μ‘ν λμμΈμ λ§λλλ€. CSS λ΄μμ μ§μ 볡μ‘ν ν¨ν΄, λμ ν μ€μ² λλ λνν μκ°νλ₯Ό μμ±νλ€κ³ μμν΄ λ³΄μμμ€.
- μ¬μ¬μ©μ±: μ¬μ©μ μ μ λλ‘μ λ‘μ§μ ν λ² μ μνκ³ μ 체 μΉμ¬μ΄νΈμμ μ¬μ¬μ©ν©λλ€. μ΄λ μ½λ μ μ§ κ΄λ¦¬μ±μ λμ΄κ³ μ€λ³΅μ±μ μ€μ¬ CSSλ₯Ό λμ± ν¨μ¨μ μ΄κ³ κ΄λ¦¬νκΈ° μ½κ² λ§λλλ€.
- λμ μ€νμΌλ§: CSS μ¬μ©μ μ μ μμ±(λ³μ)μ νμ©νμ¬ νμΈνΈ ν¨μμ λμκ³Ό λͺ¨μμ λμ μΌλ‘ μ μ΄ν©λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μ μνΈ μμ©, λ°μ΄ν° λ³κ²½ λλ κΈ°ν λμ μμΈμ μλ΅νλ κ·Έλν½μ λ§λ€ μ μμ΅λλ€.
Canvas API μ΄ν΄
Canvas APIλ Paint Workletμ ꡬλνλ μμ§μ λλ€. λͺ¨μ, μ΄λ―Έμ§, ν μ€νΈ λ±μ μ¬κ°ν μΊλ²μ€ μμμ 그리기 μν JavaScript ν¨μ μΈνΈλ₯Ό μ 곡ν©λλ€. νλ‘κ·Έλλ° λ°©μμΌλ‘ μνλ μκ°μ μμλ₯Ό λ§λ€ μ μλ λΉ μ¬λ μ΄νΈλΌκ³ μκ°νμμμ€.
μ΄ν΄ν΄μΌ ν λͺ κ°μ§ μ£Όμ κ°λ μ λ€μκ³Ό κ°μ΅λλ€.
- μΊλ²μ€ μμ: κ·Έλ¦Όμ΄ κ·Έλ €μ§λ HTML μμμ
λλ€. Paint Workletμ μ¬μ©ν λ
<canvas>μμλ₯Ό μ§μ λ§λ€μ§λ μμ§λ§ APIλ κΈ°λ³Έ λλ‘μ νλ©΄μ μ 곡ν©λλ€. - 컨ν
μ€νΈ: 컨ν
μ€νΈ κ°μ²΄λ 그리기 μν λ©μλμ μμ±μ μ 곡ν©λλ€. μΌλ°μ μΌλ‘
canvas.getContext('2d')λ₯Ό μ¬μ©νμ¬ 2D λ λλ§ μ»¨ν μ€νΈλ₯Ό μ»μ΅λλ€. - κ²½λ‘: λͺ¨μμ μ μνλ λλ‘μ λͺ
λ Ήμ μνμ€μ
λλ€.
moveTo(),lineTo(),arc()λ°bezierCurveTo()μ κ°μ λ©μλλ₯Ό μ¬μ©νμ¬ κ²½λ‘λ₯Ό λ§λ€ μ μμ΅λλ€. - μ€νμΌλ§:
fillStyle(λͺ¨μ μ±μ°κΈ°μ©),strokeStyle(λͺ¨μ μ€κ³½μ μ©) λ°lineWidthμ κ°μ μμ±μ μ¬μ©νμ¬ κ·Έλ¦Όμ λͺ¨μμ μ μ΄ν©λλ€. - λ³ν: ν¬κΈ° μ‘°μ , νμ λ° λ³νκ³Ό κ°μ λ³νμ μ μ©νμ¬ κ·Έλ¦Όμ μμΉμ λ°©ν₯μ μ‘°μν©λλ€.
첫 λ²μ§Έ Paint Worklet λ§λ€κΈ°
Paint Workletμ λ§λ€κ³ μ¬μ©νλ λ°©λ²μ μ€λͺ νκΈ° μν΄ κ°λ¨ν μμ λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€. λκ°μ μ€λ¬΄λ¬ ν¨ν΄μ 그리λ Workletμ λ§λ€ κ²μ λλ€.
1. Worklet νμΌ λ§λ€κΈ°(striped.js)
`striped.js`λΌλ μ JavaScript νμΌμ λ§λλλ€. μ΄ νμΌμλ Paint Workletμ λν μ½λκ° ν¬ν¨λ©λλ€.
```javascript // striped.js registerPaint('striped', class { static get inputProperties() { return ['--stripe-color']; } paint(ctx, geom, properties) { const stripeColor = properties.get('--stripe-color').toString(); const width = geom.width; const height = geom.height; ctx.fillStyle = stripeColor || 'black'; for (let i = 0; i < width + height; i += 20) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(0, i); ctx.lineTo(0, i + 10); ctx.lineTo(i + 10, 0); ctx.closePath(); ctx.fill(); } } }); ```μ€λͺ :
registerPaint('striped', class { ... }): μ΄ λͺ λ Ήμ΄λ Paint Workletμ 'striped'λΌλ μ΄λ¦μΌλ‘ λ±λ‘ν©λλ€. μ΄κ²μ CSSμμ μ΄ Workletμ μ°Έμ‘°νλ λ° μ¬μ©ν μ΄λ¦μ λλ€.static get inputProperties() { return ['--stripe-color']; }: μ΄ λͺ λ Ήμ΄λ Workletμμ μ¬μ©ν CSS μ¬μ©μ μ μ μμ±μ μ μν©λλ€. μ΄ κ²½μ°μλ μ€νΈλΌμ΄νμ μμμ μ μ΄νκΈ° μν΄ `--stripe-color`λΌλ μ¬μ©μ μ μ μμ±μ μ¬μ©ν©λλ€.paint(ctx, geom, properties) { ... }: μ΄κ²μ λλ‘μμ μννλ λ©μΈ ν¨μμ λλ€. μΈ κ°μ§ μΈμλ₯Ό λ°μ΅λλ€.ctx: Canvas APIμ 2D λ λλ§ μ»¨ν μ€νΈμ λλ€. μ¬κΈ°μ λͺ¨λ λλ‘μ λ©μλλ₯Ό νΈμΆν©λλ€.geom: νμΈνΈλλ μμμ λλΉμ λμ΄λ₯Ό ν¬ν¨νλ κ°μ²΄μ λλ€.properties:inputPropertiesμ μ§μ λ μ λ ₯ μμ±μ κ°μ ν¬ν¨νλStylePropertyMapReadOnlyκ°μ²΄μ λλ€.
ctx.fillStyle = stripeColor || 'black';: `--stripe-color` μ¬μ©μ μ μ μμ±μ κ°μΌλ‘ μ±μ°κΈ° μμμ μ€μ νκ³ μμ±μ΄ μ μλμ§ μμ κ²½μ° κ²μμμΌλ‘ μ€μ ν©λλ€.for루νλ μ€νΈλΌμ΄νλ₯Ό 그리기 μν΄ λ°λ³΅νμ¬ μΌλ ¨μ λκ°μ μ λ§λλλ€.
2. HTMLμμ Worklet λ±λ‘
CSSμμ Workletμ μ¬μ©νκΈ° μ μ JavaScriptλ₯Ό μ¬μ©νμ¬ λ±λ‘ν΄μΌ ν©λλ€.
```htmlμ€λͺ :
- λ¨Όμ λΈλΌμ°μ μμ
paintWorkletAPIκ° μ§μλλμ§ νμΈν©λλ€. - κ·Έλ λ€λ©΄
CSS.paintWorklet.addModule('striped.js')λ₯Ό μ¬μ©νμ¬ Workletμ λ±λ‘ν©λλ€. - Paint Workletμ μ§μνμ§ μλ λΈλΌμ°μ μ λν λ체λ ν¬ν¨ν©λλ€. μ¬κΈ°μλ μ μ μ΄λ―Έμ§ λλ μ μ¬ν ν¨κ³Όλ₯Ό μ»κΈ° μν λ€λ₯Έ CSS κΈ°μ μ μ¬μ©νλ κ²μ΄ ν¬ν¨λ μ μμ΅λλ€.
3. CSSμμ Worklet μ¬μ©
μ΄μ CSSμμ `paint()` ν¨μλ₯Ό μ¬μ©νμ¬ Workletμ λͺ¨λ μμμ μ μ©ν μ μμ΅λλ€.
```css .striped-element { width: 200px; height: 100px; --stripe-color: steelblue; background-image: paint(striped); } ```μ€λͺ :
background-imageμμ±μpaint(striped)λ‘ μ€μ νμ¬ λΈλΌμ°μ μ λ±λ‘λ Workletμ μ¬μ©νμ¬ μμμ λ°°κ²½μ νμΈνΈνλλ‘ μ§μν©λλ€.- λν μ€νΈλΌμ΄ν μμμ μ μ΄νκΈ° μν΄ `--stripe-color` μ¬μ©μ μ μ μμ±μ `steelblue`λ‘ μ€μ ν©λλ€. μ΄ κ°μ μ ν¨ν CSS μμμΌλ‘ λ³κ²½νμ¬ λͺ¨μμ μ¬μ©μ μ§μ ν μ μμ΅λλ€.
κ³ κΈ κΈ°μ
μ΄μ Paint Workletμ λν κΈ°λ³Έμ μΈ μ΄ν΄κ° μμΌλ―λ‘ λͺ κ°μ§ λ κ³ κΈ κΈ°μ μ μ΄ν΄λ³΄κ² μ΅λλ€.
λμ μ€νμΌλ§μ μν CSS μ¬μ©μ μ μ μμ± μ¬μ©
Paint Workletμ κ°μ₯ κ°λ ₯ν κΈ°λ₯ μ€ νλλ CSS μ¬μ©μ μ μ μμ±(λ³μ)μ μ¬μ©νμ¬ λμκ³Ό λͺ¨μμ λμ μΌλ‘ μ μ΄ν μ μλ€λ κ²μ λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μ μνΈ μμ©, λ°μ΄ν° λ³κ²½ λλ κΈ°ν λμ μμΈμ μλ΅νλ κ·Έλν½μ λ§λ€ μ μμ΅λλ€.
μλ₯Ό λ€μ΄ μ¬μ©μ μ μ μμ±μ μ¬μ©νμ¬ `striped` Workletμμ μ€νΈλΌμ΄νμ λκ»λ₯Ό μ μ΄ν μ μμ΅λλ€.
```javascript // striped.js registerPaint('striped', class { static get inputProperties() { return ['--stripe-color', '--stripe-thickness']; } paint(ctx, geom, properties) { const stripeColor = properties.get('--stripe-color').toString(); const stripeThickness = parseInt(properties.get('--stripe-thickness').toString(), 10) || 10; const width = geom.width; const height = geom.height; ctx.fillStyle = stripeColor || 'black'; for (let i = 0; i < width + height; i += stripeThickness * 2) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(0, i); ctx.lineTo(0, i + stripeThickness); ctx.lineTo(i + stripeThickness, 0); ctx.closePath(); ctx.fill(); } } }); ```κ·Έλ° λ€μ CSSμμ:
```css .striped-element { width: 200px; height: 100px; --stripe-color: steelblue; --stripe-thickness: 20; background-image: paint(striped); } .striped-element:hover { --stripe-thickness: 10; } ```μ΄λ κ² νλ©΄ μ¬μ©μκ° μμ μλ‘ λ§μ°μ€λ₯Ό κ°μ Έκ°λ©΄ μ€νΈλΌμ΄νκ° λ μμμ§λλ€.
볡μ‘ν λͺ¨μκ³Ό ν¨ν΄ λ§λ€κΈ°
Canvas APIλ 볡μ‘ν λͺ¨μκ³Ό ν¨ν΄μ 그리기 μν λ€μν λ©μλλ₯Ό μ 곡ν©λλ€. μ΄λ¬ν λ©μλλ₯Ό μ¬μ©νμ¬ κ°λ¨ν κΈ°ννμ λͺ¨μμμ 볡μ‘ν νλν ν¨ν΄μ μ΄λ₯΄κΈ°κΉμ§ λͺ¨λ κ²μ λ§λ€ μ μμ΅λλ€.
μλ₯Ό λ€μ΄ λ°λν ν¨ν΄μ 그리λ Paint Workletμ λ§λ€ μ μμ΅λλ€.
```javascript registerPaint('checkerboard', class { paint(ctx, geom) { const size = 20; const width = geom.width; const height = geom.height; for (let i = 0; i < width; i += size) { for (let j = 0; j < height; j += size) { if ((i / size + j / size) % 2 === 0) { ctx.fillStyle = 'black'; } else { ctx.fillStyle = 'white'; } ctx.fillRect(i, j, size, size); } } } }); ```κ·Έλ° λ€μ CSSμμ μ¬μ©ν μ μμ΅λλ€.
```css .checkerboard-element { width: 200px; height: 100px; background-image: paint(checkerboard); } ```μ λλ©μ΄μ ꡬν
Paint Workletμ μκ°μ΄ μ§λ¨μ λ°λΌ λͺ¨μμ μ μ΄νλ μ¬μ©μ μ μ μμ±μ μ λ°μ΄νΈνμ¬ μ λλ©μ΄μ μ λ§λλ λ° μ¬μ©ν μ μμ΅λλ€. CSS μ λλ©μ΄μ , JavaScript μ λλ©μ΄μ λλ Web Animations APIλ₯Ό μ¬μ©νμ¬ μ΄λ¬ν λ³κ²½ μ¬νμ μ λν μ μμ΅λλ€.
μλ₯Ό λ€μ΄ `--stripe-offset` μ¬μ©μ μ μ μμ±μ μ λλ©μ΄μ νμ¬ μμ§μ΄λ μ€νΈλΌμ΄ν ν¨κ³Όλ₯Ό λ§λ€ μ μμ΅λλ€.
```javascript // animated-stripes.js registerPaint('animated-stripes', class { static get inputProperties() { return ['--stripe-color', '--stripe-offset']; } paint(ctx, geom, properties) { const stripeColor = properties.get('--stripe-color').toString(); const stripeOffset = parseFloat(properties.get('--stripe-offset').toString()); const width = geom.width; const height = geom.height; const stripeThickness = 20; ctx.fillStyle = stripeColor || 'black'; for (let i = -width; i < width + height; i += stripeThickness * 2) { const offset = i + stripeOffset; ctx.beginPath(); ctx.moveTo(offset, 0); ctx.lineTo(0, offset); ctx.lineTo(0, offset + stripeThickness); ctx.lineTo(offset + stripeThickness, 0); ctx.closePath(); ctx.fill(); } } }); ``` ```css .animated-stripes-element { width: 200px; height: 100px; --stripe-color: steelblue; --stripe-offset: 0; background-image: paint(animated-stripes); animation: moveStripes 5s linear infinite; } @keyframes moveStripes { from { --stripe-offset: 0; } to { --stripe-offset: 100; } } ```λͺ¨λ² μ¬λ‘ λ° κ³ λ € μ¬ν
- μ±λ₯: Paint Workletμ μ±λ₯μ΄ λ°μ΄λλλ‘ μ€κ³λμμ§λ§ μ½λλ₯Ό μ΅μ ννλ κ²μ΄ μ¬μ ν μ€μν©λλ€. λΆνμν κ³μ°μ νΌνκ³ ν¨μ¨μ μΈ λλ‘μ κΈ°μ μ μ¬μ©νμμμ€. Chrome DevTools μ±λ₯ ν¨λκ³Ό κ°μ λꡬλ₯Ό μ¬μ©νμ¬ λ³λͺ© νμμ μλ³νκ³ ν΄κ²°νμμμ€.
- λΈλΌμ°μ νΈνμ±: Paint Workletμ λΉκ΅μ μλ‘μ΄ κΈ°μ μ΄λ―λ‘ λΈλΌμ°μ μ§μμ μ¬μ ν μ§ννκ³ μμ΅λλ€. μ§μνμ§ μλ λΈλΌμ°μ μ λν λ체 κΈ°λ₯μ μ 곡ν΄μΌ ν©λλ€. [Can I use](https://caniuse.com/?search=paint%20api) μΉμ¬μ΄νΈλ λΈλΌμ°μ μ§μμ λν μ΅μ μ 보λ₯Ό μ 곡ν©λλ€.
- μ½λ ꡬμ±: Worklet μ½λλ₯Ό κΉλνκ³ μ ꡬμ±λ μνλ‘ μ μ§νμμμ€. μ£Όμμ μ¬μ©νμ¬ λ‘μ§μ μ€λͺ νκ³ λ³΅μ‘ν μμ μ λ μκ³ κ΄λ¦¬νκΈ° μ¬μ΄ ν¨μλ‘ λΆν΄νμμμ€. Webpack λλ Parcelκ³Ό κ°μ λͺ¨λ λ²λ€λ¬λ₯Ό μ¬μ©νμ¬ μ’ μμ±μ κ΄λ¦¬νκ³ λΉλ νλ‘μΈμ€λ₯Ό λ¨μννλ κ²μ κ³ λ €νμμμ€.
- μ κ·Όμ±: μ¬μ©μ μ μ κ·Έλν½μ΄ λͺ¨λ μ¬μ©μμκ² μ κ·Ό κ°λ₯νμ§ νμΈνμμμ€. μ΄λ―Έμ§μ λν λ체 ν μ€νΈ μ€λͺ μ μ 곡νκ³ ARIA μμ±μ μ¬μ©νμ¬ μ¬μ©μ μ μ UI μμμ λν μλ―Έλ‘ μ μ 보λ₯Ό μ 곡νμμμ€. μκ° μ₯μ κ° μλ μ¬μ©μμ μꡬ μ¬νμ κ³ λ €νκ³ λμμΈμ΄ 보쑰 κΈ°μ κ³Ό νΈνλλμ§ νμΈνμμμ€.
- 보μ: Paint Workletμ JavaScriptλ₯Ό μ€ννλ―λ‘ λ³΄μ μν₯μ μΌλμ λμμμ€. μ λ’°ν μ μλ λ°μ΄ν°λ₯Ό μ¬μ©νκ±°λ μ μ¬μ μΌλ‘ μ ν΄ν μ½λλ₯Ό μ€ννμ§ λ§μμμ€. 보μ μ½λ©μ λν λͺ¨λ² μ¬λ‘λ₯Ό λ°λΌ μ¬μ©μλ₯Ό 보μ μ·¨μ½μ±μΌλ‘λΆν° 보νΈνμμμ€. μ μ¬μ μΈ λ³΄μ μνμ λν΄ μ½λλ₯Ό μ κΈ°μ μΌλ‘ κ²ν νκ³ μλ €μ§ μ·¨μ½μ±μ ν΄κ²°νκΈ° μν΄ μ’ μμ±μ μ΅μ μνλ‘ μ μ§νμμμ€.
μ€μ μμ
Paint Workletμ λ€μν μ€μ μ ν리μΌμ΄μ μμ λλκ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ λ§λλ λ° μ¬μ©λκ³ μμ΅λλ€.
- λνν λ°μ΄ν° μκ°ν: Paint Workletμ μ¬μ©νμ¬ CSS λ΄μμ μ§μ λμ μ΄κ³ λνν λ°μ΄ν° μκ°νλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μ μνΈ μμ© λ° λ°μ΄ν° λ³κ²½μ μλ΅νλ λμ보λ, μ°¨νΈ λ° κ·Έλνλ₯Ό λ§λ€ μ μμ΅λλ€. μ€μκ° μ£Όμ μμ₯ μΆμ κΈ° λλ λνν μ§λ¦¬μ μ§λμ κ°μ μλ₯Ό κ³ λ €νμμμ€.
- μ¬μ©μ μ μ UI κ΅¬μ± μμ: Paint Workletμ μ¬μ©νμ¬ νμ€ HTML μμμ μ νμ λμ΄μλ μ¬μ©μ μ μ UI κ΅¬μ± μμλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ νΉμ μꡬ μ¬νμ λ§λ λ νΉνκ³ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λ§λ€ μ μμ΅λλ€. μ¬μ©μ μ μ μ§νλ₯ νμμ€, μ¬λΌμ΄λ λ° λ²νΌμ΄ κ·Έ μμ λλ€.
- μμ μ ν¨κ³Ό: Paint Workletμ μ¬μ©νμ¬ ν μ€μ², ν¨ν΄ λ° μ λλ©μ΄μ κ³Ό κ°μ κ΄λ²μν μμ μ ν¨κ³Όλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μΉ λμμΈμ μ°½μμ±κ³Ό κ°μ±μ λν μ μμ΅λλ€. μ¬μ©μ μ μ λ°°κ²½, ν λ리 λλ μ₯μ μμλ₯Ό λ§λλ κ²μ κ³ λ €νμμμ€.
- κ²μ κ°λ°: Paint Workletμμ Canvas APIλ₯Ό μ¬μ©νλ©΄ μ¬μ΄νΈ μ€νμΌ λ΄μμ μ§μ κ°λ²Όμ΄ κ²μ μμλ₯Ό μ¬μ©ν μ μμ΅λλ€. κ°λ¨ν μ λλ©μ΄μ λλ μκ°μ νΌλλ°±μ JavaScript μ€λ²ν€λ μμ΄ ν΅ν©ν μ μμ΅λλ€.
κ²°λ‘
CSS Paint Workletμ CSS λ΄μμ μ§μ μ¬μ©μ μ μμ λμ μ΄κ³ μ±λ₯μ΄ λ°μ΄λ κ·Έλν½μ λ§λ€κΈ° μν κ°λ ₯ν λꡬμ λλ€. Canvas APIλ₯Ό νμ©νκ³ λ³λμ μ€λ λμμ μ€ννμ¬ μ μ°μ±κ³Ό μ±λ₯μ κ³ μ ν μ‘°ν©μ μ 곡ν©λλ€. λΈλΌμ°μ μ§μμ΄ κ³μ κ°μ λ¨μ λ°λΌ Paint Workletμ μΉ κ°λ° ν΄ν·μμ μ μ λ μ€μν λΆλΆμ΄ λ κ²μ λλ€.
μ 곡λ μμ λ₯Ό μ¬μ©νμ¬ μ€ννκ³ Canvas API λ¬Έμλ₯Ό νμνκ³ μ°½μλ ₯μ λ°ννμμμ€! κ°λ₯μ±μ μ λ§ λ¬΄νν©λλ€.