최근 트렌드에 맞는 React 웹 디자인 UX/UI 구현하기 - 2편 (미니멀리즘 디자인, 그리드 레이아웃)

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

 

미니멀리즘 디자인

깔끔하고 간결한 디자인은 사용자들에게 인기가 많다. 

불필요한 요소를 제거하고, 중요한 정보와 기능에 집중할 수 있도록 디자인해야 한다.

 

MinimalLoginForm.js

import React from "react";
import "../MinimalLoginForm.css";

const MinimalLoginForm = () => {
  return (
    <div className="minimal-form">
      <h1 className="title">로그인</h1>
      <form>
        <input type="text" placeholder="이메일" className="minimal-input" />
        <input
          type="password"
          placeholder="비밀번호"
          className="minimal-input"
        />
        <button type="submit" className="minimal-button">
          로그인
        </button>
      </form>
    </div>
  );
};

export default MinimalLoginForm;

 

MinimalLoginForm.css

body {
    font-family: Arial, sans-serif;
  }
  
  .minimal-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .minimal-input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
  }
  
  .minimal-input:focus {
    border-color: #333;
  }
  
  .minimal-button {
    width: 100%;
    height: 40px;
    background-color: #333;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }

 

미니멀리즘 디자인 적용 로그인 페이지 구현

 

그리드 레이아웃

정렬된 레이아웃을 구현하려면 그리드 시스템을 사용하는 게 좋다. 

그리드 시스템을 사용하면 웹사이트의 구조를 깔끔하게 유지할 수 있고, 다양한 디바이스에서도 일관된 레이아웃을 보여줄 수 있다. 

Material-UI나 Bootstrap 같은 라이브러리를 사용하면 쉽게 그리드 레이아웃을 구현할 수 있다.

 

GridExample.js

import React from "react";
import { Container, Grid, Paper } from "@mui/material";
import "../GridExample.css";

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

export default GridExample;

 

GridExample.css

.grid-container {
    margin-top: 20px;
  }
  
  .grid-item {
    padding: 20px;
    font-size: 20px;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 4px;
  }