피그마 프레임, 그리고 스트로크
왜? 스트로크값은 각각 다른가?
왜? 스트로크값은 각각 다른가?
스케치에서 Rectangle에 스트로크를 추가하면 center로 설정된다.
피그마의 Frame에서는 기본값이 inside다.
이것을 css로 개발에 적용하면 기본값이 outside다.
왜 그럴까? 이부분에 대해 좀더 살펴보자.
피그마는 웹기반 디자인툴이다.
그러다보니 당연히 웹에 기반한 내용으로 접근해야 한다.
피그마의 프레임을 웹의 박스모델이라 생각하고 보자.
( 크롬 브라우저에서 개발자 모드 속성을 켜면 붉은점선안에 있는 것을 볼수 있다. )
CSS의 Box Model 은 기본적으로 넓이(높이) + 패딩 + 테두리 = 렌더된 넓이(높이) 이렇게 작동한다.
박스만 있을때는 우리가 의도한 넓이와 높이가 된다.
여기에 패딩이나 테두리를 추가하면 넓이(높이) 바깥쪽에 그려진다.
그런데 웹생태계가 발전하고 반응형 디자인이 인기를 얻으면서 사용자들은 위의 박스 모델에 대한 업데이트를 원했다.
반응형 디자인으로 유명한 Jon Hicks는 2008년 css의 변경희망 리스트에서 다음과 같이 기술했다.
I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it’s going to do the layout. Perhaps something like padding-inside as a new selector? In that vein I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!
이부분은 CSS3 에서 box-sizing 에 도입되었다.
mdn에서는 box-sizing을 다음과 같이 설명하고 있다.
content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
피그마에서 프레임을 선택후 인스펙트창에서 확인해보면 위에 설명한것처럼 boder-box로 되어있다.
필자가 스케치에서 피그마로 바로 넘어올 수 있었던 이유중 한가지는 피그마는 개발자 관점에서 만들어진 느낌을 받아서다.
이런 이유로 필자가 피그마를 통해 여러분들에게 개발자들의 생각을 좀더 쉽게 설명할 수 있는거다.
필자가 이야기한 내용들이 훗날 개발자와 협업할때 조금이나마 도움이 되길 바란다.
오늘의 글쓰기 끄읕~ ( 필자또한 글을 쓰면서 두리뭉실한 생각들을 정리할 수 있어 매우 기쁘다^^ )
