본문 바로가기
IT와 생활/홈피와 블로그

그누보드 홈페이지 만들기 - 그누보드5 테마와 경로

2018. 11. 4.

[그누보드 홈페이지 만들기 - 그누보드5 테마와 경로] 

홈페이지를 만드는 프로그램으로 대표적이 그누보드와 제로보드입니다. 현재 제로보드는 EX라는 이름으로 바뀌었는데, 그누보드도 그만큼 변신을 해서 예전과 많이 달라졌습니다. 그누보드도 테마 기능이 추가되었기 때문입니다. 그래서 그누보드로 홈페이지를 만들기를 하는 중에 그누보드5의 경로로 인한 어려움이 발생하므로, 거기에 대한 이해를 정리하려고 합니다. 






그누보드 테마 경로가 복잡해진 이유 


그누보드란, 홈페이지 만들기 저작도구입니다. 원래 게시판 프로그램으로 출발하였지만 회원관리 기능과 내용 관리 기능들이 추가되면서 현재의 그누보드가 되었습니다. 초보자도 스킨 기능으로 디자인을 꾸밀 수 있는 장점이 있는데, 거기에 그누보드는 테마 기능까지 추가하였습니다. 


사진: 그누보드의 SIR사이트(그누보드의 SIR사이트 [그누보드 홈페이지 만들기 - 그누보드5 테마 경로] / ⓒ sir.kr)


그로 인해 그누보드는 마치 블로그를 관리하는 것처럼 디자인 관리를 할 수 있게 되었습니다. 마치 블록 장난감을 조립하듯 그누보드로 홈페이지 만들기를 할 수 있게 되었다는 것입니다. 하지만 문제도 발생합니다. 기존 기능에 계속 추가 기능이 생기다 보니 그누보드5 경로가 복잡해지고 말았습니다.


사진: 그누보드5 경로와 게시판의 경로(그누보드5 경로와 게시판의 경로 [그누보드5 테마 경로 - 그누보드 홈페이지 만들기] / ⓒ www.kiss7.kr)


예를 들어 그누보드의 테마 기능을 이용하고 싶어서 테마 지정을 한 후, 루트 폴더의 index 파일을 수정하면 내가 원한 코드가 삽입되지 않는 경험을 하게 됩니다. 테마 지정을 했을 때도 문제지만 쇼핑몰을 만들려고 영카트를 수정할 때도 그렇습니다. 더구나 모바일 버전까지 이런 현상이 일어나니 초보자는 당황하게 됩니다. 


사진: 관리자 모드에서 그누보드 테마를 지정할 수 있다(관리자 모드에서 그누보드 테마를 지정할 수 있다 [그누보드 홈페이지 만들기 - 그누보드5 테마 경로] / ⓒ www.kiss7.kr)


물론 그누보드 홈페이지 만들기를 하기 전에 SIR 측에서 그누보드5 경로 부분에 대한 자세한 설명을 볼 수 있지만, 대부분의 초보자는 이런 것이 있는 것조차도 모릅니다. 그 이유는 기능이 추가되면서 병렬구조가 아니라 하위 구조로 디렉토리들이 연결되어 있기 때문입니다. 이런 개념을 알아 둔 후, 아래의 설명을 읽으면 초보자도 쉽게 적응할 수 있을 것입니다. 





너무도 복잡한 그누보드5 테마 경로 


그누보드로 홈페이지 만들기를 하기 위해 FTP로 업로드를 하고 나면 수많은 디렉토리들을 보게 됩니다. 물론 루트 폴더에 있는 index파일이 대표 파일입니다. 단, 여기에는 조건들이 달리는데, 아래의 경우에 따라 다른 디렉토리에 있는 index 파일이 대표 파일이 된다는 것을 먼저 이해해야 합니다.



A. 그누보드 테마를 사용하지 않을 때 


1. PC버전의 게시판이 있는 디렉토리 

이 경우엔 정말로 루트 폴더의 index파일이 대표 파일입니다. 이 파일을 수정하면 그누보드의 홈페이지 메일 화면을 디자인할 수 있게 됩니다. 또한 루트 폴더 아래에 있는 CSS폴더, img폴더, skin폴더 등이 모두 PC버전의 기본 그누보드 홈페이지 만들기에 사용되는 파일들이 있는 곳입니다. 만약 PC버전의 기본 게시판 디자인 편집을 하려면 default.css​를 열어서 수정하면 됩니다. 루트 폴더 아래에 있는 CSS폴더, IMG폴더, adm폴더, lib폴더 등은 모바일, 영카트 등의 모든 관리 파일이 동시에 다 들어있는 사이트 대표 관리 디렉토리입니다. 


