LabEx
로그인무료 가입

React 로 픽셀 아트 애니메이터 만들기

ReactBeginner
지금 연습하기

소개

이 프로젝트에서는 React 를 사용하여 간단한 픽셀 아트 애니메이터를 구축하는 과정을 안내합니다. 이 가이드가 끝나면 픽셀 아트를 그리고 결과 애니메이션을 볼 수 있는 기본적인 픽셀 아트 편집기를 갖게 될 것입니다. 이 프로젝트는 초보자도 쉽게 따라 할 수 있으며, React 와 픽셀 아트 세계에 빠져들 수 있는 재미있는 방법을 제공합니다!

👀 미리보기

Pixel Art Animator Preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

  • React 프로젝트를 초기화하고 필요한 종속성을 설치하는 방법.
  • 사용자가 색상을 선택할 수 있는 색상 팔레트 컴포넌트를 만드는 방법.
  • 사용자가 픽셀 아트를 그릴 수 있도록 드로잉 그리드를 구축하는 방법.
  • 진행 중인 픽셀 아트를 표시하는 아트 미리보기 컴포넌트를 구현하는 방법.
  • 모든 컴포넌트를 메인 앱에서 결합하는 방법.
  • 사용자 경험을 개선하기 위해 애플리케이션의 스타일을 지정하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

  • React 프로젝트를 설정하고 종속성을 설치합니다.
  • React 에서 함수형 컴포넌트를 생성합니다.
  • React state 와 props 를 사용하여 애플리케이션 데이터를 관리합니다.
  • React 에서 이벤트를 처리합니다.
  • CSS 를 사용하여 React 애플리케이션의 스타일을 지정합니다.

프로젝트 설정

요구 사항:

  • 새로운 React 프로젝트에서 종속성 설치.

기능:

  • 필요한 종속성과 기본적인 프로젝트 구조로 프로젝트를 초기화합니다.

단계:

  1. 터미널을 열고 프로젝트 폴더로 이동합니다:

    cd react-pixel-art-animator

    이 명령은 project 디렉토리 아래에서 실행해야 합니다.

  2. 프로젝트에서 종속성 설치:

    npm install
✨ 솔루션 확인 및 연습

색상 팔레트 컴포넌트 디자인

요구 사항:

  • 사용자가 색상을 선택할 수 있는 색상 팔레트를 생성합니다.

기능:

  • 일련의 색상 옵션을 표시합니다.
  • 사용자가 색상을 선택할 수 있도록 합니다.

단계:

// src/Palette.js
import React from "react";

const colors = [
  "#FFFFFF",
  "#000000",
  "#F78CA2",
  "#4caf50",
  "#5CD2E6",
  "#FFD700",
  "#FF69B4",
  "#8bc34a",
  "#8A2BE2",
  "#5F9EA0"
];

function Palette({ selectedColor, setSelectedColor }) {
  return (
    <div className="palette">
      {colors.map((color) => (
        <div
          key={color}
          className={`color-box ${color === selectedColor ? "selected" : ""}`}
          style={{ backgroundColor: color }}
          onClick={() => setSelectedColor(color)}
        ></div>
      ))}
    </div>
  );
}

export default Palette;

이 컴포넌트는 일련의 색상 상자를 표시하며, 사용자는 이를 클릭하여 색상을 선택할 수 있습니다.

✨ 솔루션 확인 및 연습

그리기 그리드 구축

요구 사항:

  • 사용자가 픽셀 아트를 그릴 수 있는 그리드를 구성합니다.

기능:

  • 그리드 레이아웃을 렌더링합니다.
  • 사용자가 선택한 색상으로 그리드 사각형을 채울 수 있도록 합니다.

단계:

// src/Grid.js
import React from "react";

