기존 홈페이지를 그대로 운영하면서 반응형으로 만들어 쓰는 법입니다.

이걸 반응형이라 하긴 그렇고 가변형? 적응형? 정도로 하는 것이 맞을 것 같네요.

전 기존 홈이 있고 진서기 님의 아래 빌더를 써 왔으나

http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=111251&sfl=mb_id%2C1&stx=neojins

제가 사용자 입장이 되어서 홈을 사용해 보니 쓰기가 더 불편하다는 생각이 들었습니다.

자주 방문하는 사이트는 이미 데스크탑에서 익숙해져 있기 때문에 모바일이 더 낮설고 어렵더군요.

사실 글자가 작다는 것 외에는 일반 웹버전이 더 수월하게 이용하다는 생각이 들었습니다.

게다가 요즘은 대부분의 모바일 기기들이 풀hd 화면이라 pc화면과 거의 동일화 되어가고 있습니다.

심지어는 자의든 타의든 동내 할매들도 1920 x 1080 풀hd폰 들고다닙니다.

제 예상으론 스마트폰의 교체주기가 짧아 1~2 년 지나지 않아 모두 풀hd폰으로 바뀔 듯 한데요.

굳이 작은 화면에 맞출 필요가 있나 생각합니다.

웹에 대해 문외한인 집사람에게 늘 모바일 화면을 모니터링 하는데요.

우리가 생쇼를 해서 멋진 모바일 화면을 만들어도 사용자는 일반 pc화면으로 보는 걸 더 익숙해 하더군요.

그리고 톡톡 두번만 두드리면 화면 확대가 되는 걸 너무도 잘 이용하더라구요. 컴맹이라두요.



각설하고 그래서 전 진서기님 모바일을 쓴지가 오래되서 이미 검색엔진이 노출이 많이 되어 있어서

없엘수는 없고 해서 m/어쩌구 링크 타고 들어오면 일단 .htaccess에 아래와 같이 해서 다 리라이트 시키구요.

RewriteEngine On
RewriteRule ^m/(.*)$ http://내사이트/$1 [R=301,L]

extend/g4m.config.php  에 진서기님의 모바일 관련 함수가 있는데요. 이중 chkMobile 요거만 제가 이용해서 씁니다.
진서기님 죄송합니다. 꾸벅

일단.. 전 헤드를 모바일용과 일반용으로 나눠서 씁니다.

원래 head.php에는

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

//모바일 자동 이동
$chk_mobile = chkMobile();
if($_GET['from'] == 'mobile'){
    //새션 생성 이유는 모바일기기에서 PC버전 갔을경우 index.php을 다시 접속했을때 모바일로 오지않고 pc버전 유지하기 위해서이다.
    set_session("frommoblie", "1");
}

//모바일페이지로 이동,
if($chk_mobile == true && !$_SESSION['frommoblie']){
    include_once("$g4[path]/head_2.php");
    }
    else
    {
    include_once("$g4[path]/head_1.php");
}
?>

요렇게만 남겨두어 세션 자장하고 모바일은 head_2로 일반은 head_1으로 헤드를 쓰게 만듭니다.

그다음 아래는 모바일 헤드의 상단입니다. 물론 head_1에는 일반화면에 맞게 설정이 되어있습니다.

모바일일 경우 전체 페이지의 넓이를 좀 작게 설정해 주고 일반 페이지에는 있는 왼쪽 메뉴들이 없습니다.

그리고 현제 탑빌더를 쓰고 있어 상단에 탑빌더 관련 메뉴인 topmenu_all 이 들어가는데요.

실제로는 이역시 모바일일 경우 글자크기 넓이가 다 바뀝니다. 이건 좀 더 밑에 설명할께요.

그래서 일반페이지는 전체 넓이가 1005px 모바일은 728px에 맞춰져 있습니다. 728의 의미를 아시는 분은 아실 듯 ^^;;

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

// 각종 인쿠르드 어쩌구는 다 틀리겠죵

$g4['title'] = "";
$width = "100%";  //모바일  넓이
$table_width = "728px"; //모바일 테이블 넓이
$board[bo_image_width] = '708'; // 모바일 이미지 넓이
?>

<table width=<?=$table_width?> cellpadding=0 cellspacing=0 border=0 align="center">
<tr>
  <td>
<?= topmenu_all(basic_all);?> 
</td>
</tr>
<tr>
  <td height="10px">
  </td>
</tr>
</table>



아래 예는 제가 주로 쓰는 보드의 list.skin.php의 상단 설정부분입니다.

//모바일 가변 설정
$chk_mobile = chkMobile();
if($chk_mobile == true && !$_SESSION['frommoblie']){
$m_font_s="12pt";
$m_font_b="16pt";
$list_content = "180"; //내용길이
$subject_len = "";
$list_suject = "50"; //제목길이
}
else {
$m_font_s="9pt";
$m_font_b="10pt";
$list_content = "250"; //내용길이
$len = "60";
$list_suject = "999"; //제목길이 게시판 설정에 준함
}

