네온 텍스트 생성기

글자를 넣으면 네온사인처럼 빛나는 모습과 PNG·CSS를 함께 만듭니다

네온 텍스트 생성기는 글자를 벽에 걸린 네온사인처럼 보여 주는 도구입니다. 글자를 넣고 튜브 색과 글꼴을 고르면 무대의 간판이 바로 바뀌고, 테두리 튜브를 켜면 글자를 두른 사각 튜브가 다른 색으로 함께 빛납니다. 전원 단추로 불을 끄면 낮에 꺼진 간판처럼 유리관 색만 남은 모습도 볼 수 있습니다.

다 만든 간판은 두 가지로 가져갑니다. PNG 저장은 벽까지 담은 이미지나 빛만 남은 투명 배경 이미지를 만들고, 코드 복사는 웹페이지 제목에 그대로 붙일 CSS를 줍니다. CSS의 빛은 글자 크기를 따라 커지는 em 단위 그림자 일곱 겹이고, PNG는 같은 그림자를 캔버스에 다시 그려 미리보기와 같은 빛으로 나옵니다.

이럴 때 씁니다

• 간판 문구를 정하기 전에: 줄바꿈과 글꼴, 두 가지 튜브 색의 조합을 어두운 벽 위에서 먼저 봅니다. 전원을 끄면 낮에 불이 꺼진 모습도 확인할 수 있습니다.
• 썸네일·영상에 빛나는 제목을 얹을 때: 벽을 투명으로 두고 1920×1080으로 저장하면 영상 편집 프로그램에 바로 올릴 수 있는 빛 글자가 됩니다.
• 웹페이지 제목을 네온으로 꾸밀 때: 코드를 복사해 붙이면 끝입니다. 그림자가 em 단위라 제목 크기를 바꿔도 빛의 비율이 그대로입니다.
• 초대장·포스터·프로필 이미지: 1080×1080 정사각 판에 생일 축하 문구나 가게 이름을 빛나게 담습니다.

만드는 순서

1. 글자: 줄을 바꿔 3줄까지, 한 줄에 24자까지 넣습니다. 예시 간판을 누르면 글자·색·글꼴이 한꺼번에 바뀝니다.
2. 글꼴: 네온 튜브는 간판용 기하학 산세리프, 네온 필기는 이어 쓴 네온 손글씨입니다. 두 글꼴은 영문·숫자만 있어 한글은 기본 글꼴로 보입니다.
3. 튜브 색: 여덟 가지 튜브 색 가운데 하나를 누르거나 무지개 원에서 직접 고릅니다. 테두리 튜브는 따로 켜고 다른 색을 줄 수 있습니다.
4. 빛 세기·깜빡임·벽: 빛 세기는 1~10, 깜빡임은 없음·가끔·고장 난 간판, 벽은 벽돌·콘크리트·어둠·투명입니다.
5. 저장: PNG 크기를 고르고 PNG 저장을 누르거나, 코드 복사로 CSS를 가져갑니다. 링크 복사는 지금 설정을 주소 뒤 # 에 담아 그대로 다시 엽니다.

네온 빛은 그림자 일곱 겹으로 만듭니다

CSS의 text-shadow는 글자 모양을 흐리게 번진 그림자로 여러 번 깔 수 있습니다. CSS Text Decoration 3은 그림자 값을 box-shadow처럼 해석하고 첫 그림자가 맨 위에 놓인다고 정하고, CSS Backgrounds 3은 흐림 반지름의 절반을 표준편차로 하는 가우스 흐림에 가깝게 그리라고 정합니다. 이 도구는 좁고 하얀 그림자 두 겹을 위에, 넓어지는 색 그림자 다섯 겹을 아래에 깔아 가운데가 하얗게 타고 바깥으로 색이 번지는 튜브를 만듭니다. 글자 자체는 튜브 색에 흰색을 78% 섞은 밝은 색으로 칠합니다.

em은 그 요소의 글자 크기를 1로 보는 단위입니다. 그래서 같은 코드를 32px 제목에 쓰든 120px 제목에 쓰든 빛의 두께가 글자에 비례합니다. 그림자를 px로 고정해 두면 글자를 키울 때 빛이 상대적으로 얇아지고, 줄이면 빛이 글자를 덮습니다.

