[프론트엔드] 생산성 도구

CSS Grid Generator : 2차원 배치에 최적화된 도구

1️⃣

2️⃣

---

Box Shadow : 박스 그림자

1️⃣ Smooth Shadow

2️⃣ CSS Scan

이건 이미 만들어져 있는 Box Shadow 원하는 디자인 클릭하면 css 복사됨

box-shadow: 
	rgba(0, 0, 0, 0.25) 0px 54px 55px, 
	rgba(0, 0, 0, 0.12) 0px -12px 30px, 
    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
    rgba(0, 0, 0, 0.09) 0px -3px 5px;

---

Gradient : 색상 그라데이션

1️⃣ Webgradients

두 가지 색상이 자연스럽게 그라데이션
이미 만들어져 있는 저 중에서 원하는 거 Copy CSS 클릭하면 코드 복사됨

background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

2️⃣ Uigradients

이건 사이트 들어가면 랜덤으로 색상 추천(?)해줌
화살표 < > 넘기면 다른 색상들이 보임

상단 <> 클릭하면 코드 복사 가능함

background: #6D6027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #D3CBB8, #6D6027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #D3CBB8, #6D6027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

3️⃣ ColorSpace

...

4️⃣ CSS Gradient

---

Regex : 정규표현식 배우고 사용하기 쉽게 도와주는 사이트

1️⃣ iHateRegex

---

Newmorphism

뉴모피즘 디자인 스타일을 쉽게 만들 수 있도록 도와주는 도구

1️⃣ Neumorphism.io

---

Image Optimization : 이미지 압축

1️⃣ Optimizilla

---

Easings

애니메이션 이징 효과를 쉽게 선택하고 활용할 수 있도록 도와주는 도구

1️⃣ Easings (데모)

Easing Graphs (코드)

---

Compatibility

1️⃣ Caniuse

특정 웹 기술(HTML, CSS, JS 등)이 다양한 브라우저에서 지원되는지 확인할 수 있는 사이트

---

Icon

1️⃣ Lucide

오픈 소스 아이콘 세트와 라이브러리를 제공하는 플랫폼

2️⃣ Radix

오픈 소스 아이콘 세트로, Radix 팀에서 제공하는 사용하기 간단한 모던 아이콘 컬렉션

3️⃣ FontAwesome

가장 널리 사용되는 아이콘 라이브러리 중 하나로
웹 개발자와 디자이너들에게 다양한 스타일의 아이콘을 제공

---

CSS

1️⃣ Bootstrap

가장 널리 사용되는 오픈 소스 CSS 프레임워크로
반응형 웹 디자인과 사용자 친화적인 UI를 쉽게 구현할 수 있도록 도와줌

2️⃣ Tailwind

유틸리티 클래스 기반 CSS 프레임워크로,
개발자와 디자이너가 CSS를 작성하지 않고도
빠르게 커스터마이징 가능한 스타일링을 구현할 수 있도록 도와주는 도구

---

UI

1️⃣ Chakra

React를 위한 컴포넌트 기반 UI 라이브러리로,
접근성과 스타일링의 유연성을 제공하여
빠르고 일관된 UI 디자인을 구현할 수 있게 도와주는 도구

2️⃣ MUI

Google의 Material Design 시스템을 기반으로 한 React UI 라이브러리로,
미리 디자인된 컴포넌트와 일관된 사용자 경험을 제공하여
효율적이고 아름다운 UI를 빠르게 구축할 수 있게 도와주는 도구

3️⃣ Ant Design

React 기반의 UI 컴포넌트 라이브러리로, 기업용 애플리케이션과
데이터 중심의 웹 애플리케이션에 적합한 고급 UI 구성 요소를 제공

4️⃣ Shadcn

React를 위한 경량화된 UI 컴포넌트 라이브러리로,
유연하고 간단한 구성을 제공하며디자인 시스템을 빠르게 적용할 수 있도록 도와주는 도구

5️⃣ TOAST UI

다양한 UI 컴포넌트와 편리한 도구들을 제공하는 웹 애플리케이션을 위한 UI 라이브러리
직관적이고 모던한 디자인을 통해 개발자가 빠르게 프로덕트나 서비스를 만들 수 있게 도와줌

---

Random Data

1️⃣ Profile

무작위 사용자 데이터를 생성하는 API로,
주로 테스트 데이터를 만들거나 사용자 프로필 예시를 필요로 하는 경우에 사용

2️⃣ Thumbnail

여기서 300은 이미지 사이즈
🎰새로고침하면 랜덤으로 300 사이즈 이미지 보여줌

3️⃣ 풍경, 동물 이미지 : Lorem Picsum