안녕하세요, 기계가 계산한 수학적 정렬보다 내 눈에 완벽해 보이는 ‘시각적 정렬’을 더 믿는 디자인 엔지니어 올리브입니다. 🌿
모든 프로젝트의 시작은 피그마(Figma)에서 이루어집니다. 0.1px의 그리드를 켜고, 텍스트와 박스의 간격을 한 치의 오차도 없이 정렬하죠. 피그마 화면 속 제 세이지 그린 톤 블로그는 그야말로 결벽증에 가까운 완벽한 비율을 자랑했습니다.
하지만 이 완벽한 시안의 CSS 수치(font-size, line-height, padding)를 그대로 복사해서 Next.js 코드에 붙여넣고 브라우저를 띄우는 순간, 디자인 엔지니어의 눈에는 ‘절대 용납할 수 없는 재앙’이 보이기 시작합니다.
1. “왜 버튼 안의 글씨가 1px 아래로 쳐져 있지?” 📉
가장 심각한 곳은 버튼(Button)과 뱃지(Badge) 컴포넌트였습니다.
피그마에서는 높이 40px짜리 버튼 안에 텍스트를 정중앙(Center)에 맞췄습니다. 코드로도 분명 display: flex, align-items: center를 주었습니다. 그런데 크롬 브라우저로 렌더링된 버튼을 보니, 텍스트가 묘하게 1~2px 정도 아래로 쳐져 있는 것입니다.
일반 개발자들에게 이 현상을 말하면 십중팔구 이렇게 답합니다. “에이, 그냥 1px 차이인데 누가 알아요? 코드상으로는 완벽하게 중앙 정렬 맞아요.”
맞습니다. 수학적으로는 중앙이 맞습니다. 하지만 인간의 눈은 수학을 보지 않고 비율을 봅니다. 1px이 쳐진 버튼은 제 디자인 시스템 전체의 완성도를 깎아내리는 ‘시끄러운 소음’과 같았습니다.
2. 원인 규명: 폰트 베이스라인(Baseline)의 장난 🕵️♂️
원인은 브라우저의 폰트 렌더링 방식에 있었습니다. 피그마는 텍스트 박스의 높이를 기준으로 정렬하지만, 브라우저는 폰트 파일 자체에 내장된 고유의 메트릭스(Ascender, Descender, Baseline)를 기준으로 공간을 차지합니다.
특히 영문과 한글이 섞여 있을 때, 브라우저 엔진은 한글의 폰트 높이를 미세하게 다르게 계산해버립니다. 피그마의 Dev Mode가 알려주는 CSS를 생각 없이 그대로 복사+붙여넣기 했다가는, 평생 이 1px의 어긋남을 고칠 수 없는 구조적인 함정이었죠.
3. 해결책: 수학을 버리고 ‘시각적 중앙’을 코딩하다 👁️
저는 피그마의 수치를 맹신하는 것을 멈췄습니다. 대신, 컴포넌트 단위로 브라우저의 렌더링 특성을 역이용하는 ‘보정 코드’를 심기 시작했습니다.
- 글로벌 폰트 세팅: 한글과 영문 베이스라인 차이를 최소화하기 위해
next/font를 부를 때부터 행간(line-height)의 기준점을rem단위로 철저하게 통제했습니다. - 시각적 보정 (Optical Alignment): 버튼 컴포넌트의 경우,
align-items: center에만 의존하지 않고 텍스트 래퍼에transform: translateY(-1px)을 주거나, 위쪽padding을 1px 더 깎아내는 하드코딩을 불사했습니다.
수학적인 정중앙이 아니라, ‘눈으로 봤을 때 완벽한 정중앙’을 만들기 위해 코드를 비트는 작업. 이것이야말로 픽셀을 다루는 엔지니어의 진짜 몫이라고 생각했기 때문입니다.
4. 마치며: 디자인 엔지니어의 진짜 무기 🛠️
이 지독한 1px 보정 작업이 끝난 후, 브라우저에 띄워진 제 블로그는 마침내 피그마 시안과 100% 동일한, 아니 브라우저의 생동감이 더해져 120% 더 완벽한 모습을 갖추게 되었습니다.
디자인 툴의 시안은 그저 ‘계획’일 뿐입니다. 그 계획이 브라우저라는 야생에서 1px의 흔들림도 없이 똑같이 구현되도록 만드는 힘. 그것이 바로 디자인과 프론트엔드, 두 세계를 모두 이해하는 디자인 엔지니어만이 가질 수 있는 진짜 무기입니다.
올리브의 한 줄 요약: “피그마의 CSS를 맹신하지 마세요. 최종 렌더링의 완성도는 당신의 눈과 보정 코드에서 나옵니다.” 🌿