UI/UX Study
HTML, CSS, JavaScript, jQuery로 만드는
실전 UI 컴포넌트 학습 공간입니다.
숫자로 보는 UI/UX Study
이 사이트는 무엇인가요?
UI/UX Study는 웹 개발을 배우는 누구나 무료로 이용할 수 있는 UI 컴포넌트 학습 사이트입니다. 이론 설명에 그치지 않고, 실제로 동작하는 데모와 함께 HTML·CSS·JavaScript·jQuery 코드를 직접 확인하고 학습할 수 있도록 구성되어 있습니다.
모달, 토스트, 캐러셀, 아코디언, 드롭다운 등 실무에서 자주 쓰이는 UI 패턴을 하나씩 분해하여 설계 원칙부터 코드 구현까지 단계적으로 학습할 수 있습니다.
주요 특징
실전 중심 학습
이론과 함께 실제로 동작하는 데모를 제공합니다. 코드를 보고 바로 결과를 확인할 수 있습니다.
반응형 디자인
모바일, 태블릿, 데스크톱 모든 환경에서 최적화된 학습 경험을 제공합니다.
접근성 준수
ARIA 속성, 키보드 내비게이션 등 웹 접근성 기준을 준수한 코드 예제를 제공합니다.
메뉴 검색 기능
사이드바 검색으로 원하는 컴포넌트를 빠르게 찾아 학습할 수 있습니다.
UX 설계 원칙
단순 코드 제공을 넘어 각 컴포넌트의 UX 설계 원칙과 사용 가이드라인을 함께 설명합니다.
완전 무료
회원가입 없이 누구나 무료로 모든 학습 콘텐츠를 이용할 수 있습니다.
사용 기술 스택
별도의 프레임워크나 빌드 도구 없이 웹 표준 기술만으로 구현되어 있어, 웹 개발 입문자도 쉽게 코드를 이해하고 응용할 수 있습니다.
- 🌐 HTML5
- 🎨 CSS3
- ⚡ JavaScript (ES6+)
- 📦 jQuery 3.7.1
- 🚀 Netlify (호스팅)
이런 분께 추천합니다
- HTML·CSS·JS 기초를 배우고 실전 UI를 만들어보고 싶은 분
- jQuery를 활용한 인터랙션 구현을 학습하고 싶은 분
- UI/UX 설계 원칙을 코드와 함께 이해하고 싶은 분
- 포트폴리오용 UI 컴포넌트 레퍼런스가 필요한 분
- 웹 접근성을 고려한 컴포넌트 구현 방법을 배우고 싶은 분
지금 바로 시작하세요
왼쪽 메뉴에서 원하는 UI 컴포넌트를 선택하거나, 궁금한 점은 문의하기를 통해 남겨주세요.