UI Code Lab

웹 UI에서 사용자와의 상호작용을 자연스럽게 만드는 방법 중 하나가 바로 드래그 앤 드롭 인터페이스(Drag and Drop UI) 입니다. 파일 첨부, 리스트 정렬, 대시보드 구성 등 다양한 실무 사례에서 사용되는 이 기능은 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 이 글에서는 바닐라 자바스크립트(Vanilla JavaScript)를 활용하여 다음 세 가지 실전 사례를 중심으로 드래그 앤 드롭 UI를 구현해 보겠습니다. ✅ Gmail 스타일의 파일 첨부 드롭존✅ TODO 앱에서 할 일 순서 변경 기능✅ 대시보드 위젯 위치 이동 UI 📂 1. 파일 첨부 드롭존 UI – Gmail 스타일 구현 드래그 앤 드롭 방식으로 파일을 첨부할 수 있는 UI는 이메일, 게시판, 관리자 페이지 등에서 많이 사..

🧭 왜 직접 날짜 선택기를 만들어야 할까? 대부분의 웹 프로젝트에서는 날짜 입력이 필요한 경우가 많습니다. 물론 input [type="date"] 를 사용할 수도 있지만, 브라우저마다 디자인이 다르고 커스터마이징이 어렵다는 단점이 있죠. 그래서 이번 글에서는 순수 자바스크립트로 날짜 선택기 UI를 직접 구현해 보겠습니다. 🛠️ 구현 목표달력 UI를 동적으로 생성현재 월 기준으로 날짜 표시이전/다음 달 이동 기능날짜 클릭 시 선택된 날짜 출력 🧱 HTML 구조 ◀ ▶ 일월화수목금토 선택한 날짜: 없음 🎨 CSS 스타일 (간단 버전) .datepicker { width: 300px; border: 1..