실전 UI

진짜 쓰는 UI 부품. 상황별 9가지로

gallery2026-09-119종

이미지 비교 슬라이더 UI 9종 — 드래그하면 바로 보이는

이미지 비교 슬라이더는 사진 한 장 위에 다른 사진을 겹쳐 놓고, 경계선을 움직이면 전과 후가 갈라져 보이는 UI입니다. 리모델링·시술 후기 페이지에서 흔히 보지만 클릭 한 번에 바로 켜지는 동작이라 CSS만으로는

입력 UI2026-09-11

입력창 디자인은 전화번호, 카드 번호, 수량, 태그처럼 회원가입·결제 폼에서 자주 보이지만 순수 HTML만으로는 제대로 동작하지 않는 입력 위젯을 말합니다. 아홉 개 중 다섯 개(태그·자동늘어남·드래그드롭·재전송타이

선택 UI2026-09-11

세그먼트 컨트롤은 iOS 설정 화면에서 자주 보이는, 여러 선택지 중 하나를 고르면 배경 알약이 그 칸으로 미끄러져 가는 탭 전환 버튼입니다. 세그먼트 컨트롤부터 칩 필터·이모지 리액션·컬러 스와치까지, 이름은 몰라

스와이프 삭제는 리스트 항목을 옆으로 밀면 뒤에 숨어 있던 삭제 버튼이 드러나는 동작으로, 인스타·배민 앱에서 본 그 동작입니다. 이 글은 스와이프 삭제를 포함해 당겨서 새로고침·드래그 정렬·고정 헤더·페이지네이션까

로그인 화면 디자인은 이메일·비밀번호 칸과 버튼 몇 개로 끝나는 것 같지만, 실제로는 카드 재질·화면 분할·단계 진행·오류 알림까지 아홉 가지 결정이 쌓여 만들어집니다. 그중 하나는 팝업 모달 대신 이미 열린 화면

gallery2026-09-119종

이미지 갤러리 CSS는 사진 여러 장을 그리드나 워터폴 모양으로 배치하고 호버·클릭에 반응하게 만드는 레이아웃 기법입니다. 핀터레스트에 저장해 둔 그 갤러리처럼 예쁘지만, 막상 코드로 옮기려면 그리드 수식과 크롭 처

입력 UI2026-09-099종

인증번호 입력 UI는 6자리 숫자를 한 칸씩 나눠 받는 폼 부품으로, 다음 칸 이동부터 붙여넣기·오류 처리까지 한 번에 챙겨야 동작이 매끄러워집니다. 아홉 개 중 하나는 화면에 아무것도 안 보여도 실제로는 코드를 통