게시판은 무엇으로 이루어지는가?

각 화면에서 보여지는 순서대로 (위에서 아래로), 현재 그누보드의 각 요소를 알아보겠습니다. 중복되는 내용은 기능과 목적에 큰 차이가 없는 한 생략합니다. 다음 설명에서 '선택기능'은 사용자가 기능의 사용여부를 지정할 수 있는 기능을 일컫습니다.

공통

상단파일

게시판의 상단에 불러온 파일입니다. 일반적으로 게시판이 시작되기 전 레이아웃을 담당하는 파일을 불러옵니다.

상단이미지

게시판의 상단에 불러온 이미지입니다. 게시판관리자에서 파일첨부로 입력할 수 있습니다.

상단내용

사이트 관리자가 게시판 상단에 직접 입력한 문구 혹은 HTML 을 보여줍니다.

하단내용

사이트 관리자가 게시판 하단에 직접 입력한 문구 혹은 HTML 을 보여줍니다.

하단이미지

게시판의 하단에 불러온 이미지입니다. 게시판관리자에서 파일첨부로 입력할 수 있습니다.

하단파일

게시판의 하단에 불러온 파일입니다. 일반적으로 게시판이 끝나고 난 이후의 레이아웃을 담당하는 파일을 불러옵니다.

목록

분류

게시판의 글을 종류에 따라서 나눠놓은 목록입니다. 분류는 선택기능입니다.

전체글수

게시판에 등록된 전체글수 중 댓글을 제외한 원글수를 보여줍니다.

RSS

구독한 사용자에게 자동으로 최신 게시물을 전송합니다.

관리자

게시판의 관리자 모드로 접속합니다.

번호

게시물의 번호입니다. 정렬기준에 따라 원글의 순서를 번호로 표시하며, 게시판관리자에서 정렬기준을 변경할 수 있습니다.

게시물 선택하기 (체크박스)

여러 게시물을 한번에 삭제, 복사, 이동하고자 할 때, 대상을 선택합니다.

제목

게시물의 제목을 표시합니다.

글쓴이

게시물의 작성자를 표시합니다. 실명과 별명 중 선택할 수 있습니다.

날짜

게시물이 작성된 날짜를 표시합니다.

조회

게시물의 열람횟수를 표시합니다.

추천

게시물이 얻은 추천횟수를 표시합니다.

비추천

게시물이 얻은 비추천횟수를 표시합니다.

선택삭제

선택한 게시물(혹은 게시물들을) 한번에 삭제합니다.

선택복사

선택한 게시물(혹은 게시물들을) 한번에 다른 게시판으로 복사합니다.

선택이동

선택한 게시물(혹은 게시물들을) 한번에 다른 게시판으로 이동합니다.

글쓰기

해당 게시판에 글을 작성합니다.

페이지 나눔

페이지당 목록 출력 갯수에 따라 전체 원글수를 나눠 페이지로 표시합니다.

검색

해당 게시판의 원글과 댓글을 대상으로, 여러가지 옵션으로 글을 찾습니다.

글쓰기

이름

작성자의 이름을 입력합니다. (비회원)

패스워드

게시물의 수정 혹은 삭제 등에 쓰이는 패스워드를 지정할 수 있습니다. (비회원)

이메일

작성자의 이메일을 입력합니다. (비회원)

홈페이지

작성자의 홈페이지를 입력합니다. (선택기능)

옵션

공지사항, 비밀글 설정 혹은 HTML 사용 등을 설정할 수 있으며, 사이트 관리자가 각각의 설정에 대해 이용권한을 제한할 수 있습니다. 특히 공지사항 설정은 일반적으로 게시판관리자 이상만 지정할 수 있습니다.

분류

게시물이 속할 분류를 선택합니다.

제목

게시물의 제목을 입력합니다.

내용

게시물의 내용을 입력합니다. 일반 입력상자 혹은 DHTM 에디터 중 선택할 수 있습니다.

링크

게시물과 연관된 링크를 입력합니다. 이 링크는 일반적으로 새창으로 뜨며, 몇명의 독자나 사용자가 해당 링크를 통해 접속했는지도 알려줍니다.

파일첨부

게시물과 연관된 파일을 업로드합니다. 몇명의 독자나 사용자가 해당 파일을 다운로드 받았는지 알려줍니다.

트랙백주소

설명하기가 어렵네요. 차후에 설명하겠습니다.

