텍스트 효과 쌓을수록 글자가 뭉개지는 진짜 이유

어두운 배경 썸네일에 흰 텍스트를 올리는 경우라면, 이미 출발이 좋은 거예요.

배경과 글자 사이 명도 차가 충분한 이 조합은 원래 가독성이 높습니다. 흰 글자가 어두운 배경 위에 그냥 있는 상태가 실제로 가장 선명한 순간이에요. 그런데 바로 이 지점에서 "뭔가 더 있어 보여야 할 것 같아서" 손을 대기 시작하고, 거기서부터 일이 꼬입니다.

stroke → drop shadow → outer glow 순서로 하나씩 얹어가면서 어느 지점에서 뭔가 잘못되는지 직접 따라가 볼게요.

stroke를 추가하는 순간 글자 속이 좁아진다

외곽선을 추가하면 선이 글자 획 바깥으로 나가는 게 아니에요. 안쪽으로 파고들어요.

피그마나 포토샵에서 획 정렬을 center나 inside로 설정하면, 선이 두꺼워질수록 글자 획 내부를 잠식합니다. 포토샵은 기본값이 바깥쪽(outside)이라 기본 설정 그대로 쓰면 이 문제를 피할 수 있어요. 두꺼운 고딕 계열 폰트에 어두운 계열 stroke를 주면 'ㅎ'이나 'ㅁ' 자소 내부 공간이 선으로 채워지면서 거의 사라지는 걸 볼 수 있어요. 흰 획과 stroke가 뭉쳐서 글자 전체가 두터운 덩어리처럼 보이고, 자소 구분이 안 되는 letterform-collapse 상태가 됩니다.

stroke의 목적이 "글자를 배경에서 분리"하는 건데, 정작 글자 내부를 망가뜨리는 거예요.

피그마나 일러스트레이터라면 획 정렬을 '바깥쪽(outside)'으로 바꿔서 글자 내부는 건드리지 않을 수 있어요. 캔바처럼 그 설정이 없는 툴에서는 두께를 최대한 얇게 유지하는 게 현실적인 방법입니다.

drop shadow를 얹으면 blur 반경이 새로운 문제가 된다

글자가 뭉쳐 보이니 입체감을 주려고 drop shadow를 추가합니다. 여기서 blur 반경을 크게 주면 그림자가 번지면서 인접한 글자나 획에 걸리기 시작해요.

글자 간격이 좁을 때 번진 그림자가 옆 글자 그림자와 겹치면, 공백이 어둑어둑하게 메워집니다. 눈은 획 사이의 밝은 여백으로 글자 경계를 읽는데, 그 여백이 흐릿하게 채워지면 글자 수를 인식하는 속도가 뚝 떨어지거든요. 여러 글자의 빛번짐이 합쳐져서 텍스트 전체가 하나의 덩어리로 읽히는 halo-merge 현상이에요.

offset(그림자 위치)이 너무 클 때도 다른 문제가 생깁니다. 글자 복사본이 오른쪽 아래에 뚜렷하게 나타나면 눈이 원본 글자와 그림자 중 어느 쪽에 초점을 잡아야 할지 헷갈려요. 얇은 획 폰트일수록 그림자가 원본만큼 선명해 보여서 이 혼란이 더 심해지더라고요.

그림자는 blur를 낮게, offset도 작게 두는 편이 안전해요. 입체감보다는 배경과의 미묘한 분리감 정도가 그림자의 진짜 역할입니다.

outer glow는 배경이 밝아질 때 역효과를 낸다

세 번째로 outer glow를 추가합니다. 이 효과는 배경 밝기에 생각보다 많이 의존해요.

outer glow의 기본 blend mode는 Screen이거든요. Screen은 두 레이어의 밝기를 더하는 방식이어서 배경이 어두울수록 효과가 강하게 보이고, 배경이 밝아질수록 효과가 사라집니다. 어두운 배경 위에서 흰 텍스트에 흰 glow를 주면 글자 주변에 빛이 퍼지면서 시선을 글자로 모아주는 역할을 해요.

그런데 배경이 밝아지는 순간 흰 glow는 배경에 녹아들고, 오히려 글자 주변에 흐릿한 테가 생겨 글자 경계가 뭉개집니다. 대비가 의도와 정반대로 뒤집히는 거예요. 어두운 썸네일 작업하다가 배경 이미지만 교체하고 glow 설정을 그대로 두면 정확히 이 상황이 됩니다.

세 레이어가 쌓이면, 걷어낼 때도 순서가 있다

여기까지 오면 상태가 이렇습니다. stroke는 자소 내부를 좁히고, shadow blur는 글자 간격을 흐리고, glow는 글자 경계를 번지게 만들어요. 각각은 그럭저럭 버틸 수 있는 수준이지만 세 가지가 겹치면 텍스트의 형태 정보가 층층이 덮입니다.

눈이 글자를 읽을 때는 획의 시작과 끝, 자소 사이 공백, 글자와 글자 사이 여백을 단서로 씁니다. 이 단서들이 효과 레이어에 뭉개지면 읽는 속도가 느려지고, 작은 화면이나 빠르게 스캔하는 상황에서는 아예 읽기를 포기하게 만들어요.

원인이 세 겹이라 걷어낼 때도 순서가 필요합니다.

outer glow를 먼저 끕니다. 배경이 밝아졌거나 효과가 눈에 잘 안 보이면 없는 게 낫거든요. 없애도 글자 모양이 달라지지 않아서 가장 부담이 적습니다.

다음으로 shadow의 blur를 줄입니다. 완전히 없애기보다는 blur를 낮추고 offset을 작게 당기는 쪽이 낫더라고요. 그림자를 통째로 제거하면 평면적으로 보일 수 있어서, 존재는 유지하되 번짐을 최소화하는 게 목표입니다.

마지막으로 stroke 두께를 점검해요. 획 정렬을 바깥쪽으로 바꿀 수 있는 툴이라면 바꾸고, 없다면 두께를 줄입니다. stroke의 목적이 배경과의 분리라면, 글자 색과 배경 색의 명도 차가 이미 충분한지부터 확인하는 게 순서예요. 명도 차가 충분하면 stroke 없이도 글자가 선명하게 읽히거든요.

효과를 쌓아도 나아지지 않을 때는 효과 세팅 문제가 아닌 경우가 많아요. 폰트의 굵기나 분위기를 바꾸는 게 효과를 십여 개 얹는 것보다 훨씬 빠르게 가독성을 살려줍니다. 폰트비에서 AI 폰트 찾기를 쓰면 분위기를 말로 설명해서 어울리는 폰트를 골라볼 수 있어요.