피그마, px 그리고 단위
피그마는 px이라는 단위를 사용한다.
피그마는 px이라는 단위를 사용한다.
하나의 사각형을 그리고자 할때 넓이와 높이에 해당하는 각 길이 값을 입력한다.
피그마에서는 신경 쓸 일이 없지만 우리가 만든 디자인을 바탕으로 개발을 하면 이 부분에 대한 고민을 해야 한다.
우선 길이를 지정하는 방법은 크게 두 가지로 나눌 수 있다.
절대 길이와 상대 길이
절대 길이 값을 정의 하는 단위는 cm, mm, in, px, pt 등이 있다.
상대 길이 값을 정의하는 단위는 em, rem, vw, vh, % 등이 있다.
이중 px, rem에 대해서 알아보자
( 개발할 때 가장 많이 볼수 있는 단위이다. )
구글이 만든 머터리얼 시스템의 버튼을 분해한 모습이다.
코드로 표현된 부분은 실제 머터리얼 버튼이 브라우저에서 렌더링된 데이터를 가져왔다.
파란색 버튼은 코드 데이터를 적용해서 피그마에 그려 본거다.
코드 리스트를 보면 단위에 대해 알아본 부분중 px과 rem이 보인다.
rem으로 정의된 font-size와 letter-spacing은 피그마에서 14px과 0.4px에 해당하는 값이 매칭되는 것을 확인할 수 있다.
폰트 사이즈를 rem이란 단위로 사용한 이유를 알아보자.
위 이미지에서 pc, pad 그리고 mobile에 따른 폰트 크기를 비교한 것이다.
각 폰트의 크기를 px로 고정한다면 화면이 작아 질수록 폰트 크기는 상대적으로 커 보일 것이다.
화면마다 폰트 크기가 따로 존재해야 이런 부분을 제거할 수 있다.
이런 화면이 몇 개 안되면 디자인 또는 개발에 부담을 적게 준다.
화면이 많아질수록 디자인과 개발에 부담이 커질 것이다.
rem단위를 쓴다면 디바이스별로 기본값을 설정하여 이런 문제를 해결할 수 있다.
이런 이유로 머터리얼 디자인 시스템에서도 폰트 사이즈 단위를 rem으로 사용한 것이라 추측한다.
px과 rem 대해 좋은 글이 있으니 참고하길 바란다.
https://css-tricks.com/rems-ems/
우리가 기억해야 할 것은 px은 절대 단위이고 rem은 상대 단위라는 사실이다.
우리가 사용하는 디자인툴은 절대 단위를 주로 사용 한다.
한가지 디바이스에 해당하는 디자인이 필요하다면 별 신경 안 써도 된다.
하지만, 여러가지 디바이스를 고려한다면 상대 단위가 쓰여질 부분에 대해 고민해야 한다.
