갠홈 진입장벽 부수기 프로젝트 (갠홈 시작하는 법)

(포스타입에 업로드한 글을 그대로 가져왔습니다.)

결론부터 말하자면, 갠홈 처음 시작은 전혀 어렵지 않습니다...👽 코딩 까막눈이셔도 괜찮습니다. 멋진 디자인의 스킨들은 배포해주시는 걸 다운 받기만 하면 되니까요. 시작이 반이다 라는 말이 있듯이, 갠홈은 진입장벽이 있(어 보이)지만 자신이 개발자가 되지 않는 이상 어렵지 않습니다,,!!! 진짜.... 정말로.......

 

이 글에서는 호스팅 신청부터 시작해서, 맨 처음 만지면 좋은 세팅 몇 가지에 대해 다룹니다. 그 다음부터는 고수 분들이 배포해주시는 스킨을 깔아서 적용하고 꾸미고 사용하는 일만 남습니다.

-목차-

I. 갠홈 만들기

II. 아보카도 퍼스널 간단 사용법

III. 기초적인 설정들

IV. 멋진 스킨 적용하기

V. 마치며

 

I. 갠홈 만들기

1. 호스팅 신청 (갠홈 사이트 만들기)

일단 먼저 도메인을 가지는 사이트를 구해야 합니다. 무료로도 신청할 수 있어요! 아이비호스팅, 닷홈 등에서 신청하실 수 있는데 이 글에선 제가 사용하는 아이비호스팅을 기준으로 설명 드립니다.

아이비호스팅 회원가입을 마치고 호스팅을 신청하려고 하면 이것도 저장 용량, 트래픽 한도 등에 따라 종류가 다양합니다. 일단은 앞날이 어떻게 될지 모르니 무료를 추천합니다! (아이비호스팅에서 추후 유료로 사양 변경이 필요할 경우 고객센터에 문의하면 데이터 이전을 도와드린다고 해요. 닷홈에서는 따로 이전 절차 없이 바로바로 업그레이드 신청이 가능한 걸로 알고 있습니다.)

• FTP 아이디: 갠홈 도메인이 됩니다. 여기서 아이디를 whyrano(와이라노)라고 설정했다 치면 갠홈 주소가 whyrano.ivyro.net이 됩니다.
• DB 비밀번호: 다 쓸 일이 있겠죠?

둘 다 기억하기 좋은 암호를 쓰거나 메모해두세요.

호스팅을 신청한 단계에서는 아직 아무것도 없습니다.. 갠홈을 채워줘야 하는데 어떡하죠? 우리에게는 아보카도 에디션이 있습니다. 그 전에..!

 

 

2. FTP 프로그램(파일질라 filezila) 설치하고 로그인하기 / 다운로드 링크

FTP(File Transfer Protocol)는 표준 파일 전송 프로토콜로서 사용자의 시스템과 원격시스템간에 파일을 송수신하는 기능을 말합니다.
쉽게 인터넷상에서 파일을 전송 및 수신을 가능하게 하는 기능이라고 보시면 됩니다. 여러분이 만든 홈페이지를 계정에 올려서 많은 사람들이 방문하게 하기 위해서는 반드시 FTP 프로그램을 사용해야 합니다. -출처: 아이비호스팅 이용 가이드

편집기라고 생각하시면 될 것 같아요. 앞으로 갠홈을 뚝딱뚝딱 고칠 때 자주 여닫으실 프로그램입니다. 클라이언트, 무료 버전으로 다운 받으시고. 프로그램을 실행하시면 아래와 같은 화면이 뜹니다.

상단의 호스트, 사용자명, 비밀번호, 포트 란에 기입해서 로그인합니다.

• 호스트: 갠홈 주소를 입력하면 됩니다 (계정 아이디.ivyro.net)
• 사용자명: FTP 아이디(계정 아이디)
• 비밀번호: FTP 비밀번호(계정 비밀번호)
• 포트: 21

접속하면 폴더 두 개(index.html, public_html)가 보입니다. 이게 개인 홈페이지의 내용물이고, 앞으로 우리는 public_html 폴더에 원하는 내용을 채울 겁니다. 이제 여기서 한 번쯤 들어보셨을 법한 아보카도 에디션이 필요합니다.

 

 

3. 아보카도 에디션 퍼스널 설치 (1/2) / 배포 링크

잠깐 그 전에!!

여러분은 아보카도 에디션 혹은 라공 에디션이라는 이름을 들어보셨나요?

이 둘은 제 식으로 설명하자면 타입이 다른 갠홈의 뼈대예요.

갠홈을 만들고 어떤 용도로 사용할지를 대략적으로 생각해두신 바가 있지요. 특히 자캐놀이를 위한 홈페이지.... 기능이 많고 화려한 디자인을 탐내시는 분들은 우선 포스타입 같은 사이트에 '갠홈' '아보카도 에디션' '라공 에디션' 등의 키워드를 넣어 배포 중인 스킨을 서치해봅시다. 내 갠홈에 적용하고 싶은 스킨이 호환되는 에디션이 있을 거예요. 그 에디션을 골라 설치하시면 됩니다. 이 글은 제가 사용하는 아보카도 에디션 퍼스널을 기준으로 작성되었습니다.

 

