마크업(MarkUp)과 레이아웃(Layout)

문서의 구조화에 초점을 맞춰 그누보드4의 마크업을 어떻게 변경할 예정인지 알아보고, 마크업 변경에 따른 레이아웃의 변경도 함께 알아보겠습니다.
홈페이지 제작의 거물이자 성지나 다름없는 그누보드4를, 그것도 그누보드4의 아버지가 바로 코 앞에 계신데 해부하려니 참 가슴이 답답하고 멍해지는게 이러다 미운털 박혀서 결국 짤리는 건 아닐까?라는 생각을 하게 만드는군요. ㅠㅠㅠ
아마 짤리면 프리랜서를 하겠죠? 프리랜서를 하다가 뜻하지 않은 기회를 만나 사업을 하고 대통령특별상을 타게 되고, 세계로 진출해서 노벨상을 탈지도...ㅎㅎㅎ
아무튼... 마크업과 레이아웃의 특징을 먼저 짚어보겠습니다.

마크업(MarkUp)

기존 마크업의 특징

그누보드4의 마크업에는 크게 3가지 특징이 있습니다.

1. 표현적 태그 사용
2. 인라인 스타일 사용
3. 배치용 표 사용 (표를 레이아웃용으로)

<table width="" align="center" cellpadding="0" cellspacing="0">

위에서 width, align, cellpadding, cellspacing 등은 모두 표현적인 속성입니다.

표현적 태그 뿐만 아니라 인라인 스타일도 자주 사용되어 왔습니다.

<div style="float:left;">
    <form name="fcategory" method="get" style="margin:0px;">
    <? if ($is_category) { ?>
    <select name=sca onchange="location='<?=$category_location?>'+<?=strtolower($g4[charset])=='utf-8' ? "encodeURIComponent(this.value)" : "this.value"?>;">
    <option value=''>전체</option>
    <?=$category_option?>
    </select>
    <? } ?>
    </form>
</div>

배치용 표는 그누보드4가 쉽게 버릴 수 없는 부분이기도 합니다.
기존에 수없이 많이 개발된 그누보드4 호환 스킨들이, 그누보드4와 같이 배치용 표로 마크업되었으며, 방대하고 다양한 기능과 디자인을 골고루 섭렵한 이러한 자료들이야말로 그누보드4가 가진 가장 강력한 경쟁력 중 하나로 자리잡아왔기 때문입니다.

<!-- 상단 로고 및 버튼 시작 -->
<table width="<?=$table_width?>" cellspacing="0" cellpadding="0">
<tr>
    <td width="43" height="57"></td>
    <!-- 로고 -->
    <td width="220"><a href="<?=$g4['path']?>/"><img src="<?=$g4['path']?>/img/logo.jpg" width="220" height="57" border="0"></a></td>
    <td>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td> </td>
        </tr>
        </table>
    </td>
    <td width="390" align="right">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <!-- 처음으로 버튼 -->
            <td width="78"><a href="<?=$g4['path']?>/"><img src="<?=$g4['path']?>/img/top_m01.gif" width="78" height="31" border="0"></a></td>

            <? if (!$member['mb_id']) { ?>
            <!-- 로그인 이전 -->
            <td width="78"><a href="<?=$g4['bbs_path']?>/login.php?url=<?=$urlencode?>"><img src="<?=$g4['path']?>/img/top_m02.gif" width="78" height="31" border="0"></a></td>
            <td width="78"><a href="<?=$g4['bbs_path']?>/register.php"><img src="<?=$g4['path']?>/img/top_m03.gif" width="78" height="31" border="0"></a></td>
            <? } else { ?>
            <!-- 로그인 이후 -->
            <td width="78"><a href="<?=$g4['bbs_path']?>/logout.php"><img src="<?=$g4['path']?>/img/top_m04.gif" width="78" height="31" border="0"></a></td>
            <td width="78"><a href="<?=$g4['bbs_path']?>/member_confirm.php?url=register_form.php"><img src="<?=$g4['path']?>/img/top_m05.gif" width="78" height="31" border="0"></a></td>
            <? } ?>

            <!-- 최근게시물 버튼 -->
            <td width="78"><a href="<?=$g4['bbs_path']?>/new.php"><img src="<?=$g4['path']?>/img/top_m06.gif" width="78" height="31" border="0"></a></td>

        </tr>
        </table></td>
    <td width="35"></td>
