[UI 만들기][Javascript] 토스 느낌의 Text Field 만들기

 

 

저는 토스를 사용할 때마다 감탄을 하게 됩니다. 

화면 전환이 일어날 때의 부드러운 애니메이션, 버튼을 누를 때의 미세한 반응, 스크롤할 때 요소들이 자연스럽게 움직이는 모습 등 모든 동작이 눈을 즐겁게 합니다. 그리고, 토스의 인터랙션은 재미있습니다. 이러한 인터랙션은 단순한 금융 작업을 즐거운 경험으로 바꿔놓습니다.

 

토스의 매력적인 인터랙션 중 하나는 동적이고 인터랙티브한 텍스트 필드입니다.

오늘은 토스 스타일의 입력 필드에서 볼 수 있는 세 가지 기능을 구현해 보았습니다.

• 동적 플레이스홀더(placeholder)
• 캐럿(Caret) 애니메이션
• 추천 버튼

 

See the Pen Untitled by ‍곽윤철[학생](소프트웨어융합대학 컴퓨터공학부) (@tkuffnrk-the-typescripter) on CodePen.

 

토스 스타일의 UI/UX는 이러한 작은 디테일들이 모여 전체적인 사용성을 크게 향상시킵니다.

여러분의 프로젝트에 이러한 인터랙션을 적용해 보셔도 좋을 것 같습니다.