네이버XE로 홈페이지 리뉴얼 실무

PHP(Class)

by 김일국 2017. 5. 21. 17:44

# 실무에서의 네이버XE 기반의 작업프로세스 4단계 (총 9주 = 약2달)

1. 포토샵 디자인 (2주일)
2. 반응형HTML로 퍼블리싱 (메인,서브레이아웃, 게시판 및 기타페이지 = 4주일)
3. XE템플릿을 이용한 레이아웃스킨 및 게시판 스킨 제작. (2주일)
4. 오픈 및 하자보수.(1주일)

기존 그누보드나 워드프레스로 작업하던 작업자는 주로 위 작업중 3번에서 헷갈리게 됩니다.

그누보드는 레이아웃은 head, tail php파일과, 게시판 및 최근게시물은 skin폴더, 워드프레스는 테마 폴더의 css,php파일(header,footer) 등으로 단순화 되어 있습니다.

하지만, 네이버XE는 관리자단에 스킨수정 기능을 넣게 되면서, 혼란이 발생하게 됩니다.

예로서, 레이아웃 디자인을 수정한다면, 관리자단에서 기존 레이아웃복사 -> 레이아웃 파일 수정, 추가 CSS작성 등을 관리자 화면에서 하도록 유도 하고 있는데요, 여기서 레이아웃과 스킨 개념이 혼용됩니다. 그래서, 관리자단에서 커스터마이징 하는 것은 무시하고,

위 # 1,2 번에서 작업한 것을 모두 스킨생성/수정으로 명칭을 통일해서 작업하도록 작업 규칙을 만들었습니다.

먼저 아래 작업프로세스는 제 회사 처럼 웹용 소스편집이 가능한 환경에서만 효율적임을 밝혀 둡니다.

우선 추가/수정할 폴더를 확인합니다.

위 중에서 #1,2 번에서 퍼블리싱 된 소스를 적용하는 순서를 나열 하겠습니다.

1. 레이아웃 스킨 html파일을 수정한다.(아래순서)

- 위치 : xe/layouts/new/layout.html 파일에 디자인퍼블리싱한 html 내용을 삽입한다.(여기서 XE템플릿 언어를 사용하게 됩니다.)

- 위치 : xe/layouts/new (이 폴더는 기존 사이트 레이아웃 폴더를 복사해서 FTP로 업로드하면 관리자페이지에 나타납니다. [뉴 레이아웃])

- 마지막으로 [관리자]->[사이트 디자인 설정]->레이아웃 선택(뉴 레이아웃) 후 [PC설정저장] 버튼을 누르면, 뉴 레이아웃으로 적용됩니다.

위에서 [문서 페이지 Default Page Skin]은 레이아웃 스킨과는 무관한 모듈->페이지에 skins폴더에 업로드된 스킨 입니다.

* 이런 사항들이 관리자단 작업에서 헷갈리게 하는 부분입니다.

이렇게 메인 레이아웃 스킨을 적용하고, 같은 방식으로 퍼블리싱된 서브페이지 레이아웃도 만들어서 생성 시킵니다.

적용은 [관리자]->[사이트 메뉴 편집]에서 서브페이지나 게시판메뉴를 서브 레이아웃과 연결 시키면 됩니다.

그외 페이지 스킨, 게시판 스킨도 같은 방식으로 신규 폴더를 생성 후 FTP로 업로드 합니다.

예, xe/modules/member/skins/default (이 폴더는 기존 회원가입 폼에 디자인 폴더 입니다. 위 작업처럼 신규 폴더를 제작하시면 됩니다.)

위 멤버는 모듈이기 때문에 moduels/member 폴더에 스킨이 존재합니다.

만약, 로그인 위젯의 스킨을 수정한다면,

xe/widgets/login_info/skins/default (이 폴더는 기본 로그인 디자인 폴더 입니다. 위 작업처럼 신규 폴더를 제작하시면 됩니다.)

즉,

# 제작 규칙은 아래와 같습니다.

- header 역할을 하는 파일위치 : xe/common/tpl/common_layout.html

( 일반적이지 않게 jquery 로딩은 여기에 없다. xe/cleaaes/display/HTMLDisplayHandler.php 에서 _loadJSCSS() php함수로 로딩한다. )

(경로는 이렇다. 최상위에서 부터 경로를 찾아 간다면, xe/index.php >> xe/config/config.inc.php >> xe/classes/display/DisplayHandler.class.php >> xe/cleaaes/display/HTMLDisplayHandler.php 페이지 인클루드 스타일이 이렇습니다. 아는 사람만 알수 있도록 되어 있네요.)

- 레이아웃(스킨) 수정위치 : xe/layouts/해당레이아웃

- 모듈 스킨 수정위치 : xe/modules/해당모듈/skins (게시판도 모듈이기 때문에 여기에 적용)

- 위젯 스킨 수정위치 : xe/widgets/해당위젯/skins

- 위젯 스타일 수정위치 : xe/widgetstyles/해당스타일폴더 (위젯은 스킨뿐 아니라 스타일이라는 수정할 부분도 있음)

- 애드온은 관리자단에서만 추가되기 때문에 디자인을 수정하지 않습니다.

- [관리지메뉴추가] 메뉴로 페이지(문서페이지=에디터사용, 위젯페이지=메인페이지-최근게시물, 외부페이지=<body>~</body>, 게시판, 바로가기=링크) 생성.

* 게시판 추가 부분도 헷갈리는 부분중 하나 입니다.

- 게시판 추가는 [관리자] -> [모듈] -> [게시판] 에서 하는 것이 아니고, [사이트 메뉴 편집]에서 메뉴를 추가하면서 가능합니다.

* 해당 게시판 설정하는 부분도 [관리자] [설치된모듈]화면과, [관리자] [사이트 메뉴 편집]화면, [사용자홈페이지]부분 오른쪽상단 [톱니바퀴 아이콘] 이렇게 3 부분으로 나뉘어져 있습니다. 이것 역시 헷갈리게 하는 부분 입니다.

다음 포스트에서는 본격 적으로 위 스킨들을 수정할때 사용되는 XE템플릿에 대해서 알아 보도록 하겠습니다.

'PHP(Class)' 카테고리의 다른 글

네이버XE(제로보드xe) XE템플릿 코드로 게시판 수정 (0)	2017.05.23
네이버XE(제로보드xe) XE템플릿 코드로 레이아웃 수정 (0)	2017.05.22
네이버XE(제로보드XE)를 시작 합니다. (0)	2017.05.20
제로보드 XE 다국어에서 언어별 스타일 주기 (0)	2017.04.18
OAuth2.0 다음블로그 자료를 리스트로 뿌리기 적용 (0)	2016.04.19