</tr>
</table>
<!-- 상단 로고 및 버튼 끝 -->

위의 코드는 데이터형 표라고 보기는 어렵습니다. 스샷을 보시면 아시겠지만 로고와 버튼을 배치하기 위해 사용된 코드라는 것이죠.

표현적 태그와 인라인 스타일을 사용하는 것은 보다 다양한 환경 혹은 기기에 대한 대응력을 저하시킵니다. 예를들어 국내에서도 화두가 되고 있는 반응형 웹의 경우, 표현적 태그나 인라인 스타일을 사용하면 구현하기가 상당히 까다롭고 복잡해집니다. (아예 불가능하진 않겠죠?)
배치용 표 역시 표현적 태그나 인라인 스타일과 상황이 크게 다르지 않습니다. 이뿐만 아니라, 배치용 표를 사용할 경우 웹 접근성에서도 문제가 됩니다. 특히 스크린리더 같은 보조공학의 도움을 받는 사용자들은, 웹사이트 정보에 논리적으로 접근하기기가 어려워집니다.

여기까지 그누보드4 마크업의 3가지 주요 특징을 모두 살펴봤습니다. 이제 이 특징적인 부분을 어떻게 변경할지 다음 장에서 알아보겠습니다.
아직 더 있다구요? 넣어두세요. ㅠㅠ

새 마크업은?

문서의 구조와 표현을 가능한 완전히 분리할 것입니다. 위에서 잠깐 살펴봤던 table 태그는 다음과 같이 바뀔 것입니다.

<style>
table {width:100%;border-collapse:collapse;border-spacing:0}
</style>
<table>

또한 인라인 스타일을 사용하지 않을 것입니다.
아래 예제에서는 내부 스타일시트(internal stylesheet) 를 사용했는데, 내부 스타일시트 역시 사용을 지양할 것입니다.

        <div style="float:left;">
        

        <style>
        div {float:left}
        </style>
        <div>
        

표, 테이블은 데이터 형에만 한정하여 사용할 것이며, colgroup, thead, tbody 등의 요소도 필요에 따라 사용할 것입니다.
그리고 웹 접근성을 고려하여 scope, headers 등의 요소도 사용할 것입니다. (headers 는 확정되지 않았습니다.)

<table>
<tr>
    <td><img src='logo.jpg'></td>
    <td>메뉴1</td>
    <td>메뉴2</td>
    <td>메뉴3</td>
</tr>
</table>

<table>
<caption>우리나라 홈페이지 웹 표준 준수 현황</caption>
<thead>
    <tr>
        <th scope='col'>번호</th>
        <th scope='col'>사이트명</th>
        <th scope='col'>주소</th>
        <th scope='col'>준수율</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>SIR</td>
        <td>http://www.sir.co.kr</td>
        <td>99%</td>
    </tr>
</tbody>
</table>

레이아웃(Layout)

이제부터 언급하고자 하는 내용은 정확히 말하자면 레이아웃layout보다는 구조structure가 맞을 것입니다. 다만 구조보다는 레이아웃이 우리에게 더 익숙한 표현이기에 레이아웃이라는 표현을 차용하겠습니다.

기존 레이아웃

모든 이미지에 alt 속성을 사용해야 하는 것은 아니지만, logo.jpg 같은 경우 alt 값을 입력해주는 것이 적절할 것입니다.
텍스트 전용 브라우저로 확인했을 때 사이트의 주제나 하고자 하는 의도를 확인하기 어려운 상태입니다.

새 레이아웃