사진: PC버전의 게시판이 있는 디렉토리(PC버전의 게시판이 있는 디렉토리 [그누보드5 테마 경로 - 그누보드 홈페이지 만들기] / ⓒ www.kiss7.kr)


2. 모바일 버전의 게시판이 있는 디렉토리 

이제 좀 헷갈리기 시작하는데, 그것은 모바일 파일들이 PC버전 파일에 소속된 디렉토리 안에 있기 때문입니다. PC버전과 모바일을 동등하게 보지 않고 모바일이 PC버전의 하위 디렉토리라고 개념을 잡아 놓아서 문제가 됩니다. 모바일 버전의 그누보드 홈페이지 만들기를 하려면 루트 바로 아래의 mobile 디렉토리 안의 파일을 편집하면 됩니다. 그 하위에 추가로 있는 skin폴더도 모바일 전용입니다. 단, 주의할 점이 있습니다. 모바일 버전의 디자인을 담당하는 CSS와 이미지 파일들이 PC버전과 공통의 폴더에 들어가 있습니다. 그러므로 모바일 버전의 CSS 등을 수정하려면 PC버전의 CSS폴더, img폴더에 가야 하며, CSS폴더의 mobile.css 파일을 변경해야 합니다. 


사진: 모바일 버전의 게시판이 있는 디렉토리(모바일 버전의 게시판이 있는 디렉토리 [그누보드 홈페이지 만들기 - 그누보드5 테마 경로] / ⓒ www.kiss7.kr)

3. PC버전의 영카트가 있는 디렉토리

이 역시도 헷갈리는 구조를 만들어 놔서 초보자가 그누보드 홈페이지 만들기를 할 때 머리가 아프게 만듭니다. 영카트 쇼핑몰 파일들이 게시판 디렉토리의 하위 디렉토리로 배치되어 있으므로 루트 아래의 shop 디렉토리에 가서 편집을 해야 합니다. 위의 1번에서 설명했듯이 영카트의 CSS파일은 루트 디렉토리 바로 아래의 CSS 디렉토리를 공통으로 사용합니다. 영카트 디자인을 변경하고 싶다면 CSS폴더의 default_shop.css파일을 수정해야 합니다. 

사진: PC버전의 영카트가 있는 디렉토리(PC버전의 영카트가 있는 디렉토리 [그누보드5 테마 경로 - 그누보드 홈페이지 만들기] / ⓒ www.kiss7.kr)


4. 모바일버전의 영카트가 있는 디렉토리 ​​

PC버전의 그누보드 게시판 파일이 기본으로 있는 상태에서 모바일 게시판 파일이 하위 디렉토리인 mobile 디렉토리에 있고, 영카트 PC버전 파일은 shop 디렉토리에 있다고 설명했습니다. 그렇다면 영카트 모바일 버전 파일은 어디에 있을까요? mobile 디렉토리 아래에 shop 디렉토리가 또 있고, 이것이 영카트의 모바일 파일입니다. 하지만 영카트 모바일의 디자인을 수정하기 위해서는 또 루트 디렉토리 바로 아래의 CSS폴더에서 mobile_shop.css를 편집해야 합니다. 


사진: 모바일버전의 영카트가 있는 디렉토리(모바일버전의 영카트가 있는 디렉토리 [그누보드 홈페이지 만들기 - 그누보드5 테마 경로] / ⓒ www.kiss7.kr)




B. 그누보드 테마를 사용할 때 


1. PC버전의 게시판이 있는 디렉토리 

그누보드 관리자 모드에서 그누보드 테마를 사용하겠다고 지정했다면 위의 디렉토리는 아무 소용이 없게 됩니다. 수정할 파일들이 다른 디렉토리에 들어가 있기 때문입니다. 이 경우의 PC버전 게시판 프로그램은 루트 디렉토리 아래에 있는 theme 디렉토리 아래의 basic 폴더에 들어 있습니다. 그런데 만약, 그누보드 테마를 새로 다운 받았다면 그 테마의 이름이 있는 폴더 안에 수정파일이 들어 있습니다. 이번에 조심해야 할 것은 그누보드 테마 사용 시의 CSS파일은 루트 아래의 CSS폴더가 아닙니다. theme 디렉토리 아래의 테마 폴더 안에 있는 CSS폴더에서 디자인 파일인 default.css를 수정해야 합니다. 

