iBoard Live Editor

iBoard Live Editor는 브라우저에서 서버 파일을 직접 찾아보고, 열고, 수정하고, 새 파일이나 폴더를 만들고, 업로드하고, 저장할 수 있는 웹 기반 파일 편집기입니다.

iBoard 스킨 파일, HTML 템플릿, CSS 파일, JavaScript 파일, JSON 설정 파일, 플러그인 파일, 기타 웹사이트 파일을 서버 파일 시스템에 직접 접속하지 않고 수정해야 할 때 사용합니다.

화면 개요

Live Editor는 왼쪽의 파일 트리와 오른쪽의 코드 편집기로 구성됩니다. 관리자는 폴더를 선택하고, 파일을 열고, 소스 코드를 수정한 뒤 브라우저에서 바로 저장할 수 있습니다.

이 기능을 사용하는 목적

Live Editor는 관리자 화면에서 빠르게 파일을 수정해야 할 때 유용합니다. 특히 스킨 개발, 레이아웃 수정, 템플릿 편집, 간단한 Script 또는 CSS 수정에 많이 사용됩니다.

• iBoard 스킨 HTML 파일 수정
• 페이지 레이아웃 또는 템플릿 파일 수정
• 디자인 변경을 위한 CSS 파일 수정
• 동작 변경을 위한 JavaScript 파일 수정
• skin.json, iboard.json 같은 JSON 설정 파일 수정
• 새 폴더 또는 파일 생성
• 선택한 폴더에 파일 업로드
• 브라우저에서 직접 변경 내용 저장

파일 트리

파일 트리는 설정된 루트 경로 아래의 폴더와 파일을 보여줍니다. 폴더를 펼치고 파일을 선택하면 편집기에서 열 수 있습니다.

예시 화면에서는 아래와 같은 iBoard 스킨 경로가 열려 있습니다.

/iBoard/Skin/iBoard/iBoardNews/iboard/list

이것은 현재 관리자가 iBoardNews 스킨의 list 관련 파일을 수정하고 있다는 의미입니다.

자주 수정하는 파일 형식

파일 열기와 수정

1. Admin > Pages > Modify Files 메뉴로 이동합니다.
2. 파일 트리에서 수정할 폴더로 이동합니다.
3. 수정할 파일을 클릭합니다.
4. 파일이 편집기 탭에 열립니다.
5. 소스 코드를 신중하게 수정합니다.
6. Save 버튼을 클릭하여 변경 내용을 파일에 저장합니다.
7. 관련 페이지, 게시판, 스킨을 새로고침하거나 미리보기하여 결과를 확인합니다.

여러 파일 편집

편집기는 여러 파일을 탭으로 동시에 열 수 있습니다. 하나의 변경 작업이 여러 관련 파일을 함께 수정해야 할 때 유용합니다.

예를 들어 iBoard 목록 스킨을 수정할 때 아래 파일을 함께 열 수 있습니다.

• list.html
• list_row.html
• list_notice.html
• pagination.html
• 관련 CSS 파일

여러 탭이 열려 있을 때는 현재 저장하려는 파일이 올바른 활성 파일인지 반드시 확인하세요.

새 파일 만들기

1. 새 파일을 만들 폴더를 선택합니다.
2. File 버튼을 클릭합니다.
3. 확장자를 포함한 파일명을 입력합니다.
4. 새 파일을 편집기에서 엽니다.
5. 필요한 내용을 작성합니다.
6. Save 버튼을 클릭합니다.

새 폴더 만들기

1. 상위 폴더를 선택합니다.
2. Folder 버튼을 클릭합니다.
3. 새 폴더 이름을 입력합니다.
4. 파일 트리에 폴더가 생성되었는지 확인합니다.

파일 업로드

1. 파일을 업로드할 폴더를 선택합니다.
2. Upload 버튼을 클릭합니다.
3. 컴퓨터에서 업로드할 파일을 선택합니다.
4. 파일을 업로드합니다.
5. 업로드한 파일이 바로 보이지 않으면 파일 트리를 새로고침합니다.

iBoard 스킨 파일 수정

Live Editor는 iBoard 스킨 파일을 수정할 때 자주 사용됩니다. 스킨 파일은 여러 개의 작은 템플릿 파일로 나뉘어 있을 수 있습니다.

