다노샵에 눈이 와요!

React와 CSS로 눈 내리는 애니메이션 효과 만들기

5 min readJan 20, 2020

--

병아리 개발자인 나는 위대한 구글님께 자주 질문한다. 에러가 뜨면 그 에러메시지 복붙해서 찾고, 뭐 만들고 싶은데 좋은 예제를 찾고 싶어도 위대한 구글님에게 여쭌다.

그러면 구글로고를 자주 보게 되는데, 굉장히 높은 빈도로 구글로고는 꾸며져는 것을 볼 수 있다. 무슨 날이라고 로고가 꾸며져있는 것이 신기했다. 새해, 명절, 국가공휴일, 크리스마스라고 때에 맞춰서 로고를 변경하는 것이 대단해보였고, 내가 디자이너는 아니지만 개발자가 되면 엇비슷하게라고 해봐야겠다고 생각했다. 구글은 기념일에 어떤 로고로 변경했었는지도 히스토리도 보여준다. 참 사소한 것도 잘 신경쓰는 회사같다. 여튼.. 이런 시도는 소소한 변화이지만, 다노샵을 이용하는 유저들도 재밌어하지않을까싶어서 진행해보았다.

TMI 만드는 과정 설명

전체흐름

여러 레퍼런스들을 찾다가 코드펜에서 제일 마음에 드는 것을 찾아서 그걸 보고 만들었다. (👉 React JS Falling Snow Animation)

makeSnowFlakes라는 함수가 여러 <SnowFlake /> 컴포넌트를 만들고, css 애니메이션으로 위치를 위에서 아래로 이동시켜주는 방법이다.

<div className="snow-container">
  // 아래 makeSnowFlakes 함수 안에서 여러 <SnowFlake /> 컴포넌트를 만들어낸다.
  {makeSnowFlakes()}
</div>

전체 흐름은 간단하다. <SnowFlake />라는 컴포넌트가 눈송이 하나이다. 여러 <SnowFlake /> 컴포넌트를 만들고, css 애니메이션으로 위에서 아래로 이동시켜주는 방법이다. 위에서 아래로 떨어질 때 모두 사이좋게 동시에 떨어지면 눈송이 느낌이 안날 것이기 때문에 animation-delay값을 랜덤으로 줘서 눈송이가 떨어지기 시작하는 시점이 <SnowFlake />마다 다르게 했다.

사이 좋게 일렬로 떨어지면 눈송이들이 고공낙하훈련 받는 느낌일테니, 애니메이션 딜레이값을 줬다. 한송이 한송이 따로따로 떨어지니 그럴듯 했다.

눈송이는 유니코드로

눈송이는 유니코드로 넣었다. 무료 이미지를 가져올까했지만, 혹시 모르는 저작권 침해 이슈를 원치 않았기도 했고, 용량이 작더라도 이미지를 받기 위해 서버에 요청을 하나 더 보내게 하는 것이 싫었다. 최대한 가볍게 가기 위해서 유니코드 중 \u2745 로 눈송이를 표현했다.(👉 유니코드 보러가기)

참고로 리액트 JSX를 쓸 때 유니코드를 넣으려면 이런 식으로 넣으면 된다.

<div>{\u2745}</div> // 이러면 유니코드(❅)로 들어간다.

전체 코드

눈꽃송이 CSS와 animation(keyframes)

눈송이는 display: flex로 배치했다. space-between값은 정해진 width 영역내에서 시작점과 끝지점에 동일한 간격으로 배치하는것이다. flex-direction 의 기본값이 row이기 때문에 나는 따로 값을 주지는 않았다.
👉 CSS flex-direction property
👉 justify-content 속성 보러가기

.snow-container{
  display: flex;
  justify-content: space-between;
}.snow-flake {
  color: $dano-coral;
  animation: fall 3.5s linear infinite;
}@keyframes fall {
  0% {
    opacity: 0;
  }  3% {
    opacity: 0.9;
  }  90% {
    opacity: 0.9;
  }  100% {
    transform: translate(0, 70px);
    opacity: 0;
  }
}

makeSnowFlakes 함수에 대한 설명

animationDelay: 눈꽃송이가 위에서 아래로 바로 떨어지지 않고, 어떤 눈꽃송이는 바로 떨어지고, 어떤 눈송이는 n초 뒤에 떨어지기 시작하게 하기 위함이다

(왼쪽) animation-delay 값을 주지 않은 경우와 (오른쪽) 값을 준 경우

fontSize: 눈꽃송이는 유니코드이기 때문에 font-size가 크면 눈꽃송이도 커진다.
arr: Array.from(“Merry Christmas”)로 만들면 [“M”,“e”,“r”,“r”,“y”,“ ”,…]이런식으로 length가 15인 array를 만들 수 있다. 이 array의 length인 15개의 눈꽃송이가 만들어지는 것이다.

여기에 UI/UX 디자이너 분께서 로고에 산타모자를 씌워주셔서 더 연말분위기가 났다 🎅 👏👏👏👏