9강 최신글(skin/latest) 스킨

최신글 스킨에 대하여

최신글 스킨은 때때로 커뮤니티 사이트의 모든 것처럼 보일 때도 있습니다. 메인화면에 나열된 게시판별 최신글 목록은 현재 커뮤니티가 얼마나 활성화되어 있는지 한 눈에 알아보도록 도와줍니다.
그리고 콘텐츠 배치가 최적화되기 전까지는 나름의 배치와 배열의 역할도 해냅니다.

다시 말하자면 최신글은 게시판별 최신글을 보여주는 기능적인 역할 뿐만 아니라 레이아웃과 사이트의 인상을 결정 짓는 심미적인 역할까지 동시에 수행할 수 있다는 것입니다.

최신글 스킨이 SIR에서 가장 자주 업로드되는 스킨 중 하나에 포함되는 이유는 아마도 이 때문일지도 모르겠네요. (제작하기 쉽다는 점도 있겠지만요. ^^)

아무튼 잘 만든 최신글 스킨 하나만 가져다 써도, 메인화면 구성이라는 고역에서 해방될 수 있습니다.

레이아웃

그누보드 기본 최신글은 굉장히 단순한 형태입니다.

게시판 제목과 더보기 링크, 그리고 5개 정도의 게시판 최신글 목록을 가지고 있습니다.
그누보드를 활용한 주요 빌더의 최신글 레이아웃도 한번 살펴볼까요?

배추빌더와 아미나 모두 멀티탭 스타일 최신글을 사용 중입니다. 이 방법의 장점은 한정된 공간에 더 많은 콘텐츠를 담을 수 있다는 점입니다.
하지만 한정된 공간을 활용하다 보니 사용자가 특정한 액션을 수행하지 않으면 최초에 표시된 콘텐츠 이외에는 노출시키기 어려운 단점도 있습니다.

마크업

<div class="lt">
    <strong class="lt_title"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>"><?php echo $bo_subject; ?></a></strong>
    <ul>
    <?php for ($i=0; $i<count($list); $i++) {  ?>
        <li>
            <?php
            //echo $list[$i]['icon_reply']." ";
            echo "<a href=\"".$list[$i]['href']."\">";
            if ($list[$i]['is_notice'])
                echo "<strong>".$list[$i]['subject']."</strong>";
            else
                echo $list[$i]['subject'];

            if ($list[$i]['comment_cnt'])
                echo $list[$i]['comment_cnt'];

            echo "</a>";

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

            if (isset($list[$i]['icon_new'])) echo " " . $list[$i]['icon_new'];
            if (isset($list[$i]['icon_hot'])) echo " " . $list[$i]['icon_hot'];
            if (isset($list[$i]['icon_file'])) echo " " . $list[$i]['icon_file'];
            if (isset($list[$i]['icon_link'])) echo " " . $list[$i]['icon_link'];
            if (isset($list[$i]['icon_secret'])) echo " " . $list[$i]['icon_secret'];
             ?>
        </li>
    <?php }  ?>
    <?php if (count($list) == 0) { //게시물이 없을 때  ?>
    <li>게시물이 없습니다.</li>
    <?php }  ?>
    </ul>
    <div class="lt_more"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>"><span class="sound_only"><?php echo $bo_subject ?></span>더보기</a></div>
</div>

이 마크업 방식에서 유의할 점은 게시판제목 다음에 곧바로 더보기 링크가 오지 않는다는 것입니다.
자유게시판 더보기 최신글목록1~최신글목록5 가 아니라, 자유게시판 최신글목록1~최신글목록5 더보기 순으로 쓰여진다는 것이죠.
만약 게시판제목 다음 곧바로 더보기 링크를 놓고 싶으시다면 '더보기' 보다는 '전체보기' 처럼 용어를 사용해주시는 편이 나을 수 있습니다.
조금 뜬금없이 마크업이 아닌 용어 이야기가 되어버렸는데요.
이런 이야기를 하는 이유는 스크린리더 등의 보조공학기기 사용자들에게 콘텐츠를 보다 논리적으로 제공하기 위해서입니다.
사소한 용어 하나에서도 콘텐츠에 대한 이해도를 높일 수 있으니까요. ^^