function Grid({ grid, setGrid, selectedColor }) {
  const updatePixel = (rowIndex, colIndex) => {
    const newGrid = [...grid];
    newGrid[rowIndex][colIndex] = selectedColor;
    setGrid(newGrid);
  };

  return (
    <div className="grid">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="grid-row">
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              className="grid-pixel"
              style={{ backgroundColor: color }}
              onClick={() => updatePixel(rowIndex, colIndex)}
            ></div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default Grid;

그리드 컴포넌트를 통해 사용자는 각 사각형을 클릭하여 픽셀 아트를 그릴 수 있습니다.

✨ 솔루션 확인 및 연습

아트 미리보기 구현

요구 사항:

  • 사용자가 생성한 픽셀 아트의 미리보기를 표시합니다.

기능:

  • 사용자의 픽셀 아트를 생성되는 대로 렌더링합니다.

단계:

// SpriteDisplay.js;
import React from "react";

function SpriteDisplay({ grid }) {
  return (
    <div className="sprite-display">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="sprite-row">
          {row.map((color, colIndex) => (
            <div
              key={colIndex}
              className="sprite-pixel"
              style={{ backgroundColor: color }}
            ></div>
          ))}
        </div>
      ))}
    </div>
  );
}

export default SpriteDisplay;
✨ 솔루션 확인 및 연습

메인 앱에 컴포넌트 통합

요구 사항:

  • Palette, Grid 및 SpriteDisplay 컴포넌트를 결합합니다.

기능:

  • 통합된 컴포넌트와 함께 메인 애플리케이션을 표시합니다.

단계:

// App.js
import React, { useState } from "react";
import Palette from "./Palette";
import Grid from "./Grid";
import SpriteDisplay from "./SpriteDisplay";
import "./App.css";

const initialCatSprite = [
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#000000",
    "#8bc34a"
  ],
  [
    "#ffffff",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a"
  ],
  [
    "#8bc34a",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#4caf50",
    "#8bc34a",
    "#8bc34a",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#8bc34a",
    "#8bc34a",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ],
  [
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff",
    "#ffffff"
  ]
];

function App() {
  const [selectedColor, setSelectedColor] = useState("#000000");
  const [grid, setGrid] = useState(initialCatSprite);

  return (
    <div className="App">
      <h1>Pixel Art Animator</h1>
      <Palette
        selectedColor={selectedColor}
        setSelectedColor={setSelectedColor}
      />
      <Grid grid={grid} setGrid={setGrid} selectedColor={selectedColor} />
      <SpriteDisplay grid={grid} />
    </div>
  );
}

export default App;
✨ 솔루션 확인 및 연습

애플리케이션 스타일링

요구 사항:

  • 애플리케이션을 시각적으로 매력적으로 만듭니다.

기능:

  • 사용자 경험 향상을 위해 앱 컴포넌트의 스타일을 지정합니다.

단계:

/*App.css*/
.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: "Arial", sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.palette {
  display: flex;
  margin-bottom: 20px;
}

.color-box {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-box:hover,
.color-box.selected {
  border-color: #000;
}

.grid {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.grid-row {
  display: flex;
}

.grid-pixel {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.grid-pixel:hover {
  border-color: #888;
}

.sprite-display {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.sprite-row {
  display: flex;
}

.sprite-pixel {
  width: 30px;
  height: 30px;
}

/* Adjusting the overall size and space for a modern look */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9ecef;
}
✨ 솔루션 확인 및 연습

앱 실행

앱을 실행하려면:

  1. 터미널 또는 명령 프롬프트를 엽니다.

  2. 프로젝트의 루트 디렉토리 ( package.json 파일이 있는 곳) 에 있는지 확인합니다.

  3. 개발 서버를 시작합니다:

    npm start

    이제 브라우저의 8080 포트에서 기본적인 React 앱이 실행되는 것을 볼 수 있습니다. 이 기본 사항을 기반으로 앱을 구축할 것입니다.

  4. 페이지의 효과는 다음과 같습니다:

    Pixel art animator demo
✨ 솔루션 확인 및 연습

요약

축하합니다! React 를 사용하여 기본적인 Pixel Art Animator 를 성공적으로 구축했습니다. 이제 픽셀로 그림을 그리고, 팔레트에서 색상을 선택하고, 픽셀 아트를 미리 볼 수 있습니다. 학습 여정을 계속하면서 픽셀 아트를 데이터베이스에 저장하고, 실행 취소/다시 실행 기능을 구현하거나, 애니메이션을 통합하는 등 더 많은 기능을 추가하는 것을 고려해 보세요.

관련 React 코스
초보자를 위한 React

초보자를 위한 React

reactjavascriptweb-development
React 를 사용하여 메모 앱 만들기

React 를 사용하여 메모 앱 만들기

reactjavascriptweb-development
React 로 크리스마스 위시리스트 빌더 만들기

React 로 크리스마스 위시리스트 빌더 만들기

reactjavascriptweb-development