최근 트렌드에 맞는 React 웹 디자인 UX/UI 구현하기 - 4편 (색상 팔레트, 아이콘 라이브러리 사용)

1. 반응형 디자인
2. 다크 모드 지원
3. 미니멀리즘 디자인
4. 그리드 레이아웃
5. 인터랙티브한 애니메이션
6. 타이포그래피
7. 색상 팔레트
8. 아이콘 라이브러리 사용
9. 컴포넌트 라이브러리 활용
10. 로딩 애니메이션 구현
11. 사용자 피드백 제공
12. 웹 접근성

 

라이브러리 설치

npm install react-transition-group @mui/icons-material

 

색상 팔레트

좋은 색상 조합은 웹사이트를 더 매력적으로 만든다. 
색상 팔레트를 선택할 때는 대조되는 색상이나 조화로운 색상을 사용하기가 좋다. 
사이트 전체에서 일관된 색상 팔레트를 사용하면 더 전문적으로 보일 것이다.

 

ColorPalette.js

import React, { useState } from "react";
import { Box, Typography, Grid } from "@mui/material";
import { CSSTransition } from "react-transition-group";
import "./fade.css";

const colors = [
  { background: "#f44336", text: "#fff" },
  { background: "#e91e63", text: "#fff" },
  { background: "#9c27b0", text: "#fff" },
  { background: "#673ab7", text: "#fff" },
  { background: "#3f51b5", text: "#fff" },
  { background: "#03a9f4", text: "#fff" },
  { background: "#00bcd4", text: "#fff" },
  { background: "#4caf50", text: "#fff" },
  { background: "#8bc34a", text: "#000" },
  { background: "#cddc39", text: "#000" },
  { background: "#ffeb3b", text: "#000" },
  { background: "#ffc107", text: "#000" },
  { background: "#ff9800", text: "#000" },
  { background: "#ff5722", text: "#fff" },
  { background: "#795548", text: "#fff" },
  { background: "#9e9e9e", text: "#fff" },
  { background: "#607d8b", text: "#fff" },
];

function ColorPalette() {
  const [selectedColor, setSelectedColor] = useState(colors[0]);
  const [showText, setShowText] = useState(true);

  const handleColorChange = (color) => {
    setShowText(false);
    setTimeout(() => {
      setSelectedColor(color);
      setShowText(true);
    }, 300);
  };

  return (
    <Box
      sx={{
        height: "100vh",
        backgroundColor: selectedColor.background,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Box sx={{ position: "absolute", top: 100 }}>
        <Grid container spacing={2}>
          {colors.map((color, index) => (
            <Grid item key={index} onClick={() => handleColorChange(color)}>
              <Box
                sx={{
                  width: 50,
                  height: 50,
                  backgroundColor: color.background,
                  border: "1px solid black",
                }}
              ></Box>
            </Grid>
          ))}
        </Grid>
      </Box>
      <CSSTransition
        in={showText}
        timeout={300}
        classNames="fade"
        unmountOnExit
        mountOnEnter
      >
        <Typography variant="h4" style={{ color: selectedColor.text }}>
          Hello, React!
        </Typography>
      </CSSTransition>
    </Box>
  );
}

export default ColorPalette;

 

동적으로 색상이 변한다.

 

 

아이콘 라이브러리 사용

아이콘은 사용자에게 기능을 명확하게 전달하고, 디자인을 향상시킬 수 있다.

Font Awesome, Material Icons 등 다양한 아이콘 라이브러리를 사용하여 웹사이트에 아이콘을 쉽게 추가할 수 있다.

 

Material Icons 예시)

 

import React, { useState } from "react";
import { Box, Typography, IconButton, TextField, Button } from "@mui/material";
import {
  Home as HomeIcon,
  Work as WorkIcon,
  School as SchoolIcon,
} from "@mui/icons-material";

const categories = [
  {
    title: "Home",
    icon: <HomeIcon />,
    content: "This is the Home category.",
  },
  {
    title: "Work",
    icon: <WorkIcon />,
    content: "This is the Work category.",
  },
  {
    title: "School",
    icon: <SchoolIcon />,
    content: "This is the School category.",
  },
];

function CategoryList() {
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleCategoryClick = (category) => {
    setSelectedCategory(category);
  };

  return (
    <Box
      sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <Box sx={{ display: "flex", justifyContent: "center", marginBottom: 2 }}>
        {categories.map((category, index) => (
          <IconButton key={index} onClick={() => handleCategoryClick(category)}>
            {category.icon}
          </IconButton>
        ))}
      </Box>

      {selectedCategory && (
        <Box sx={{ width: "100%", maxWidth: 400 }}>
          <Typography variant="h5">
            {selectedCategory.icon}
            {selectedCategory.title}
          </Typography>
          <Typography variant="body1" sx={{ marginBottom: 2 }}>
            {selectedCategory.content}
          </Typography>

          <Box sx={{ display: "flex", flexDirection: "column" }}>
            <TextField
              label="Your Name"
              variant="outlined"
              size="small"
              sx={{ marginBottom: 1 }}
            />
            <TextField
              label="Your Comment"
              variant="outlined"
              size="small"
              multiline
              rows={4}
              sx={{ marginBottom: 1 }}
            />
            <Button variant="contained" color="primary">
              Submit
            </Button>
          </Box>
        </Box>
      )}
    </Box>
  );
}

export default CategoryList;

 

이런식으로 아이콘을 넣어서 글자를 보조하여 아이콘으로 확실하게 확인이 가능하게 하면 좋다.