# CSS의 다중 외곽선 텍스트 효과

> Clean Markdown view of GeekNews topic #29270. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=29270](https://news.hada.io/topic?id=29270)
- GeekNews Markdown: [https://news.hada.io/topic/29270.md](https://news.hada.io/topic/29270.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-05-08T04:35:04+09:00
- Updated: 2026-05-08T04:35:04+09:00
- Original source: [yuanchuan.dev](https://yuanchuan.dev/multi-stroke-text-effect-in-css)
- Points: 1
- Comments: 1

## Topic Body

- CSS `text-stroke`는 단일 값만 받지만, 같은 글자를 여러 레이어로 겹치고 각 레이어의 **외곽선 두께**와 색을 다르게 지정하면 복고풍 다중 외곽선 텍스트 효과를 만들 수 있음
- [Graphic Japan : from woodblock and zen to manga and kawaii](https://archive.org/details/graphicjapanfrom0000avel)의 텍스트 효과를 참고해 여러 요소의 `text-stroke-width`를 다르게 지정하자 더 가까운 결과가 나옴
- 레이어별 `text-stroke-width`, `text-stroke-color`, **`z-index`** 를 조합해 외곽선의 순서와 색을 제어하며, 두께가 커져도 원래 글자 형태는 유지됨
- 브라우저마다 렌더링 결과가 달라 Chrome과 Safari보다 **Firefox**가 더 부드럽게 보이고, 여러 글자를 한 줄에 넣으면 글자 형태가 서로 병합됨
- 결과는 선택한 **폰트**에 크게 좌우되고 큰 `font-size`에서는 깜빡임이 보일 수 있어, 실험이나 css-doodle 이미지 생성에는 괜찮지만 프로덕션 사용에는 적합하지 않음

---

### 구현 방식
- 같은 글자를 여러 레이어로 겹치고 각 레이어의 `text-stroke-width`를 다르게 지정해 [Graphic Japan : from woodblock and zen to manga and kawaii](https://archive.org/details/graphicjapanfrom0000avel)에서 본 텍스트 효과에 더 가까운 결과를 만듦
```css
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
```
- 레이어마다 다른 색을 주고 원하는 순서로 겹치면 외곽선의 색과 순서를 제어할 수 있음
```css
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);
```

### 렌더링과 한계
- Chrome과 Safari보다 **Firefox**가 더 부드러운 렌더링을 제공함
- 여러 글자를 한 줄에 넣으면 글자 형태가 서로 병합됨
```css
@content: '秋收冬藏';
```
- 다양한 폰트를 빠르게 실험하기 위해 `@google-font` 함수를 추가해 폰트 로딩을 빠르게 함
```css
font-family: @google-font(Matemasie);
@content: 'b';
```
```css
font-family: @google-font(Tangerine);
@content: 'Love';
```
```css
font-family: @google-font('Cherry Bomb One');
@content: '+';
```
- 성능은 CSS 필터처럼 좋지 않고, 특히 `font-size`가 커질수록 깜빡임이 보일 수 있음
- 추가 예제는 css-doodle로 생성됐으며, 첫 번째 예제의 CodePen은 [https://codepen.io/yuanchuan/pen/ogzarGo](https://codepen.io/yuanchuan/pen/ogzarGo)에서 확인 가능함

## Comments



### Comment 57023

- Author: neo
- Created: 2026-05-08T04:35:05+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=48032265) 
- 이 글은 **css-doodle**의 작성자가 css-doodle로 만든 것임. 이 웹 컴포넌트는 블로그에서 쓴 CSS 변형 문법을 HTML 안에 바로 넣게 해줌  
  예시는 이런 식임:  
  `@grid: 15 / 90%;`  
  `border-radius: 50%;`  
  `background: hsl(@t(/20), 70%, 60%);`  
  `scale: sin(@atan2(@dx, @dy) + @ts);`  
  컴포넌트 정의를 불러오는 것 말고는 JavaScript가 필요 없고, 일반 HTML, Markdown, 프레임워크 등에서 동작함  
  [https://css-doodle.com/](<https://css-doodle.com/>)
  - 설명 고마움. 2018년에 프런트엔드 일을 떠난 뒤로는 CSS가 이제 뭘 할 수 있는지 거의 모르겠음  
    이 페이지의 CSS 상당수가 내게는 암호처럼 보임. 표준화된 스타일이 많은 시대에 새롭고 멋진 걸 올린 작성자에게 박수를 보냄

- Firefox의 **CSS 렌더링 엔진**이 왜 부드럽게 처리하는 쪽을 선호하는지 궁금함. 구현이 극적으로 달라 보이지만, 렌더링의 경계 사례라서 그렇게 보이는 것일 수도 있음
  - **획 확장**은 복잡한 주제이고, 합리적인 결과가 하나만 있는 것도 아니며 주관적 선호와 수많은 경계 사례, 잘못된 답이 섞여 있음  
    Firefox는 모든 지점에서 거리를 기준으로 확장하기로 했고, 이는 합리적인 답 중 하나이자 아마 가장 일반적인 방식임. 그래서 뾰족한 cusp가 곡선으로 확장됨  
    다른 브라우저들은 cusp를 유지하기로 했는데, 이것도 합리적일 수 있고 계산 비용도 훨씬 낮다고 봄. 하지만 특징 크기, 즉 노드 사이 거리보다 더 확장하면 퇴화 사례가 많아져서 네 번째 빨간 링쯤에서는 명백히 틀려 보임  
    box-shadow도 확장이 일어나는 또 다른 경우임. 네 번째 길이 값인 spread distance가 그것임. 모서리가 cusp면 그림자 모서리도 cusp가 되고, 둥글면 그림자 모서리도 둥글어짐. 유용한 그림은 [https://drafts.csswg.org/css-backgrounds/#shadow-shape](<https://drafts.csswg.org/css-backgrounds/#shadow-shape>)에 있음  
    약간의 요령으로 `0.1px border-radius`를 주면 박스는 여전히 사각형처럼 보이지만 확장된 그림자는 곡선이 됨. 가끔 유용함. 원래 글의 내용으로 돌아가면, cusp 노드 대신 아주 미세한 곡선이 있는 글꼴을 쓰면 Chromium/Safari도 Firefox에 더 가까워질 것임
  - Firefox의 둥글림 효과를 완전히 좋아하진 않지만, Chrome 해석은 **가짜 뾰족한 돌기**를 만들어서 그냥 틀린 것처럼 느낌  
    직관적으로 별표 모양의 외곽선은 평범한 육각형에 가까워질 거라 기대하는데, 어느 브라우저도 그걸 해내지는 못함
  - **miter join**은 Safari, **round join**은 Chrome 쪽임
  - Firefox는 **SDF**처럼 보임. 객체까지의 최단 거리 기반 렌더링 같고, Chrome 쪽은 뭔지 잘 모르겠음
  - Firefox 쪽은 해당 문자의 SDF 결과를 단계적으로 잘라낸 것에서 기대할 만한 모습과 정확히 같아 보임  
    첫 번째 레이어의 둥근 모서리들은 원래 문자의 가장 가까운 모서리에서 모두 같은 거리에 있을 것임

- 이 블로그 디자인이 정말 좋음. **단순하고 명확하며 콘텐츠 우선**임
  - 맞음. CSS/SVG/canvas를 명확하게 보여주는 글이 많음  
    Daily Sketch 시리즈나 `CSS Animation with offset-path`도 똑같이 재미있음

- 이 글을 읽고 [https://css-doodle.com](<https://css-doodle.com>)을 처음 알게 됨  
  몇 달 전에는 **HTML Canvas API**로 비슷한 걸 하고 있었는데, CSS로도 이런 재미있는 작은 작업을 할 수 있는 줄 몰랐음. 아주 마음에 듦

- fiddle을 **Apple 로고와 색상**으로 바꿔 보니 첫 번째 링이 사과 일부를 먹어버림. 사과 윗부분이 잘리는데 왜 그런지 아는지 궁금함  
  `--c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;`  
  `@content: '';`

- 멋진 Unicode 문자를 쓰지 않으면서도 글꼴이 권장하는 표시를 유지한 채 **이중 외곽선 텍스트**를 만드는 최선의 방법이 궁금함  
  지금은 [my blog]([https://blog.velocifyer.com/](<https://blog.velocifyer.com/>))에서 멋진 문자를 쓰고 있지만 검색 결과에는 해가 됨. 수동 HTML에서 11ty로 블로그를 옮기는 중이라, 동시에 블로그도 개선하고 싶음  
  덧붙여 현재 블로그 디자인에 대한 의견도 받고 싶음

- 멋짐. 다만 브라우저마다 **렌더링 차이**가 너무 큰 건 아쉬움  
  같은 걸 그림자로도 해봤는지 궁금함. 그림자도 쌓을 수 있을 것 같음
  - 외곽선을 만들려면 그림자를 원형으로 퍼뜨려야 해서, 전체 모양은 결국 대략 **원에 수렴**하고 글자 모양은 거의 따라가지 않게 됨

- 제일 먼저 떠오른 건 content에 **이모지**를 넣는 것이었음. 그런데 알 수 없는 문자 사각형만 나옴. 마법 같은 걸 기대했던 것 같음
  - 내 쪽에서는 이모지가 렌더링되긴 했지만 외곽선 효과는 전혀 없고, 그냥 맨 이모지만 보였음
  - 글꼴로 **Noto Emoji**를 쓰면 동작함