인프런 커뮤니티 질문&답변

duddnd님의 프로필 이미지
duddnd

작성한 질문수

반응형 웹사이트 포트폴리오(Architecture Agency)

상대적인 폰트 크기 em 단위와 rem 단위 이해하기

rem을 사용할경우.

작성

·

333

1

제가 여태 작업해오면서 느낀것은 rem을 사용할려면,  우선 웹디자이너분이 rem을 이해해야 하는거같아요ㅠ 웹디자이너분이 정해놓으신 pc_psd버전에서 폰트를 정해놓으시고, 

모바일psd도 웹디자이너분이 정해놓으실텐데 그럼  rem은 일괄적으로 변하는 형태라 웹디자이너분께서 rem를 정확히 이해하시고 폰트를 정해놓고 디자인하셔야하는거니깐 퍼블리셔만 아는게 아니라, 웹디자이너분도 아셔야 프로젝트가 수월할거같다는 생각이 드네요 ㅠ

결론은 

rem을 사용할려면 웹디자이너도 rem를 정확히 이해하고 계산하여 psd작업해야한다, 
만약 모를경우, 

그냥 퍼블리셔가 알아서 px단위로 퍼블리싱해야한다.

제가 생각한게 맞을까요

답변 2

2

안녕하세요. 코딩웍스입니다.

PC버전 퍼블리싱도 그렇지만 반응형 웹의 경우 px를 쓸지 rem을 쓸지 작업유형은 제작자에 따라 많이 달라집니다.

일반적으로 디자이너의 경우 퍼블리싱이 될 크기에 대한 개념이 좀 부족한 면이 있습니다.

저도 전에 프로젝트할 때 디자이너가 만든 psd가 소수점으로 나와서 규격화하는데 좀 힘들었던 기억이 납니다.

저의 개인적인 생각입니다만 디자이너가 rem 단위에 대한 이해도를 충분히 갖고 psd를 만드는게 아무래도 어렵지 않나 생각듭니다.

결론은 작업하실 때 디자이너와 폰트 스타일에 대한 가이드를 정해놓고 시작하시면 좀 수월하실거에요. 곧, 디자이너는 px단위로 디자인하면 됩니다. 만약 pt단위를 쓰면 그러지 마시라고 젠틀하게 이야기 해주시구요.

제가 했던걸 예를 들어서 설명해 볼게요.

첫째, body는 어떤 폰트를 사용할지 h태그는 어떤 폰트를 사용할지 영문의 경우 어떤 폰트를 사용할지 폰트 패밀리에 대한 부분을 먼저 정의하세요.

둘째, body의 폰트 사이즈 제목의 폰트사이즈, 제목도 큰제목 중간제목 소제목으로 나눠서 폰트 사이즈를 정해놓고 디자이너가 PC 버전 디자인을 시작하시면 됩니다.

세째, 폰트의 색상도 정하셔서 시작하셔야 합니다. 그렇지 않으면 같은 제목인데 #000222 또는 #000211 이런 식으로 눈으로는 구분되지 않지만 디자이너가 색상을 중구난방으로 사용하게 됩니다.

첫째 둘째를 고려해서 퍼블리셔는 rem단위를 정하고 그거에 맞춰서 rem으로 환산하시면서 작업하시면 됩니다. 물론 폰트사이즈 뿐만아니라 패딩 마진도 그렇게 rem으로 환산해서 작업하시면 될 것 같습니다.

중요한건 디자이너가 작업 전에 위에 말한 것들 곧, 기본적인 스타일가이드를 만들고 시작하셔야 합니다.

사실 질문하신 내용이 디자이너의 역량, 서로와의 관계 등 단순한 문제가 아니라서 서로의 영역을 잘 지켜주면서 충분한 대화로 스타일가이드를 만드세요~

글이 길었는데 도움이 되셨는지 모르겠습니다...

1

duddnd님의 프로필 이미지
duddnd
질문자

정말 성의있는 좋은말씀 감사드립니다! 정말 폰트사이즈가 소수점으로나오거나, 폰트컬러가 중구난방일때가 많았는데ㅜ

좋은말씀 감사드립니다.  정말 저에게 도움되는글이였습니다. 

감사합니다!

duddnd님의 프로필 이미지
duddnd

작성한 질문수

질문하기