2026년 CSS 텍스트 스트로크 — 진짜로 멋있어 보이는 외곽선 글자 만들기

-webkit-text-stroke를 처음 쓴 건 마케팅 페이지의 히어로 헤드라인이었습니다. 브리프는 단순 — 브랜드 컬러로 외곽선을 두른 글자가 복잡한 제품 스크린샷 위에 올라간 것. CSS 2분 만에 작성, 노트북의 Chrome에서 잘 보였고, 그대로 배포했습니다. 곧이어 누군가 폰에서 찍은 스크린샷을 슬랙으로 보냈는데, 헤드라인이 알아볼 수 없는 얼룩처럼 보였습니다 — 작은 뷰포트에서 외곽선 글자들이 한 덩어리로 뭉쳐 있었죠. 다른 사람은 Safari에서 그라디언트 채움이 stroke 뒤로 렌더되어 색이 사실상 안 보인다고 했습니다.

그 헤드라인을 디버깅하는 데 4시간이 걸렸습니다. 최종 버전 CSS는 처음 배포한 것보다 4줄 더 길었습니다. 이 글은 그때 누군가가 첫날 건네줬으면 좋았을 설명의 버전입니다.

CSS를 직접 쓰지 않고 브라우저에서 레시피를 시도해 보고 싶다면, CSS 텍스트 스트로크 생성기에 폰트·굵기·크기·선 두께·채움 방식·선택형 드롭 섀도까지 모든 노브가 있는 실시간 미리보기가 준비되어 있습니다.

실제 속성: -webkit-text-stroke

알아야 할 속성은 정확히 두 개이며 본질적으로 별칭입니다:

.outlined {
  -webkit-text-stroke: 2px #0f172a;
  text-stroke: 2px #0f172a;
}

접두사 없는 버전은 원래 CSS3 Text Decoration 모듈에서 왔습니다. 수년간 에디터스 드래프트에서만 떠돌고 브라우저에 출고된 적이 없죠. prefixed 버전은 접두사가 있긴 해도 2016년경부터 보편 지원입니다 — 모든 Chromium 브라우저, Safari(원조), Firefox 모두 출고합니다.

항상 둘 다 적으세요. prefixed 버전이 실제 일을 합니다. unprefixed 버전은 언젠가 표준이 따라잡는 날을 위한 정중한 제스처입니다. 그 날은 아마 오지 않겠지만, CSS 한 줄 추가는 거의 공짜입니다.

shorthand-longhand 분리도 있습니다:

.outlined {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #0f172a;
  /* 단축형: */
  -webkit-text-stroke: 2px #0f172a;
}

대부분의 경우 단축형으로 충분합니다. longhand는 부모로부터 stroke 색을 상속받으면서 너비만 덮어쓰고 싶을 때 — 예: 디자인 시스템에서 stroke 색은 테마로 제어하고 너비는 컴포넌트마다 다른 경우 — 유용합니다.

선이 그려지는 방식

이 디테일이 나머지 글의 의미를 만들어 줍니다. 선은 글리프 외곽 안쪽에 렌더링됩니다, 바깥쪽이 아니라. 글자 O를 떠올려 보세요. 브라우저는 그 글자의 경계 곡선들을 — 도넛의 안쪽 가장자리와 바깥쪽 가장자리를 — 압니다. 2px 선을 적용하면 브라우저는 바깥쪽 가장자리에서 시작해 안쪽으로 2px 깊이로 칠합니다.

여기서 두 가지 실용적 결과가 따릅니다.

두꺼운 선은 글자 모양을 먹어 치웁니다. 24px 폰트의 4px 선은 글자 내부의 대부분을 잡아먹습니다. 결과는 두툼해 보이는 글자, 그리고 폰트 자체가 더 굵어진 것 같은 인상. 얇은 디스플레이 폰트가 text-stroke와 자주 안 어울리는 이유이기도 합니다 — 선을 줄 만한 시각적 무게가 부족하거든요.

선은 타이포그래피의 풋프린트를 늘리지 않습니다. 라인박스·베이스라인·자간 — 어느 것도 stroke를 적용한다고 바뀌지 않습니다. 텍스트는 stroke 없을 때와 정확히 같은 가로 공간을 차지합니다. SVG 오버레이를 덧대거나 요소를 복제하는 대안 대비 text-stroke가 선호되는 실용적 이유 중 하나입니다.

가장 흔한 시각적 실수

각각을 한 번씩은 직접 저질러 본 뒤 추린 짧은 목록입니다.

