UI Code Lab

다크 모드 토글 기능은 사용자 맞춤 UX의 시작점입니다. 하지만 사용자가 별도의 설정 없이도 운영체제의 테마에 맞춰 웹사이트가 자연스럽게 반응한다면 훨씬 더 직관적인 경험을 제공할 수 있습니다. 바로 여기서 시스템 테마 감지 기능이 등장합니다. 이번 포스트에서는 prefers-color-scheme 미디어 쿼리를 활용하여 운영체제의 라이트/다크 설정을 자동으로 감지하고, 이를 사용자 설정과 조합해 자연스럽게 전환하는 로직을 구현해볼 거예요. ✅ 구현 목표OS의 라이트/다크 모드 상태 감지사용자 설정과 시스템 설정의 우선순위 처리CSS 변수와 data-theme 속성을 활용한 스타일 변경로컬 스토리지 저장을 통한 사용자 커스터마이징 🧠 CSS에서 시스템 테마 감지하기 운영체제가 다크 모드로 설정되어 ..

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

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

웹에서 사용자의 위치와 진행 상태를 명확하게 보여주는 UI는 사용자 경험에 큰 영향을 줍니다. 특히 CAD와 같은 기술 자료를 제공하는 페이지에서는 “지금 내가 어떤 단계에 있는지”를 직관적으로 인식할 수 있어야 하죠. 이번 글에서는 JavaScript와 CSS만으로 구현하는 진행 단계 타임라인 UI를 소개합니다. 💡 직접 활용한 예시는 현재 CAD 페이지의 흐름STEP 1: CAD 파일 준비 >> STEP 2: CAD 파일 검토 >> STEP 3: 승인 대기 >> STEP 4: 다운로드 가능 STEP 1과 STEP 2는 이미지가 이미 등록된 완료 단계로 같은 색상으로 그룹화하고, 승인 대기 상태인 STEP 3는 강조 애니메이션으로 표현해 사용자의 주의를 끌 수 있도록 구성해 봤습니다. ✅ 주요..

웹 페이지를 만들다 보면 메뉴나 필터, 설정 창 등 드롭다운(dropdown) 기능이 꼭 필요할 때가 있습니다. 이번 글에서는 jQuery 없이도 구현 가능한 순수 자바스크립트(dropdown)를 활용해 사용자가 클릭하면 열리고, 다시 클릭하면 닫히는 기본 드롭다운 UI를 만드는 방법을 소개합니다. ✅ 드롭다운이란?드롭다운(dropdown)은 사용자의 클릭에 따라 선택지를 보여주는 UI 요소입니다. 대표적인 예로 내비게이션 메뉴, 언어 선택 창, 알림 목록 등에서 자주 활용됩니다. 🛠️ HTML 구조 먼저 dropdown을 구성할 기본 HTML을 작성합니다: 메뉴 열기 ▾ 홈 소개 문의 🎨 CSS 스타일기본적으로 드롭다운 메뉴는 숨기고, 버튼 클릭 시 보이도록 처리합니다....