그누보드4s의 레이아웃은 다음의 형태를 목표로 합니다.

즉, 구조와 표현을 가능한 완벽하게 분리하여 기존 그누보드4처럼 기본적인 디자인 대신 문서 구조가 제공되고 CSS를 입맛대로 입힐 수 있도록 하고자 합니다. (방향은 바뀔 수 있습니다. 그런게 인생 아닐까요? ㅠㅠ)

스타일시트(StyleSheet)

그누보드4의 CSS는 그누보드4를 설치한 루트 폴더에 있습니다. /style.css
관리자모드의 경우에는 /adm/admin.style.css 에 위치하고 있습니다.
이번 강좌에서는 기본 CSS 및 관리자모드 CSS를 CSS 폴더에 넣어서 활용하겠습니다. /css/default.css처럼 되겠네요.

그동안 각각의 개발자분들이 공개하신 스킨에서는 CSS를 head 이외의 곳에서 불러왔었는데요. 그누보드DTD 버전을 참고하여 모든 CSS는 head 단에서 처리되도록 할 것입니다.

<?
if(defined('_G4_ADMIN_')) echo'<link rel="stylesheet" type="text/css" href="'.$g4['admin_path'].'/admin.style.css" charset="UTF-8" media="all" />'."\n";
if(defined('_JQUERY_UI_')) echo '<link rel="stylesheet" type="text/css" href="'.$g4['path'].'/css/ui-lightness/jquery-ui-1.8.7.custom.css" charset="UTF-8" media="all" />'."\n";
//회원서비스 스킨 CSS 로드
if(!is_null($member_skin_path) && file_exists($member_skin_path . '/style.css'))
    echo '<link rel="stylesheet" type="text/css" href="'.$member_skin_path.'/style.css" charset="UTF-8" media="all" />'."\n";
//게시판 스킨 CSS 로드
if(!is_null($board_skin_path) && file_exists($board_skin_path . '/style.css'))
    echo '<link rel="stylesheet" type="text/css" href="'.$board_skin_path.'/style.css" charset="UTF-8" media="all" />'."\n";
//최근게시물 스킨 CSS 로드
if(!is_null($new_skin_path) && file_exists($new_skin_path . '/style.css'))
    echo '<link rel="stylesheet" type="text/css" href="'.$new_skin_path.'/style.css" charset="UTF-8" media="all" />'."\n";
//현재접속자스킨 CSS 로드
if(!is_null($connect_skin_path) && file_exists($connect_skin_path . '/style.css'))
    echo '<link rel="stylesheet" type="text/css" href="'.$connect_skin_path.'/style.css" charset="UTF-8" media="all" />'."\n";
//사용자 정의 스킨
if(file_exists($g4['path'] . '/css/skin.css'))
echo '<link rel="stylesheet" type="text/css" href="' . $g4['path'] . '/css/skin.css" charset="UTF-8" media="all" />'."\n";

/*$latest_skin_path
//최근게시물 스킨$outlogin_skin_path
//외부로그인 스킨$poll_skin_path
//설문조사 스킨$visit_skin_path
//현재접속자 스킨(외부호출, current_connect.php 페이지 제외)
위 변수는 함수내에서 스킨폴더를 정의하므로 head에서 호출 할 수 없습니다.
/css/skin.css 파일에 CSS를 직접 정의해두도록 합니다.*/
?>

이전까지는 link 요소가 head 외에 불러와지면 validation 통과를 못했는데, HTML5에서는 현재 통과가 되고 있습니다.
하지만 아직 HTML5 명세가 완성된 것이 아니어서, 이전처럼 link 요소를 head 에서 처리하도록 하겠습니다.

웹 접근성 이슈(Web Accessibility Issue of Gnuboard4 Standard)

그누보드4s에서 고려하게 될 웹 접근성 이슈를 다룹니다.
이 내용은 작성 중이며, 계속해서 추가/수정/삭제 될 예정입니다.

• Captcha
• Web Editor