최근 트렌드에 맞는 React 웹 디자인 UX/UI 구현하기 - 6편 (사용자 피드백 제공, 웹 접근성)

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

 

사용자 피드백 제공

사용자의 행동에 따라 즉각적인 피드백을 제공하는 것이 중요하다. 

버튼 클릭, 폼 제출 등의 상황에서 사용자에게 상태를 알려주는 것이 좋다.

 

또한 이걸 이용해서 다른 디자인에서도 뭔가 반응이 있다고 알려준다던지, 밋밋하지 않도록 Snackbar를 이용해서 보여주겠다.

 

import library

import { Button, TextField, Snackbar, Grid } from '@mui/material';
import { useState } from 'react';

 

 

App.js에 추가

const UserFeedback = () => {
  const [feedback, setFeedback] = useState('');
  const [open, setOpen] = useState(false);

  const handleChange = (event) => {
    setFeedback(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 여기에서 피드백을 처리하십시오 (예: API에 전송).
    console.log(feedback);
    setFeedback('');
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <Grid container direction="column" alignItems="center" justifyContent="center" spacing={2}>
      <Grid item xs={12}>
        <TextField
          label="피드백을 남겨주세요"
          value={feedback}
          onChange={handleChange}
          multiline
          rows={4}
          variant="outlined"
          fullWidth
        />
      </Grid>
      <Grid item xs={12}>
        <Button variant="contained" color="primary" onClick={handleSubmit}>
          피드백 전송
        </Button>
      </Grid>
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        message="피드백이 전송되었습니다."
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
      />
    </Grid>
  );
};

해당 리턴을 어디에 둘지 고려하여 작성하면 다음과 같이 구성이 된다.

 

피드백 전송 버튼을 누르게 되면 피드백이 전송되었습니다. 라고 하단에 스낵바가 나오게된다.

이걸 이용하여 어떤 메시지를 전달 할 것인지 사용자들에게 좀 더 친화적이고, 동적으로 보여주는 페이지를 완성시킬 수 있다.

 

 

마지막으로, 웹 접근성 관련이다.

 

웹 접근성

웹사이트는 다양한 사용자들이 이용할 수 있도록 웹 접근성을 고려해야 한다. 

 

 

AccessibleApp.js

import React from "react";
import HappyBee from "../images/3153.png";
import SadBee from "../images/3155.png";
import AngryBee from "../images/3154.png";
import LoginForm from "./LoginForm";
import "./AccessibleApp.css";
import { Container, Grid, Paper } from "@mui/material";

const AccessibleApp = () => {
  return (
    <div>
      <header>
        <h1>웹사이트 제목</h1>
      </header>
      <main>
        <Container>
          <Grid container spacing={12} className="grid-container">
            <Grid item xs={3} md={2} lg={3}>
              <Paper className="grid-item">
                <article>
                  <h2>기사 제목</h2>
                  <p>기사 내용...</p>
                </article>
              </Paper>
            </Grid>
            <Grid item xs={3} md={6} lg={4}>
              <Paper className="grid-item">
                <section>
                  <h2>이미지 갤러리</h2>
                  <img src={HappyBee} alt="설명이 있는 이미지 1" />
                  <img src={SadBee} alt="설명이 있는 이미지 2" />
                  <img src={AngryBee} alt="설명없음." />
                </section>
              </Paper>
            </Grid>
            <Grid item xs={3} md={6} lg={4}>
              <Paper className="grid-item">
                <section>
                  <LoginForm />
                </section>
              </Paper>
            </Grid>
          </Grid>
        </Container>
      </main>
      <footer>
        <p>Copyright © 2023 레서드 all rights reserved.</p>
      </footer>
    </div>
  );
};

export default AccessibleApp;

 

AccessibleApp.css

 

img {
    filter: brightness(1);
}

img:hover{
    filter: brightness(0.5);
}