CAPTCHA, 자동등록방지

자동등록프로그램으로 광고나 악의적인 목적의 게시물을 자동 혹은 연속으로 등록하는 것을 방지합니다. 웹 접근성에서 주요하게 다뤄질 항목이기도 합니다.

글쓰기

지금까지 입력한 내용을 서버로 전송합니다.

목록

지금까지 입력한 내용을 서버로 전송하지 않고 목록으로 돌아가는 기능입니다. 취소와 같습니다.

읽기

작성일

해당 게시물이 작성된 일시를 표시합니다.

복사

해당 게시물을 다른 게시판으로 복사합니다. 일반적으로 게시판관리자 이상만 가능한 기능입니다.

이동

해당 게시물을 다른 게시판으로 이동합니다. 일반적으로 게시판관리자 이상만 가능한 기능입니다.

목록

해당 게시물이 속한 게시판의 목록으로 돌아갑니다.

수정

해당 게시물을 수정합니다. 작성자 본인 혹은 게시판관리자 이상만 가능한 기능입니다.

삭제

해당 게시물을 삭제합니다. 작성자 본인 혹은 게시판관리자 이상만 가능한 기능입니다.

답변

해당 게시물에 답글을 작성합니다.

글쓰기

현재 게시물 열람을 중단하고 새로운 글을 작성합니다.

제목

해당 게시물의 제목입니다.

스크랩

해당 게시물을 스크랩 목록에 추가합니다. 사이트의 어떤 위치에서라도 스크랩 기능을 이용할 수 있다면 해당 게시물로 한번에 이동할 수 있습니다.

트랙백

설명하기가 어렵네요. 차후에 설명하겠습니다.

글쓴이

해당 게시물을 작성한 사람의 이름을 표시합니다.

아이피

해당 게시물의 작성자 아이피 정보입니다. 일반적으로 게시판관리자 이상에게만 온전한 아이피 주소가 노출됩니다.

조회

해당 게시물을 몇명의 독자 혹은 사용자가 열람했는지 표시합니다.

추천

해당 게시물이 얻은 추천수입니다.

비추천

해당 게시물이 얻은 비추천수입니다.

본문

해당 게시물의 본문입니다.

댓글쓰기

해당 게시물에 남길 댓글을 입력합니다.

댓글보기

해당 게시물에 남겨진 댓글을 표시합니다.

레이아웃 계획

목록

글쓰기

글읽기

문서구조를 세워보자

목록

영역1. 관리자 바로가기

관리자 바로가기

관리자 바로가기는 게시판의 최상단에 위치시킬 계획입니다. 일반 회원들에게는 노출되지 않기 때문에 디자인적으로 전체 미관을 해치지 않으면서도, 사이트 관리자에게는 편리함을 제공할 것입니다.
활용은 다음과 같이 할 수 있습니다.

영역2. TOTAL / 카테고리 / 검색, 글쓰기

// TOTAL / 카테고리 / 검색
<div>
    <? if ($is_category) { ?>
    <form name="fcategory" method="get">
        <select name="sca" onchange="location='<?=$category_location?>'+<?=strtolower($g4['charset'])=='utf-8' ? "encodeURIComponent(this.value)" : "this.value"?>;">
            <option value=''>전체</option>
            <?=$category_option?>
        </select>
    </form>
    <? } ?>

    <form name="fsearch" method="get">
    <input type="hidden" name="bo_table" value="<?=$bo_table?>">
    <input type="hidden" name="sca" value="<?=$sca?>">
    <fieldset>
        <legend>게시물 검색</legend>
        <span>전체 <?=number_format($total_count)?>건 중</span>
        <label for="sfl">검색대상</label>
        <select id="sfl" name="sfl">
            <option value="wr_subject">제목</option>
            <option value="wr_content">내용</option>
            <option value="wr_subject||wr_content">제목+내용</option>
            <option value="mb_id,1">회원아이디</option>
            <option value="mb_id,0">회원아이디(코)</option>
            <option value="wr_name,1">글쓴이</option>
            <option value="wr_name,0">글쓴이(코)</option>
        </select>
        <label for="stx">검색어</label>
        <input id="stx" name="stx" maxlength="15" required value="<?=stripslashes($stx)?>">
        <input type="radio" id="sop_and" name="sop" value="and">
        <label for="sop_and">and</label>
        <input type="radio" id="sop_or" name="sop" value="or">
        <label for="sop_or">or</label>
        <input type="submit" value="검색">
    </fieldset>
    </form>