진서기님의 모바일 체크로 모바일이라면 어쩌구 아니라면 어쩌구로 폰트의 크기와 제목길이 내용길이를 선언해 줍니다.
물론 보드 스킨에 따라 변수가 틀리겠지만

<div style="float:left; width:87%"><span style='font:normal <?=$m_font_s ?> normal; color:#666666;'><a href='<?=$list[$i][href]?>'><?=cut_str(strip_tags($list[$i]['wr_content']),$list_content)?></a></span></div>

위에껀 리스트에서 네용 출력하는 부분입니다.
스타일 시트 정리하기 귀찮아서 걍 때려 넣었는데요. 위에 선언한 변수들로 폰트 크기와 내용길이가 결정되어집니다.
물론 제목 부분이나 여타 모바일에서 크게 보여야 할 부분과 게시판의 넓이 등등도 모바일이면 변하도록 되어있습니다.
이렇게 해 놓으면 스킨 하나로 쪼물락 할 수 있어 편리합니다.

복잡해 보이는 것 같지만 실제 크기나 넓이 관련 설정들만 변수로 넣어주면 되기 때문에 그리 어렵지는 않습니다.

아래는 탑메뉴 부분 설정입니다.

//모바일 체크
$chk_mobile = chkMobile();

//모바일이라면
if($chk_mobile == true && !$_SESSION['frommoblie']){
    $width = "100%"; //모바일 와이드 정의
    $table_width = 728 ;
    $topmenu_skin_pading_n = '0px'; //글자사이간격
    $topmenu_skin_pading_t = '0px'; //윗여백
    $topmenu_skin_pading_l = '5px'; //왼쪽여백
    $topmenu_skin_pading_r = '5px';//오른쪽여백
    $topmenu_skin_font = '22px';    //글자크기
    }
  else{
    $width = "100%";
    $table_width = 1005;
    $topmenu_skin_pading_n = '26px'; //글자사이간격
    $topmenu_skin_pading_t = '9px';
    $topmenu_skin_pading_l = '13px';
    $topmenu_skin_pading_r = '13px';
    $topmenu_skin_font = '12px';
    }

마찬가지로 접속 기기에 따라 각종 변수들을 달리하고 있습니다. 역시 728이 있네요 ㅎㅎ

.gnb .allMenu {display:none; position:absolute; width:<?= $table_width-40;?>px; *width:<?= $table_width-40; ?>px; padding:15px; font-size:<?=$topmenu_skin_font?>; background:#f9f9f9;  z-index:99999;}
ul.topnav li {float:left; margin:0; padding:0 <?=$topmenu_skin_pading_n;?> 0 0px; position:relative;

위에껀 탑메뉴 스타일 시트 부분인데요. 역시 메뉴의 넓이를 결정하고 padding의 값도 변수로 입력되어 있습니다.
$table_width에는 뒤에 px를 넣지 않아서 <?= $table_width-40;?>px 요 부분과 같이 사칙연산도 된다능...

<? $chk_mobile = chkMobile();?>
<? if($chk_mobile == true && !$_SESSION['frommoblie']) {?>
<div id="top_mar_2" style="display:none; height:106px;">모바일</div>
<? } else {?>
<div id="top_mar" style="display:none; height:50px;">일반</div>
<? }?>

위에껀 상단고정 메뉴에 쓰이는 건데요.
제 사이트는 상단 고정메뉴가 모바일과 일반웹이 적용되는 범위가 틀립니다.
일반웹은 메뉴부분만 딱 상단고정이고 상대적으로 세로를 많이 쓰는 모바일에서는 로그인 로고 메뉴가 모두 상단 고정됩니다.
그래서 가변으로 위와 같이 처리해 놓았습니다.



모바일에서 뭔가 이상하다 생각되면 생각날 때 마다 저런 식으로 조금씩 고쳐나가니 사이트 업을 일이 없어서 편하기도 하고
회원들도 모바일이나 데스크탑이나 다 비슷하게 보이므로 익숙하고 잇점이 많은 것 같습니다.

정식으로 배운게 없어서 이리저리 짜집기로 해놔서 해놓고도 왜 되는지 모를때가 많습니다.
위에 구문들도 지저분하고 부끄럽습니다만...

워낙 냑에서 도움받은 것들이 많아서 저도 얄팍한 거지만 한번 올려봅니다. ^^

이미 다들 그렇게 하고 계신다구요. 네 알겠습니다. ㅠ.ㅠ



참고로 제 뷰포트는 이렇습니다.

<meta name="viewport" content="width=728px", initial-scale=1.0,user-scalable=yes, target-densitydpi=high-dpi"/>