빛 세기를 바꾸면 색 빛 다섯 겹의 반지름이 세기 ÷ 5배가 되고, 흰 심지 두 겹은 0.6 + 0.4 × (세기 ÷ 5)배로 덜 바뀝니다. 작업면의 빛 단면 그래프는 굵기 0.1em인 획 하나에 일곱 겹을 겹쳤을 때 획 가운데에서 멀어질수록 남는 빛의 세기입니다.

그림자는 글자 배치에 영향을 주지 않으므로(CSS Text Decoration 3), 빛이 퍼지는 거리만큼 제목 둘레에 여백을 따로 두어야 합니다. 64px 제목에 세기 5를 쓰면 위아래로 50px 남짓 빛이 번집니다.

PNG는 같은 빛을 캔버스로 다시 그립니다

HTML 표준은 캔버스 그림자의 흐림을 shadowBlur 값의 절반을 σ로 하는 가우스 흐림으로 정합니다. CSS 흐림 반지름과 같은 관계라서, 이 도구는 CSS와 같은 반지름(글자 크기 × em 값)으로 그림자를 맨 아래 층부터 차례로 그리고 마지막에 글자를 칠합니다. 테두리 튜브도 바깥 그림자는 상자 밖에만, 안쪽 그림자는 상자 안에만 그려 CSS의 box-shadow와 같은 모양을 냅니다. 브라우저에 따라 캔버스 그림자 흐림에 상한이 있어, 흐림이 아주 큰 층은 작은 판에 같은 비율로 흐린 뒤 원래 크기로 키워 σ를 맞춥니다. 전원을 끈 채 저장하면 꺼진 간판 모습이 저장됩니다.

벽돌과 콘크리트 무늬는 미리보기와 같은 무늬를 글자 크기에 맞춰 키워 그리므로, 무대에서 본 구도가 그대로 저장됩니다. 투명을 고르면 벽과 가장자리 그늘을 빼고 글자와 빛만 남깁니다. 빛은 반투명이라 흰 바탕의 이미지 보기 프로그램에서는 흐려 보이지만, 어두운 사진이나 영상 위에 올리면 무대에서 본 빛이 됩니다.

깜빡임과 광과민 기준

WCAG 2.2의 성공 기준 2.3.1은 웹페이지가 1초에 세 번보다 많이 깜빡이지 않거나, 깜빡임이 일반 섬광·적색 섬광 기준 아래이도록 요구합니다. 여기서 섬광은 밝기가 최대 상대 휘도의 10% 이상 오르고 내리는 한 쌍이고, 면적은 1024×768 화면에서 341×256 픽셀 사각형을 10도 시야의 어림으로 씁니다. 간판이 크면 이 면적을 넘을 수 있으므로, 이 도구는 면적과 상관없이 횟수 기준을 지키게 깜빡임을 설계했습니다.

횟수는 밝기(불투명도)가 0.1 이상 떨어졌다가 다시 0.1 이상 오르는 골을 하나로 세어, 반복 주기를 이어 붙인 뒤 어느 1초 창에서나 센 가장 큰 값입니다. 복사한 CSS에는 prefers-reduced-motion 규칙이 함께 들어갑니다. MDN은 이 미디어 기능이 기기에서 꼭 필요하지 않은 움직임을 줄이는 설정을 켰는지 알아낸다고 설명하며, 그 설정을 켠 방문자에게는 간판이 깜빡이지 않고 켜진 채로 보입니다. 이 작업면의 미리보기와 전원 점화도 같은 설정이면 움직이지 않습니다. 전원을 켜거나 예시·깜빡임을 바꾸면 깜빡임을 1초 이상 멈췄다가 처음부터 다시 돌리고(점화가 있으면 점화가 끝나고 0.6초 뒤), 깜빡이던 중이면 점화를 건너뛰어 바뀌는 순간 앞뒤도 1초에 2번을 넘지 않습니다.

진짜 네온사인의 색

브리태니커는 순수한 네온 기체가 붉은 주황빛을 내고, 다른 기체와 그 조합이 다른 색을 낸다고 설명합니다. 네온관에 수은 증기를 넣으면 푸른빛이 납니다. 이름은 모두 네온사인이지만 붉은 주황을 뺀 색은 네온만으로 나오지 않는다는 뜻입니다. 아래 튜브 색은 화면(sRGB)에서 고른 값이므로, 간판 제작을 맡길 때는 업체의 실물 색 견본과 함께 비교하세요.

