Video by codewithnazia
CodewithNazia
HTML·CSS로 뉴모피즘 스타일의 로그인·회원가입 폼을 제작하고 전환 결과를 보여주는 짧은 코딩 데모 영상이다.
공개 지표
- 조회수
- 293,542정확한 값
- 좋아요
- 19,454정확한 값
- 댓글수
- 1,280정확한 값
분석 메모
밝은 회색 배경의 원형 패널 위에 인증 폼을 구현하는 과정을 세로 영상으로 소개한다. 초반에는 회원가입 폼과 CSS 편집 화면을 함께 보여주고, 이어 로그인 폼 및 스위치 관련 CSS를 수정한다. 후반에는 코드 편집기 없이 완성된 로그인 화면을 확대해 입력 포커스와 입체적인 음영을 강조한 뒤, 회원가입 화면으로 전환된 결과를 제시한다.
원본 설명
👇 Watch Full Video & Get FREE Source Code Below! ▶️ Watch Full Video: Check my YouTube channel **Code with Nazia** 💬 Type **CODE** in the comments to get the source code If this UI Animation caught your attention 👀 👍 Like | 🔁 Share | 💬 Comment **CODE** #HTML #CSS #WebDesign #FrontendDevelopment #UIAnimation #WebDevelopment #Coding #codewithnazia
영상 기법 메모
- 코드와 결과 화면의 분할 제시: 상단에는 브라우저 렌더링 결과를, 하단에는 어두운 테마의 코드 편집기를 배치해 CSS 수정과 UI 결과를 한 화면에서 연결해 보여준다. (00:00–00:08)
- 다중 그림자를 활용한 뉴모피즘: 원형 컨테이너와 입력창, 버튼에 밝고 어두운 그림자를 조합해 부드러운 돌출·함몰 효과를 만들며, 로그인 비밀번호 입력창에는 붉은 포커스 강조도 적용한다. (00:08–00:16)
- 로그인과 회원가입 상태 전환: 사용자명·비밀번호·기억하기 항목이 있는 로그인 폼에서 이름·이메일·비밀번호 항목이 있는 회원가입 폼으로 전환해 두 인증 상태를 비교 가능하게 구성한다. (00:08–00:16)
- 원본 공개일
- 2026년 8월 16일
- 분석 기준일
- 2026년 8월 26일
- 리비전
- 1
- 러닝타임
- 00:16