트러블 슈팅 - Grid Layout Shadow 웹과 PDF 출력 문제 해결하기

개요

PDF로 렌더링 되는 페이지에서 웹 브라우저 렌더링 시에는 문제가 없었는데,
PDF로 export하고나서 결과물을 확인해보면 그림자가 뭉게지는 현상이 발견되었다.
뭐가 문제였을까

문제 정의

정리하자면, 그리드 레이아웃 컴포넌트에서 그림자 효과 구현 시 다음 문제가 발생했다.

1. 4x2 그리드에서 첫 번째 열만 그림자가 정상 렌더링됨
2. PDF 출력 시 그림자가 흐릿하게 표시됨

해결 과정

1. 그리드 레이아웃 문제

처음에는 Z-Index와 스태킹 컨텍스트로 문제를 해결하려 했으나 실패했다:

/* ❌ 시도했지만 작동하지 않은 코드 */
.grid-container {
  isolation: isolate;
}
 
.card {
  position: relative;
  z-index: 1;
}
 
.card::before {
  z-index: -1;
}

2. PDF 출력 문제 해결

첫 시도: 미디어 쿼리 사용

웹과 프린트 환경에서 다른 스타일을 적용하는 방식을 시도했다:

@media screen {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
}
 
@media print {
  .card {
    border: 1px solid #e9ecef;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

하지만 이 방식은 PDF에서 원하는 그림자 효과를 완전히 포기해야 한다는 단점이 있었다.

3. 최종 해결책: Drop-Shadow 필터 적용

여러 시도 끝에 filter: drop-shadow()를 사용하는 방법으로 두 문제를 모두 해결할 수 있었다:

.grid-container {
  padding: 4px;  /* 그림자 잘림 방지 */
}
 
.card {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

Drop-Shadow 사용 이점

• PDF 출력 시 더 안정적인 렌더링
• 요소 형태를 따라 자연스러운 그림자 생성
• 웹/PDF 모두 동일한 결과물
• 미디어 쿼리 불필요
• 그리드 레이아웃에서도 정상 작동

구현 시 추가사항

1. 그리드 아이템의 불필요한 width: 100% 제거
   • 그리드는 자체적으로 너비만큼 채우므로 의미없는 css였음.
2. 그리드 컨테이너에 패딩 추가 (그림자 잘림 방지)
   • 패딩이 없으면 그리드 레이아웃이 겹치는 부분에서 그림자가 잘림
3. filter: drop-shadow() 적용

• drop-shadow와 box-shadow의 차이점

4. 불필요한 테두리 스타일 제거
   • 그림자가 있으면 굳이 테두리가 없어도 된다.

이 방식으로 그리드 레이아웃의 모든 카드에서 그림자가 정상적으로 표시되며, 웹과 PDF 출력 모두에서 일관된 그림자 효과를 구현할 수 있었다.