지난 번엔 게시글에서는 도메인 결제 방식을 안올렸는데 

이번엔 실제 결제를 하면서 진행하는 것을 올려드리도록 하겠습니다.


저는 도메인/호스팅 업체를 찾는게 귀찮으므로 닷홈(https://www.dothome.co.kr/)을 이용하도록 하겠습니다.

경쟁사 비교하면 더 좋은 곳 찾을 수 있다는 건 다들아시죠?

방식은 거의 똑같으니 다른 업체에서 진행해도 됩니다.


1. 회원가입 및 로그인 진행합니다.

2. 도메인 먼저 구매하도록 하겠습니다.


도메인 > 도메인 신청


 2.1 내가 쓰려는 도메인 입력

2.2 체크 박스 체크 

2.3 검색


저는 www.okayoon.com으로 도메인을 신청하기 위해 

okayoon을 입력 후 체크박스 .com을 체크하고 검색했습니다.


만약 도메인을 누가 쓰고 있다면 사용중으로 나올것이에요~

↓↓ 이렇게


도메인 사용중이지 않다면  



사용하려는 도메인 체크 후 기간 및 가격을 확인 한 후 신청해주세요.

저는 1년만 할 것이므로 19,800원입니다.


그리고


정보를 성실히 작성해 줍니다.

만약 담당자가 가입자와 다르다면 저렇게 선택박스를 변경한 상태로 정보를 입력하면 됩니다!


그리구 결제해주면


마이닷홈 > 도메인관리 > 도메인사용현황에서 확인 가능합니다.


3. 호스팅 신청을 해봅시다.


무제한 웹 호스팅 > 무제한 웹 호스팅 신청


 

저는 일단 바로 구매보다는 무료를 먼저 써보겠습니다.

예전에는 트래픽 제한이 있었는데 현재는 없더라구요.



트래픽 무제한^^

디스크는 내가 홈페이지에 얼마나 많은 이미지, 동영상, 페이지 등을 올릴 수 있는지고

트래픽은 방문하는 사람들에게 전송하는 데이터의 양입니다.

무제한이 아니라면 트래픽초과로 사이트가 문을 닫아용.


신청하기 누르면 페이지 이동되고 해당 항목들 작성해주면 됩니다.


여기서 설명 드릴게 있다면 

테마 선택을 할 것입니다. 

워드프레스 체크.



공간만 설치는 공간안에 아무것도 없는거고

워드프레스, XE, 그누보드는 파일을 설치해주는 것입니다.


기본설치 한글판, 영문판, 그외 저것들은 뭐지 하겠는데

무료 테마 제공하는 항목입니다.

지금 안 깔아도 추후 깔수 있으니 일단 그냥 진행하겠습니다.


아이디 입력 후 중복확인 누르면 무료제공 주소 및 홈페이지 주소 항목 변화를 볼 수 있습니다.


도메인 구매한 거 연결 하고 FTP 비밀번호, DB 비밀번호는 파일 올릴때 사용하므로 기억해두세요.


FTP는 내가 홈페이지 저장소에 파일 올릴때 필요하고.

DB는 데이터 저장된 내용 관련해서 필요할 것입니다. (예를 들어 가입 회원 확인 등)


워드프레스는 PHP 언어 기반으로 버전을 설정해 줄 것인데 

저는 그냥 잘 모르니 5.6 기본으로 되어있는거 선택하겠습니다.

(제작년인가 작년인가 7.0이 호환이 안되는 부분도 있다는 얘기를 살짝 들은거 같기도...)


관리자 아이디, 관리자 암호는 내 도메인 접속 > 관리자 페이지 로그인 ID, 암호 입니다.


신청하기 누르면


쉽쥬?


들어가봅시다.



이렇게 뜬다면 워드프레스가 제대로 설치된 것입니다^.^


다음 글에서 워드프레스 관리자 설정을 해보도록 하겠습니다~


호스팅, 도메인 등록 방법 알아보기


호스팅 업체 등록 시 워드프레스 설치를 자동으로 해주지 않는다면 어떻게 설치를 하는지에 대해 알아보겠습니다.


FTP란? 

파일 전송 프로토콜은 TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜이다. 파일 전송 프로토콜은 TCP/IP 프로토콜 테이블의 응용 계층에 속하며, 역사는 오래 되었지만 지금도 인터넷에서 자주 사용된다............ 블라블라  - 출처 : 구글사전


간단히 말하면 파일 전송 프로토콜입니다.

FileZilla는 웹 서버에 내가 소스(파일,이미지, 동영상등..)를 올릴 때 사용하는 프로그램입니다.


1.
워드프레스 파일 설치
워드프레스 홈페이지에 접속 합니다. 
https://wordpress.org/ 
https://ko.wordpress.org/

두 사이트 모두 워드프레스 공식 홈페이지이며 워드프레스 파일을 다운로드 할 수 있습니다.


메인 페이지 좌측 상단에 'get wordpress' , '워드프레스 얻기' 버튼을 클릭하여 다운로드 페이지로 이동합니다.




다운로드 페이지에서 가운데에 있는 다운로드 버튼을 클릭하면 워드프레스 파일을 받을 수 있습니다. 
(버전은 다를 수 있습니다)



받은 파일 압축을 풀어주면 압축이 풀린 파일이 받아지는데, 

이 파일이 서버에 올라가야 워드프레스 설치가 완료되는 것 입니다. 


이 파일을 FTP로 올리는 작업을 할 것 입니다. (그러기 위해서는 도메인,호스팅 등록 작업을 진행 한 후어야 합니다.


2.

FTP 프로그램을 다운로드


서버에 워드프레스 파일을 업로드하기 위해서는 FTP 파일이 필요한데,

저는 FTP 파일 중에 '파일질라' 프로그램을 이용 할 것 입니다.

이 프로그램을 이용하는 이유는 사용하기 쉬우며, 유명하며, 오픈 소스 (자유 소프트웨어) = 무료 이기 때문입니다.




다운로드 받기 위해서 검색 포털에서 '파일질라 다운로드' 검색 후에 download 페이지로 이동해줍니다. ( 다운로드 바로가기 )




다운로드 페이지에서 자신의 운영체제를 확인 한 후 다운로드를 진행해줍니다.

Download FileZilla Client 클릭 > Download 클릭


다운로드 완료 후 다운 받아진 .exe 파일을 실행 해 줍니다.

 FileZilla 다운로드 매니저가 실행됩니다.



I Agree 클릭 



사용 옵션 선택 후  Next > 클릭

(해당 컴퓨터 모든 유저가 사용할 것인지, 오직 나만 사용할 것인지를 결정하여 진행하면 됩니다.)



components 다운로드 되는 것 같은데 그냥 Next >



다운로드 경로를 변경하고 싶다면 변경하고 아니라면 Next >



Next > 



저기 체크되어있는 부분 해제하고 Next >  

( Avast Free Antivirus 프로그램 다운로드 받고 싶다면 체크 한 상태로 Next > )



저기 체크 부분 해체 후 Next > 

(Opera 브라우저 다운로드 받고 싶다면 체크 한 상태로 Next > )



다운로드 로딩 창으로 변경이 되었다가(순식간에 되버려서 캡쳐를 못했습니다.)

다운로드가 완료되면 Finish 버튼이 있는 창으로 변경되는데 Finish 버튼을 클릭해 줍니다.



파일질라 프로그램 접속 화면 입니다. 


여기서 내 호스팅 서버에 연결을 하려면

빨간 박스 상자 안에 있는 호스트, 사용자명, 비밀번호, 포트정보를 입력한 후에 빠른 연결을 눌러주면 됩니다.

포트 같은 경우는 공백으로 둬도 됩니다.(공백일 경우 기본 포트 (21) 사용합니다)


호스트, 사용자명, 비밀번호 등의 정보는 본인이 호스팅등록을 할 때 입력하게 됩니다.


그 정보를 이용해서 FTP 연결하면 됩니다.



연결이 되었다면 좌측은 내 로컬(내 컴퓨터)이고 우측은 호스팅 서버입니다.(이미지는 서버연결이 안 된 상태라 문구가 뜨고 있습니다)

서버 쪽 파일 루트는 아무것도 없는 상태이기때문에 '/' 이렇게 나와있을 것입니다. 


워드프레스 파일을 서버에 올려서 설치를 완료하려면 

좌측의 내 로컬에 있는 wordpress 폴더 루트를 찾아서 파일을 드래그해서 우측에 있는 내 호스팅 서버에 드롭해 주면 됩니다.

혹은 파일 우측마우스 > 업로드 버튼 클릭을 해주면 워드프레스 설치 완료입니다.





1. ctrl + x 누르면 옵션 창 뜹니다.


2. Windows PowerShell(l) 클릭하거나 l(L) 누르면 창이 하나 뜹니다.


3. 'winver' 친 후에 엔터를 누르면 버전 정보가 적혀있는 팝업창이 뜹니다.




웹 벤치마킹(Benchmarking)



'기업이 우수한 타기업의 제품이나 기술, 경영 방식을 배워서 응용하는 일. 미국 기업에 처음 도입되어 다른 나라에 확산되고 있는 새로운 경영 수법임.' 

 - 출처 : 구글 사전

간단히 말하면 다른 사이트의 디자인, 기획, 기술 등을 참고해 사용한다는 것 입니다.


그러기 위해서는 먼저 내가 어떤 홈페이지를 제작할 것인가를 정해야 합니다.

정하지도 않고서는 어떠한 곳도 벤치마킹 할 수 없습니다.

(카페 차릴 건데 자동차 정비소 디자인 보고 있으면 시간낭비죠?)


저는 강아지를 주제로 잡았다고 예시를 들겠습니다. (쇼핑몰x)


1.
관련 키워드를 검색하는 방법

주제의 키워드를 검색 포털(네이버, 구글, 다음 등)에 검색합니다. 


- 강아지 

- 펫

- 애완견 


검색해보겠습니다.


검색하고 나온 사이트들을 방문하여 벤치마킹하면 됩니다.


2. 

웹 사이트들을 소개, 평가하는 홈페이지들을 참고

EX ) 굿디자인 웹  , 디비컷 


상단 - 제작사별, 타겟층별, 표현방법, 디자인컨셉, 색상별 확인 가능합니다.

좌측 - 카테고리로 정리되어 있는 부분 확인 가능합니다.


만약 원하는 카테고리가 없다면 상단에 제작사별, 타겟층별, 표현방법, 디자인컨셉, 색상별에서 본인이 원하는 것을 골라 찾아봅시다.

저는 강아지가 주제인데 애견관련 카테고리가 없었기 때문에 상단의 디자인 컨셉에서 골랐습니다.


강아지 = 귀여움 




자 이렇게 열심히 사이트를 찾았지만 무엇을 벤치마킹 하라는 건지...라고 생각이 드실 것 입니다.


간단히 몇가지만 정리해보면 도메인주소, 홈페이지 테마(색상), 레이아웃(메인, 서브페이지, 팝업), 디자인, 콘텐츠, 기능 등...이 될 수 있습니다.

(저는 기획자 + 디자이너가 아니기 때문에 이 정도만...)

※ 참고하는거지 통째로 베끼면 안됩니다.


1. 도메인주소

도메인 주소는 무엇을 참고하냐면? 강아지관련 사이트면 puppy, dog 관련 키워드가 들어가면 사용자가 기억하기 쉽다 = 사이트 주소 입력 방문이 쉽다.

www.dog.com = 찾아오기 쉽겠죠?

www.dogzzang.com = 찾아오기 쉽겠죠?


이러한 점을 이용하거나.. 아니면 내 사이트명과 사이트 주소을 맞추어도 됩니다.

많은 사이트들이 그렇습니다.


네이버 = naver.com

다음 = daum.net

구글 = google.com

삼성 = samsung.com


2. 테마, 레이아웃, 디자인, 콘텐츠, 기능 등

'카카오헤어샵'과 '튼튼 쑥쑥 어린이 박람회' 사이트를 예로 들어보겠습니다. (시간이 지남에 따라 사이트 디자인이 다를 수 있습니다)


빨간 영역은 큰 레이아웃으로 대충 나누어 둔 부분입니다.


- 카카오헤어샵은 카카오의 테마에 맞추어 노란 색상이 주를 이룹니다.

- 제품 소개페이지다보니 서브페이지들이 존재하지 않고 단일 페이지입니다. (메인하나)

- 메인 이동이 간편하게 오른쪽 동그라미 네비게이션이 존재합니다.

  클릭 시 해당 영역으로 스크롤 이동.(기술)

- 공유를 목적으로 둔 소셜공유 버튼이 존재합니다.


'튼튼 쑥쑥 어린이 박람회' 사이트 입니다.

빨간 영역은 큰 레이아웃으로 대충 나누어 둔 부분입니다.


- 최상단에 메인 네비게이션이 존재합니다.

  페이지가 존재하기 때문에 필요합니다.

- 원하는 페이지로 갈 수 있는 서브 네비게이션이 있습니다.

  박람회 관련된 페이지들을 다이렉트로 갈 수 있게 해두었습니다.

- 서브페이지들을 참고 할 수 있습니다. 

  회사소개페이지, 게시판페이지 등..

- 노출되길 원하는 게시판이 있기 때문에 메인에서 한 눈에 볼 수 있도록 해두었습니다.

- 주최, 후원하는 회사 또는 단체의 로고를 메인에 넣어두었습니다.

- 회사 카피라이터를 하단에 작성해두었습니다.


카카오 헤어샵과는 다르게 튼튼쑥쑥 어린이 박람회 사이트의 레이아웃 박스가 여러개로 나뉘는 이유를 생각해보는 것도 좋습니다.

제 생각으로는 카카오헤어샵 사이트는 단지 제품을 소개, 광고하는 페이지이기때문에 심플한 것이고 

튼튼쑥쑥 어린이 박람회 사이트는 카카오헤어샵과는 목적자체가 다르기 때문이라고 생각합니다.(많은 정보가 필요)


이런식으로 크게크게 나누어서 레이아웃을 참고하다 보면 내 사이트는 어떻게 해야 좋을 것일까 어떤 게 필요할까 등이 어느정도 보일 것 같습니다.


또한 홈페이지 주제 말고 목적도 중요합니다.

강아지를 주제로 삼고 목적이 없다면 둘 다 사용가능하기 때문에 벤치마킹이 힘들어집니다.


강아지 소개 사이트 = 카카오 헤어샵

유기견 모임 사이트 = 쑥쑥 어린이 박람회


주제 + 목적 등을 결정하여 벤치마킹해야 좋은 결과를 얻을 수 있을 것 같습니다!


+ Recent posts