아보카도 퍼스널을 다운 받고 압축 해제해서 나온 폴더(personal_full)를 그대로 옮기지 않고, 폴더를 열어서 그 안에 있는 폴더와 파일들을 파일질라의 public_html에 옮겨줍니다. 그런 다음 파일질라에서 한 가지 더 할 일이 있습니다.

1. public_html 폴더 우클릭, '디렉터리 만들기' 클릭
2. 생성할 디렉터리 명을 data로 입력 후 확인.
3. 생성된 data 폴더 우클릭, '파일 속성' 클릭.
4. 파일 속성 숫자값에 707 입력.

4. 아보카도 에디션 설치 (2/2)

3번까지 마쳤다면 (드디어!) 개인 홈페이지에 접속해봅시다. 사이트 주소는 위에서 얘기한 대로 계정아이디.ivyro.net 입니다.

설치하기 누르고 라이센스 동의도 합니다. (상업적 이용X 동의)

그 다음은 호스팅 신청 시 설정한 FTP 아이디, DB 비밀번호가 필요한 순간입니다.

table명 접두사는 공란으로 둡니다.

db 관리자 주소는 공란으로 두셔도 괜찮습니다. 아이비호스팅 기준, 아이비호스팅 사이트-마이페이지/호스팅 관리-계정 아이디 클릭-db 관리에서 phpmyadmin에 접속하실 수 있습니다. 추후 db 관리자 주소를 추가하고 싶으신 경우 파일질라에서 public_html/data의 dbconfig.php 파일의 

define('G5_DB_URL', '');

이 부분을 찾아 '' 사이에 링크를 적어주세요.

홈페이지 제목은 취향껏 적어주시고,

회원 id와 비밀번호는 앞으로 우리가 갠홈 사이트에 로그인을 할 때 쓸 아이디비번 입니다.

이름은 노출되는 닉네임이라고 생각해주세요. (홈페이지 제목, 이름은 추후 변경 가능합니다.)

(축) 성공! 인터넷 자가 마련! (축)

 

이제는 진짜 꾸미는 일만 남았습니다.

그런데 이 화면을 보고도 감이 안 잡히는 분들도 계실 거예요. (저 또한 엄청 그랬고)

디자인을 만지기 전에 우선 아보카도 에디션 사용법을 간단히 알려드릴게요.

 

 

II. 아보카도 퍼스널 간단 사용법

'관리자'에 들어가면 이것저것을 설정할 수 있습니다.

기본환경설정에서는 파비콘, 사이트이미지, bgm 등을 설정할 수 있습니다.

디자인설정에서는 로고/헤더/푸터 사용 여부, 폰트 색상, 배경 색상, 사이트의 메인 화면(기본 홈 화면) 등을 설정할 수 있고

메뉴관리의 '메뉴'는 네이버 블로그의 '메뉴'와 같습니다.

특정 영역에 ^이렇게 카테고리나 페이지를 고정시킬 수 있는 기능입니다.

'메뉴 추가'를 누르고 대상 선택에서 홈페이지의 게시판 혹은 페이지를 설정할 수 있습니다. 혹은 다른 웹사이트 링크를 거는 것도 가능해요. 이 경우 '메뉴' 란에는 메뉴의 이름을(사진의 '일기' '사진들'에 해당) 적어주시면 됩니다.

게시판관리는 게시글을 쓸 카테고리를 생성하고 수정할 수 있습니다. 다운받은 게시판 스킨이 있다면 여기서 적용합니다.

페이지관리의 '페이지'는... 게시글을 올리는 게시판 개념과 다르게 그냥 페이지입니다.

 

 

 

III. 기초적인 설정들

관리자/ 기본환경설정

'사이트이미지'가 업로드되지 않을 경우, 파일질라의 public_html/img 폴더에 원하는 이미지를 업로드한 후 '사이트이미지'의 '외부경로'에 https://갠홈주소/img/thumbnail.png(파일명+확장자)를 입력합니다.

'배경음악'으로는 유튜브 재생목록을(URL 공개 혹은 공개된 플레이리스트) 사용할 수 있습니다. 꼭 영상이 아닌 재생목록이어야 하고, 주소를 전체 붙여넣기 하는 게 아니라 고유 아이디 부분만 입력합니다. https://www.youtube.com/watch?list= <이 다음에 나오는 글씨만.

 

관리자/ 디자인 설정

아보카도 에디션을 처음 설치했을 때 화면 상단에 갠홈 제목이 크게 뜨지요? '로고사용'에서 사용해제를 선택해주시면 없어집니다.

저는 '페이지관리'에서 홈 화면으로 사용할 페이지를 가장 먼저 만들었습니다. 그런 다음 '메인화면'에서 해당 페이지를 선택했습니다.

