UI Code Lab

📌 개요 Toast 알림은 사용자에게 빠르고 간단한 피드백을 제공하는 UI 요소입니다. 예를 들어 “저장되었습니다”처럼 화면 상단이나 하단에 짧게 나타나는 알림 말이죠. 이 글에서는 바닐라 자바스크립트(Vanilla JS)만으로 재사용 가능한 toast 컴포넌트를 만드는 법을 소개합니다. ✅ 순수 JS로 가볍게 구현✅ 위치, 지속 시간, 애니메이션 설정 가능✅ 스크린 리더 사용자도 고려한 접근성 💡 Toast UI란?Toast는 화면 한쪽에 몇 초간 표시되는 일시적인 메시지입니다. 사용자가 별도의 조작 없이 피드백을 받을 수 있어 UX 향상에 효과적이죠. 📈 자주 쓰이는 상황 예시폼 제출 후 “제출이 완료되었습니다”복사 버튼 클릭 시 “클립보드에 복사됨”저장, 삭제, 오류 안내 등 🛠️ HTML..

모달은 UI에서 자주 쓰이는 컴포넌트지만, 접근성까지 챙긴 구현은 생각보다 드뭅니다. 이 글에서는 기본적인 바닐라 자바스크립트 모달 구현법부터, 스크린리더와 키보드 사용자도 고려한 접근성 개선 포인트까지 다뤄봅니다. 실무에 바로 적용할 수 있는 예제 코드도 함께 제공하니, 복잡한 프레임워크 없이 순수 JS로도 충분히 멋진 접근성 모달을 만들어보세요! ✨ 기본 모달 구현간단한 자바스크립트로 버튼 클릭 시 모달을 띄우고 닫는 기본 구조입니다. ✅ HTML 구조 모달 열기 모달 제목 모달 내용입니다. 닫기 ✅ JS 기본 로직 const openBtn = document.getElementById('openModal');const closeBtn = document.getElementB..

웹에서 데이터를 표(table) 형태로 보여주는 건 흔한 일이지만, 모바일 환경에서는 표가 잘려 보이거나 가독성이 떨어지는 경우가 많습니다. 이럴 때 유용한 방법이 바로 table을 ul, li 구조로 바꿔 반응형으로 구현하는 것입니다. 이번 글에서는 실제 예제를 통해 table을 ul/li로 바꾸는 방법과, 접근성(Accessibility)까지 고려한 마크업 전략을 소개합니다. ✅ 왜 table 대신 ul, li를 사용할까? 항목tableul, li반응형 구현어려움유연함스타일 커스터마이징제한적자유로움접근성명확한 구조 제공추가 속성 필요모바일 가독성낮음높음table은 의미론적으로는 좋지만, 작은 화면에서 스크롤 없이 보기 어렵고 스타일링도 제한적입니다. ul, li 구조는 더 유연하게 레이아웃을 구성할 ..

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

🧭 웹 UI를 다루는 기본기 – 탭 기능부터 탄탄하게웹사이트를 처음 방문한 사용자가 가장 먼저 접하는 UI 요소 중 하나가 탭 메뉴입니다. 정보가 많을수록 사용자에게 복잡하게 느껴지기 쉬운데, 탭은 이런 내용을 주제별로 나눠 가독성과 경험을 동시에 잡을 수 있는 훌륭한 도구예요. 오늘은 순수 바닐라 자바스크립트로 탭 기능을 만드는 방법과 함께 접근성(Accessibility)까지 챙기는 팁을 소개합니다. 🎯 탭 UI란?탭 메뉴는 여러 정보 블록을 겹쳐두고, 사용자가 클릭하는 탭에 따라 해당 콘텐츠를 보여주는 구조입니다. FAQ, 제품 사양, 멤버 프로필, 카테고리 구분 등 다양한 상황에 활용되죠. 🧱 HTML 구조부터 준비하기먼저 탭 버튼과 콘텐츠 영역을 HTML로 구성합니다. 탭 1..

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