그누보드로 만든 홈페이지 반응형으로 설정하기

그래도 아무튼 개발자·2023년 2월 26일
0

웹프로그래밍

목록 보기
3/7
post-thumbnail

요즘 개인적인 생각으로는 모바일 홈페이지를 따로 제작하지 않고 접속 기기의 해상도에 따라 자동적으로 크기 조절이 되는 '반응형' 홈페이지가 조금 더 각광받고 있는 듯하다. 홈페이지를 굳이 하나 더 세팅할 필요 없이 자동으로 크기 조절을 해주기도 하고, 구현이 매우 간편하니 그럴 만도 하다. 이번에는 그누보드로 홈페이지를 생성했을 때 이 홈페이지를 반응형으로 변경해 보았다.

사전 설정으로 나는 애초에 반응형으로 구현되어 있는 테마로 설정한 상태이다. 그누보드 순정 테마 상태에서는 방법이 다를 수 있으니 참고!

반응형으로 구현되어 있는 테마로 설정했어도 우선 그누보드 자체의 모바일 기능을 해제해야 반응형으로 사용할 수 있는데, 이러한 모바일 기능은 루트 폴더(최상위 폴더) 내에서 config.php 파일 내에 존재한다.

define('G5_USE_MOBILE', true);

라고 되어있는 구문을 찾은 뒤, 위 true 값을 false로 바꿔주면 모바일 기능이 해제가 된다.

하지만 이러한 방식으로 바꾸게 되면, $is_mobile 변수를 사용할 수 없게 된다. 물론 대부분의 홈페이지에는 문제가 되진 않지만 이에 따른 문제가 발생했을 시에 대처법(?)이 있긴 하다. 하지만 이건 개인적으로 조치하고 성공했던 대처법이었으므로 몇 번 테스트를 거친 뒤 설정하는 것을 매우 추천한다...!

우선 루트 폴더 내의 common.php 파일을 연 뒤

if (G5_USE_MOBILE) {
    if ($_REQUEST['device']=='pc')
        $is_mobile = false;
    else if ($_REQUEST['device']=='mobile')
        $is_mobile = true;
    else if (isset($_SESSION['ss_is_mobile']))
        $is_mobile = $_SESSION['ss_is_mobile'];
    else if (is_mobile())
        $is_mobile = true;
}

위 부분을 찾은 뒤 저 if 문을 통째로 제거한다. 그리고 같은 common.php 파일에서

if (G5_IS_MOBILE) { 
    $board_skin_path    = G5_MOBILE_PATH.'/'.G5_SKIN_DIR.'/board/'.$board['bo_mobile_skin'];
    $board_skin_url     = G5_MOBILE_URL .'/'.G5_SKIN_DIR.'/board/'.$board['bo_mobile_skin'];
    $member_skin_path   = G5_MOBILE_PATH.'/'.G5_SKIN_DIR.'/member/'.$config['cf_mobile_member_skin'];
    $member_skin_url    = G5_MOBILE_URL .'/'.G5_SKIN_DIR.'/member/'.$config['cf_mobile_member_skin'];
    $new_skin_path      = G5_MOBILE_PATH.'/'.G5_SKIN_DIR.'/new/'.$config['cf_mobile_new_skin'];
    $new_skin_url       = G5_MOBILE_URL .'/'.G5_SKIN_DIR.'/new/'.$config['cf_mobile_new_skin'];
    $search_skin_path   = G5_MOBILE_PATH.'/'.G5_SKIN_DIR.'/search/'.$config['cf_mobile_search_skin'];
    $search_skin_url    = G5_MOBILE_URL .'/'.G5_SKIN_DIR.'/search/'.$config['cf_mobile_search_skin'];
    $connect_skin_path  = G5_MOBILE_PATH.'/'.G5_SKIN_DIR.'/connect/'.$config['cf_mobile_connect_skin'];
    $connect_skin_url   = G5_MOBILE_URL .'/'.G5_SKIN_DIR.'/connect/'.$config['cf_mobile_connect_skin'];
} else { 
    $board_skin_path    = G5_SKIN_PATH.'/board/'.$board['bo_skin'];
    $board_skin_url     = G5_SKIN_URL .'/board/'.$board['bo_skin'];
    $member_skin_path   = G5_SKIN_PATH.'/member/'.$config['cf_member_skin'];
    $member_skin_url    = G5_SKIN_URL .'/member/'.$config['cf_member_skin'];
    $new_skin_path      = G5_SKIN_PATH.'/new/'.$config['cf_new_skin'];
    $new_skin_url       = G5_SKIN_URL .'/new/'.$config['cf_new_skin'];
    $search_skin_path   = G5_SKIN_PATH.'/search/'.$config['cf_search_skin'];
    $search_skin_url    = G5_SKIN_URL .'/search/'.$config['cf_search_skin'];
    $connect_skin_path  = G5_SKIN_PATH.'/connect/'.$config['cf_connect_skin'];
    $connect_skin_url   = G5_SKIN_URL .'/connect/'.$config['cf_connect_skin'];
}

위 부분을 찾은 뒤 if(G5_IS_MOBILE) 부분을 제거한다. else 부분만 남겨놔야 하기에 "else {" 부분까지 제거를 한 뒤 맨 밑에 "}"를 없애면 괄호 오류 없이 정확하게 G5_IS_MOBILE 부분만 제거가 된다. config.php만 수정했다가 오류가 나셨을 경우 이러한 방법까지 있다는 점 참고!

본인이 테마를 제작하여 사용하는 경우 default.css 파일 내용이라던가 common.php 파일 등등을 대거 수정해야 하는 것으로 알고 있어서... 이건 포기했다...! 그누보드 홈페이지 내에서도 상당히 좋은 홈페이지 테마가 많으니 알차게 사용하도록 하자! 특히 유료 테마가 좋은 자료가 매우 많다. 살짝의 가격을 투자해서 보기 좋은 홈페이지를 만드는 것을 추천한다 :)

0개의 댓글