배경의 패턴 이미지를 없애고 흰색으로 만들고 싶다면 '배경'의 '외부경로' 란에 입력된 주소를 지우고 색상코드에 #fff 를 입력합니다. (보통 색상 코드는 여섯 자리인데, 여섯 개의 숫자/문자가 전부 같을 경우 앞에 세 글자만 입력하면 됩니다.)

 

관리자/게시판 관리

조금 스크롤하면 밑에 '게시판 디자인/양식' 파트가 있는데 제가 여기서 디폴트로 설정해두는 것들은 '이미지 폭 크기'(0 입력 시 제한x) '로그/갤러리 세로 기준'(9999)입니다. 이미지의 세로 기준이 너무 작으면 자동 접기처리가 됩니다.

이런 식으로 OPEN을 클릭해야 이미지가 열리게 됩니다.

 

파일 업로드 개수도 원하는 만큼 늘려줍니다.

DHTML 에디터 사용에 체크하면 우리가 몇 년 전 네이버블로그에서 사용하던 스마트에디터2로 글을 작성할 수 있습니다.

 

파일질라

화면 상에서 없애고 싶은 요소들, 이를 테면 버튼이나 하단의 카피라이트 문구 등...이 있다면 파일질라를 열어 해당 코드를 지우면 됩니다. 예를 들어 카피라이트 문구는 public_html/tail.php 파일을 열어서 COPYRIGHT © 2017 by Avocado edited by daehakwan 이 부분을 지워주시면 됩니다. 파일 편집은 기본 메모장 프로그램으로 가능해요!

'관리자'에서 수정할 수 없는 폰트의 색상이나 크기를 설정하고 싶다면 먼저 해당 텍스트를 (PC 크롬 기준) 마우스 우클릭-검사-computed에서 해당 스타일을 다루고 있는 파일을 찾아보세요.

style.css:3 클릭

파일 위치 확인

뭔가 코드를 수정해야 할 일이 생긴다면...? (너무무서워) 대충 아래 정도로만 알고 모르는 건 챗지피티나 코딩 커미션주님께 여쭤보세요. 아보카도 에디션은 그누보드5를 기반으로 만들어졌기 때문에 그렇다고 지피티에게 먼저 일러주면 정확도가 올라갑니다. 디자인을 고치는 건 그렇게 어렵지 않지만 어떤 기능을 손보는 건 상대적으로 방대한 양을 수정해야 합니다. 혼자 하기 어렵다면 갠홈 커미션을 찾아 맡겨보심이...!

html/css/js의 차이: 갠홈을 장난감 성에 비유해봅시다. html이 성을 쌓는 블록이라면 css는 성의 디자인입니다. (그런데 간혹 html에서도 <style> 태그를 사용해 디자인 설정을 할 수 있음) js는 성의 시스템입니다. 예를 들어 사람이 성 안에 들어오면 자동으로 조명들이 켜진다, 같은 설정..

+ html에서의 class란.. 예를 들어 어떤 블럭에게 너는 A블럭이야, 라고 이름을 붙여준 것과 같습니다. css에서 class이름(A블럭)을 사용해 스타일을 지정할 수 있습니다.

태그를 열었다면 닫아줍시다: <br>(줄바꿈) 같이 여닫음이 없는 태그도 있는데 대부분의 코드는 <script></script>처럼 시작과 끝이 있어요. 문법 오류가 나지 않게 잘 체크합시다.

 

 

 

IV. 멋진 스킨 적용하기

다운 받은 게시판 스킨은 압축 해제 후 폴더 째로 public_html/skin/board 폴더에 옮겨줍니다. 압축을 해제했을 때 (폴더A)/(폴더A')/(파일들) 이런 식으로 되어 있는 경우 폴더A'를 째로 옮겨줍니다.

편의 상 스킨 이름을 바꾸고 싶을 땐 파일질라에서 폴더명을 바꾼 다음 '관리자'의 게시판 설정에서 바꾼 이름으로 스킨을 재설정해주면 됩니다. 스킨명을 바꿔도 따로 코드가 꼬이거나 하지 않아요.

+

(홍보) 글러를 위한.. 글러가 아니어도 블로그st로 갠홈에 기록하고 싶은 분을 위한... 스킨이 있습니다. 제가 만들었어요. 원본은 bbs 스킨입니다. 배포 링크

들여쓰기 온오프, 글씨 크기 조절 가능한 뷰어와 부제목 기능을 제공합니다. 유튜브 url을 입력하면 뷰어에서 자동 임베딩 출력됩니다.

장문의 글 로그 백업하기 정말 좋겠죠... 글러 트친 어서 영업해..

 

 

 

V. 마치며

뭔가 내가 바꾼 게 적용되지 않았다! 혹은 한국어가 갑자기 외계어로 보인다! 하는 경우> 강력 새로고침(Ctrl+Shift+R)으로 대부분 해결됩니다.

이 글로 갠홈에 입문하시는 분이 한 분이라도 생긴다면 정말 기쁠 것 같습니다,,,

모두 행복한 갠홈 생활합시다!