<head>
  <meta charset="UTF-8" />
  <title>이미지 벡터 변환(Image to Vector) 시뮬레이터 & React 코드 | 양파고</title>
  <meta
    name="description"   content="컴퓨터는 이미지를 어떻게 숫자로 인식할까요? 그리드 픽셀을 클릭하면 실시간으로 1차원 벡터 배열로 변환되는 과정을 눈으로 확인하세요. 딥러닝 기초 '이미지 데이터 전처리' 개념을 잡는 인터랙티브 시뮬레이터와 React 소스 코드를 제공합니다."   />
  <meta name="keywords" content="Image to Vector, 이미지 벡터 변환, 딥러닝 기초, 컴퓨터 비전 원리, 픽셀 데이터, React 시뮬레이션 코드, AI 학습 데이터, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <meta   property="og:title"   content="이미지 벡터 변환(Image to Vector) 시뮬레이터 & React 코드"  />
  <meta  property="og:description" content="내가 그린 그림이 숫자로 바뀐다? 🎨 픽셀을 콕콕 찍으면 [0, 255, 0...] 벡터로 변하는 과정을 직접 체험해보세요. AI가 이미지를 이해하는 첫 번째 단계! (React 전체 코드 포함), 양파고, Yang Phago, 노션, 양파고 노션"  />
  <meta property="og:image" content="<https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fclaude.ai%2Fimages%2Fclaude_ogimage.png&blockId=24a62b09-b72b-80d9-8b81-e04e4cc267b9&width=512>" />
  <meta property="og:url" content="<https://yangphago.oopy.io/24a62b09-b72b-80e4-9b11-eb5b7f1bf618>" />
  <meta property="og:type" content="website" />
</head>

<aside> 💡

</aside>

이미지에서 벡터로의 변환 시뮬레이션 | Claude

클로드3로 구현한 실습용 사이트

image.png

import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";

const ImageToVectorSimulation = () => {
  const [gridSize, setGridSize] = useState(5);
  const [pixelValues, setPixelValues] = useState([]);
  const canvasRef = useRef(null);

  useEffect(() => {
    initializePixelValues();
  }, [gridSize]);

  const initializePixelValues = () => {
    const newPixelValues = Array(gridSize * gridSize).fill(0);
    setPixelValues(newPixelValues);
  };

  const handlePixelClick = (index) => {
    const newPixelValues = [...pixelValues];
    newPixelValues[index] = newPixelValues[index] === 0 ? 255 : 0;
    setPixelValues(newPixelValues);
  };

  const drawGrid = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const cellSize = canvas.width / gridSize;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    pixelValues.forEach((value, index) => {
      const x = (index % gridSize) * cellSize;
      const y = Math.floor(index / gridSize) * cellSize;

      ctx.fillStyle = `rgb(${value}, ${value}, ${value})`;
      ctx.fillRect(x, y, cellSize, cellSize);

      ctx.strokeStyle = '#ccc';
      ctx.strokeRect(x, y, cellSize, cellSize);
    });
  };

  useEffect(() => {
    drawGrid();
  }, [pixelValues, gridSize]);

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>이미지에서 벡터로의 변환 시뮬레이션</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <p className="mb-2">그리드 크기: {gridSize}x{gridSize}</p>
          <Slider
            value={[gridSize]}
            onValueChange={([newSize]) => setGridSize(newSize)}
            min={3}
            max={10}
            step={1}
          />
        </div>

        <div className="flex justify-center">
          <canvas
            ref={canvasRef}
            width={300}
            height={300}
            onClick={(e) => {
              const rect = canvasRef.current.getBoundingClientRect();
              const x = e.clientX - rect.left;
              const y = e.clientY - rect.top;
              const cellSize = 300 / gridSize;
              const index = Math.floor(y / cellSize) * gridSize + Math.floor(x / cellSize);
              handlePixelClick(index);
            }}
            style={{ cursor: 'pointer' }}
          />
        </div>

        <div>
          <p className="mb-2">벡터 표현:</p>
          <div className="bg-gray-100 p-2 rounded overflow-x-auto">
            [{pixelValues.join(', ')}]
          </div>
        </div>

        <div>
          <p className="mb-2">설명:</p>
          <p>
            이 시뮬레이션은 간단한 흑백 이미지가 어떻게 벡터로 변환되는지 보여줍니다. 각 픽셀은 0(검은색)
            또는 255(흰색) 값을 가집니다. 그리드의 각 셀을 클릭하여 픽셀 값을 변경할 수 있습니다. 
            이미지의 모든 픽셀 값은 1차원 벡터로 표현됩니다.
          </p>
        </div>
      </CardContent>
    </Card>
  );
};

export default ImageToVectorSimulation;