​​

사진: PC버전의 게시판이 있는 디렉토리(PC버전의 게시판이 있는 디렉토리 [그누보드5 테마 경로 - 그누보드 홈페이지 만들기] / ⓒ www.kiss7.kr)


2. 모바일버전의 게시판이 있는 디렉토리

그누보드 홈페이지 만들기가 정신이 없는 이유는 모바일도 게시판의 하위구조이고 영카트도 게시판의 하위구조라고 보는 것에 있습니다. 병렬구조가 아니므로 디렉토리가 폴더 안에 들어 있으니 잘 찾아야 합니다. 모바일 버전의 그누보드 게시판을 수정하려면 theme 디렉토리 아래의 테마 폴더 아래의 mobile 디렉토리에 가야 합니다. 이 모바일 버전 게시판의 디자인 파일은 theme 디렉토리 아래의 테마 폴더 아래의 CSS폴더 안에 있습니다. mobile.css 파일을 수정합니다. 

사진: 모바일버전의 게시판이 있는 디렉토리(모바일버전의 게시판이 있는 디렉토리 [그누보드 홈페이지 만들기- 그누보드5 테마 경로] / ⓒ www.kiss7.kr)


3. PC버전의 영카트가 있는 디렉토리

쇼핑몰을 운영할 경우 그누보드의 영카트 파일이 따로 있는 것이 아니라 그누보드 게시판 디렉토리 안에 있다는 것을 잊으면 찾기에 정신 없어집니다. 즉, 그누보드5 경로에서 영카트의 PC버전은 theme 디렉토리 아래의 테마 폴더 아래의 shop 디렉토리에 있습니다. 그런데, 영카트의 디자인 파일인 css는 theme 디렉토리 아래의 테마 폴더 안에 있는 CSS폴더에 있습니다. 수정할 파일의 이름은 default_shop.css입니다. 

사진: PC버전의 영카트가 있는 디렉토리(PC버전의 영카트가 있는 디렉토리 [그누보드5 테마 경로 - 그누보드 홈페이지 만들기] / ⓒ www.kiss7.kr)


4. 모바일버전의 영카트가 있는 디렉토리 ​​​

매우 복잡하지만 계속 반복된 그누보드5 경로를 보다 보면 이제 어느 정도 위치의 감이 생길 것입니다. 그누보드 테마를 지정했을 때의 모바일 버전 영카트의 파일들은 theme 디렉토리 아래의 테마 폴더 아래의 mobile 디렉토리에 간 후, 그 아래에 있는 shop 디렉토리에서 제작합니다. 그누보드 홈페이지 만들기가 아니라 쇼핑몰 만들기를 한다면 위의 3번과 이 4번을 잘 기억해야 합니다. 모바일버전의 영카트의 디자인 파일은 theme 디렉토리 아래의 테마 폴더 안에 있는 CSS폴더에 공통으로 들어 있으며, mobile_shop.css를 편집하면 됩니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)

사진: 모바일버전의 영카트가 있는 디렉토리(모바일버전의 영카트가 있는 디렉토리 [그누보드 홈페이지 만들기 - 그누보드5 테마 경로] / ⓒ www.kiss7.kr)



새 버전의 그누보드 홈페이지 만들기를 할 때 어렵게 느껴지는 것은 테마를 적용했을 때와 안 했을 때의 파일들의 위치가 다 다를뿐더러 모바일이 PC버전에 종속된 디렉토리로 개념이 되어 있고 영카트가 또 그 안에 종속된 디렉토리로 개념 잡혀있기 때문입니다. 그런데 또 헷갈리는 것은 그렇게 해 놓고 CSS파일과 이미지 파일 폴더는 또 공통으로 사용한다는 것입니다. 그러므로 그누보드5의 테마 경로를 알고 싶다면 위의 설명과 이미지를 잘 비교해 봐야 할 것입니다. 



키스세븐지식은 키스세븐과 그룹 사이트입니다.