iBoard 치환 필드

많은 iBoard 템플릿 파일은 치환 필드를 사용합니다. 이 치환 필드는 페이지가 표시될 때 iBoard 렌더링 엔진에 의해 실제 값으로 변경됩니다.

치환 필드 예시:
##{FIELD-TITLE}##
##{FIELD-WRITER}##
##{FIELD-DATE}##
##{FIELD-LOOKUP}##
##{FIELD-CATEGORY}##
##{PARTIALASYNC-LISTROWS}##
##{PARTIALASYNC-PAGINATION}##

각 치환 필드의 역할을 모른다면 삭제하지 않는 것이 좋습니다. 필수 치환 필드를 삭제하면 게시판 출력이 깨질 수 있습니다.

예시: 게시판 목록 템플릿 수정

게시판 목록 디자인을 수정하려면 list.html 파일을 엽니다. 이 파일은 보통 게시판 목록의 전체 구조를 제어합니다.

<section class="ibnews-hero">
    <div class="ibnews-hero-text">
        <h1>##{FIELD-BOARDNAME}##</h1>
        <p>Company updates, announcements, and resources.</p>
    </div>
</section>

<main class="ibnews-layout">
    <section class="ibnews-main">
        ##{PARTIALASYNC-LISTROWS}##
        ##{PARTIALASYNC-PAGINATION}##
    </section>
</main>

저장 방식

Save 버튼은 현재 편집기 내용을 선택한 파일에 저장합니다. 저장 후에는 해당 파일을 사용하는 웹사이트 페이지, 게시판, 스킨을 새로고침해야 할 수 있습니다.

저장한 파일이 현재 사용 중인 스킨이나 페이지에 포함되어 있다면 실제 웹사이트에 바로 영향을 줄 수 있습니다. 신중하게 수정하고 반드시 백업을 유지하세요.

권장 작업 순서

1. 수정해야 할 페이지, 스킨, 컴포넌트를 정확히 확인합니다.
2. Modify Files를 엽니다.
3. 파일 트리에서 올바른 폴더로 이동합니다.
4. 수정할 파일을 엽니다.
5. 수정 전 기존 내용을 복사해 둡니다.
6. 작은 변경을 먼저 적용합니다.
7. Save를 클릭합니다.
8. 관련 페이지를 새로고침하거나 미리보기합니다.
9. 변경이 정상이라면 다음 작업을 계속합니다.
10. 문제가 생기면 이전 코드로 복구합니다.

자주 사용하는 작업

주의사항

• 이 기능은 브라우저에서 실제 서버 파일을 수정합니다.
• 변경 내용은 실제 웹사이트에 즉시 영향을 줄 수 있습니다.
• 중요 파일을 수정하기 전에는 반드시 백업하세요.
• 어떤 파일인지 확실하지 않다면 수정하지 않는 것이 좋습니다.
• JSON 파일은 문법이 틀리면 설정이 깨질 수 있으므로 주의하세요.
• HTML 치환 필드는 렌더링 엔진에 필요할 수 있으므로 함부로 삭제하지 마세요.
• CSS 클래스명은 충돌을 피하기 위해 고유하게 작성하세요.
• 수정 후에는 해당 파일을 사용하는 실제 페이지나 게시판을 확인하세요.

문제 해결

관리 권장 사항

• Live Editor는 무작위 수정이 아니라 통제된 파일 수정에 사용하는 것이 좋습니다.
• 저장 전 기존 코드를 복사해 두세요.
• 한 번에 하나의 파일만 수정하는 것이 안전합니다.
• 작게 수정하고 자주 테스트하세요.
• iBoard 치환 필드는 렌더링 구조를 이해하지 못했다면 삭제하지 마세요.
• JSON 파일은 저장 전에 문법을 검증하세요.
• 중요한 스킨과 템플릿은 버전별 백업을 보관하세요.
• 이 기능은 신뢰할 수 있는 관리자나 개발자에게만 권한을 부여하세요.

iBoard Live Editor는 브라우저에서 파일을 직접 수정할 수 있는 강력한 기능입니다. 편리하지만 저장된 변경 내용이 실제 웹사이트에 바로 영향을 줄 수 있으므로 신중하게 사용해야 합니다.