[나와 닮은 못난이 농산물 똑닮안] 5. 리팩토링2 (모달 컴포넌트, Layout Shift)

3. UX 개선 작업

구조적인 리팩토링 외에 UX 향상을 위한 업데이트도 있었다. 

 

모달 컴포넌트 생성

기존에는 API 호출 후 에러 응답이 오면 alert로 에러 메시지를 보여주고 있었다. 그대로 가도 문제는 없었지만, 서비스의 이미지와 어울리는 모달을 통해 조금 더 완성도를 높이고자 모달 컴포넌트를 만들게 되었다. 모달로 에러 메시지를 노출할 경우 좀 더 명확하게 의도를 전달할 수 있는 것 같다. (에러 컴포넌트도 추가할 예정이다)

 

const Modal = ({ contentText, buttonText, onClick }: ModalProps) => {
  return (
    <>
      <Dimmed>
        <Container>
          <Content>{contentText}</Content>
          <Button onClick={onClick}>{buttonText}</Button>
        </Container>
      </Dimmed>
    </>
  );
};

 

올바르지 않은 이미지를 넣었을 때 에러가 발생하면, 아래와 같은 모달이 뜬다. dimmed 처리 후 모달 바깥 부분을 클릭 시 닫히도록 설정해서 더 빠르게(?) 모달을 닫을 수 있다.

모달 컴포넌트

 

 

Layout Shift 개선

이미지가 들어가는 부분에 layout shift 현상이 있었다. 특히 결과 페이지에서 캐릭터 이미지의 깜박임이 심했다. (이미지가 화면에 가득 차서 더 그렇게 보였던 것 같다)

 

cf) layout shift란?

• A layout shift happens when any element that is visible in the viewport changes its position between two frames. These elements are described as being unstable, indicating a lack of visual stability. (MDN)
• 뒤늦게 렌더링 되는 요소가 등장하면서, 기존 레이아웃이 밀리는 것처럼 보이는 현상이라고 볼 수 있다.

 

이를 해결하기 위해 이미지가 들어가는 부분에 height를 넣어 미리 자리를 차지하도록 했다. 새로고침 시 깜박임이 사라지니 훨씬 보기 좋아졌다!

 

 

Before (깜박임)

 

After (깜박임 X)

 

 

4. 결과 페이지의 변경

추가적으로 결과 이미지가 변경되었다! 기존 이미지가 너무 단조롭다는 의견이 있어서 나름 대대적인 수정을 한 것이다. 사용자의 선택지를 더 많이 반영해서 다양한 결과를 만나볼 수 있다. 

 

NEW 결과 이미지 (공유하고 싶어지는 비쥬얼)

 

 

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift