스킨 디자이너

Skin Designer는 iBoard 스킨 파일을 수정하고, 미리보기하고, 관리하기 위해 만든 개발 도구입니다. 스킨 HTML 파일, 조합된 HTML 결과, 미리보기 화면, 스킨 매핑 파일, 스킨 설정 JSON을 함께 다룰 수 있습니다.

이 기능은 강력하지만 단순하지 않습니다. HTML, CSS, JavaScript, iBoard 치환 필드, 스킨 파일 구조를 이해하는 사용자나 개발자를 위한 기능입니다.

화면 개요

iBoard 스킨은 하나의 파일로만 구성되지 않습니다. 게시판 목록, 행 템플릿, 공지 행, 페이징, 메시지 영역, 평점 영역, 상세 보기 화면 등 여러 개의 작은 HTML 파일로 나뉘어 구성됩니다.

Skin Designer는 이러한 파일을 수정하고, 여러 파일이 조합된 결과를 확인하며, 실제 게시판에 적용하기 전에 미리보기할 수 있도록 도와줍니다.

이 기능을 사용하는 목적

Skin Designer는 iBoard가 화면에 어떻게 보일지 수정해야 할 때 사용합니다. 게시판 로직을 수정하지 않고, 화면 구조를 담당하는 스킨 파일을 수정하여 디자인을 변경할 수 있습니다.

• 새 게시판 스킨을 만들 때
• 기존 게시판 스킨을 수정할 때
• 게시판 목록 디자인을 변경할 때
• 게시글 행 디자인을 수정할 때
• 공지글 행 디자인을 수정할 때
• 페이징 디자인을 수정할 때
• 실제 적용 전에 스킨을 미리보기할 때
• 스킨 매핑 파일과 설정 파일을 수정할 때

중요 개념

스킨은 보통 하나의 파일이 아니라 여러 개의 작은 파일로 구성됩니다. 시스템은 이 파일들을 조합하여 최종 게시판 화면을 만듭니다.

스킨 구조 예시:

iBoardFreeBoard
├── css
├── iboard
│   ├── attribute
│   ├── editor
│   ├── list
│   │   ├── list.html
│   │   ├── list_row.html
│   │   ├── list_notice.html
│   │   ├── pagination.html
│   │   ├── pagination_next.html
│   │   ├── pagination_number.html
│   │   └── pagination_previous.html
│   ├── message
│   ├── rating
│   └── show
├── image
├── js
├── iboard.json
└── skin.json

여러 파일이 조합되어 스킨이 만들어지기 때문에, 어떤 파일은 게시판의 특정 부분만 바꾸고, CSS나 JSON처럼 전체 스킨에 영향을 주는 파일도 있습니다.

파일 트리

왼쪽 파일 트리는 사용 가능한 스킨 폴더와 파일을 보여줍니다. 수정하거나 미리보기할 파일을 선택할 수 있습니다.

주요 탭

Source

Source 탭은 선택한 파일의 원본 코드를 보여줍니다. 특정 HTML, CSS, JavaScript, JSON 파일을 수정할 때 사용합니다.

Composed HTML

Composed HTML 탭은 iBoard가 스킨 구조를 처리한 뒤 조합된 HTML 결과를 보여줍니다. 여러 스킨 파일이 최종 게시판 화면으로 어떻게 합쳐지는지 확인할 때 유용합니다.

Preview

Preview 탭은 현재 스킨의 시각적 결과를 보여줍니다. 실제 게시판을 따로 열지 않아도 레이아웃을 확인할 수 있습니다.

Manual

Manual 탭은 선택한 스킨 또는 파일과 관련된 도움말이나 참고 정보를 제공합니다.

미리보기 화면 크기

미리보기 영역에는 데스크톱, 태블릿, 모바일과 같은 화면 버튼이 있을 수 있습니다. 이 버튼을 사용해 서로 다른 화면 크기에서 스킨이 정상적으로 보이는지 확인합니다.

• Desktop: 넓은 화면에서 스킨을 미리봅니다.
• Tablet: 중간 크기 화면에서 레이아웃을 확인합니다.
• Mobile: 좁은 화면에서 레이아웃을 확인합니다.
• Full View: 더 큰 미리보기 화면을 엽니다.

