클라우딩 어플리케이션 엔지니어링 TIL Day 45 - React & Bootstrap 웹 프로젝트 제작 (3) 디자인 트렌드 알아보기

이번 시간에는 다양한 CSS 라이브러리를 적용해보면서 가져다가 사용하는 연습을 해보자

 

# Ant Design

Ant Design에 대해서 알아보자

아래는 Ant Design 공식 사이트이다

https://ant.design/

Ant Design - The world's second most popular React UI framework

Ant Design 깃허브에 들어가서 확인해보면 굉장히 많은 사람들이 사용 중임을 알 수 있다

 

# Antd 추천 컴포넌트

- DataPicker

- Upload

- Modal

이 외에도 여러 컴포넌트들이 존재하니 다양하게 사용해보자

---

# Material UI

이번에는 가장 많이 사용되는  MUI에 대해서 알아보자

아래는 MUI 공식 사이트이다

https://mui.com/

MUI: The React component library you always wanted

마찬가지로 MUI 깃허브에 들어가서 버전 정보, 스타 개수 등 여러 정보를 확인할 수 있다

 

# MUI 추천 컴포넌트

- Drawer

---

# Ant Design으로 만들어보기

지난 시간에는 Bootstrap을 사용해서 간단한 이벤트 페이지를 만들어보았다

그 프로젝트를 Antd와 MUI 컴포넌트를 사용해서 수정해보겠다

우선 Antd를 사용하기 위해서 설치해준다

npm install antd --save

기존 Bootstrap으로 작성된 코드를 활용해서 Antd로 변경해보자

기존의 Section 태그를 Antd의 Flex 컴포넌트로 변경해보자

기존 코드

 <section className={styles.header}>
            <button className={styles.header__btn}>
              <img src={arrow_left} alt="왼쪽 화살표" />
            </button>
            <h1 className={styles.header__title}>크리스마스 특별할인전</h1>
            <button className={styles.header__btn}>
              <img src={share} alt="공유하기" />
            </button>
          </section>

변경된 코드

 <Flex
            justify="space-between"
            align="center"
            className={styles.header}
          >
            <button className={styles.header__btn}>
              <img src={arrow_left} alt="왼쪽 화살표" />
            </button>
            <h1 className={styles.header__title}>크리스마스 특별할인전</h1>
            <button className={styles.header__btn}>
              <img src={share} alt="공유하기" />
            </button>
          </Flex>

이런 식으로 기존의 Bootstrap의 Component를 Antd로 변경한 화면은 다음과 같다

큰 차이는 없지만 비슷한 컴포넌트를 변경만 해주면 원하는 디자인과 기능으로 금방 구현됨을 알 수 있다

---

# MUI로 만들어보기

위의 방법과 동일하게 MUI를 우선 설치한다

npm install @mui/material @emotion/react @emotion/styled

MUI로 변경할 파일을 생성해서 똑같이 변경해보자

MUI의 Card, Icons, Button 등 컴포넌트를 활용해서 수정해볼 것이다

 

기존의 Antd의 Flex 컴포넌트와 비슷한 MUI의 Stack 컴포넌트를 사용해서 수정해보자

또한 이미지 형태로 사용하던 아이콘도 MUI에서 제공해주는 아이콘으로 변경해보겠다

변경된 코드

<Stack
            justifyContent="space-between"
            alignItems="center"
            direction="row"
            className={styles.header}
          >
            <button className={styles.header__btn}>
              <ArrowBackIosNew style={{ color: "#383838" }} />
            </button>
            <h1 className={styles.header__title}>크리스마스 특별할인전</h1>
            <button className={styles.header__btn}>
              <FileUploadOutlined style={{ color: "#383838" }} />
            </button>
          </Stack>

이런 식으로 기존 코드들을 MUI 컴포넌트로 수정해보면서 여러 라이브러리를 사용해보는 연습을 하자

이 때 공식 문서를 참고해서 하나씩 고쳐주면 된다

---

# 2023 디자인 트렌드 알아보기

1. 클레이모피즘

3D 인기가 많아지면서 플랫한 디자인들과 혼합한데서 시작되었다

푹신하고 친근한 시각적 표현을 제공한다

매우 둥글둥글하며 3차원적인 디자인이 특징이다

하지만 현재는 약간 인기가 식었다

https://hype4.academy/tools/claymorphism-generator

SquarePlanet

 

2. 글래스모피즘

흐린 배경, 수채색, 반투명 유리 디자인이 특징이며

Mac OS 빅서, 윈도우 11에서 쓰인다

투명도와 레이어 계층을 제공한다

https://hype4.academy/tools/glassmorphism-generator

SquarePlanet

 

3. 미니멀리즘

기존 미니멀리즘에서 black, white 컬러만 사용하여 단순하면서도 깔끔한 디자인이 특징이다

 

4. 3D Design

VR, AR, 메타버스 등의 발전으로 입체적인 디자인이 각광받고 있다

현재는 메타버스에 대한 관심이 조금 줄었지만 여러 신기술과 조합해서 사용이 가능하다

Three.js, ammo.js 등으로 3D 디자인을 구현할 수 있다

React-three-fiber 로 react를 개발하듯이 3D 개발이 가능하다

아래는 3D 디자인 관련 참고 사이트이다

# Three.js 공식 사이트

https://threejs.org/

Three.js – JavaScript 3D Library

 

# Three.js 학습 사이트

https://threejs-journey.com/#presentation

Three.js Journey — Learn WebGL with Three.js

 

# 글래스모피즘 이용 css 생성 사이트

https://css.glass/

glassmorphism-generator

 

# react-three-fiber(r3f) 참고 자료

• https://ioxywi.csb.app/
• https://g6gykg-5173.csb.app/
• https://6l2fc3.csb.app/
• https://github.com/14islands/r3f-scroll-rig

---

# 새로 알게 된 점

여러 CSS 라이브러리로 수정하는 과정을 통해서 공식문서에 따라 고치는 방법을 배웠다

이전에 Bootstrap, MUI 등을 사용할 때는 다른 사람이 올린 소스코드 전체를 가져다가 쓰는 식으로 사용했었다

하지만 그렇게 하는 것은 해당 컴포넌트의 문법도 제대로 숙지하지 못한 상태에서 코드를 짜집기하는 식이기 때문에 이번 강의를 통해 직접 공식문서의 코드를 보고 수정하며 많이 반성하게 되었다

앞으로의 디자인 트렌드로 3D가 각광받고 있기 때문에 3D 개발 역량을 기른다면 더욱 경쟁력있는 프론트엔드 개발자가 될 수 있을 것이라 생각한다