🤔 문제 상황

디자이너님이 전달해준 피그마 디자인에는 텍스트에 깔끔한 외곽선이 있었다.
처음에는 단순히 CSS의 -webkit-text-stroke 속성을 사용하면 되겠다고 생각하고 구현한 결과...

결과물은 기대와 달랐다. 텍스트 외곽선이 안쪽으로 파고들어가 보기에 깔끔하지 않았고, 디자인과는 거리가 멀었다.

🔍 원인 파악

기본적인 -webkit-text-stroke 속성은 텍스트 자체에 스트로크를 적용한다. 이로 인해 스트로크가 텍스트 내부로 침범하게 되어, 의도했던 깔끔한 외곽선 효과를 얻을 수 없었다.

💡 해결 방법

여러 시도 끝에 찾은 해결책은 텍스트를 두 개의 레이어로 나누는 것이었다.

  <h1 
    className="font-custom text-5xl font-extrabold text-[#1287F3] relative inline-block"
  >
    <span 
      className="absolute inset-0 text-white [-webkit-text-stroke:2px_white]" 
      aria-hidden="true"
    >
      Hello World
    </span>
    <span className="relative z-10">
      Hello World
    </span>
  </h1>

생각보다 구현 방법은 단순했다:

1. 텍스트를 두 개의 레이어로 분리
2. 첫 번째 레이어에 스트로크 효과를 줌
3. 두 번째 레이어는 메인 텍스트로 사용

💻 해결 방법 포인트

1. 포지셔닝
relative와 absolute를 활용하여 두 텍스트를 정확히 겹치게 배치
z-index로 레이어 순서 제어

2. 접근성 고려
스트로크용 텍스트에 aria-hidden="true" 추가
스크린 리더가 텍스트를 중복해서 읽지 않도록 처리