[트러블슈팅] 이미지 모달 높이 고정으로 긴 이미지 사용성 개선

문제 상황

어드벤트 캘린더 프로젝트에서 사용자가 업로드한 이미지를 모달로 표시하는 기능을 구현했다.
이미지 상세보기 모달과 업로드 미리보기 모달 두 곳에서 이미지를 보여주는데, 이미지의 가로세로 비율이나 크기에 따라 모달의 높이가 동적으로 변하도록 구현했었다.

세로로 긴 이미지 업로드시 일부 모바일 기기에서 세로로 이미지가 길어 업로드 버튼이 보이지 않아 업로드가 불가했다.

발생 환경

• React 18 + TypeScript
• Tailwind CSS
• 모달 컴포넌트: ImageDetailModal, ImageUploadModal

문제 증상

세로로 긴 이미지를 업로드하거나 상세보기를 열면 다음과 같은 문제가 발생했다:

• 모바일에서 미리보기 이미지가 화면을 가득 채우면서 하단의 "업로드", "취소" 버튼이 화면 밖으로 밀려나 보이지 않아 업로드 불가

원인 추적

// 기존 코드 - 이미지 높이 제한 없음
<div className="relative">
	<img
		src={preview}
		alt="Preview"
		className="w-full rounded-lg"
	/>
	
	<button
	onClick={() => {
	setFile(null);
	setPreview(null);
	}}
	className="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600"
>	
	
		<UploadCloud className="w-4 h-4"/>
	</button>
</div>

고정 높이가 없어 내용에 따라 전체 모달 구조가 유동적으로 변하는 것이 근본적인 원인이었다.

해결 방법

컨테이너에 고정 높이를 부여하고, 그 안에서 이미지가 비율을 유지하며 중앙 정렬되도록 변경했다.

상세 모달 (ImageDetailModal.tsx)

// 수정 후 - 컨테이너 높이 고정
<div className="relative flex-shrink-0 h-[60vh] bg-slate-100 flex items-center justify-center">
  <img
    src={currentImage.imageUrl}
    className="max-w-full max-h-full object-contain"
  />
</div>

업로드 모달 (ImageUploadModal.tsx)

// 수정 후 - 미리보기 영역 높이 고정
<div className="relative h-[60vh] bg-slate-100 rounded-lg flex items-center justify-center">
  <img
    src={preview}
    className="max-w-full max-h-full object-contain rounded-lg"
  />
</div>

핵심 변경사항:

• h-[60vh]: 컨테이너 높이를 화면의 60%로 고정
• flex items-center justify-center: 이미지를 컨테이너 중앙에 배치
• max-w-full max-h-full object-contain: 이미지가 컨테이너를 넘지 않으면서 비율 유지
• bg-slate-100: 빈 공간을 시각적으로 구분

이제 어떤 비율의 이미지가 오더라도 모달 높이는 일정하게 유지되고, 하단 버튼과 정보 영역이 항상 접근 가능해졌다.

정리

이미지 크기가 유동적일 때는 컨테이너의 높이를 고정하라.
컨테이너에 고정 높이(h-[60vh])를 주고, 그 안에서 object-contain과 flex 중앙 정렬로 이미지를 배치하면 일관된 UI를 유지할 수 있다.

느낀 점

UI 구현할 때 "원본을 최대한 살리자"는 생각이 오히려 사용자 경험을 해칠 수 있다는 걸 배웠다. 이미지 비율을 유지하는 것도 중요하지만, 모달이라는 제한된 공간에서는 일관된 레이아웃과 접근성이 우선이어야 한다. 컨테이너 기반 사고로 전환하니 문제가 명확하게 보였다.