[클라우딩 어플리케이션 엔지니어링 TIL] 240228 - Ant Design, MUI...

Intro

---

리액트 부트스트랩 외에도 자주 사용하는 라이브러리인 Ant Design, MUI를 프로젝트에 적용해보는 실습을 하였다.

 

 

 

오늘 학습한 내용

---

Ant Design

• 자주 사용하는 Components
  • Flex: CSS로 직접 구현하는 것 보다 코드 수가 줄어듦
  • Card
  • Button

MUI

Material Symbols and Icons - Google Fonts

 

 

코딩 컨벤션

코드 작성 시, import의 순서

1️⃣ 공통된 import가 최 상단 (ex. react)
2️⃣ 라이브러리에서 가져오는 것들
3️⃣ 직접 만든 클래스나 코드

 

 

 

---

다르게 만들기 - CSS 트렌드 알아보기

• 클레이모피즘 (Claymorphism)
  • 메타버스 영향으로 3D 인기가 많아지면서 평평한 디자인에서 폭신한 3D 형식의 디자인이 유행이 됨
  • 폭신하고 친근한 시각적 표현되고 매우 둥글고 3차원적이다.
  • 23년부터는 살짝 인기가 식었음
  • https://hype4.academy/tools/claymorphism-generator

SquarePlanet

 

• 글래스모피즘 (Glassmorphism)
  • 투명도 (배경을 흐릿하게 처리)
  • 개체가 떠있는 듯한 다중 레이어 느낌
  • 작년부터 계속 화제가 되고 있으며 클레이모피즘보다 간단하다.
  • https://hype4.academy/tools/glassmorphism-generator

SquarePlanet

 

• 미니멀리즘 (Black&White)
  • 기존 미니멀리즘에서 Black & White 컬러만 사용한 디자인
• 3D design (인터랙티브 웹)
  • VR, AR, 메타버스 관련 움직이는 디자인
  • 메타버스는 최근에 관심이 조금 줄었으나 신기술과 조합해서 사용이 가능하다. (메타버스 + 생성 AI 등)
  • 24년도는 2D에서 3D로 트렌드가 넘어가는 과도기이다. ➡️ Three.js를 배우면 프론트엔드 개발의 범위가 한 차원 올라갈 수 있음
  • 이전까지의 트렌드들은 CSS만을 이용해 구현할 수 있지만 3D 인터랙티브 웹 개발은 Three.js, ammo.js 등을 배워야 함
  • 당장 시작하려면 React에서 Three.js를 쉽게 구현할 수 있도록 개발된 React-three-fiber로 개발이 가능함
  • https://www.choonsikdiary.com/

집사는 왜 월요일이 싫을까?

 

올해 디자인 트렌드는?

: 글래스모피즘과 미니멀리즘은 계속 선호될 것이며 3D 인터랙티브 웹 수요도 점점 높아질 것으로 예상된다.

글래스모피즘, 미니멀리즘을 구현할 수 있는 CSS를 학습하고 3D 인터랙티브 웹 개발을 위한 기초적인 three.js를 다음으로 공부하는 것을 추천!

react ➡️ react-native ➡️ 글래스모피즘, 미니멀리즘 등 ➡️ Three.js

 

 

 

 

마무리

---

Ant Design과 MUI 라이브러리를 직접 적용해보면서 적은 코드로 그럴듯한 UI를 제작할 수 있는 것을 보고 모든 UI를 구현해야 하는 강박관념을 버려야겠다고 생각했다.

프론트엔드 개발을 하면서 JS만 중요시하고 디자인 쪽은 깊게 생각하지 못하고 있었는데 디자인에도 많은 관심을 가져야겠다고 생각하였다.