실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
PlainDate/Duration/ZonedDateTime으로 더하기, 차이, 타임존을 명확하게
트랙 위 핸들을 오른쪽 끝까지 드래그하면 초록으로 채워지며 인증 완료. 도중에 놓으면 스프링백으로 처음으로 돌아갑니다.
카드번호·유효기간·CVC를 입력하면 위쪽 카드 프리뷰에 실시간 반영되고, CVC 차례엔 카드가 뒤집혀 뒷면을 보여주는 결제 폼.
빈 칸엔 안내 문구가 가운데 있다가, 입력을 시작하면 위로 작게 올라가 자리를 비켜주는 폼 입력. JS 없이 CSS만으로 동작합니다.
아이폰 시간 선택기처럼 위아래로 굴리면 가운데 값이 선택되는 원통 휠. CSS 스냅 + 스크롤 위치 계산 + 3D 곡면으로 만들었습니다.
입력 즉시 5개 조건을 채점해 강도 막대와 체크리스트로 보여주는 폼 패턴.
시작·종료 두 번 클릭, hover 미리보기, 2개월 뷰와 프리셋을 갖춘 범위 피커.
Enter·콤마로 추가, Backspace로 삭제, 중복 방지와 추천 목록을 갖춘 태그 인풋.
호버 미리보기 + 0.5점 정밀도 + 키보드 + role=slider까지 갖춘 별점 입력.
한 트랙에 두 핸들을 끌어 최소~최대 구간을 지정하는 슬라이더. 가격·필터 범위 입력의 표준 패턴.
선택을 바꾸면 흰 thumb가 그 자리로 미끄러지는 세그먼티드 컨트롤. 버튼 위치를 측정해 transform으로 이동하고 키보드도 지원합니다.
영역에 파일을 끌어 놓거나 눌러서 올리는 업로더. dragover 강조, 이미지 썸네일 미리보기, 업로드 진행률까지 갖춘 패턴.
단계별 입력을 검증하며 진행하는 회원가입 폼. 진행 인디케이터로 현재 위치를 보여주고, 통과한 단계로 자유롭게 되돌아갈 수 있습니다.
6자리 OTP 박스. 입력 시 다음 칸 자동 포커스, 백스페이스 역방향, 클립보드 6자리 자동 분배, 화살표 키 네비, ARIA group + one-time-code 자동완성.
실시간 유효성 검사, 비밀번호 강도 표시, 에러 피드백을 포함한 실무 레벨의 폼 구현 패턴입니다.
