안녕하세요. 디자인팀 전희주입니다. 앞으로 비트가 탄생하는 동안의 디자인 이야기를 들려드릴 예정이에요.
오늘은 Vertical trim 이슈에 대응한 이야기를 들려드리겠습니다. (이야기 보따리가 많이 준비되어 있으니 기대해 주세요.)
스타일과 컴포넌트를 제대로 사용했음에도 불구하고 디자인 시안과 개발단에서 구현한 디자인이 달랐어요. (삐용-삐용- 비상!!)
텍스트들의 행간이 디자인 시안보다 넓게 개발되었는데, 폰트 스타일을 지정하는 과정에서 Vertical trim 옵션을 standard가 아닌 cap height to baseline으로 지정한 것이 문제였습니다.
cap height to baseline 속성은 다음과 같은 이유로 존재합니다.
글자는 고유하게 가지는 공간이 있는데요, 텍스트 고유의 높이 말고도 위아래로 추가적인 여백을 가지고 있고, 이는 언어마다, 글자의 생김새마다 다릅니다. 그렇기 때문에 똑같은 행간을 주더라도 비교적 넓은 공간을 가진 텍스트는 비교적 행간이 넓어 보이는 등의 문제가 있습니다. 이러한 차이를 줄이기 위해서 폰트의 고유 높이(baseline to cap - height)만 폰트의 높이로 지정하는 기능이 존재합니다. (즉, 더 정확하게 디자인을 다듬어 내기 위해서 텍스트가 고유하게 가지는 글자의 여백을 없애는 속성이죠.)
디자인팀에서는 더 정확하게 행간 값을 만지고 폰트 생김새 별 행간의 오차를 줄이기 위해 해당 속성을 설정해서 스타일을 배포했습니다. 하지만 문제는 개발단에서 해당 속성을 구현해낼 수 없다는 게 문제였죠.! (뚜둥..)
알고 보니, 피그마 데브 모드에서는 브라우저가 해당 속성을 반영할 수 있다고 가정하고 표기한다고 합니다. 그래서 디자이너도 개발자도 수치를 통해 직접 개발되기 전까지는 이상함을 눈치 못 챘던 것이었죠. 하지만 실제 브라우저에서는 해당 속성을 지원하지 않았습니다.
불필요한 여백을 없애는 기능을 사용해 디자인했는데, 개발에선 반영이 안되니 그 여백이 그대로 포함되어 디자인보다 행간이 넓어 보였던 것이죠.!
알고 보니, 아직까지 Css에서 vertical trim을 적용할 수 있게 된 지 얼마 되지 않았고, 해당 속성을 반영할 수 있는 브라우저가 극히 드물기 때문에 실무에서는 적극적으로 사용하지 않는다고 합니다. 아래 링크에서는 vertical trim 등 다양한 기능 등이 특정 브라우저에 적용이 되는지 확인할 수 있는 사이트입니다. vertical trim은 아직까지 거의 지원하지 않는 것을 알 수 있죠.
https://caniuse.com/?search=text%20trim
"text trim" | Can I use... Support tables for HTML5, CSS3, etc
ECMAScript 5 Full support for the ECMAScript 5 specification. Features include `Function.prototype.bind`, Array methods like `indexOf`, `forEach`, `map` & `filter`, Object methods like `defineProperty`, `create` & `keys`, the `trim` method on Strings and m
caniuse.com
결국 디자인 측에서 스타일을 standard로 변경하고, 이에 따라 생기는 컴포넌트의 변경사항을 고쳐내는 게 가장 효율적인 방법이라는 결론을 내린 후 텍스트 스타일과, 스타일이 적용된 모든 컴포넌트를 변경했습니다.
cap height to baseline에서 standard로 속성을 변경하니 디자인이 요래 됐습니다~!
ㅠㅠ 기준선 차이가 이렇게 크다니...
vertical trim을 사용하려면 text box로 텍스트들을 묶어내면 된다는 이야기도 있지만 이 또한 문제가 생길 확률이 있어서 아직까지는 사용하지 않는 게 나을 거 같네요. 이번 이슈를 통해 텍스트보다 텍스트 박스가 작으면 개발을 할 수 없음을 알게 되었습니다.
그럼 아디오스