내가 순수 HTML/CSS/JS로 SaaS UI Kit을 만든 방법

Source: Dev.to

React, Vue, 그리고 수많은 다른 프레임워크가 지배하는 세상에서, 나는 기본에만 충실해 프리미엄한 무언가를 만들기로 했습니다. 여기 순수 HTML, CSS, 그리고 바닐라 JavaScript만으로 만든 고급 SaaS UI Kit인 Lumina Kit의 이야기가 있습니다.

여기서 확인해 보세요!

🎨 디자인 프로세스

첫 로드부터 “와우” 효과를 만들고 싶었습니다. 현대적인 “선형 스타일” 디자인과 글래스모피즘 트렌드에서 영감을 받았습니다.

색상 팔레트: 깊고 조화로운 어두운 톤과 활기찬 파란색‑보라색 그라디언트를 결합하기 위해 특정 HSL 값을 사용했습니다.

글래스모피즘: 깊이감을 구현하는 것이 핵심이었습니다. 미묘한 backdrop-filter 효과와 반투명 테두리를 사용해 컴포넌트가 배경 위에 떠 있는 듯한 느낌을 주었습니다.

타이포그래피: 디지털 화면에서 뛰어난 가독성을 제공하는 Inter를 선택했으며, 프리미엄 “SaaS” 느낌을 위해 좁은 문자 간격을 적용했습니다.

💻 코드 스니펫

“글래스” 효과의 핵심은 놀랍게도 간단하지만 섬세한 조정이 필요합니다:

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}