글자 심지 색 = 빛 색의 빨강·초록·파랑 값을 각각 흰색(255) 쪽으로 78% 옮긴 값입니다. 예: 핫 핑크의 초록 45 → 45 + (255 − 45) × 0.78 = 208.8 → 209(D1).

자주 틀리는 경우

• 그림자를 px로 고정: 다른 크기의 제목에 붙이면 빛의 비율이 깨집니다. 이 도구의 코드는 em 단위라 font-size만 바꾸면 됩니다.
• 밝은 배경에 그대로: 빛은 반투명한 색이라 흰 배경에서는 거의 보이지 않습니다. 제목 뒤를 어둡게 두거나 어두운 띠 위에 얹으세요.
• 빛이 잘림: 그림자는 글자 상자를 넓히지 않아서, 부모 요소가 overflow:hidden이거나 여백이 없으면 빛이 칼로 자른 듯 끊깁니다. 위 표의 퍼짐 거리만큼 여백을 두세요.
• 한글에 네온 튜브 글꼴: 두 네온 글꼴은 라틴 문자만 담아 한글은 기본 글꼴로 대체됩니다. 한글 간판은 고딕·명조로 비교해 보세요.
• 깜빡임을 너무 빠르게: 직접 keyframes를 고칠 때 1초에 세 번보다 많이 깜빡이게 만들면 광과민 기준을 넘습니다. 움직임 줄이기 규칙도 지우지 마세요.

한계와 주의

• 빛 단면 그래프와 퍼짐 거리는 굵기 0.1em인 획 하나로 어림한 값입니다. 획이 굵거나 글자가 촘촘하면 빛이 겹쳐 더 밝고 넓게 보입니다.
• 고딕·명조·고정폭은 기기에 깔린 글꼴로 그리므로 기기마다 모양이 다르고, PNG는 지금 쓰는 기기의 글꼴로 저장됩니다.
• 깜빡임 횟수는 불투명도 변화로 센 어림입니다. WCAG의 섬광 판정은 실제 화면의 상대 휘도와 면적으로 하므로, 큰 화면에 띄울 때는 깜빡임 없이 쓰는 편이 안전합니다.
• 실제 간판의 크기, 튜브 길이, 가격, 전력은 계산하지 않습니다.

기준: 2026-10-20에 아래 표준·문서의 해당 문장을 확인했습니다. 표의 숫자는 이 도구의 계산과 같습니다.

출처

• 01W3C — CSS Backgrounds and Borders Module Level 3box-shadow 흐림: 흐림 반지름의 절반을 표준편차로 하는 가우스 흐림에 가깝게(픽셀마다 5% 안)
• 02W3C — CSS Text Decoration Module Level 3, text-shadow값은 box-shadow처럼 해석, 첫 그림자가 맨 위, 그림자는 배치·스크롤 영역에 영향 없음
• 03WHATWG — HTML Living Standard, 캔버스 그림자σ = shadowBlur의 절반인 2차원 가우스 흐림
• 04W3C — WCAG 2.2, 2.3.1 세 번 깜빡임 또는 기준 이하1초에 세 번 넘게 깜빡이지 않음, 일반 섬광 정의(최대 상대 휘도의 10%, 0.80), 341×256 픽셀 어림
• 05MDN — prefers-reduced-motion꼭 필요하지 않은 움직임을 줄이는 기기 설정을 켰는지 알아내는 미디어 기능
• 06Britannica — Neon lamp순수 네온은 붉은 주황빛, 다른 기체·조합은 다른 색, 수은 증기는 푸른빛
• 07Google Fonts — Tilt NeonAndy Clymer, 상점 간판 글자에서 출발한 글꼴, OFL
• 08Google Fonts — NeonderthawRobert Leuschke, 네온을 흉내 낸 필기체, OFL
• 09SIL — OFL FAQ1.1 로고·포스터·간판 등 디자인 작업에 추가 허락 없이 사용

자주 묻는 질문

함께 쓰는 도구