최근 트렌드에 맞는 React 웹 디자인 UX/UI 구현하기 - 5편 (컴포넌트 라이브러리, 로딩 애니메이션)

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

 

 

컴포넌트 라이브러리 활용

UI 컴포넌트 라이브러리를 사용하면 일관된 스타일의 컴포넌트를 쉽게 구현할 수 있다. 

Material-UI, Ant Design, Bootstrap 등과 같은 라이브러리를 사용하면 더 빠르게 웹사이트를 구축할 수 있다.

 

LoginForm.js

import React from "react";
import {
  Box,
  Container,
  Typography,
  TextField,
  Button,
  FormControlLabel,
  Checkbox,
} from "@mui/material";

function LoginForm() {
  return (
    <Container maxWidth="sm">
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginTop: 4,
        }}
      >
        <Typography variant="h4" sx={{ marginBottom: 3 }}>
          Login
        </Typography>
        <TextField
          label="Email"
          type="email"
          variant="outlined"
          fullWidth
          required
          sx={{ marginBottom: 2 }}
        />
        <TextField
          label="Password"
          type="password"
          variant="outlined"
          fullWidth
          required
          sx={{ marginBottom: 2 }}
        />
        <FormControlLabel
          control={<Checkbox />}
          label="Remember me"
          sx={{ marginBottom: 2 }}
        />
        <Button variant="contained" color="primary" fullWidth>
          Login
        </Button>
      </Box>
    </Container>
  );
}

export default LoginForm;

 

이렇게 간편하게 기존에 제공되는 컴포넌트 라이브러리를 사용하게 되면 금방 로그인 폼이 완성된다.

 

또한 디자인을 다음과 같은 방법으로 좀 더 최근 트렌드에 맞춰서 변경 할 수 있다.

 

 

로딩 애니메이션 구현

로딩 애니메이션은 사용자에게 작업 진행 상황을 알리고, 기다리는 동안 지루하지 않게 해준다. 

사용자 경험을 향상시키기 위해 로딩 애니메이션을 추가할 수 있다.

 

App.js 수정

import { CircularProgress } from "@mui/material";

모듈 추가하기

 

const App = () => {
  const [selectedMenu, setSelectedMenu] = useState("");

  const handleButtonClick = (menu) => {
    setLoading(true);
    setTimeout(() => {
      setSelectedMenu(menu);
      setLoading(false);
    }, 1000);
  };

  const renderContent = () => {
    switch (selectedMenu) {
      case "Menu1":
        return <ResponsiveDesign />;
      default:
        return null;
    }
  };

  return (
    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
      <GlobalStyle />
      <div className="App">
        <AppBar position="static">
          <Toolbar>
            <Typography variant="6" component="div" sx={{ flexGrow: 1 }}>
              React Page
            </Typography>
            <Button color="inherit" onClick={() => handleButtonClick("Menu1")}>
              반응형 디자인
            </Button>
          </Toolbar>
        </AppBar>
        <Container>
          <Box mt={4}>
            {loading ? (
              <CircularProgress
                sx={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  marginTop: "-25px",
                  marginLeft: "-25px",
                }}
              />
            ) : (
              renderContent()
            )}
          </Box>
        </Container>
      </div>
    </ThemeProvider>
  );
};

이제 상단바에 있는 버튼을 클릭해보자.

 

물론 강제 1초동안 나오게 하고, 뒤에 로딩되도록 만들었지만, 어느페이지가 됐던간에 로딩이 완료되도록 제일 먼저 띄워주는게 좋을 듯 싶다.