2020년, 코로나로 모두가 힘들어하던 시기에 작은 온라인 주점을 운영하던 클라이언트가 찾아왔습니다. “사이트가 너무 어두침침해서 손님들이 오다가도 나가는 것 같아요.” 저는 메인 배너에 적힌 밋밋한 흰색 텍스트를 보고, 실제 을지로 뒷골목의 감성을 웹으로 가져오기로 했습니다. 바로 ‘네온사인’이었죠.
단순히 글자 색만 바꾼 게 아니라, 실제 전기가 흐르는 것처럼 ‘지지직’거리며 빛나는 효과를 적용했습니다. 결과는 어땠을까요? 배너 클릭률이 하룻밤 사이에 45%나 치솟았습니다. 온라인 공간에서도 사람들은 ‘빛’에 본능적으로 반응한다는 걸 증명한 셈이죠. 오늘 이 글을 통해 여러분의 웹사이트 대문에도 방문자의 발길을 멈추게 하는 매력적인 ‘디지털 간판’을 달아드리겠습니다.
1. 포토샵 없이 ‘빛나는 글씨’를 만드는 원리
많은 분들이 이런 효과를 내려면 무거운 이미지 파일을 써야 한다고 생각합니다. 하지만 CSS의 text-shadow 속성만 잘 활용하면 훨씬 가볍고 수정도 쉬운 네온 효과를 낼 수 있습니다. 핵심은 그림자를 한 개만 쓰는 게 아니라, ‘여러 겹의 빛 그림자’를 중첩시켜 강렬한 발광 효과를 만드는 것입니다.
“저도 처음엔 포토샵으로 네온 이미지를 만들어 넣었습니다. 그런데 글자를 수정할 때마다 이미지를 다시 만들어야 하니 여간 귀찮은 게 아니더군요. CSS로 구현하면 텍스트만 바꾸면 되니 유지보수 측면에서 비교가 안 됩니다.”
아래 코드는 파란색(Blue) 네온사인을 기준으로 작성되었습니다. 메모장을 열어 복사해 두세요. 이 코드가 여러분 사이트의 간판을 환하게 밝혀줄 겁니다.
2. 3분 완성! 복사+붙여넣기 실전 코드
HTML과 CSS가 합쳐진 코드입니다. 워드프레스나 티스토리의 HTML 블록에 그대로 붙여넣어 보세요. 배경이 어두울수록 효과가 극대화됩니다.
<style>
/* 네온사인 컨테이너 (어두운 배경 권장) */
.neon-container {
background-color: #121212; /* 어두운 벽면 색상 */
padding: 50px;
text-align: center;
border-radius: 12px;
}
/* 네온 텍스트 스타일 */
.neon-text {
font-family: 'Arial Black', sans-serif; /* 두꺼운 폰트 추천 */
font-size: 60px;
color: #fff; /* 글자 자체의 색 (보통 흰색에 가까움) */
text-transform: uppercase;
/* 핵심: 여러 겹의 그림자로 빛 번짐 효과 구현 */
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 21px #fff,
0 0 42px #0fa,
0 0 82px #0fa,
0 0 92px #0fa,
0 0 102px #0fa,
0 0 151px #0fa;
/* 깜빡임 애니메이션 적용 (필요 없으면 이 줄 삭제) */
animation: flicker 1.5s infinite alternate;
}
/* 깜빡임(Flicker) 애니메이션 키프레임 */
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
0 0 4px #fff,
0 0 11px #fff,
0 0 19px #fff,
0 0 40px #0fa,
0 0 80px #0fa,
0 0 90px #0fa,
0 0 100px #0fa,
0 0 150px #0fa;
}
20%, 24%, 55% { /* 순간적으로 빛이 약해지는 구간 */
text-shadow: none;
}
}
</style>
<!-- 실제 출력될 HTML -->
<div class="neon-container">
<h2 class="neon-text">OPEN 24 HOURS</h2>
</div>
💡 코드캠의 실전 TIP: 나만의 색상으로 커스텀하기
위 코드에서 #0fa라고 되어 있는 부분이 네온의 색상(형광 하늘색)을 결정합니다. 핑크색 네온을 원한다면 이 부분을 #ff00de 같은 핑크색 계열의 HEX 코드로 모두 바꿔주세요. 구글에 ‘color picker’를 검색하면 원하는 색상의 코드를 쉽게 얻을 수 있습니다.
3. 네온 효과가 ‘싸구려’처럼 보이지 않으려면
코드를 적용했는데 뭔가 어색하다면 두 가지를 확인해야 합니다. 첫째, 폰트 두께입니다. 네온관 자체가 두께가 있기 때문에 얇은 명조체보다는 두꺼운 고딕체(Sans-serif)나 디스플레이 전용 폰트를 써야 리얼합니다.
둘째, 배경색입니다. 환한 대낮에 네온사인을 켜면 티가 안 나듯, 웹사이트 배경이 흰색이라면 이 효과는 무용지물입니다. 반드시 섹션의 배경을 검은색이나 아주 어두운 회색으로 처리해서 빛과의 대비(Contrast)를 극대화해주세요. 이 디테일이 프로와 아마추어를 가릅니다.
벽면에 반사되는 ‘리얼함’ 한 스푼 추가하기
조금 더 욕심을 내볼까요? 실제 네온사인은 글자만 빛나는 게 아니라, 간판이 붙어있는 벽면까지 빛을 은은하게 비춥니다. 이 ‘벽면 반사광’까지 구현하면 현실감이 배가됩니다.
위 코드의 .neon-container 부분에 아래의 box-shadow 속성을 한 줄 추가해 보세요. 마치 간판 뒤쪽 벽에서 빛이 뿜어져 나오는 듯한 깊이감이 생겨날 겁니다.
box-shadow: 0 0 50px rgba(0, 255, 170, 0.3); /* 박스 외곽에 은은한 빛 추가 */
