최근 트렌드에 맞는 React 웹 디자인 UX/UI 구현하기 - 1편 (반응형 디자인, 다크 모드 지원)

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

 

 

기초 설치 파일

 

npm install @mui/material @emotion/react @emotion/styled styled-components @mui/icons-material

 

 

반응형 디자인

다양한 디바이스에서 웹사이트가 제대로 작동하도록 반응형 디자인을 구현해야 한다. 

CSS의 미디어 쿼리를 사용하거나, 라이브러리나 프레임워크를 사용하여 구현할 수 있다.

예시) Material-UI를 이용한 반응형 디자인

 

import React from "react";
import { Container, Grid } from "@mui/material";

const ResponsiveDesign = () => {
  return (
    <Container>
      <Grid container spacing={3}>
        <Grid item xs={12} md={6} lg={4}>
          첫번째 콘텐츠
        </Grid>
        <Grid item xs={12} md={6} lg={4}>
          두번째 콘텐츠
        </Grid>
        <Grid item xs={12} md={12} lg={4}>
          세번째 콘텐츠
        </Grid>
      </Grid>
    </Container>
  );
};

export default ResponsiveDesign;

 

 

다크모드 지원

사용자가 선택할 수 있는 다크 모드를 제공해서 사용자 경험을 향상시킬 수 있다. 
이를 위해 CSS 변수를 사용하거나, React context API를 사용하여 전체 애플리케이션에서 상태를 전달할 수 있다.

예시) React context API를 사용한 다크 모드 구현

 

 

modules/theme.js

import { createGlobalStyle } from "styled-components";

export const lightTheme = {
  body: "#FFF",
  text: "#000",
};

export const darkTheme = {
  body: "#1a1a1a",
  text: "#FFF",
};

export const GlobalStyle = createGlobalStyle`
    body{
        background-color : ${({ theme }) => theme.body};
        color: ${({ theme }) => theme.text};
        transition: background-color 0.3s ease, color 0.3s ease; 
    }
`;

 

modules/useDarkMode.js

import { useEffect, useState } from "react";

const useDarkMode = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const darkMode = localStorage.getItem("darkMode") === "true";
    setIsDarkMode(darkMode);
  }, []);

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
    localStorage.setItem("darkMode", !isDarkMode);
  };

  return [isDarkMode, toggleDarkMode];
};

export default useDarkMode;

 

App.js 수정

import React, { useState } from "react";
import ResponsiveDesign from "./components/ResponsiveDesign";
import { ThemeProvider } from "styled-components";
import useDarkMode from "./modules/useDarkMode";
import { GlobalStyle, lightTheme, darkTheme } from "./modules/theme";
import {
  AppBar,
  Box,
  Container,
  Toolbar,
  Typography,
  Button,
  IconButton,
} from "@mui/material";
import { Brightness4, Brightness7 } from "@mui/icons-material";

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

  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={() => setSelectedMenu("Menu1")}>
              반응형 디자인
            </Button>
            <IconButton
              edge="end"
              color="inherit"
              aria-label="toggle dark mode"
              onClick={toggleDarkMode}
            >
              {isDarkMode ? <Brightness7 /> : <Brightness4 />}
            </IconButton>
          </Toolbar>
        </AppBar>
        <Container>
          <Box mt={4}>{renderContent()}</Box>
        </Container>
      </div>
    </ThemeProvider>
  );
};

export default App;

 

잘 확인해보면 오른쪽 상단에 버튼이 하나 있다.

누를때마다 다크모드로 전환한다.