게시판 스킨 아키텍처

게시판 스킨 아키텍처¶

게시판 스킨의 구조와 설계 원칙을 학습합니다.

스킨 구조 개요¶

기본 파일 구성¶

board_skin/
├── conf/
│   └── info.xml          # 스킨 정보
├── list.html             # 목록 템플릿
├── view.html             # 상세보기 템플릿
├── write.html            # 쓰기/수정 템플릿
├── comment.html          # 댓글 템플릿
├── css/
│   └── style.css         # 스타일시트
├── js/
│   └── script.js         # JavaScript
└── images/
    └── icons/            # 이미지 리소스

템플릿 시스템¶

기본 템플릿 구조¶

<!-- list.html 기본 구조 -->
<div class="board-list">
    <div class="board-header">
        <!-- 게시판 제목 및 설명 -->
    </div>

    <div class="board-toolbar">
        <!-- 검색, 필터, 정렬 옵션 -->
    </div>

    <div class="board-content">
        <!-- 게시물 목록 -->
    </div>

    <div class="board-footer">
        <!-- 페이지네이션, 쓰기 버튼 -->
    </div>
</div>

데이터 플로우¶

컨트롤러 → 뷰 데이터 전달¶

// BoardController에서 템플릿으로 전달되는 주요 변수들
$oTemplate->assign(array(
    'document_list' => $document_list,     // 게시물 목록
    'page_navigation' => $page_navigation, // 페이지네이션
    'search_option' => $search_option,     // 검색 옵션
    'module_info' => $module_info,         // 모듈 설정
    'logged_info' => $logged_info,         // 로그인 정보
    'grant' => $grant                      // 권한 정보
));

스킨 커스터마이징¶

CSS 변수 활용¶

:root {
    --board-primary-color: #007bff;
    --board-secondary-color: #6c757d;
    --board-border-color: #dee2e6;
    --board-background-color: #ffffff;
    --board-text-color: #212529;
    --board-spacing-unit: 1rem;
}

.board-list {
    background-color: var(--board-background-color);
    color: var(--board-text-color);
    border: 1px solid var(--board-border-color);
}

반응형 설계¶

/* 모바일 우선 접근 */
.board-list {
    width: 100%;
    overflow-x: auto;
}

/* 태블릿 */
@media (min-width: 768px) {
    .board-list {
        display: grid;
        grid-template-columns: 1fr 200px;
    }
}

/* 데스크톱 */
@media (min-width: 1024px) {
    .board-list {
        max-width: 1200px;
        margin: 0 auto;
    }
}

컴포넌트 패턴¶

재사용 가능한 컴포넌트¶

<!-- 게시물 아이템 컴포넌트 -->
<include target="components/document-item.html" document="{$document}" />

<!-- 페이지네이션 컴포넌트 -->
<include target="components/pagination.html" page_navigation="{$page_navigation}" />

<!-- 검색 폼 컴포넌트 -->
<include target="components/search-form.html" search_option="{$search_option}" />

성능 최적화¶

이미지 최적화¶

<!-- 썸네일 지연 로딩 -->
<img data-src="{$document->getThumbnail(300, 200)}" 
     alt="{$document->getTitle()}" 
     class="lazy-load thumbnail" />

JavaScript 최적화¶

// 필요한 경우에만 스크립트 로드
if (document.querySelector('.gallery-view')) {
    import('./modules/gallery.js').then(module => {
        module.initGallery();
    });
}

접근성 고려사항¶

ARIA 속성 활용¶

<nav aria-label="게시판 내비게이션">
    <ul role="menubar">
        <li role="menuitem" aria-current="page">
            <a href="#">목록</a>
        </li>
    </ul>
</nav>

<main role="main" aria-label="게시판 내용">
    <!-- 게시판 컨텐츠 -->
</main>

다음 단계¶

스킨 아키텍처를 이해했다면, 갤러리 게시판에서 실제 구현을 학습하세요.