[2024.04.18] 토스처럼 transition 효과 주기(transition, :hover)

  예전에 본 토스 디자인 컨퍼런스에서 잊히지 않았던 트랜지션 효과가 있어서 여태껏 생각만 하다가, 팀 프로젝트 하는 김에 한번 써 보았다. 생각만 하던걸 구현해 보니 난이도와 상관없이 뭔가 기분이 업되는 느낌?

 

토스 디자인 컨퍼런스 SIMPLICITY 23

 

 

  제겐 랜덤 추첨이라는 운이라는 건 존재하지 않는지 큰 규모의 컨퍼런스는 아쉽게도 당첨되지 못하고, 감사하게도 온라인으로 준비해 주신 컨퍼런스나 다시 보기 영상을 주로 보는데요. 작년 토스 디자인 컨퍼런스 Simplicity23을 보며 감동의 물결에 휩쓸려 나간 적이 있습니다. (뜬금없지만 올해 인프콘은 제발 꼭..! 스태프라도.. 인력 안 필요하신가요? ㅠㅠ) 

  원래도 예쁜 디자인을 좋아해서 프론트엔드의 길을 걷고 있는데 이런 결과물을 집에서 볼 수 있다니 너무 행복했습니다. 이런 새로운 형태의 컨퍼런스를 준비하기 위해서 얼마나 숨은 노력이 많았을지 예상이 안되고, 한 번에 모든 세션이 모두 오픈되는 게 아니라 정해진 날짜에 오픈하다 보니 하루하루 티켓팅 기다리는 날처럼 기대하며 기다렸던 기억도 있습니다.

실제 세션에도 있는 '완전히 새로운 컨퍼런스'

 

이상한 효과에 꽂히다.

세션 하나하나 내용도 정말 좋고, 녹음에 맞춰 진행되는 자막과 애니메이션 효과들도 정말 재밌고 대단했었습니다. 그런데 이상하게 그 중 가장 인상 깊었던 건 따로 있었는데, 바로 아이콘에 커서가 도달하기 전에 미리 마중 나온 듯한 트랜지션 효과였습니다. 이 자그마한 효과가 뭔지, 정말 신기해서 세션 들으면서도 만지작만지작했었습니다. 사용자를 배려하는 건 모든 UI/UX가 그렇겠지만, 특히 이건 소소하면서도 직관적이어서 그런지 더욱 마음을 사로잡았습니다. 그래서 언젠가 한 번 프로젝트에 직접 사용해보고 싶었습니다. 또한 프로젝트 구성 상 ux적으로도 잘 맞는 것 같았고요.

진짜 우아하고 멋있지 않나요? 우와..

 

 

 

금방 끝나지만 해보니 뭔가 행복하고 재밌었던 경험

  사실 크게 구현이 어렵진 않았지만 로직 방식에 고민이 되었던 부분이 있습니다. 홈으로 이동하는 로고 이미지에 적용했는데, 로고 자체에 padding 값을 넣어 원래 이미지 이상의 영역을 구현할지 아니면 로고를 둘러싼 무형의 넓은 div로 한 겹 감쌀까 고민했습니다. 어느 방법도 가능은 했으나, 토스의 경우 하나의 아이콘이 아닌 여러 아이콘이 한 번에 움직이는 액션을 보여주기 때문에 추후 유지보수성을 생각해 div 태그로 감싸는 것을 선택했습니다.

 

1. 우선 로고 이미지에 대한 CSS를 지정합니다.

.headerLogo {
  width: 160px;
  height: auto;
}

 

2. 그리고 로고를 감싸는 container를 만들어 줍니다.

.logoContainer {
  position: absolute;
  top: 5.6vh;
  left: 6.78vw;
  width: 220px;
  padding: 0px 50px 50px 0px;
}

 padding의 경우 로고가 왼쪽 위에 위치해 있기 때문에, 보통 커서는 오른쪽 아래에서 접근하게 됩니다. 때문에 우측과 아랫쪽에 padding을 주어 로고 이미지의 영역은 아니지만, 로고의 영향 안에 있는 공간을 만들어 줍니다.

 

3. 트랜지션 적용

.logoContainer {
  position: absolute;
  top: 5.6vh;
  left: 6.78vw;
  width: 220px;
  padding: 0px 50px 50px 0px;
  transition: top 0.3s, left 0.3s;
  transition-timing-function: ease-out;
}

.logoContainer:hover {
  top: calc(5.6vh + 2vh);
  left: calc(6.78vw + 2vw);
}

 트랜지션을 적용해줍니다. :hover를 이용해 커서가 로고 영역에 들어오면 좌측상단에 위치한 로고가 오른쪽 대각선 방향으로 이동할 수 있게 해 줍니다. 이때 transition-timing-function: ease-out를 적용해, 처음엔 빠르게 다가오지만 사용자의 커서를 맞이할 때는 느리게 도착하여 부드러운 효과를 주고자 했습니다.

 

4. 그 결과는? gif로 보시죠!

쓰윽~ 다가오는 우리 로고씨

 

 

하루하루 이런 소소한 재미에 더 개발에 재미와 흥미가 붙는 것 같습니다! 여러분의 작고 소중한 개발 재미는 무엇인가요?

없으시다면 꼭 하나쯤 생기길 바라겠습니다~!!