저는 주로 피그마를 사용해 개발-디자인 간 협업을 진행해 오다가, 최근에는 Adobe XD 또한 사용하고 있는데요. XD에서 line-height, 즉 행간의 구현이 CSS의 그것과는 다르다는 사실을 발견하게 되어 기록을 남겨 봅니다.
개발자가 디자이너에게 시안을 넘겨받으면, 가장 큰 목표는 그 시안을 있는 그대로 웹 페이지 상에 구현하는 일일 것입니다. (얼마나 힘들게 만들었을텐데...) 이는 픽셀 단위의 정교함을 요구하는 작업인데, 그렇기에 빠른 작업을 위해서는 넘겨받은 시안의 값들을 그대로 CSS로 복사-붙여넣기로 사용할 수 있어야합니다.
다만 이 글에서 다룰 현상 때문에 텍스트의 행간이 지정된 경우 단순 복사-붙여넣기의 워크플로우로 진행할 경우 실제 UI와 시안 사이의 괴리가 굉장히 커지기에 주의하셔야겠습니다.
위 사진처럼 20픽셀의 font-size와 24픽셀의 line-height를 가진 텍스트를 XD에서 표현해보았습니다. 여기서 행간을 36픽셀로 증가시켜 보겠습니다.
이렇게 행간을 늘렸지만 텍스트가 차지하는 전체 height는 변함이 없습니다. 이것이 CSS의 구현과 다른 동작입니다. 실제 HTML과 CSS 화면을 보겠습니다.
어떤 p 태그에 위처럼 인라인 속성을 주겠습니다.
전체 높이는 행간의 값과 동일하게 32픽셀을 차지하게 되는군요. 또한 직접 측정해보면 폰트가 차지하는 영역의 아래 위로 균일하게 행간이 분포되어 있습니다.
보시다시피 XD 시안의 넘겨받은 line-height값을 그대로 CSS에 입력하게 되면 불일치가 발생하게 됩니다. 직접 경험한 바 UI에서 굉장히 큰 차이를 보일 수 있습니다.
여러 줄을 실험해보면 XD에서는 여러 줄을 입력하는 경우에만 행간이 입력한 값대로 움직이게 됩니다. 또한 아래 위로 균일하던 CSS의 line-height와는 다르게 행과 행 사이에만 적용되는 것으로 보입니다.
XD 커뮤니티 페이지에서도 이런 행간 문제를 성토하는 글이 있습니다만, 어도비 측에서는 이게 큰 문제라고 생각하지는 않는 것 같습니다. 해당 페이지 코멘트에 의하면 피그마의 경우 정확히 CSS 구현과 일치하게 렌더링 된다고 해서 실험해 봤는데, 사실이었습니다.
웹 개발자로서 XD가 제공하는 경험이 썩 유쾌하지는 않다는 사실을 인정해야 할 것 같고 (개발자용 내보내기 페이지 또한 상당히 버그가 많아요), 빠른 시일 내에 고쳐지기를 바랍니다.
'개발' 카테고리의 다른 글
| 첫 제품을 배포하고 배운 것들 (0) | 2023.04.24 |
|---|---|
| 내가 2022년에 배운 것들 (0) | 2023.02.12 |
| Stack Overflow와 지식 공유의 즐거움에 대한 이야기 (0) | 2022.05.25 |
| '멘탈 모델'에 대한 짧은 생각 (0) | 2022.04.21 |
| 2. AWS EC2에 Django 배포하며 생긴 문제들 (PostgreSQL) (2) | 2021.03.28 |
댓글