</div>

각 상단과 하단에 나뉘어져 있던 내용을 하나의 그룹으로 묶었습니다. 특히 검색으로 연결되는 부분은 ' 전체 n건 중 검색대상 제목 ' 으로 읽을 수 있어 자연스럽고 논리적인 구조가 만들어졌습니다.

// RSS, 글쓰기 버튼
<div>
    <? if ($rss_href) { ?><a href="<?=$rss_href?>">RSS</a><? } ?>
    <? if ($write_href) { ?><a href="<?=$write_href?>">글쓰기</a><? } ?>
</div>

영역3. 게시글 목록

// 테이블 캡션
<caption><?=$board['bo_subject']?> 목록</caption>

게시판 제목 목록으로 caption 을 표시합니다. 예를들어 자유게시판에 접속 중이라면, '자유게시판 목록' 이 자유게시판 글 목록의 caption 입니다.

// 테이블 헤더
<thead>
<tr>
    <th scope="col">번호</th>
    <? if ($is_checkbox) { ?><th scope="col"><input type="checkbox" onclick="if (this.checked) all_checked(true); else all_checked(false);"></th><?}?>
    <th scope="col">제목</th>
    <th scope="col">글쓴이</th>
    <th scope="col"><?=subject_sort_link('wr_datetime', $qstr2, 1)?>날짜</a></th>
    <th scope="col"><?=subject_sort_link('wr_hit', $qstr2, 1)?>조회</a></th>
    <? if ($is_good) { ?><th scope="col"><?=subject_sort_link('wr_good', $qstr2, 1)?>추천</a></th><?}?>
    <? if ($is_nogood) { ?><th scope="col"><?=subject_sort_link('wr_nogood', $qstr2, 1)?>비추천</a></th><?}?>
</tr>
</thead>

이 소스에서 관심을 가지고 살펴볼 속성은 scope 입니다. scope 속성은 제목셀과 내용셀을 연결해주는 역할을 합니다. 웹 접근성에서는 거의 필수적인 요소라고 보시면 됩니다.
HTML5 에서는 scope 의 headers 속성으로 scope 만으로 지정하기 어려운 복잡한 테이블을 표현할 수 있습니다. 하지만 가능한 scope 만으로도 의미전달이 충분한 테이블을 작성하는 것이 생산적입니다.

th scope

scope 는 테이블 헤더가 같은 행 혹은 열에 있는 그 다음 셀들 중 일부에 적용되는 것을 의미합니다.

• scope="row" : 동일한 행에 있는 셀들 중 일부
• scope="col" : 동일한 열에 있는 셀들 중 일부
• scope="rowgroup" : 동일한 행에 있는 다른 모든 셀
• scope="colgroup" : 동일한 열에 있는 다른 모든 셀
• scope="auto" : 브라우저가 자동으로 선택

더 자세한 설명은 scope 명세(번역)을 참고하세요.

td headers (HTML5)

headers 속성 값으로 지정한 id 를 가진 th 를 가리킵니다.

            <table>
            <thead>
            <tr>
                <th id="name">이름</th>
                <th id="age">나이</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td headers="name">지운아빠</td>
                <td>9살</td>
            </tr>
            </tbody>
            </table>
        

위 소스에서 지운아빠(heaers="name")은 이름(id="name")을 가리킵니다. 화면낭독기는 이 테이블을 이름:지운아빠 라고 읽을 것입니다.

