본문으로 바로가기

그누보드5 반응형 준비사항

category 그누보드 2018.12.01 17:44

그누보드5는 접속기기에 따라 모바일과 PC를 자동으로 분기하여 다른 페이지와 다른 스타일시트를 서비스합니다. 이를 반응형으로 서비스하기 적용했던 설정을 공개합니다.

사용기기 설정 변경

  • theme 디렉토리에 사용할 테마를 업로드하거나 basic 테마를 복사해서 다른이름으로 저장하자.
  • 사용할 테마의 theme.config.php:7 을 아래와 같이 수정한다.

    define('G5_THEME_DEVICE', 'pc');
    
    이 작업은 원래 config.php:120 의 사용기기 설정부분이지만 테마에서도 설정할 수 있도록 변경되었다. 테마를 사용하지 않는 다면 직접 config.php 파일을 수정해야 한다.

해설 보기

새로운 분기 설정을 위한 상수 추가

모바일 분기로 사용할 CCZ_IS_MOBILE 를 추가한다(원하는 상수명으로). 필자는 theme/head.sub.php 파일의 상단에 추가했지만 필요하다면 각종 상수 설정 페이지인 config.php에 추가해도 된다. 이는 최대한 원본 파일은 손보지 않고 테마만 변경하는 것에 중점을 두고 있다.

$ccz_is_mobile = is_mobile();
define('CCZ_IS_MOBILE', $ccz_is_mobile);

해설 보기

G5_IS_MOBILE 변경

위에서 변경한 사용기기 설정으로 인해 G5_IS_MOBILE 상수가 항상 false 값을 가지게 설정되었지만, 모바일 분기가 꼭 필요한 곳은 CCZ_IS_MOBILE 로 변경한다. 대부분 테마를 만들때 기본 제공되는 basic 테마를 기준으로 작업할 것이라는 전제하에 설명되고 있다는 것에 유념하자.

해설 보기

메타 태그 삽입 부분

theme/head.sub.php:36 부근의 메타 태그 분기 설정 부분에서 사용된 상수를 변경한다.

G5_IS_MOBILE 상수를 이용해 모바일과 PC의 메타 태그를 달리 삽입한다.

if (G5_IS_MOBILE) {
    echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
    echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
    echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
    ...

G5_IS_MOBILE 상수와 비슷한 동작을 위해 CCZ_IS_MOBILE 상수를 이용한다.

if (CCZ_IS_MOBILE) {
    echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">'.PHP_EOL;
    echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
    echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
    ...

스타일시트 분기 부분

theme/head.sub.php:49 부근의 분기에 따른 스타일시트 삽입 부분을 제거한다.

<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/<?php echo G5_IS_MOBILE ? 'mobile' : 'default'; ?>.css">

물론, 이 부분은 굳이 수정하지 않아도 사용기기 설정으로 인해 항상 default.css를 삽입하게 된다.

<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/default.css">

Modernizr 삽입 부분

그누보드5에서는 overflow 속성을 지원하지 않는 모바일 브라우저들을 모더나이저(Modernizr)를 사용하여 감지한 후 이에 대한 스타일을 변경하는 부분이 포함되어 있다. theme/head.sub.php:74 부근의 분기에 따른 자바스크립트 코드 삽입 부분을 변경한다.

if(G5_IS_MOBILE) {
    echo '<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>'.PHP_EOL; // overflow scroll 감지
}

접속기기가 모바일이라면 스크립트가 삽입된다.

if(CCZ_IS_MOBILE) {
    echo '<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>'.PHP_EOL; // overflow scroll 감지
}


'그누보드' 카테고리의 다른 글

그누보드5 - index 파일 분석  (0) 2018.12.01
그누보드5 반응형 준비사항  (0) 2018.12.01

댓글을 달아 주세요

티스토리 툴바