Favor-Eat : 크기가 다른 이미지들을 깔끔하게 보여주기 위한 레이아웃 설계

음식을 추천해주는 프로젝트를 진행하던중에
추천받은 음식 4개를 메인 화면에 띄워주기로 했다.

팀원들과 와이어프레임을 작성하는데 한가지 걱정이 생겼다.

만개의 레시피의 음식의 사진 크기가 모두 제각각일것이고
이를 똑같은 사이즈에 구겨넣으면 확대의 정도가 제각각이라서 이상하지 않을까?

음식 사진의 크기가 달라도 이상하지 않는 레이아웃은 없을까?

팀원들과 디자인 레퍼런스를 참고하면서 레이아웃을 구성해보았다.

---

---

팀원들이랑 천하제일 레이아웃 대회

레이아웃 결정! 두둥탁

우리가 채택한 레이아웃은 위와 같다.
어느정도 얼기설기 쌓으면서도 크기가 다른게 많이 부각되지 않는게 마음에 들었다.

그래서 어떻게 구현하지? 🤷‍

1. 레이아웃 구현

이미지 4개를 묶어서 display:grid 로 처리해
각각을 화살표 방향의 모서리로 정렬해주는 방식으로 구현했다.

2. 이미지 크기 동적으로 계산

내가 맡은 부분이라서 이 이미지 크기를 동적으로 어떻게 계산할것인가를 고민했다.
나는 이미지의 가로 세로 비율만 알아내서 이미지 크기를 동적으로 계산하면 되겠다는 생각을 했다.

아래처럼 이미지의 크기를 동적으로 계산하는 hook을 만들었다.

import { useState, useEffect } from "react";

export default function useImageRatioSize(
  src: string,
  maxWidth: number,
  maxHeight: number,
) {
  const [size, setSize] = useState({ width: 0, height: 0 });
  const [ratio, setRatio] = useState(0);

  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      let { width, height } = img;
      const value = Math.min(maxWidth / width, maxHeight / height);

      setSize({ width: width, height: height });
      setRatio(value);
    };
    img.src = src;
    return;
  }, [src, maxWidth]);

  return {
    width: size.width * ratio,
    height: size.height * ratio,
  };
}

우리 프로젝트는 반응형을 지원하기 때문에 window의 크기를 자동 계산해주는 hook으로부터 window size를 받아서 useImageRatioSize에 넘겨주었다.

const windowSize = useWindowDimensions();
const { width, height } = useImageRatioSize(
	imgSrc,
    windowSize.width * 0.23,
    windowSize.height * 0.33,
);

결과물 🎉

이미지는 동적으로 계산하는것이 잘 적용되었지만 내부의 텍스트는 글자가 얼마나 많이 들어갈지 몰라서 크기를 타협하는 방식으로 수정하는데 굉장히 힘들었다. 위의 gif에서도 왼쪽위의 사진은 텍스트가 많아서 css가 조금 찌그러진게 아쉬웠다.