// 테이블 내용
<?
for ($i=0; $i<count($list); $i++) {
?>
<tr>
    <td>
    <?
    if ($list[$i]['is_notice']) // 공지사항
        echo '공지';
    else if ($wr_id == $list[$i]['wr_id']) // 현재위치
        echo $list[$i]['num'];
    else
        echo $list[$i]['num'];
    ?>
    </td>
    <? if ($is_checkbox) { ?><td><input type="checkbox" name="chk_wr_id[]" value="<?=$list[$i]['wr_id']?>" title="이 게시물 선택"></td><? } ?>
    <td>
        <?
        echo $list[$i]['reply'];
        echo $list[$i]['icon_reply'];
        if ($is_category && $list[$i]['ca_name']) {
            echo '<a href="'.$list[$i]['ca_name_href'].'">'.$list[$i]['ca_name'].'</a>';
        }

        if ($list[$i]['is_notice'])
            echo '<a href="'.$list[$i]['href'].'">'.$list[$i]['subject'].'</a>';
        else
            echo '<a href="'.$list[$i]['href'].'">'.$list[$i]['subject'].'</a>';

        if ($list[$i]['comment_cnt'])
            echo '<a href="'.$list[$i]['comment_href'].'">'.$list[$i]['comment_cnt'].'</a>';

        // if ($list[$i]['link']['count']) { echo '['.$list[$i]['link']['count']}.']'; }
        // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }

        echo $list[$i]['icon_new'];
        echo $list[$i]['icon_file'];
        echo $list[$i]['icon_link'];
        echo $list[$i]['icon_hot'];
        echo $list[$i]['icon_secret'];
        ?>
    </td>
    <td><?=$list[$i]['name']?></td>
    <td><?=$list[$i]['datetime2']?></td>
    <td><?=$list[$i]['wr_hit']?></td>
    <? if ($is_good) { ?><td><?=$list[$i]['wr_good']?></td><? } ?>
    <? if ($is_nogood) { ?><td><?=$list[$i]['wr_nogood']?></td><? } ?>
</tr>
<?}?>
<? if (count($list) == 0) { echo '<tr><td colspan="'.$colspan.'" class="empty_table">게시물이 없습니다.</td></tr>'; } ?>

게시물이 없을 때 나타내는 셀의 클래스는 empty_table 입니다.

영역4. 게시글 선택삭제/선택복사/선택이동/관리자, 글쓰기 버튼

<div>
    <div>
    <? if ($list_href) { ?>
    <a href="<?=$list_href?>">목록</a>
    <? } ?>
    <? if ($is_checkbox) { ?>
    <a href="javascript:select_delete();">선택삭제</a>
    <a href="javascript:select_copy('copy');">선택복사</a>
    <a href="javascript:select_copy('move');">선택이동</a>
    <? } ?>
    </div>

    <div>
        <? if ($write_href) { ?><a href="<?=$write_href?>">글쓰기</a><? } ?>
    </div>
</div>

영역5. 페이지 나눔

// common.lib.php 수정
// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
    $str = '';
    if ($cur_page > 1) {
        $str .= '처음'.PHP_EOL;
    }

    $start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
    $end_page = $start_page + $write_pages - 1;

    if ($end_page >= $total_page) $end_page = $total_page;

    if ($start_page > 1) $str .= '이전';

    if ($total_page > 1) {
        for ($k=$start_page;$k<=$end_page;$k++) {
            if ($cur_page != $k)
                $str .= ''.$k.''.PHP_EOL;
            else
                $str .= ''.$k.''.PHP_EOL;
        }
    }

    if ($total_page > $end_page) $str .= '다음';

    if ($cur_page < $total_page) {
        $str .= '맨끝'.PHP_EOL;
    }
    $str .= "";

    return $str;
}

// list.skin.php

<div>
    <? if ($prev_part_href) { echo '<a href="'.$prev_part_href.'">이전검색</a>'; } ?>
    <?=$write_pages?>
    <? if ($next_part_href) { echo '<a href="'.$next_part_href.'">다음검색</a>'; } ?>
</div>

지금까지 작성한 코드를 조합하면 아래와 같은 페이지가 나옵니다. (CSS가 없는 상태)

글쓰기

글쓰기(온라인 서식)은 이번 g4s 강좌에서 손이 가장 많이 가는 부분 중 하나입니다. 개인적으로 마크업도 어렵게 느껴지지만 디자인하기도 어렵게 느껴지는 부분이 많기 때문입니다.
특히, 웹 접근성과 관련하여 에디터와 캡챠, 보안 이슈가 대두되고 있습니다. 이러한 점들을 자세히 살펴보면 좋겠지만 퍼블리싱보다는 프로그래밍의 측면이 더 크기 때문에, 에디터를 textarea 로만 사용하고, 캡챠는 별도로 다루지 않도록 하겠습니다.
캡챠에 관해 관심 있으신 분들은 개별적으로 아래 사이트를 참조하시면 도움이 될 것 같습니다.

• 백남중씨 블로그 : CAPTCHA에 대한 단상 http://njpaiks.egloos.com/2848997
• 웹 접근성 연구소 : 캡챠의 음성지원 http://www.wah.or.kr/Example/wcag_desc.asp?cate=31
• reCAPTCHA http://www.google.com/recaptcha

