그리니 로그인 UI 프로젝트

목표 중 하나인 역동적인 로그인 UI 개발을 시작해보려 한다.여기서 목표를 간단히 설명하자면 마우스 커서나 인풋 커서에 따라 캐릭터의 모션이 적용되는,, 그런 UI인데 직접 보는게 빠르겠다.출처: https://dribbble.com/shots/21953371

웹페이지를 개발할 때면, 특히나 숙련된 프론트엔드 개발자라면 한번 쯤은 고민해 봤을 것이다. '애니메이션을 어떻게 구현할까? 나도 살아숨쉬는 페이지를 만들고 싶다!' 뭐 이런 생각들? 필자는 hover의 트리거로 크기가 살짝 변한다던지, 모달을 동적으로 등장시킨다

조금.. 은 지난 일이지만 드디어 svg만을 활용하여 그리니를 완성하였다.우선 저번 글에서는 '그리니'의 소스가 없어서 직접 본따서 그렸다고 하였는데, 찾아보니 있었다!사내 서비스 중 디자인을 제공해주는 곳을 찾아내서 그리니 소스도 어렵지 않게 받을 수 있었다.그런데

저번 글에서 학습했던 transition은 확실한 트리거가 있어야 합니다. click이나 hover 같은.. 그런 트리거가 없다면 아무 일도 일어나지 않죠. 하지만 보다 생동감 있는, 캐릭터에 살아있는 듯한 느낌을 주기 위해선 트리거 없이도 특정 모션을 취하도록 하는

제목에서도 보이겠지만, 저는 transition과 animation만 학습하면 어느정도는 됐다! 싶었습니다. 하지만 제 편견과 오만.. 막상 학습한 것을 적용하여 그리니에게 움직임을 주려니 제가 배우지 않은 가장 중요한게 있더라고요. 바로 transform! 저는

animation의 keyframes와 transform을 통해 그리니를 구현해보았습니다.