자주 수정하는 스킨 파일

일반적인 작업 순서

1. 오른쪽 상단에서 Skin Type을 선택합니다.
2. 왼쪽 파일 트리에서 수정할 스킨 폴더를 선택합니다.
3. 수정할 파일을 엽니다.
4. Source 탭에서 원본 코드를 확인합니다.
5. HTML, CSS, JavaScript, JSON을 신중하게 수정합니다.
6. 파일이 조합 결과에 영향을 준다면 Composed HTML 탭을 확인합니다.
7. Preview 탭에서 결과를 확인합니다.
8. 데스크톱, 태블릿, 모바일 화면을 각각 테스트합니다.
9. 결과가 맞으면 Save 버튼을 클릭합니다.
10. 실제 게시판을 열어 최종 결과를 확인합니다.

예시: 게시판 목록 수정

게시판 목록 디자인을 바꾸려면 아래 폴더의 파일부터 확인합니다.

iboard/list/

가장 자주 수정하는 파일은 아래와 같습니다.

• list.html: 게시판 목록 전체 구조
• list_row.html: 일반 게시글 행
• list_notice.html: 공지글 행
• pagination.html 및 관련 파일: 페이지 이동 영역

예시: 게시글 행 디자인 변경

각 게시글 행이 어떻게 보이는지 바꾸려면 list_row.html 파일을 수정합니다.

<tr>
    <td>##{FIELD-NUMBER}##</td>
    <td>##{FIELD-TITLE}##</td>
    <td>##{FIELD-WRITER}##</td>
    <td>##{FIELD-DATE}##</td>
</tr>

치환 필드 이름은 iBoard 렌더링 엔진에서 사용하는 값입니다. 어떤 역할인지 모르는 필드는 함부로 삭제하지 않는 것이 좋습니다.

skin-map.json

skin-map.json 파일은 스킨 파일들이 어떻게 연결되고 조합되는지 정의합니다. 시스템이 어떤 파일을 어떤 레이아웃 영역에 연결해야 하는지 이해하는 데 사용됩니다.

스킨 조각이 연결되는 구조를 바꿔야 할 때만 이 파일을 수정하는 것이 좋습니다.

skin.json

skin.json 파일은 스킨의 일반 설정과 메타데이터를 담고 있습니다. 스킨 이름, 타입, 버전, 설명, 사용 가능한 레이아웃 등 스킨 관련 설정이 포함될 수 있습니다.

JSON 형식이 잘못되면 스킨 설정이 깨질 수 있습니다. 저장하기 전에 JSON 문법이 올바른지 반드시 확인하세요.

주의사항

• Skin Designer는 HTML, CSS, JavaScript, JSON 지식이 있는 사용자를 위한 기능입니다.
• 공통 스킨 파일을 수정하면 해당 스킨을 사용하는 모든 게시판에 영향을 줄 수 있습니다.
• 저장하기 전에 반드시 미리보기로 확인하세요.
• 저장 후 실제 게시판에서도 반드시 확인하세요.
• 필수 템플릿 파일을 삭제하지 마세요.
• 파일명을 변경하려면 매핑 파일도 함께 수정해야 할 수 있습니다.
• 큰 변경 전에는 스킨 폴더를 백업하세요.

문제 해결

관리 권장 사항

• 큰 변경 전에는 기존 스킨을 복사해서 새 스킨으로 작업하세요.
• 한 번에 하나의 파일만 수정하고, 수정 후 바로 미리보기하세요.
• 충돌을 줄이기 위해 명확한 CSS 클래스명을 사용하세요.
• 가능하면 HTML 구조, CSS, JavaScript를 구분해서 관리하세요.
• 미리보기만 믿지 말고 실제 게시판 화면에서도 최종 확인하세요.
• 정상 동작하는 스킨 버전은 백업으로 보관하세요.
• 커스텀 치환 필드나 스킨 규칙은 이후 개발자를 위해 문서화하세요.

Skin Designer는 iBoard의 화면을 깊이 있게 제어할 수 있는 기능입니다. 강력하지만 신중한 수정이 필요합니다. 작은 변경부터 시작하고, 자주 미리보기하고, 반드시 백업을 유지하세요.