배경

모바일 지식iN  서비스는 미디어 쿼리를 활용한 반응형 웹 디자인(RWD, Responsive Web Design)으로 구현한 웹사이트입니다. RWD로 사이트를 구현했을 때 font-size, line-height, margin, padding 같은 box-model에 영향이 가는 CSS 속성을 수정할 경우, 여러 뷰포트(모바일/태블릿/기타)를 고려하여 미디어 쿼리 코드를 수정해야 하기 때문에 작업량이 늘어나는 이슈가 있었습니다.
‘코드를 한번만 수정해도 다양한 뷰포트를 대응할 수 있는 방법이 없을까?’
라는 의문을 바탕으로 여러가지 단위 테스트를 진행해본 결과 rem을 이용해서 이런 고민을 해결할 수 있었습니다.

rem?

rem(root em)은 최상위 요소인 'html요소에 비례하여 크기를 가지는 단위입니다.
html 요소에 font-size를 고정값으로 지정해두면 나머지는 그 비율에 따라 크기를 계산합니다.
간단한 코드 예시입니다.


	
		
		rem 테스트 코드
	
	
		

P 요소 안의 폰트 사이즈는?

1em

1rem

html{font-size:12px} /* 루트 요소 html에 고정 폰트 사이즈를 지정 */
.ft-rem{font-size:1rem} /* 12px */
.ft-em{font-size:14px} /* 14px */
.ft-em-paragraph{font-size:1em} /* 14px */
.ft-rem-paragraph{font-size:1rem} /* 12px */

위의 코드처럼 부모 요소에 font-size를 다시 지정해주더라도 rem은 최상위 요소인 html요소의 font-size에 비례합니다.

적용 사례

모바일 지식iN 서비스의 게시판 섹션에서 직접 확인해 볼 수 있습니다.

Before After
디자인 태블릿과 모바일 디자인 각 한 벌 모바일 한 벌
CSS 뷰포트 별로 간격을 맞추기 위해 CSS 재선언,
미디어 쿼리 추가 및 변경
rem을 이용한 공통 코드로 태블릿은 모바일 기준 1.25배 확대하여, CSS코드량이 50% 가량 감소하고 작업일정과 검수부담도 감소
적용 전 – 모바일(w.css) 적용 후 – 모바일/ 태블릿 공통코드 적용 (w.css)
적용 전 – 태블릿(w.css)

모바일 화면

모바일목록

태블릿 화면

태블릿목록

브라우저 지원 현황

IE8 이하는 rem을 지원하지 않습니다. 지식iN 서비스는 웹표준을 지원하는 최신 브라우저(IE9)부터 대응하기로 유관 부서와 협의하였기 때문에, 큰 이슈 없이 rem을 사용할 수 있었습니다.
미지원브라우저

Sass를 이용한 브라우저 지원 문제 해결

IE8이하의 브라우저 지원이 필요한 경우 Sass를 활용하면 간편합니다. rem으로 작업한 코드를 자동으로 pixel 단위로 변환하는 코드를 구현할 수 있습니다. rem을 사용하지 않는 경우가 생긴다면 pixel로 변환한 CSS를 이용해 브라우저별 분기를 할 수 있습니다.

$defaultSize: 10px;  // 모바일 기본 사이즈
$defaultSize-tablet: 12px;  // 태블릿 기본 사이즈
@function sizeSet($num) {
 @if $string != 'rem' { // rem이 아닐 때
   @return #{$num * $defaultSize}#{$string}; // px, pt 등 절대 수치 사용
 }
 @else{ // rem
    @return #{$num}#{$string};
 }
}
// rem 기준으로 sizeSet()에 숫자 argument를 입력하여 사용
// 예) sizeSet(1.2)
// 태블릿에서 기본 크기가 다르게 적용되게 분기
@media only screen and (min-width:$screen-sm-min){
  html{font-size:$defaultSize-tablet}
}

w.scss(rem 단위)

@charset "utf-8";
$string : rem;

w_ie.scss (px 단위)

@charset "utf-8";
$string : '';

결과물인 w_ie.css는 아래처럼 조건문을 이용해 분기해서 적용합니다.


References

우리가 사용하는 폰트의 단위는 몇가지일까?

pt (points)
px단위 고정된 크기로 해상도에 따라 변동하지 않는다. 주로 인쇄 매체에서 사용된다.
px (pixels)
고정된 크기로 해상도에 따라 변동 하지 않는다. 포토샵 에서 쓰는 폰트 사이즈 단위
대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위로 인식하여 렌더링
em (ems)
웹 문서에서 사용되는 단위로 해상도에 따라 사이즈 조정이 가능하다.
해당폰트의 문자 너비를 기준으로 한다.(상위 엘리먼트에 대한 상대적인 크기)
em을 사용하는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절 했을 때 동작하기 위함이다.
(최근 브라우저는 모두 zoom기능을 지원하기 때문에 em대신 px을 사용해도 무방)
화면 크기에 따라 동적으로 body의 폰트사이즈를 조절하는 경우에는 em을 사용하여 확장된 UI 구성이 가능
(해외 웹사이트 대부분이 em을 사용)
% (percent)
기본사이즈에 대한 상대적 사이즈 조정이 가능(상위 엘리먼트에 대한 상대적인 크기를 가지며 em과 비슷)
rem (root em)
rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 단위입니다.
즉 html요소에 font-size를 고정값으로 지정해두면 나머지는 그 비율에 따라 크기를 계산합니다.

Abstract

Naver KnowledgeiN has implemented responsive web design for its mobile side. Fixing responsive web sites may demand modifying media quaries to support various devices, especially if there are changes on CSS box model related properties such as font-size, line-height, margin, padding and etc.
We’d been looking for a better workflow to make the painful work simple and found that the rem unit quite solves this.