폰트 굵기에 비해 선이 너무 두꺼움

300 굵기 폰트에 3px 선을 두르면 망가져 보입니다. 폰트의 얇은 본래 획이 새 외곽선에 압도되고, 우아한 디스플레이 스타일이 누군가 굵기 설정을 빠뜨린 굵은 본문처럼 보입니다.

해결책은 선 두께를 글자 굵기에 맞추는 것. 대략적인 규칙:

• 300 굵기: 1px 미만
• 400 굵기: 1.5px 미만
• 700 굵기: 1.5~3px
• 900 굵기: 2~5px

원본 글리프가 두꺼울수록 더 많은 외곽선을 견딜 수 있습니다. 가능한 가장 가벼운 선을 쓰세요 — 두꺼울수록 글자 형태가 평평해집니다.

선 색이 배경과 같음

배경과 같은 단색 위에 외곽선 글자는 완전히 사라집니다. 전형적인 사례는 디자이너가 헤드라인 뒤 사진에서 stroke 색을 골라 두고 단일 사진에서만 테스트한 경우. 다른 이미지로 바꾸면 헤드라인이 보이지 않습니다.

이미지 위에 stroke를 두를 때는 라이브러리 내 대부분 사진과 대비가 큰 색을 고르세요. 야외 사진에는 보통 검정, 스튜디오 샷에는 흰색. 라이브러리가 다양하다면 외곽선 자체를 대비 쌍으로 — 1px 흰색 외곽 + 2px 검정 내곽 — 둬서 어떤 배경에서도 가독성을 확보하는 것도 방법(단, CSS는 더 늘어남).

선 두께가 뷰포트와 함께 스케일되지 않음

1920px 데스크톱에서 또렷한 3px 선은 같은 헤드라인의 물리 크기가 절반인 375px 폰에서는 뭉툭해 보입니다. 작은 화면에서 선을 줄이려면 뷰포트 단위나 미디어 쿼리를 쓰세요:

.outlined {
  -webkit-text-stroke: clamp(1px, 0.2vw, 3px) #0f172a;
}

clamp() 함수는 합리적 최소·최대 사이에서 뷰포트 너비에 따라 보간합니다. 이런 광학 조정에 딱 맞습니다.

text-shadow를 대신 써야 할 때

text-stroke가 항상 답은 아닙니다. 대안인 — 여러 오프셋의 text-shadow로 외곽선을 흉내 내는 — 방식은 어떤 경우에 분명한 이점이 있습니다.

.outlined-via-shadow {
  color: white;
  text-shadow:
    -1px -1px 0 #0f172a,
    1px -1px 0 #0f172a,
    -1px 1px 0 #0f172a,
    1px 1px 0 #0f172a;
}

이 방식은 글리프 바깥쪽에 외곽선을 만듭니다. 작은 크기에서 시각적 결과가 훨씬 깔끔합니다 — 글자 모양은 그대로 남고, 외곽선이 글자를 잡아먹는 대신 대비 헤일로처럼 작동합니다.

text-stroke 대신 text-shadow가 좋은 경우:

• 본문/작은 UI 텍스트(24px 미만) — 이 스케일에서 text-stroke는 글자 내부를 너무 많이 먹어 치움
• 배경이 예측 불가능한 이미지 오버레이 — 어두운 색 text-shadow가 텍스트를 띄우는 '헤일로'처럼 작동
• 외곽선과 background-clip: text 그라디언트를 함께 써야 할 때 — Safari는 text-shadow를 text-stroke보다 안정적으로 합성
• 아주 얇은 외곽선이 필요할 때 — 서브픽셀 stroke는 브라우저마다 일관되지 않게 렌더링되지만 1px text-shadow는 항상 동작

text-stroke가 더 좋은 경우:

• 큰 디스플레이 헤드라인(48px 이상)에서 외곽선이 폰트에 기하학적으로 충실해야 할 때
• 선명한 단색 외곽선이 필요할 때 — text-stroke는 4겹 text-shadow보다 날카로운 가장자리, 특히 레티나에서
• 투명 채움 옵션이 필요할 때 — color: transparent + stroke가 클래식한 중공 글자 룩이며 text-shadow로는 추가 트릭 없이 재현 불가

그라디언트 채움 레시피

평범한 외곽선 헤드라인을 디자인된 것처럼 보이게 만드는 트릭:

.gradient-outline {
  font-size: 96px;
  font-weight: 900;
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #0f172a;
  text-stroke: 2px #0f172a;
}

