7강 갤러리 게시판 스킨 (skin/board) 정보
표준화 7강 갤러리 게시판 스킨 (skin/board)
본문
갤러리 게시판 스킨 목차
고민했던 내용
-
어디까지 표이고, 어디까지 목록인가?
일반게시판에서 우리는 table로 게시판 목록을 마크업했습니다.
목록이라는 단어만 놓고보면, ul이 더 적당할텐데 말입니다.
왜 ul 대신, table을 사용하는 것일까요? 왜 고담시에서 배트맨을 냅두고 슈퍼맨을 부르는 것일까요?
이런 의문을 해소하기 위해 저는 표의 정의부터 찾아봤습니다.어떤 내용을 일정한 형식과 순서에 따라 보기 쉽게 나타낸 것.
네이버 국어사전너무 간단합니다. 현학적 허세에 물든 저에게는 충분히 납득이 가지 않습니다. 더 찾아봅니다.
어떤 상호관련된 사항들을 비교하거나 분류해서 독자에게 보이고자 할 때, 문장설명으로 하는 것보다 일목요연하게 이해할 수 있도록 그 내용들을 표화(表化)하여 정리해 놓은 것. 표는 보통 숫자 등으로 나타낸 것이 많으나, 단어나 짧은 문장 등으로 된 것도 있다. 표중에는 그림(figure)과 그 구분이 애매한 것이 종종 있는데, 일반적으로 표는 종란(column)과 횡렬(row)을 가진 것으로, 활판조판이 가능한 것을 말한다.
네이버 지식백과, 한국언론진흥재단 제공국어사전이 간단하게 정리가 잘된 거였네요. 하하하
암튼 표를 간략하게 정리하면 어떤 내용을 일정한 형식, 종란(column)과 횡렬(row)과 순서에 따라 보기 쉽게 나타낸 것이라고 할 수 있습니다.
만약 우리의 게시판에서 보여주는 정보가 글제목 뿐이라면 ul로 마크업하는 것이 의미론적으로 가장 적합할 것입니다.
하지만 사용자들 혹은 고객들의 요구는 너무나도 복잡다단하기 때문에, 게시판에 단순히 제목만 나오는 것을 원하는 사용자는 거의 없을 것입니다. (너무 많은 정보를 제공해서 피곤하게 만드는 경우를 빼면요!)
즉 고담시에 배트맨만 있어도 충분한데 우리의 시민들이 외치는 겁니다. 배트맨은 왜 하늘을 날지 못하느냐? 우린 하늘을 나는 히어로가 필요하다.
그래서 우리가 불러들인 것이 바로 슈퍼맨(이라고 쓰고 table이라 읽음)입니다.
게시판에서 제목도 보여주고 싶고, 글쓴 사람이 누군지도 보여주고 싶고, 시간도 보여주고 싶고, 댓글이 몇개 적혔고, 새글인지 아닌지도 보여주고 싶단 얘깁니다.
이렇게 다양한 정보를 각각 하나의 '목록'으로 간주하는 것보다, '일정한 형식과 순서에 따라 일목요연하게 이해할 수 있도록' table을 사용하는 것은 어쩌면 당연한 일일지도 모릅니다.
그리고 가장 현실적인 이유로 ul보다 table이 적어도 게시판 목록을 디자인하는데 있어서는 월등히 편리합니다.
이미 다 아시는 얘기라구요? 저는 이 결론을 내리느라 3일을 고민했습니다. 하하하 ㅠㅠㅠ -
그렇다면 갤러리도 표로 만들어야 하나?
이 대목에서도 고민을 많이 했습니다. 이미지와 제목, 작성자, 시간 등의 정보가 들어 있는데 이것도 당연히 표로 해야하지 않을까? 라는 생각이 자연스레 생겨났습니다.
슈퍼맨 불렀더니 애가 아주 하늘도 쌩쌩 날라다니고, 눈에서 레이저도 쏘고, 빨간 팬티 입고 다녀서 내복회사 매출에도 기여를 하더란 말입니다. 칙칙한 망토 하나 두르고 다니는 배트맨보다 더 미더울 수 밖에 없다는 거죠. 옷도 신뢰의 상징 파란색이구요.
그런데 갤러리를 표로 만들자니 난감한 경우가 생겼습니다. 많은 디자이너들 심지어 사용자(고객)들까지, 갤러리에서는 이미지만 중점적으로 부각되길 원하더란 말입니다.
악당들을 다 물리치고나니 하늘을 쌩쌩 날아다니는 슈퍼맨이라는 존재가 부담스럽기 시작한겁니다. 조명만 켜서 필요한 때만 부를 수 있는 배트맨이 그리워졌단 거죠.
<table> <caption>걸그룹 갤러리</caption> <thead> <tr> <th scope="col">번호</th> <th scope="col">사진</th> <th scope="col">제목</th> <th scope="col">작성자</th> <th scope="col">작성시간</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><img src="경로" alt=""></td> <td>소녀시대 vs 원더걸스</td> <td>지운아빠</td> <td>방금</td> </tr> </table>갤러리 게시판에서 원하는 건 이미지와 제목 정도만 나오는 건데 표로 하다보니 온갖걸 다 보여줘야 된다는 겁니다.
그래서 갤러리 게시판은 다음처럼 간단하게 마크업할 수도 있습니다. (이미지형)<ul> <li> <img src="경로" alt=""> <strong>소녀시대 vs 원더걸스</strong> </li> </ul>얼마나 깔끔합니까? 이미지와 제목, 이 이상 무엇이 필요하겠습니까?
-
고민은 끝났나?
자 이제 배트맨이고 슈퍼맨이고 히어로는 히어로대로, 우리는 우리대로 각자의 일을 할 때가 돌아온 것 같습니다. 가열찬 폭풍코딩으로 한떨기 수줍은 자태를 뽐내는 프로젝트를 난도질하여 메마른 내 통장에 촉촉한 단비를 적셔줄 때가 온 것입니다.
아니 그런데 여기서 잠깐! 고객이 수상한 요구를 들고 왔습니다. 갤러리는 갤러린데 우리가 생각한 그 갤러리가 아닙니다. 사진 한장을 띄우더니 그 옆으로 설명을 쭉 뽑아내야 한다고 합니다. (웹진형 갤러리)
일단 우리는 믿는 구석이 있으니 그대로 코딩을 합니다.<ul> <li> <img src="경로" alt=""> <strong>소녀시대 vs 원더걸스</strong> <p>소녀시대와 원더걸스 중 걸그룹 최종 승자는 누가 될 것인가에 삼촌팬들의 이목이 집중되고 있다.</p> </li> </ul>그리고 나서 CSS 로 땀을 뻘뻘 흘리며 위치를 잡고 조정을 합니다.
여차저차해서 완성을 시켜놓고 잔금을 입금 받습니다. 메마른 통장에 잔금이 입금되고, 가뭄에 갈라진 논바닥처럼 갈라진 부부사이도 촉촉해집니다. 퍼블리셔를 하길 잘했어라는 생각에 흐뭇한 마음을 감추지 못하고 있는 찰나, 고객에게 전화가 옵니다.
이미지 설명글을 좀 길게 썼더니 레이아웃이 죄다 깨졌다고 합니다. 아니 이렇게 자세하게 설명해주면 차라리 원인이라도 빨리 파악할 수 있습니다. 보통의 고객들은 이렇게 말합니다.사.이.트.가. 이.상.해.요.
보통의 고객들정말 밑도끝도 없습니다. 전후사정 자초지종도 없이 그냥 무턱대고 이상하답니다. 낮에 이런 소리를 들으면 그나마 맨정신이어서 대처가 쉬운데, 저녁에 소주라도 한잔 걸치고 누워서 TV 보고 있다 이런 전화를 받으면 놀랠 노자가 따로 없습니다. 고객은 고객대로 승질나고, 나는 나대로 당황스럽고, 술김에 이것저것 건드려서 빈대 잡으려다 초가 삼간을 다 태워버리고 맙니다. 어머니~
이런 일을 겪고 보니 깨달아지는 것이 있습니다. 웹진은 단순 이미지 갤러리보다 더 많은 내용을 보여줘야 하는구나!
조용히 table로 마크업을 변경합니다.
디자인/레이아웃 잡으려고 CSS 어렵게 손댈 필요 없이 글자 좀 길게 써도 알아서 높이 조절해주는 기특한 녀석이거든요!<table> <caption>걸그룹 기사 목록</caption> <!-- THEAD 생략 --> <tbody> <tr> <td><img src="경로" alt=""></td> <td> <strong>소녀시대 vs 원더걸스</strong> <p>소녀시대와 원더걸스 중 걸그룹 최종 승자는 누가 될 것인가에 삼촌팬들의 이목이 집중되고 있다. 참고로 지운아빠는 소녀시대나 원더걸스보다는 씨스타를 좋아하더란 소문이 있지만 이것은 어디까지나 확인되지 않은 루머일 뿐, 여전히 소녀시대와 원더걸스의 강세는 계속될 전망이다.</p> </td> </tr> </tbody> </table>테이블이 유지보수에 더 좋다는 이야기는 아닙니다. 이 예는 이미지 한장과 제목만 출력하는 정도의 간단한 형식이 아니라면 갤러리 게시판에도 테이블을 사용하는 것이 어쩌면 의미론적으로 더 맞을 수 있다는 뜻입니다.
참고로 SIR에서는 현재 ul로 갤러리 게시판을 마크업하고 있습니다. 한 줄에 하나, 한 줄에 네개짜리로 두가지 종류가 있는데, class 명 구분만으로 표현 방법을 바꿔서 표시하고 있습니다.
어디까지나 마크업 담당자의 판단이나 기호 혹은 운영전략에 따라 결정되는 부분이지, 무조건적으로 이럴 땐 이거다! 라는 것이 아닙니다.
대표적 형태
위의 고민했던 내용에서 우리는 갤러리 게시판은 크게 두가지로 나뉜다는 사실을 발견했습니다. 세세한 분류를 따지자면야 끝도 없겠지만, 보통 가까운 친척을 사촌형제까지 치잖습니까? 이걸 강좌에도 적용해서 그냥 이미지형(삼촌), 웹진형(사촌)으로 정리하겠습니다.
싸이 일촌은...
이미지형
웹진형
지금부터 우리는 위의 두가지 형태를 갖고, 하나씩 레이아웃과 문서구조를 잡아볼 것입니다.
레이아웃/문서구조를 잡아보기 앞서, 갤러리스킨은 목록에서 이미지를 별도로 처리해줘야 하는데, g4s 는 기본 갤러리 스킨을 포함하고 있으므로, 이를 참고하세요.
또한 글쓰기 페이지, 읽기 페이지는 6강에서 다뤘던 일반게시판 스킨과 같습니다.
이미지형
레이아웃
이미지 레이아웃 마크업
이번 문서구조에서는 6강에서 살펴본 부분(수정/삭제, 복사 ~ 글쓰기)는 생략하고 리스트 부분만 다루겠습니다.
아래 코드는 실제 배포 중인 g4s 코드를 간략화하고 주석을 달은 것입니다.
<ul id="bo_img_list">
<?php for ($i=0; $i<count($list); $i++) {
// 한 줄에 설정한 가로 이미지 수가 꽉 찼을 때 어떻게 다음 줄로 떨어뜨리는지 보여줍니다. 여기부터 #####
if($i>0 && ($i % $bo_gallery_cols == 0))
$style = 'clear:both;';
else
$style = '';
if ($i == 0) $k = 0;
$k += 1;
if ($k % $bo_gallery_cols == 0) $style .= "margin:0 !important;";
// 여기까지입니다. #####
?>
<li class="bo_img_list_li <?php if ($wr_id == $list[$i]['wr_id']) { ?>bo_img_now<?php } ?>" style="<?php echo $style ?>width:<?php echo $board['bo_gallery_width'] ?>px">
<?php if ($is_checkbox) { ?>
// 게시판 관리자 권한 이상일 때 체크박스 출력
<?php } ?>
<span class="sound_only"> // 이 부분은 특별히 시각적으로는 표시하지 않습니다.
<?php
if ($wr_id == $list[$i]['wr_id'])
echo "열람중"; // 내용에서 전체목록 보기 사용 시 리스트에서 현재 보고 있는 페이지 표시 역할
else
echo $list[$i]['num']; // 글번호 표시
?>
</span>
<ul class="bo_img_con">
<li class="bo_img_href">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
if ($list[$i]['is_notice']) { // 공지사항 ?>
공지
<?php } else {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']); // 썸네일 생성
if($thumb['src']) {
$img_content = // 이미지가 있으면 이미지 출력
} else {
$img_content = // 이미지가 없으면 No Image 문구 출력
}
echo $img_content; // 이미지 출력
}
?>
</a>
</li>
<li>제목</li>
<li>작성자 </span><?php echo $list[$i]['name'] ?></li>
<?php if ($is_good) { ?><li>추천횟수<strong></strong></li><?php } ?>
<?php if ($is_nogood) { ?><li>비추천횟수<strong></strong></li><?php } ?>
</ul>
</li>
<?php } ?>
<?php if (count($list) == 0) { echo "<li>게시물이 없습니다.</li>"; } ?>
</ul>
마크업으로 보는 레이아웃 분석
부모 ul 의 자식 li 가 for 문으로 반복되며, li 의 자식 ul 은 꼭 ul 일 필요는 없습니다.
웹진형
레이아웃
웹진 레이아웃 마크업
이번 문서구조에서는 6강에서 살펴본 부분(수정/삭제, 복사 ~ 글쓰기)는 생략하고 리스트 부분만 다루겠습니다.
웹진형 갤러리 스킨은 g4s 에 기본으로 포함되지 않습니다.
공부하는 셈 치고, 아래 구조를 바탕으로 여러분만의 웹진 갤러리 스킨을 만들어 보세요. ^^
<style>
/* 테이블 셀의 정렬을 상단으로 맞춰줍니다. 이렇게 해주면 내용셀의 높이가 높아지더라도 이미지 부분의 위치가 상단에 고정되어 상/하 빈 여백이 발생하지 않습니다. */
td {vertical-align:top}
</style>
<table>
// 이 예제에서 thead 는 디자인 상 생략되어 있지만, 다음과 같이 넣을 수도 있습니다.
<thead>
<tr>
<th scope="col">이미지</th>
<th scope="col">기본정보</th>
</tr>
</thead>
<tbody>
<?php for ($i=0; $i<count($list); $i++) {
<tr>
<td>
<a href="<?php echo $list[$i]['href'] ?>">
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']); // 썸네일 생성
if($thumb['src']) {
$img_content = // 이미지가 있으면 이미지 출력
} else {
$img_content = // 이미지가 없으면 No Image 문구 출력
}
echo $img_content; // 이미지 출력
?>
</a>
</td>
<td>
<div>작성자 정보</div>
<p>글 내용</p>
</td>
</tr>
<?php } ?>
<?php if (count($list) == 0) { echo "<td colspan="2">게시물이 없습니다.</td>"; } ?>
</tbody>
</table>
마크업으로 보는 레이아웃 분석
tr 을 for 문으로 반복시켜 주면 됩니다.
지금까지 갤러리 게시판 스킨 작업 요소들을 대략적으로 살펴봤습니다. 다시 한번 말씀드리지만 이미지형 스킨은 g4s 에 기본 탑재되어 배포 중입니다. g4s 를 다운로드 받아 입맛대로 바꿔보셔도 좋고, 처음부터 코딩하면서 중간중간 참고하셔도 좋습니다. 웹진형 스킨은 기본 탑재되지 않았는데, 역시 이미지형 스킨을 참고 삼아 얼마든지 만들 수 있습니다.
설명이 부족하고 미흡한 부분이 있더라도 많은 양해와 이해 구합니다.
7강 갤러리 게시판 스킨을 마치겠습니다. 감사합니다. :)
4
댓글 21개
훌륭하십니다.
글빨 없는 저로서는 천신같이 느껴지십니다~~~
위트 넘치는 글이 압권 입니다.
항시 수고 하시는 고마움을 다시 한번 전 합니다^^*
