UI Code Lab

웹사이트를 이용하는 환경이 다양해지면서, 이용자들은 밝고 화려한 인터페이스보다 눈에 편안한 어두운 테마를 선호하는 경우가 많아졌습니다. 특히 밤 시간이나 조명이 낮은 곳에서 접속할 경우, 화면이 지나치게 밝으면 시야에 부담을 줄 수 있기 때문이죠. 이번 글에서는 순수 자바스크립트(바닐라 JS)만으로 간단하면서도 직관적인 다크 모드 토글 기능을 만드는 방법을 안내합니다. 추가 라이브러리 없이 구현할 수 있고, 사용자 설정을 기억하는 기능까지 포함되어 있어 실무에도 충분히 적용할 수 있습니다. 🧱 HTML 구성 – 가장 단순한 시작먼저 테마 전환 버튼을 하나 추가해줍니다. 🌞 / 🌚 모드 전환 이 버튼은 라이트/다크 모드 전환을 담당하며, id 속성을 통해 스크립트에서 쉽게 접근할 수 있도록 설정합..

웹사이트를 읽다 보면 상단에 얇은 바가 스르륵 차오르는 걸 본 적 있으신가요? 이건 바로 스크롤 퍼센트 기반 프로그레스 바(progress bar)입니다. 사용자가 페이지를 얼마나 읽었는지 직관적으로 보여주는 UI로, 사용자 경험(UX)을 높이는 데 효과적이에요. 이번 글에서는 라이브러리 없이 바닐라 JavaScript만으로 이 기능을 구현하는 방법을 소개합니다. 🎯 구현 목표사용자가 스크롤한 비율에 따라 상단 바의 너비가 실시간으로 변함HTML, CSS, JavaScript만 사용반응형 웹에서도 자연스럽게 작동 🧩 HTML 구조 progress-container: 전체 프로그레스 바 영역progress-bar: 실제 너비가 변하는 바 요소 🎨 CSS 스타일링 .progress-container..

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