멀티탭 최신글 마크업

앞서 주요 빌더 사이트의 최신글 스타일을 보신 것처럼, 최근에는 멀티탭 최신글을 굉장히 널리 쓰이고 있습니다. 대부분 기본적으로 멀티탭을 사용하고 있죠.
하지만 널리 쓰이는 것에 비해서 마크업 방법에 있어서는 아쉬움이 남을 때가 많습니다.

(X) 멀티탭 마크업을 잘못한 예

<ul>
    <li><a href="URL">뉴스</a></li>
    <li><a href="URL">경제</a></li>
    <li><a href="URL">스포츠</a></li>
    <li><a href="URL">세월호</a></li>
</ul>
<ul>
    <li>뉴스 목록</li>
</ul>
<ul>
    <li>경제 목록</li>
</ul>
<ul>
    <li>스포츠 목록</li>
</ul>
<ul>
    <li>세월호 목록</li>
</ul>

이 예제는 올바른 멀티탭 마크업이라고 할 수 없습니다. 화면에 출력되는 것에는 문제가 없겠지만 논리적인 마크업 관점에서 볼때 부자연스럽기 때문입니다.
또한 상단 탭버튼의 역할은 다른 페이지로 이동하는 것보다 탭을 전환시켜주는 기능적인 면에 목적이 있으므로 a 태그보다는 button 태그를 사용하는 것이 좋습니다.
따라서 올바른 마크업의 예는 다음과 같다고 할 수 있습니다.

(O) 멀티탭 마크업이 올바른 예

<ul>
<li>
    <button type="button">뉴스</button>
    <ul>
        <li>뉴스 목록</li>
    </ul>
</li>
<li>
    <button type="button">경제</button>
    <ul>
        <li>경제 목록</li>
    </ul>
</li>
<li>
    <button type="button">스포츠</button>
    <ul>
        <li>스포츠 목록</li>
    </ul>
</li>
<li>
    <button type="button">세월호</button>
    <ul>
        <li>세월호 목록</li>
    </ul>
</li>
</ul>

물론 이 예제가 100% 정답은 아닙니다. ul 대신에 div 를 사용할 수도 있고, ul ul 대신에 ul ol 구조를 선택할 수도 있습니다.
다만 핵심은 문서가 논리적인 구조를 가질 수 있도록 한다는 점입니다.
웹 표준화가 익숙치 않은 분들은 반문하실 수도 있습니다. 도대체 어떻게 논리적인 구조인지 확인할 수 있습니까?
대답은 간단합니다. 여러분의 웹 사이트를 마우스가 아닌 키보드의 tab으로 이용해보세요.
tab 키를 눌렀을 때 포커스가 일반적인 상식에 따라 움직인다면 논리적인 구조에 가깝다고 말할 수 있을 것입니다.

맺음말

사실 최신글 스킨은 제작 난이도가 낮은 편에 속합니다.
그러다보니 단순 웹 표준화보다는 웹 접근성에 조금 더 촛점을 맞추어 설명하게 되었는데요.
앞서 말씀드린 것처럼 잘 만든 최신글 스킨 하나가 사이트의 전반적인 분위기와 기능을 대변해줄 수도 있기 때문에, 어쩌면 그 난이도와 단순성에 비해 어려운 작업이 될 수도 있습니다.
부족하지만 제 강좌를 통해서 최신글에 대해 기본적인 지식을 얻고, 더 넓고 다양한 방법으로 응용하실 수 있는 발판이 되었으면 좋겠네요.

9강 최신글 스킨은 여기서 마치겠습니다.
궁금하신 점은 언제든지 댓글로 남겨주세요. 감사합니다. ^^