원리: color: transparent가 글자 내부를 안 보이게 만들고, background-clip: text가 그라디언트를 텍스트 모양으로 잘라 글자 안에만 그라디언트가 보이게 하고, text-stroke가 그 위에 외곽선을 그립니다. 결과는 화려한 그라디언트로 채운 글자 안에 깔끔한 어두운 외곽선.

세 가지 주의:

-webkit-text-fill-color: transparent를 항상 같이 쓰세요. Safari는 background-clip: text가 설정되었을 때 비투명 색을 상속해 color: transparent를 무시할 때가 있습니다. prefixed text-fill-color를 추가하면 강제됩니다.

그라디언트 방향을 뒤집어 테스트하세요. 135도 그라디언트는 좌→우 헤드라인엔 멋있지만, RTL 언어에선 그라디언트의 밝은 쪽이 텍스트의 잘못된 면에 떨어져 어색해 보일 수 있습니다.

스태킹 컨텍스트 버그 주의. 헤드라인이 transform, filter, opacity가 있는 부모 안에 있다면 Safari가 background-clip 합성에 실패할 수 있습니다. 그라디언트 스타일을 부모로 올리거나, 헤드라인을 추가 요소로 감싸 스태킹 컨텍스트를 분리하세요.

복잡한 배경 위에서 가독성을 살리는 드롭 섀도

헤드라인이 사진이나 영상 위에 있을 때 외곽선 글자 아래에 부드러운 드롭 섀도를 더하면 글자 사이 틈을 잡아 주는 대비 헤일로가 생깁니다. 손글씨로 짠 거의 모든 영화 포스터와 앨범 커버가 쓰는 기법입니다.

.outlined-over-photo {
  -webkit-text-stroke: 2px white;
  color: transparent;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

섀도는 아래로 오프셋하고 큰 블러로 부드럽게 — 외곽선과 시각적으로 경쟁하지 않는 후광. 이런 식의 섀도는 절제해서 사용. stroke와 결합하면 금세 어수선해집니다. 낮은 불투명도의 섀도 하나면 충분합니다.

인쇄/PDF 함정

CSS가 인쇄나 PDF로 내보내질 예정이라면 — 청구서나 증명서 같은 — text-stroke가 항상 안정적으로 출력되진 않습니다. 브라우저 인쇄 엔진이 이 속성을 일관되지 않게 처리합니다. 어떤 엔진은 화면과 다른 해상도로 래스터화해 잘못된 너비로 출력하고, 어떤 엔진은 stroke를 통째로 건너뜁니다.

인쇄용 안정적 우회로는 @media print 블록 안에서 text-shadow(인쇄 충실)로 갈아타거나, 외곽선을 평탄화해 단색 검정/흰색으로 바꾸는 것:

@media print {
  .outlined {
    -webkit-text-stroke: 0;
    color: black;
    text-shadow: none;
  }
}

대부분의 문서에서 가장 안전한 선택은 인쇄 전에 외곽선 디스플레이 텍스트를 단색으로 평탄화하는 것 — 외곽선의 시각적 뉘앙스가 300dpi 프린터에서 살아남는 일은 드물기 때문입니다.

정리

모든 현대 브라우저에서 동작하고, 헤드라인 크기에서 또렷하며, 작은 화면에서 자연스럽게 떨어지는 외곽선 텍스트의 가장 단순한 버전 — 4줄입니다:

.headline {
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 900;
  -webkit-text-stroke: clamp(1px, 0.2vw, 3px) #0f172a;
  color: transparent;
}

히어로 요소에 그대로 얹고, 신뢰하는 디스플레이 굵기 폰트를 지정하면 의도된 헤드라인의 90%에 도달합니다. 포스터처럼 보이게 하고 싶으면 그라디언트 채움을 추가하세요. 사진 위에 얹는다면 드롭 섀도를. 24px 미만에서 가독성이 필요하면 text-shadow로 갈아타세요.

글 위 생성기는 이 모든 패턴을 만들어 줍니다. 노브를 만지고, CSS를 복사하고, 밤 11시 슬랙 디버깅이 필요 없는 무언가를 출고하세요.

관련 도구

• CSS 그라디언트 생성기 — 외곽선 헤드라인과 짝꿍인 그라디언트 채움
• CSS 박스 섀도 생성기 — 외곽선 텍스트를 띄우는 드롭 섀도
• CSS 필터 생성기 — 텍스트 뒤 레이어의 블러·대비 조정
• 컬러 컨버터 — 외곽선 색을 고를 때 hex, RGB, HSL을 오가기