[2023.04.26 개발 일지] 로딩 상태 GIF Progress 적용 하기

[2023.04.26 개발 일지] 로딩 상태 GIF Progress 적용 하기

주요 업무 내용

• GIF Progress 컴포넌트 구현
• Flex 컴포넌트 구현
• 3D 모델 찾아 보기

프론트엔드에서 빠질 수 없는 것이 로딩 상태에 대한 사용자 피드백일 것이다.

포켓몬이라는 주제로 개발을 하고 있으니 단순히 로딩바를 보여주는 것보다는 포켓몬 관련 GIF가 좋을 것 같다.

역시 포켓몬은 상징성은 이 녀석을 이길 수 없을 것이다.

달리는 모습이니 로딩 상태에도 적절한 것으로 보인다.

import styled from "styled-components";

const StyledProgress = styled.div`

  display: flex;

  flex-direction: column;

  align-items: center;

`;

const StyledImage = styled.img`

  width: ${(props) => props.width};

  height: ${(props) => props.height};

`;

const StyledText = styled.p`

  font-size: ${(props) => props.fontSize};

`;

const GifProgress = ({ src, width, height, text, fontSize }) => {

  return (

    <StyledProgress>

      <StyledImage src={src} width={width} height={height} />

      <StyledText fontSize={fontSize}>{text}</StyledText>

    </StyledProgress>

  );

};

export default GifProgress;

단순히 loading 상태가 true일 때 gif를 보여주도록 했었는데 재 사용성 있는 컴포넌트를 만들어서 다음에도 사용하기 위해서 별도의 GifProgress를 구현하려고 했다.

gif만 있으니 허전해서 밑에 로딩 메시지를 띄울 수 있도록 텍스트와 폰트 크기도 넣었다.

gif만 보여주는 것보다 덜 허전하고 로딩 상태라는 것을 정확히 명시할 수 있다.

GifProgress만 사용하면 가운데 정렬을 할 수 없기 때문에 정렬을 위한 UI컴포넌트가 필요했다.

import styled from "styled-components";

const StyledFlex = styled.div`

  display: flex;

  flex-direction : ${(props) => props.flexDirection};

  width: ${(props) => props.width};

  height: ${(props) => props.height};

  margin: ${(props) => props.margin};

  justify-content: ${(props) => props.justifyContent || "center"};

  align-items: ${(props) => props.alignItems || "center"};

  background-color: ${(props) => props.backgroundColor};

`;

const Flex = ({ flexDirection, width, height, margin, justifyContent, alignItems, backgroundColor, children }) => {

  return (

    <StyledFlex

      flexDirection={flexDirection}

      width={width}

      height={height}

      margin={margin}

      justifyContent={justifyContent}

      alignItems={alignItems}

      backgroundColor={backgroundColor}

    >

      {children}

    </StyledFlex>

  );

};

export default Flex;

Flex의 가운데 정렬은 자주 사용하는 스타일이라서 컴포넌트를 만들고 정렬과 관련된 Prop을 받아 유연하게 사용할 수 있도록 구현했다.

지금은 데이터 양이 어느정도 있어서 로딩 화면을 적절히 보여주지만 문제는 로딩이 빨리 끝나면 화면이 깜빡이면서 로딩화면이 잠깐 보였다가 사라지는데 은근히 거슬렸다.

이것을 어떻게 해결해야할지 의문인데 실제 배포에서는 데이터가 더 많을 것이고 로딩이 더 느리기때문에 이런일이 많지 않을 것 같긴한데 최소한의 지연을 두고 로딩 화면을 보여줘야할지 모르겠다.

프론트엔드가 제대로 구현된 사이트들을 보면 로딩중에 스켈레톤 UI라고 보여줄 화면의 뼈대만 보여줘서 로딩 상태임을 보여주던데 이것도 구현해보고 싶었다.

css 라이브러리에서 제공하거나 직접 만들기도 하고 react-loading-skeleton, react-content-loader와 같은  라이브러리를 사용한다고 한다.

프로젝트의 핵심 기능을 마무리 해놓고 시도해봐야 할 것 같다.

메인 페이지도 그냥 텍스트만 띄우기는 심심해서 three.js를 사용해서 3D 모델을 띄워볼까 한다.

역시 상징적인 녀석이 sketchfab에 무료로 제공되고 있어서 이걸 사용하며 될 것 같다.