[React]OS별 SVG 렌더링 차이 해결하기

1. 문제 상황

씨즌넷 프로젝트 Rentlist, React에서 SVG 아이콘을 사용하여 드롭다운 화살표를 만들었는데, Windows에서는 정상적으로 정렬되었지만, Mac에서는 위아래 정렬이 어긋나 있다는 피드백을 받았다. (위 windows, 아래 mac)

Windows

Mac

문제 해결을 위해 Windows와 macOS의 SVG 렌더링 방식 차이로 인해 문제가 발생하였다고 가정하고, mac 환경과 windows 환경을 동시에 접속하면서 둘 다 적절하게 표시되도록 css를 수정하려 하였다.

2. 해결 과정

1. 가상 머신 활용

windows에서는 자체적으로 mac 기준의 디스플레이를 확인하기 어렵기 때문에, BrowserStack이라는 온라인 가상 머신을 이용하여 Mac 환경에서의 SVG 렌더링을 직접 확인하였다.

BrowserStack은 다양한 OS(Windows, macOS, Linux)와 브라우저(Chrome, Edge, Safari, Firefox 등)를 지원하는 클라우드 기반 원격 테스트 플랫폼이다. 이는 별도의 환경 설정 없이 웹에서 바로 테스트할 수 있어 편리하며, 기본적으로 유료 서비스지만 무료 체험판을 이용하면 1분동안 확인할 수 있어 이걸로 테스트를 진행하였다.

그리고 피드백 받은 대로 Mac에서 SVG의 위치가 Windows와 다름을 확인하였다.

2. 대체 방안(로컬 가상 머신)

BrowserStack 외에도 로컬 가상 머신 소프트웨어를 이용하여 직접 테스트할 수도 있다. 대표적인 예로 VirtualBox가 있다.

VirtualBox는 무료 오픈소스 가상 머신 소프트웨어로, Windows, macOS, Linux 환경에서 사용할 수 있다. 직접 원하는 OS를 설치하여 로컬에서 테스트할 수 있어 유용하다.
하지만, 환경 설정 및 유지보수가 필요하며, 시스템 자원을 많이 사용할 수 있다는 점을 고려해야 한다. 설정 관련해서 만질 게 많아서, 로컬 가상 머신을 사용하진 않았다. 하지만 ios와 window를 두고 여러 번 테스트해야 하는 개발자의 경우 이 도구를 사용하는 것이 더욱 효율적일 것이다.

3. SVG 수정

처음에 CSS 코드를 아무리 건드려도 같아지지가 않아서, 근본적인 원인은 SVG 코드에 있다고 보고 먼저 SVG 코드를 수정하였다.

기존 코드

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 18 11"
  fill="none"
>

수정 후 코드

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 18 11"
  fill="none"
  style={{ display: 'vertical-inline' }}
>

display: 'vertical-inline' 추가 → OS별 inline SVG의 baseline 차이를 해결하여 동일한 정렬 유지함

4. CSS 조정

이후 개발자 도구를 이용하여 두 코드가 동일하게 표시되도록 여러 번 검토하였고, 그 결과 CSS는 이렇게 수정하였다.

기존 코드

.arrow {
  width: 18px;
  height: 11px;
  position: absolute;
  right: 17px;
  bottom: 22px;
}

@media (max-width:320px){
	.arrow{
		width: 10px;
		height: 6px;
		right: 8px;
	}
}

수정 후 코드

.arrow {
  width: 18px;
  position: absolute;
  right: 17px;
}

@media (max-width:320px){
	.arrow{
		width: 10px;
		right: 8px;
		bottom: 5px;
	}
}

• height 제거 → height가 명시될 경우 Mac에서 상대적인 정렬 기준이 다르게 해석되어 제거함
• bottom 값 조정 → absolute 포지션일 때 Mac에서의 baseline 정렬 문제를 해결함

3. OS별 렌더링 차이 분석

그리고 내 코드를 바탕으로 OS별로 렌더링 차이가 나는 이유를 찾아 보았다.

1. 기본 정렬(Baseline) 차이

   • Windows에서는 inline-svg가 텍스트와 같은 baseline 기준으로 정렬된다.
     
   • Mac에서는 inline-svg가 기본적으로 하단 정렬된다. 때문에 height, position 속성 적용 방식이 다르게 동작한다.
     

2. 포지셔닝 해석 차이

   • absolute로 배치된 요소에서 bottom 값이 Mac에서는 예상보다 다르게 적용될 수 있으므로, 확인이 필요하다.
     
   • 이는 macOS의 렌더링 엔진(WebKit)과 Windows의 Blink 엔진(Chromium 기반)이 다르게 동작하기 때문이다.
     

3. Antialiasing과 Height 문제

   • Windows와 macOS는 벡터 그래픽(SVG)의 안티앨리어싱 방식이 다르다. (Windows는 DirectWrite, macOS는 CoreGraphics)
     
   • 따라서 동일한 stroke-width 설정에서도 미세한 차이가 발생할 수 있다.
     
   • 또한 Mac에서는 height가 설정되었을 때 기본 정렬 기준이 변경될 가능성이 있다.

5. 결론 및 정리

이번 CSS 문제를 해결하면서 OS에 따라 SVG 렌더링 차이가 발생할 수 있다는 것을 깨달았다. 따라서 가상 머신(BrowserStack)을 활용해 문제를 정확히 확인하는 것의 중요함을 알게 되었다.
이번 문제는 BrowserStack의 1분 무료 체험판을 이용하여 해결하였지만, 후에 개발을 본격적으로 시작하고 더 정밀한 테스트가 필요하면 VirtualBox 같은 로컬 가상 머신을 활용해 보고 싶다.