시작하며 🌈

기존 블로그 프로젝트를 유지보수하는 중인데, 마음에 안드는 부분이 한 두가지가 아니네요...😂

처음 시작했을 때, 설계의 부족함인 듯 합니다.
사실, 다크모드까지는 미처 설계하지 않아서, 언젠가 손을 대도 살짝만 건드려야지 싶었는데, 베블런 효과가 제대로 왔습니다. 😥😥

꽤나 다크모드는, 해야할 일이 많은 복잡한 작업이었네요.
여튼, 제 프로젝트니까 갑질(?)하면서, 일부 기능이 업데이트되었으니 제 입맛대로 다시 만들어 봅시다!

본론 📃

일단, 제 현재 프로젝트는 다음과 같이 작동하고 있어요! (초기는 다크모드가 없었다고 보면 됩니다.)

그리고 다크모드를 설정하면, 다음과 같은 별이 떨어지는 애니메이션 화면이 나와요!

빠르게 애니메이션을 구현하려면

개인적으로는, 원하는 효과를 구현하는 데 가장 참고하기 좋은 사이트는

Codepen.io

라고 생각해요. 저같은 경우도, 저 별이 떨어지는 아이디어들은 참고(사실상 대부분을 빌려썼지만)했습니다!

1. 일단 발상은 하되,
2. 비슷한 구현물이 있다면 참고 + customization

하는 방식으로 구현했습니다! 물론 직접 구현하면 베스트긴 하겠지만, 우리는 생산성도 고려해야 하니까요!

그래서 초기는 다음과 같았는데요!
렌더링 시 랜덤하게 별을 떨어뜨리는 애니메이션을 구현하고 싶었어요.

const _getShining = (isBefore=false) => css`
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), ${({ $yellow }) => $yellow }, rgba(0, 0, 255, 0));
    ${isBefore ? 
        "transform: translateX(50%) rotateZ(45deg);" : 
        "transform: translateX(50%) rotateZ(-45deg);" 
    }
    animation: shining ${({ $shootingTime }) => $shootingTime } ease-in-out infinite;

    @keyframes shining {
        0% {
            width: 0;
        }
        100% {
            width: 1.25rem;
        }
    }
`;
const _setStars = ({ $idx, $top, $left, $delay }) => css`
    &:nth-child(${$idx}) {
        will-change: top, left, animation-delay;
        top: ${$top}%;
        left: ${$left}%;
        animation-delay: ${$delay}ms;
        &::before,
        &::after {
            will-change: animation-delay;
            animation-delay: ${$delay}ms;
        }
    }
`;
const Star = styled.div`
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    background: linear-gradient(-45deg, #666, rgba(0, 0, 255, 0));
    filter: drop-shadow(0 0 10px #fff566);
    animation: tail 4000ms ease-in-out infinite, shooting 4000ms ease-in-out infinite;
    &::before {
        ${_getShining(true)}
    }
    &::after {
        ${_getShining()}
    }
    @keyframes tail {
        0% {
            width: 0;
        }
        30% {
            width: 100px;
        }
        100% {
            width: 0;
        }
    }
    @keyframes shooting {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(300px);
        }
    }
    @keyframes sky {
        0% {
            transform: rotate(45deg);
        }
        100% {
            transform: rotate(405deg);
        }
    }
    ${({ $idx, $top, $left, $delay }) =>  _setStars({ $idx, $top, $left, $delay})}
`;

그런데 문제점이 생겼습니다. 10개 정도를 랜덤하게 렌더링하려고 했는데, 아무래도 계속해서 reflow가 발생해서인지, will-change를 쓰더라도 2개 이상부터는 화면 자체가 굉~장히 느려졌습니다.

결국 5시간은 작업한 듯 싶은데, 무작위 렌더링은 성능상 폐기...를 했습니다.
(시간을 허비하며 데이터에 따른 동적인 애니메이션 구현은 최소화해야겠다는 것을 몸소 체험했네요...😅😂😂)
결국, sass to css를 이용했어요.

https://jsonformatter.org/sass-to-css

이 웹사이트를 쓰면, random변수는 알아서 임의로 선정이 되더라구요.
이후에는 다시, 제 입맛대로 각각의 child들의 position을 배치!

잘 나오네요! 😘
다만, 나중에 테스트를 해서 부하가 너무 심하면 떨어지는 별 개수를 줄이던지, 고민해야겠습니다.