왜 실제 웹이 피그마와 달랐을까? line height vs paragraph spacing

디자이너분들과 오랫동안 겪었던 이슈인데 이번에 해결했고 공유하면 좋을 거 같아 적어본다

 

문제

우리 회사에서는 지속적으로 있었던 문제가 있었다.

A : "B 님 피그마랑 웹이랑 마진이 안맞아요"

B : "수치상으로는 정확히 맞는데 보기에는 안맞나요?"

A : "피그마 미러로 캡처해서 보면 1~2px씩 어긋나 있어요"

위 대화가 반복되었다.

 

분명 문제가 있다는 걸 알고 있었지만, 개발해야 할 부분은 여전히 많고, 데드라인은 점점 다가오고 있었다.

그렇다고 당장 해결할 수도 없었고, 결국 알면서도 문제를 안고 가야 하는 상황이 괴로웠다.

일단 수치를 믿지 말고 그냥 눈으로 보기에 똑같이 맞추어야 되나? 생각까지 해봤다

 

그러다 회사의 큰 프로젝트가 어느 정도 마무리된 후, 본격적으로 이슈를 제기했다.
다행히 디자이너분도 같은 문제를 인식하고 있었고, 이에 대한 스터디를 진행했다.

 

 

문제의 원인: Line Height & Paragraph Spacing

 

결론부터 말하자면, line height와 paragraph spacing의 차이 때문이었다

지금까지 피그마에선 paragraph spacing으로 디자인을 하고 있었고

개발에선 line height값을 지정해서 개발을 하고 있었다

 

그렇다면 이 두 개념은 어떻게 다르고, 왜 문제를 일으킨 걸까? 

 

아래 두 개의 텍스트를 보면 다르게 보이는지 한번 물어보고 싶다

 

보기에는 똑같고, 폰트랑 크기도 같고, 이렇게 보면 다른점을 느낄 수 없다

그런데 영역을 클릭해서 보면

 

 

높이가 다르게 지정되어 있음을 알 수 있다.

첫 번째는 line height 속성을 지정해 두어 한 줄의 높이를 지정해 둔 폰트이고,

두 번째는 paragraph space 속성을 지정해 두어 문단과 문단 사이의 높이를 지정해 둔 폰트이다

첫 번째 폰트는 두 번째 폰트에 비해 텍스트를 제외한 공간의 영역이 두 배 더 많다.

 

 

왜 둘이 다를까?

이 문제를 해결하기 위해 여러 가지 테스트를 해봤고, 결국 paragraph spacing을 사용하지 않기로 결론을 내렸다.

이유는 두 가지였다

 

첫번째로 , paragraph spacing과 line height는 아예 다른 개념이다.

 

디자인 툴에서는 paragraph spacing을 사용하면 단락 사이 간격이 일정하게 유지되지만, 개발 환경에서는 paragraph spacing을 CSS에서 제대로 반영하기가 어렵다.

피그마 - line height 설명

 

피그마 - paragraph space 설명

 

paragraph space는 말 그대로 paragraph와 paragraph, 다시 말해 <p>와 <p> 사이 간격을,

line height는 paragraph 내의 text와text 사이 간격을 줄 때 사용된다.

이렇게 속성이 용도와 다르게 사용되다 보니 사이드 이펙트가 발생해도 이상하지 않았던 것이다.

 

 

두 번째는 개발자와 협업 측면에서의 용이함이다.

 

두번째 이유가 가장 컸는데

디자인할 때는 paragraph spacing과 line height의 차이를 쉽게 인지하지 못할 수도 있다.
위에서 설명했듯이, 눈으로 보면 두 방식이 비슷해 보이기 때문이다.

 

하지만 디자인 툴과 개발 화면을 최대한 동일하게 구현해야 하는 프론트엔드 개발자로써는 완전히 다르다

css속성에 line-height는 100%으로 나옴

이것만으로는 행간의 높이를 알 수 있는 방법이 없다.

이 피그마 Typography 속성에 맞춰 css를 짜보면

 

 

이렇게 행간이 맞지 않는 텍스트가 만들어진다
개발단계에서 이 폰트에 맞추기 위해 피그마와 동일한 행높이를 가지도록 line-height 속성을 넣어 개발을 했었고,
텍스트와 텍스트의 간격은 맞추었지만 그 외의 영역이 피그마와 맞지 않았기 때문에 넓어 보일 수밖에 없었던 것이다

 

 

이후

이러한 이유 때문에 지금까지 만들어온 디자인 시스템과 피그마 파일을 대거 수정하고 있다

피그마 작업이 끝난 이후에는 개발 쪽도 그에 맞춰 수정이 들어갈 예정이다.

 

 

솔직히 몸고생은 하겠지만, 문제가 더 곪기 전에 바로잡을 수 있어서 다행이었다.

이러한 시행착오를 겪었기 때문에 좀 더 성장했다고 생각하고 한편으로는 반성도 많이 하고있다

개발은 감으로 하는게 아닌 정확한 수치를 맞추어 해야한다는 걸 다시 한번 깨닳았다.

수치가 맞는데 결과물이 다르게 나오는것은 다른곳이 원인이 아닐까 의심해야한다

이 글을 읽는 디자이너와 프론트엔드 개발자는 미리 알아두어 같은 이슈를 겪지 않았으면 좋겠다