글쓰기 서식에서 유의할 점

그누보드를 표준화하는 과정에서 글쓰기 서식은 다음을 유의해야 합니다.

• 유효성검사용 예약어 email, alphanumeric, itemname 등의 비표준 속성
• th와 td의 적절한 분리 및 label 설정
• 파일첨부 추가 시 자바스크립트 사용 부분

선행작업

• 중첩되어 사용된 table 을 제거합니다.

          //원본
          <table width="<?=$width?>" align=center cellpadding=0 cellspacing=0><tr><td>
  
          <div style="border:1px solid #ddd; height:34px; background:url(<?=$board_skin_path?>/img/title_bg.gif) repeat-x;">
          <div style="font-weight:bold; font-size:14px; margin:7px 0 0 10px;">:: <?=$title_msg?> ::</div>
          </div>
          <div style="height:3px; background:url(<?=$board_skin_path?>/img/title_shadow.gif) repeat-x; line-height:1px; font-size:1px;"></div>
  
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <colgroup width=90>
          <colgroup width=''>
  
          //수정본
          <table>
          <caption><?=$board['bo_subject']?> 글쓰기</caption>
          

• 표현태그, 인라인스타일, 클래스명을 제거하고 제목셀과 내용셀을 구분합니다.

          //원본 : 표현을 위해 사용된 내용없는 셀 (삭제)
          <tr><td colspan="2" style="background:url(<?=$board_skin_path?>/img/title_bg.gif) repeat-x; height:3px;"></td></tr>
  
          //원본
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
          //수정본
          <table>
  
          //원본
          <td class=write_head>이 름</td>
          //수정본
          <th scope="row"><label for="wr_name">이름</label></th>
          

• itemname, email 등 비표준 속성을 제거합니다.

          //원본
          <input class='ed' maxlength=20 size=15 name=wr_name itemname="이름" required value="<?=$name?>">
          //수정본
          <input name="wr_name" size="15" value="<?=$name?>" maxlength="20" required>
          

  size 속성은 브라우저별로 랜더링 결과가 다르게 나타납니다.
  만약 input이 모든 브라우저에서 일정한 크기로 표현돼야 한다면 id 나 class 를 이용하세요.
  다음은 input 의 브라우저별 랜더링 결과를 캡쳐한 것입니다.

                  <input type="text" size="15">
              

  

• 입력폼의 name 속성 앞에 동일한 값의 id 속성을 부여합니다.

          <input id="wr_name" name="wr_name" value="<?=$name?>" maxlength="20" required>
          

• 파일첨부칸을 증가 혹은 감소시키는 부분을 스크립트로 처리하는 것 이외의 대안을 찾습니다.

  우선적으로 고려해 볼 수 있는 방법은 파일첨부 증가/감소 기능을 제외시키고, 3칸이나 5칸처럼 지정된 만큼 파일첨부 칸을 출력시키는 것입니다.

글쓰기 전체 마크업은 양도 많지만, 캡챠/파일첨부 등을 처리 중이어서 생략하겠습니다. 더 자세하게 살펴보고 싶으신 분은 강좌홈페이지의 테스트게시판을 참조하세요.

글읽기

글읽기 표준화 과정에서 유의할 점

글 읽기 페이지를 작업할 때 중점적으로 다뤄야 할 부분은 자바스크립트로만 동작되는 기능들입니다.
'웹 접근성 향상을 위한 국가표준 기술 가이드라인'에서는 자바스크립트 없이도 주요 기능을 사용할 수 있도록 제공해야 한다고 명시하고 있습니다.
g4s 강좌는 표준화 뿐만 아니라 접근성도 고려하고 있기 때문에 이 부분에 대해 중점적으로 다루겠습니다. 글읽기에서 자바스크립트로만 동작하고 있는 기능은 다음과 같습니다.

• 첨부파일 다운로드
• 스크랩
• 트랙백
• 댓글 수정
• 댓글 답변
• 댓글 삭제

위의 기능들은 내부적으로도 검토 중에 있는 기능들이며, 아직 강좌에서 다룰 수 있을만큼 진척되지는 않았습니다.
예를 들어, 첨부파일 다운로드의 경우 경고메세지 출력을 위해 자바스크립트를 이용하고 있는데, 첨부파일 버튼을 놓는 곳에 관련 경고문구를 미리 보여주는 방식 등을 고려 중입니다.
작업의 진척상황은 역시 강좌홈페이지의 테스트게시판을 참조하세요.

