무지개색 글씨, 기억나세요?
90년대 후반에 컴퓨터를 써봤다면 MS 워드나 파워포인트의 워드아트(WordArt)가 기억날 거예요. 버튼 하나만 누르면 글자가 무지개색으로 물들고, 3D로 튀어나오고, 물결처럼 휘어지던 그 기능이요. 학교 과제 표지부터 동네 학원 전단지, 가족 행사 현수막까지 온 세상이 워드아트로 덮여 있던 시절이 있었거든요. 지금 보면 정말 촌스러운데, 이제는 그 촌스러움이 하나의 미학으로 자리 잡았어요.
TitleArt는 바로 그 감성을 브라우저에서 되살려주는 웹 도구예요. 텍스트를 입력하고 스타일을 고르면 1997년풍 타이틀이 금방 만들어져요. 설치할 필요도 없이 사이트에 들어가서 바로 쓰면 돼요.
"그냥 장난감 아니야?" 싶을 수도 있는데요, 개발자 눈으로 보면 꽤 재미있는 질문을 던지는 프로젝트예요. 그 시절 데스크톱 앱이 전용 그래픽 엔진으로 그리던 효과를, 지금은 브라우저 표준 기술만으로 어디까지 따라 할 수 있을까? 오늘은 이 관점으로 이야기해 볼게요.
이런 효과는 웹에서 어떻게 만들까
TitleArt의 내부 구현을 소스 레벨까지 확인한 건 아니라서, 여기서는 이런 효과를 웹에서 만들 때 흔히 쓰는 기법을 소개할게요. 사이트를 열고 개발자도구(F12)로 직접 뜯어보면서 비교해 보면 훨씬 재밌을 거예요.
1. 그라데이션 글자: 워드아트의 상징인 무지개 글씨는 CSS 트릭 하나로 만들 수 있어요. 배경에 그라데이션을 깔아두고, 그 배경을 글자 모양대로만 오려내는 거예요. 쿠키 틀로 반죽을 찍어내는 모습을 떠올리면 쉬워요.
.rainbow {
background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
2. 3D로 튀어나온 글자: text-shadow를 여러 겹 쌓으면 돼요. 그림자를 1px씩 어긋나게 열 겹 정도 겹치면 글자가 입체적으로 튀어나온 것처럼 보이거든요. 진짜 3D 렌더링이 아니라 착시지만, 워드아트 특유의 두꺼운 옆면을 표현하기엔 충분해요.
.extrude {
text-shadow: 1px 1px 0 #333, 2px 2px 0 #333, 3px 3px 0 #333,
4px 4px 0 #333, 5px 5px 0 #333;
}
3. 기울이고 원근감 주기: transform: perspective() rotateX()나 skew()를 쓰면 글자가 멀어지는 것처럼, 또는 비스듬히 누운 것처럼 보이게 만들 수 있어요.
4. 아치형, 물결형 글자: 이건 CSS만으로는 조금 까다로워요. 보통 SVG의 <textPath>로 곡선 경로를 따라 글자를 늘어놓거나, 글자를 하나씩 span으로 쪼갠 뒤 각각 회전하고 옮기는 방법을 써요. 깃발처럼 펄럭이는 진짜 변형이 필요하면 Canvas에서 픽셀 단위로 비트는 게 현실적이고요.
이렇게 만든 결과물을 이미지 파일로 저장하려면 결국 Canvas에 다시 그려서 PNG로 뽑거나, SVG를 래스터화(픽셀 이미지로 바꾸는 작업)해야 해요. 이런 도구를 만들어 보면 브라우저에서는 화면에 보여주는 일과 파일로 내보내는 일이 생각보다 별개의 문제라는 걸 체감하게 돼요.
레트로 웹 감성은 하나의 흐름이에요
TitleArt 같은 프로젝트가 갑자기 툭 튀어나온 건 아니에요. 예전에도 CSS만으로 오피스 워드아트 갤러리를 재현한 오픈소스 프로젝트가 있었고, 윈도우 98 UI를 CSS로 재현한 98.css 같은 라이브러리도 꾸준히 쓰이고 있어요. 개인 홈페이지를 90년대 지오시티즈(GeoCities) 스타일로 꾸미는 '인디 웹' 문화도 있고요.
이런 흐름의 뒤에는 요즘 웹사이트가 다 비슷해 보인다는 피로감이 깔려 있어요. 미니멀한 디자인 시스템과 고만고만한 랜딩 페이지 사이에서, 일부러 과하고 촌스럽게 만드는 게 오히려 개성이 된 거죠. 기술적으로도 의미가 있어요. 예전에는 플래시나 이미지로만 낼 수 있던 효과를 이제 순수 CSS/SVG로 만들 수 있으니 텍스트가 텍스트로 남아요. 검색 엔진이 읽을 수 있고, 복사도 되고, 스크린 리더도 읽을 수 있다는 뜻이에요.
한국 개발자에게 주는 시사점
실무에서 "워드아트 기능 넣어주세요"라는 요구사항을 받을 일은 아마 없겠지만, 이런 토이 프로젝트는 CSS 그래픽 기법을 공부하기에 아주 좋은 교재예요. background-clip, 여러 겹의 text-shadow, transform, SVG textPath는 이벤트 페이지 타이틀, 게임 UI, 밈 생성기 같은 곳에서 실제로 쓰이는 기술이거든요.
한글 폰트로 해 보면 또 다른 재미가 있어요. 한글은 글자 하나하나가 네모난 블록이라 아치형으로 늘어놓으면 영문과 느낌이 꽤 달라요. 또 한글 웹폰트는 용량이 커서, Canvas로 내보낼 때 폰트를 다 받기도 전에 그려버리는 로딩 타이밍 문제를 자주 만나요. 사이드 프로젝트로 '한글 워드아트 생성기'를 만들어 보면 배울 게 꽤 많을 거예요.
마무리
한 줄 정리: 90년대 데스크톱 앱이 하던 그래픽 효과를 이제는 브라우저 표준 기술만으로 재현할 수 있고, TitleArt는 그걸 가장 재밌게 보여주는 사례예요.
여러분이 기억하는 '최악이자 최고의' 워드아트 스타일은 뭐였나요? 그리고 이런 레트로 디자인이 실제 서비스에서도 통할 수 있다고 보시나요?
🔗 출처: Hacker News