What is the rem?

The rem is root em, which means the font-size of the root element, usually <html>. Once you set the font-size of <html>, the rem works relative to it. Here’s a simple code snippet showing what the rem is.


  
    
    rem
  
  
    

Figure out differences between two p elements below.

1em

1rem

html{font-size:12px} /* set the font-size of the root element */
.ft-rem{font-size:1rem} /* 12px */
.ft-em{font-size:14px} /* 14px */
.ft-em-paragraph{font-size:1em} /* 14px */
.ft-rem-paragraph{font-size:1rem} /* 12px */

As you see, the rem unit is constant throughout the document, not like em which is relative to its parent element.

The case of Naver KnowledgeiN

We use the rem unit for padding of some elements in the bulletin board section of Naver KnowledgeiN.

See how the rem worked!

Before After
Design
guides
both for mobile and tablet side mobile side only
CSS Adding/modifying codes using media quaries to fit each viewport Using rem, its tablet side scales 1.25 times bigger than the mobile side, which reduced work days with about 50% lesser css codes than before
mobile side without the rem unit the rem unit works for both mobile and tablet side
tablet side without the rem unit

Mobile side

모바일목록

Tablet side

태블릿목록

Browser compatibility

Browser support for the rem unit is pretty good. But IE8 and down doesn’t support the rem unit and needs px fallbacks. Since the example above is not for desktop users, we could use the rem unit without browser issues.

Troubleshooting for IE8 and down: The Sass way

In case you need to convert the rem unit into the px unit, this Sass code snippet might help you. This way you can make an additional css file to support IE8 and down with conditional comments.

$defaultSize: 10px;  // default font-size for mobile side
$defaultSize-tablet: 12px;  // default font-size for tablet side
@function sizeSet($num) {
 @if $string != 'rem' { // use the px unit instead of the rem unit
   @return #{$num * $defaultSize}#{$string}; // this returns the px unit as $defaultSize above
 }
 @else{ // rem
    @return #{$num}#{$string};
 }
}
// now you can use sizeSet() like rem
// ex) font-size: setSize(1.2)
// media queries for table side
@media only screen and (min-width:$screen-sm-min){
  html{font-size:$defaultSize-tablet}
}

w.scss: using the rem unit for modern browsers

$string: rem;

w_ie.scss: using the px unit for IE8 and down

$string: '';

… and link w_ie.css using conditional comments.


References


카테고리: Research

8개의 댓글

Taehwa · 2015년 9월 16일 7:01 오후

안녕하세요. 글 잘 읽었습니다. 한가지 질문이 있습니다.
본문에서,
‘적용 후 – 모바일/ 태블릿 공통코드 적용 (w.css)’ 를 보면 padding에 관련된 css가 있는데 저게 실제로 모바일과 태블릿에 다른 크기로 적용되게 하려면 media query를 이용해서 html 태그의 font-size를 변경해주어야 하는 것 아닌가요?
글을 읽고 실제 테스트를 해봤는데 저는 media query를 사용하지 않으면 적용할 수가 없더라구요.
제가 테스트하던 코드 입니다.
http://jsfiddle.net/hadeath03/os25bsr5/

    Minseon YU · 2015년 10월 23일 10:45 오전

    @media query 에 태블릿에서 기본으로 사용할 디폴트 폰트 사이즈를 적어주어야합니다.(비율)
    보통 계산을 쉽게 하기 위해 최상위 html의 defaultSize는 10px로 사용합니다.
    지식iN의경우 기본사이즈는 10px, 태블릿의 기본 사이즈는 12px로 사용하였습니다.
    defaultSize : 10px
    tabletSize : 12px
    html{font-size:defaultSize}
    @media only screen and (min-width: 768px){
    html{font-size:tabletSize}
    }

김종근 · 2017년 10월 9일 5:58 오후

많은 도움이 되었습니다. 감사합니다.

김종근 · 2017년 10월 9일 6:06 오후

실무에서 rem을 도입해보고싶어 공부중인데 더불어 여쭈어보고싶은게 한가지 있어서 댓글 남겨봅니다. ^^;
rem, em 단위를 사용할때에 html에 폰트사이즈를 지정하면 안된다는 의견이 있던데 이에 대해서는 어떻게 생각하시는지 알고싶습니다.
Kezz Bracey : 그렇지만, 이렇게 해놓으면 사용자가 브라우저에 설정해 놓은 폰트 크기를 html 요소가 아예 무시하게 만드는 일이라서 되도록 삼가야 할 방법입니다. 사용자 설정을 무시해버리면, 사용자로부터 최적화된 콘텐츠 해석의 환경을 갖추도록 하는 기능을 아예 빼앗아버리기 때문입니다. 만약에 그래도 html 요소의 폰트 크기를 바꾸고 싶다면, 대신 폰트 크기를 em이나 rem 값으로 지정해 놓아서 사용자가 지정한 브라우저 폰트 크기와 일정한 비율로 계속 유지될 수 있도록 해야 합니다.

Web font size – Designer Sheldon Life · 2017년 4월 14일 4:28 오후

[…] 지식iN 웹서비스 rem 적용 사례 […]

REM | katekim · 2017년 8월 5일 9:17 오후

[…] 지식iN 웹서비스 rem 적용 사례 […]

REM – kate kim · 2017년 10월 14일 9:17 오후

[…] 지식iN 웹서비스 rem 적용 사례 […]

REM by NAVER NTS – W · 2018년 1월 8일 6:19 오후

[…] http://wit.nts-corp.com/2014/11/05/2317 […]

Minseon YU에게 댓글 남기기 댓글 취소

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다