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

배경

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

rem?

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

	
		
		
	
	
		
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

• css3-rem-units
• confused-about-rem-and-em
• [번역:CSS3] rem으로 글자 크기 지정하기 – 워드프레스 Twenty Twelve 테마에 사용된 놈
• rems-ems
• http://ricardozea.net/

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

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를 고정값으로 지정해두면 나머지는 그 비율에 따라 크기를 계산합니다.