styled-components로 css 애니메이션 구현(with Storybook)

 

넋두리...

오랜만에 받은 2주의 휴가. 사실 전부 주말근무 대체 휴가다.

신규 서비스 오픈으로 인해 어쩔 수 없이 대체휴가를 내야 했고, 연말에 몰아 쓴(?) 덕분에 시간이 많이 생겼고 너무 행복했다. 

 

"아 드디어 내 공부를 할 수 있겠구나...!"

 

 물론 회사일도 재밌긴 하지만, 파이썬부터 블록체인까지 너무 해보고 싶은 공부가 많았다. 그리고 그 하고 싶던 공부를 하기 시작했다. 하다 보니 문뜩 심심해졌다. 왜지?

 

 나는 이번 회사에서는 온전한 프론트 개발자였다. 늘 내가 친 코드는 화면에 모두 보였다. 그런데 파이썬으로 백엔드를 만들다 보니 크게 보이는 게 없었다. 리액트를 view로 쓸 거기 때문에 템플릿을 써서 장고로 어드민을 굳이 만들고 싶지가 않았다.

 

"그래서 내가 쉬는 시간마다 아니면 코딩하기 싫을때마다 화면에 보여주는 무언가를 할만한 게 있을까?"

 

라고 생각했고, 간단하고 지속적이지 않으면서 나한테 도움이 될만한 걸 찾다보니 storybook에 css애니메이션을 만들어서 올리면 어떨까?라는 생각이 들었고 실행했다. 

실제 구현해본 storybook

 나는 react 프로젝트에 styled-components로 css을 작성하는 것을 즐긴다. 실제로 code-sandbox로 간단한 것을 만들 때까지 모두 사용하는 편이다. 왜냐하면 더 읽기 쉬우며 직관적이기 때문이다. css까지 자바스크립트로 가져와서 처리하다니... 너무 행복하다.

// styled-components로 구현해본 animation
const animate = keyframes`
  0%
  {
    transform: translateY(0);
    opacity: 0;
  }

  10%
  {
    opacity: 1;
  }

  90%
  {
    opacity: 1;
  }

  100%
  {
    transform: translateY(-2000%);
    opacity: 0;
  }
`;

const Snow = styled.i`
  background: red;
  animation: ${animate} linear infinite;
`;

 css-in-js에 입문하면서 애니메이션 구현이 필요하다면 내 프로젝트를 보고 조금이라도 도움이 됐으면 좋겠다. vercel로 deploy했기 때문에 누구나 아래 링크 배너를 클릭하면 볼 수 있고, github주소 또한 메인화면에 넣어놨다.

// 이런것도 가능하지~
const SnowContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f1f1;
  overflow: hidden;

  ${Snow}:nth-child(even) {
    background: transparent;
    border: 1px solid red;
  }

만약 create-react-app으로 프로젝트를 생성했고 스토리북을 세팅했다면, vercel에 빌드하는건 쉽다.

// storybook 설정 CLI
npx sb init

아래 빌드 스크립트만 수정해 주자.

// package.json
{
  ...
  "build-storybook": "build-storybook -c .storybook -o public"
  ...
}

vercel 빌드스크립트 설정 시에 위 코드를 보고 

yarn build-storybook

public

이것만 변경해 주면 된다.

Storybook

 참고로 이 프로젝트에 적용한 스토리북에는 많은 에드온을 사용하진 않는다. 실제 ui라이브러리에서 사용하듯이 넣어볼까?했지만, 딱히 그럴만한 것들이 없고 참고용 코드들이라 이 프로젝트를 취지에도 맞지 않았기 때문이다.