최신 글

새 글이 위에 옵니다.

대시보드 컴포넌트 9종 — 화면 통째로 말고 이 부품만

대시보드 컴포넌트는 완성된 관리자 화면을 통째로 붙이지 않고 헤더·피드·캘린더처럼 화면 조각 하나만 그대로 옮겨 쓰는 UI 부품입니다. 아홉 개 중 하나는 Ctrl(⌘)+K로 여는 커맨드 팔레트인데, 방향키로 실제로

읽기

선택 UI2026-09-11

달력 선택 UI는 시작일과 종료일처럼 값 하나가 아니라 범위·묶음을 고르게 해주는 선택 도구입니다. 세그먼트 컨트롤이나 색상 스와치처럼 이미 다뤘던 낱개 선택지 말고, 날짜 범위·가격대·아바타·사이즈+수량·검색 드롭

입력 UI2026-09-11

회원가입 폼 디자인에서 사람이 처음으로 손대는 곳은 버튼이 아니라 입력창입니다. 여기 아홉 개는 이메일 칸부터 지우기 버튼까지 회원가입 화면에 실제로 들어가는 입력창이고, 코드를 붙이면 그대로 움직입니다.

gallery2026-09-11

포트폴리오 갤러리는 사진이나 작업물을 격자로 늘어놓고, 마우스를 올리거나 클릭했을 때 확대·정렬·전환이 일어나는 화면입니다. 핀터레스트에 저장해 둔 그 포트폴리오 갤러리를 아홉 가지 방식으로 나눠 그대로 코드로 드립

청량한 디자인은 오렌지·라임·자몽·레몬처럼 채도 높은 과일 색을 크림 바탕 위에 얹고, 카드마다 같은 계열의 진한 색 그림자를 드리워 파스텔보다 더 쨍하고 여름 음료 브랜드처럼 싱그럽게 보이게 만드는 스타일입니다.

손그림 디자인은 굵고 삐뚤빼뚤한 크레용 선으로 테두리를 그리고, 그 선만 SVG 필터로 살짝 흔들어 종이 위에 손으로 그은 낙서처럼 보이게 만드는 스타일입니다. 동네 미술학원이나 어린이 브랜드 사이트에서 본 그 느낌

로딩2026-09-119종

로딩페이지 디자인은 서비스가 켜지는 첫 순간에 사용자에게 "기다리고 있네"라고 말해주는 화면입니다. 기본 스피너 하나로도 되지만, 파스텔 링이나 차오르는 물처럼 예쁜 로딩 화면은 복붙 몇 줄로 사이트 인상을 바꿔 놓

전환2026-09-119종

CSS 화면 전환 효과는 페이지를 새로 불러오지 않고 한 화면 안에서 무엇이 다른 모습으로 바뀔 때, 그 바뀜을 부드럽게 눈에 보여 주는 장치입니다. 장이 바뀌듯 화면이 바뀌는 순간마다 붙일 수 있는 아홉 가지를 전

파스텔 톤 디자인은 크림색 바탕 위에 버블검 핑크·피치·레몬·민트·라벤더의 연한 색을 얹고, 그림자까지 회색 대신 같은 계열의 파스텔로 그려 사탕처럼 말랑하고 상큼하게 보이게 만드는 스타일입니다. 디저트 가게나 뷰티

스크롤2026-09-119종

홈페이지 스크롤 효과는 페이지를 내리는 손가락 하나에 화면이 반응하게 만드는 장치로, 애플 제품 페이지가 이 분야의 기준입니다. 자바스크립트 라이브러리 하나도 없이 CSS만으로 가로 패널·고정 장면 교체·단어 채움·