글읽기 마크업 간략

// 구조에 대한 제안을 받습니다.
// 댓글이나 whitedot@네이버.com 으로 제안해주세요.
<ul>수정 삭제</ul>
<ul>복사 이동 검색 목록 답변 글쓰기</ul>
<article>
    <header>
        <h1>분류와 글제목</h1>
        <dl>작성자 작성일 조회 댓글 추천 비추천</dl>
    </header>
    <section>
    첨부파일
    </section>
    <section>
    관련링크
    </section>
    <div>
    첨부이미지 출력
    </div>
    <p>
    내용출력
    </p>
    <ul>스크랩 트랙백 추천 비추천</ul>
    <section>
    댓글목록
        <article>
            댓글내용
        </article>
        <div>
            댓글작성
        </div>
    </section>
</article>

위 구조를 보시면 article 밑에 h1이 나옵니다. 강좌홈페이지(http://g4s.chin.so)의 구조를 확인해보시면 아시겠지만, g4s 에는 이미 h1이 상단에 존재합니다.
한 문서에는 하나의 h1만 갖는 것이 기본인데, 어떻게 h1을 여러개 갖을 수 있는 걸까요?

HTML4에서 문서 구조를 나타내는 유일한 방법은 <h1>~<h6> 엘리먼트를 사용하는 것이었다. 만일 작성한 문서 구조가 한 개의 루트 노트를 갖게 하고 싶다면 마크업에 <h1>을 한 개만 사용해야 했다. 하지만 HTML5 명세는 새로운 시맨틱 엘리먼트를 포함한 문서 구조 생성 알고리즘을 정의한다. HTML5 알고리즘은 <article> 엘리먼트를 새 섹션으로 간주하고 문서 구조에 이를 위한 새 노드를 만든다. 그리고 각 섹션은 자신만의 <h1> 엘리먼트를 가질 수 있다.

이 점이 HTML4와 큰 차이점 중 하나인데, 왜 좋은지 생각해보자. 많은 웹 페이지가 템플릿을 사용해 만들어진다. 내용의 일부를 한 소스에서 읽어와 페이지 상단에 붙이고, 다른 내용을 다른 소스에서 가져와 페이지 하단에 넣는다. 대부분의 튜토리얼도 같은 식으로 "여기 HTML 마크업이 있으니 복사해서 페이지에 붙여보세요"라고 한다. 작은 컨텐트에 대해서는 괜찮지만 복사해서 붙이려는 마크업이 전체 섹션이라면 어떨까? 튜토리얼 같은 데에서는 "여기 HTML 마크업이 있으니 문서 편집기에 복사해놓고 붙이려는 페이지에서 헤더를 표시할 때 사용하는 태그와 같은 레벨로 태그를 수정하세요"라고 친절하게 설명해준다.

여기서 잠깐 생각해보자. HTML4에는 그냥 '헤더'임을 나타내는 엘리먼트가 없고 <h1>~<h6> 처럼 숫자로 정해진 레벨을 가진 엘리먼트만 있다. 때문에 엘리먼트 간에 포함관계를 이 레벨에 맞춰야 하는 단점이 있다. 페이지를 여기 저기서 가져와야 하는 경우 레벨에 맞게 <h1>~<h6>를 고쳐줘야 하므로 매우 불편하고 짜증스럽다. HTML5에서는 이 문제를 해결하기 위해 헤더 엘리먼트를 새로 도입했고 기존 엘리먼트에 새 규칙을 적용했다.

구글 개발자가 들려주는 HTML5 활용, 마크 필그림 지음, 현동석 강유훈 옮김, 오라일리, 에이콘

section으로 구성된 첨부파일과 관련링크는 ul로도 마크업할 수 있을 것입니다.
마찬가지로 본문을 p로만 감싼 부분도 section과 h2를 이용해 감싸줄 수도 있겠죠.
수정이나 복사, 스크랩 같은 버튼은 특별히 section으로 감싸지 않았습니다. 기능적인 면으로 내용과 크게 연관된 부분은 아니라는 생각이며, 디자인 적용 시, 필요하다면 div로 한번 더 감싸줄 수 있을 것입니다.
댓글목록은 section으로 감싸고 각 댓글 하나하나를 article로 지정을 했습니다. 본문에 대한 댓글의 묶음이라는 거죠.