Video by _code_and_chill_
Hasibul Hasan
비밀번호 입력에 반응해 눈을 가리는 허스키 캐릭터와 문 통과 애니메이션을 결합한 다크 테마 로그인 UI 데모.
공개 지표
- 조회수
- 38,158정확한 값
- 좋아요
- 6,626정확한 값
- 댓글수
- 1,481정확한 값
분석 메모
‘Den’ 로그인 화면에서 사용자가 아이디와 비밀번호를 입력하면 허스키가 앞발로 눈을 가리고, 비밀번호를 숨기면 다시 눈을 뜬다. 파란색 ‘Sign in’ 버튼에는 작은 사람과 문 모티프가 배치되어 있으며, 제출 시 문이 열리는 듯한 상태 변화와 ‘Signing you in...’ 문구가 나타난다. 화면 하단에는 해당 상호작용을 구현하는 HTML·CSS·JS 코드 일부가 함께 제시된다.
원본 설명
Your password's safe — the husky won't peek 🐺🔒 Type it in and he covers his eyes; hit Sign in and walk right through the door. Built with just HTML, CSS & JS. #webdesign #frontend #uidesign #cssanimation #claude
영상 기법 메모
- 입력 상태에 연동된 캐릭터 연기: 기본 상태에서는 허스키가 화면을 바라보다가 입력이 진행되면 앞발로 눈을 가리고, 비밀번호가 마스킹된 상태에서는 다시 눈을 뜨는 변화가 나타난다. 보안 입력을 캐릭터 행동으로 시각화한 인터랙션이다. (00:00–00:06)
- 문 모티프의 로그인 버튼 애니메이션: 강한 파란색 그라데이션 버튼 오른쪽에 사람과 문 아이콘을 배치하고, 제출 상태에서 문 패널의 모습이 변하도록 구성해 ‘로그인=문을 통과함’이라는 동작 은유를 만든다. (00:06–00:08)
- 결과와 구현 코드를 한 화면에 병치: 완성된 로그인 UI 아래에 HTML·CSS·JS 코드를 세 열로 나란히 보여 주어, 시각적 결과와 구현 단서를 동시에 전달하는 튜토리얼형 구성을 사용한다. (00:00–00:08)
- 원본 공개일
- 2026년 7월 10일
- 분석 기준일
- 2026년 8월 26일
- 리비전
- 1
- 러닝타임
- 00:08