최근 트렌드에 맞는 React 웹 디자인 UX/UI 구현하기 - 3편 (인터랙티브한 애니메이션, 타이포그래피)

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

 

라이브러리 설치

npm install @react-spring/web @react-spring/core @mui/material @emotion/react @emotion/styled

 

인터랙티브한 애니메이션

사용자와 상호작용하는 애니메이션을 추가하면 웹사이트가 더 살아있게 느껴진다. 

framer-motion 같은 애니메이션 라이브러리를 사용하면 간편하게 애니메이션을 구현할 수 있다.

또한 @mui/system도 이용해서 구현해보겠다.

예시) framer-motion 와 @mui/system을 이용한 애니메이션 구현

 

InteractiveAnimation.js

import React, { useState } from "react";
import { styled } from "@mui/system";

const AnimatedBox = styled("div")({
  display: "inline-block",
  backgroundColor: "blue",
  width: "100px",
  height: "100px",
  borderRadius: "50%",
  transition: "all 0.3s ease",
  cursor: "pointer",
  "&:hover": {
    backgroundColor: "green",
    transform: "scale(1.5)",
  },
});

const InteractiveAnimation = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <div>
      <AnimatedBox
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      />
      {isHovered && <p>Hovering over the animated box!</p>}
    </div>
  );
};

export default InteractiveAnimation;

 

AnimatedComponent.js

import React, { useState } from "react";
import { motion } from "framer-motion";

const AnimatedComponent = () => {
  const [text, setText] = useState("Click me!");
  const variants = {
    hidden: { opacity: 0, scale: 0 },
    visible: { opacity: 1, scale: 1 },
  };

  const handleClick = () => {
    setText("Hello React!");
  };

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      transition={{ duration: 2 }}
      variants={variants}
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "150px",
        height: "100px",
        background: "coral",
        cursor: "pointer",
      }}
      onClick={handleClick}
    >
      {text}
    </motion.div>
  );
};

export default AnimatedComponent;

 

 

다음과 같이 왼쪽은 framer-motion을 이용, 오른쪽은 @mui/system을 이용한 인터랙티브 디자인이다.

 

처음 로드 될때 점점 글자와 박스가 커지게 했고, 클릭을하면 글자가 변경되도록 만들었다.

 

 

그리고 우측의 파란 공모양은 마우스를 오버하게 되면 다음과 같이 변경된다.

 

 

 

타이포그래피

텍스트를 읽기 쉽게 하고 시각적으로 매력적으로 만들려면 적절한 글꼴과 서체 크기, 줄 간격을 사용해야 한다. 

구글 웹 폰트(Google Fonts)를 사용하면 다양한 글꼴을 쉽게 적용할 수 있다.

 

TypographyExample.js

import React from "react";
import Typography from "@mui/material/Typography";
import { Box } from "@mui/system";

const TypographyExample = () => {
  return (
    <Box>
      <Typography variant="h1" component="div" gutterBottom>
        h1. Heading
      </Typography>
      <Typography variant="h2" component="div" gutterBottom>
        h2. Heading
      </Typography>
      <Typography variant="h3" component="div" gutterBottom>
        h3. Heading
      </Typography>
      <Typography variant="h4" component="div" gutterBottom>
        h4. Heading
      </Typography>
      <Typography variant="h5" component="div" gutterBottom>
        h5. Heading
      </Typography>
      <Typography variant="h6" component="div" gutterBottom>
        h6. Heading
      </Typography>
      <Typography variant="subtitle1" component="div" gutterBottom>
        subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </Typography>
      <Typography variant="subtitle2" component="div" gutterBottom>
        subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </Typography>
      <Typography variant="body1" component="div" gutterBottom>
        body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </Typography>
      <Typography variant="body2" component="div" gutterBottom>
        body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </Typography>
      <Typography variant="caption" component="div" gutterBottom>
        caption. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </Typography>
      <Typography variant="overline" component="div" gutterBottom>
        overline. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </Typography>
    </Box>
  );
};

export default TypographyExample;