홈페이지에 사이트 이미지로고 넣기


나만의 사이트를 구축할 때 만들고 보고 싶은 것이 바로 나만의 사이트 로고입니다.
홈페이지에 사이트 로고를 넣기 위해서는 먼저 사이트 이미지를 포토샵등 이미지 툴을 통해서 제작해야합니다. 여기에서는 로고 이미지는 만들어졌다는 가정 하에 진행하도록 하겠습니다.
기본적으로 이미지 로고를 만들기 위해서는 포토샵이나 포토스케이프등 이미지 도구를 사용할줄 알아야합니다. 여기에서는 따로 포토샵에 대한 설명을 하지는 않습니다.

그렇지만, 아직 포토샵을 다루지 못하는 분들은 워드프레스를 공부하면서 틈틈히 짬을 내어서 포토샵을 공부하시기 바랍니다. 아무래도 디자인이 훌륭하지 못한 사이트는 방문자의 재방문율을 낮출 가능성이 많기 때문입니다.

현재 블로그의 사용자화면은 다음과 같이 구성되어 있습니다. 



실습용으로 제작한 이미지 로고는 왼쪽 상단에 화살표가 표시된 부분에 배치하도록 하겠습니다.



로고 이미지를 웹사이트에 배치하기 위해서는 위젯기능을 사용해야 합니다. 워드프레스 관리자 화면에서 왼쪽 메뉴에서 위젯을 클릭합니다.



위젯 관리 화면에 들어습니다. 이미지 로고는 텍스트 위젯을 활용해서 보여줄 수 있습니다. 원래 텍스트 위젯은 텍스트나 글을 보여주는 위젯이지만 HTML 기능을 지원하기 때문에 텍스트 위젯에 HTML 소스를 입력해서 이미지를 보여줄 수 있는 것입니다.



텍스트 위젯을 마우스로 누른 상태에서 주 사이드바 영역의 맨 위부분으로 드래그합니다.





주 사이드바 영역에 텍스트 위젯이 이동되면서 위젯이 이름과 본문을 입력하는 창이 뜹니다. 본문 입력 영역에 로고이미지의 HTML 소스를 입력하면 됩니다. 일단 왼쪽 하단에 닫기 링크를 클릭합니다.  





텍스트 위젯이 상단에 배치된 것을 확인할 수 있습니다.



로고이미지로 사용될 HTML 소스를 만들겠습니다. HTML은 웹표준에서는 반드시 알아야하는 필수 항목입니다. 워드프레스를 공부하기로 마음먹었다면 HTML 역시 틈틈히 공부하는 것이 좋습니다.

임시 글을 하나만들어서 이미지에 대한 HTML 소스를 가져오겠습니다. 왼쪽 메뉴에서 글 > 새 글 쓰기를 클릭합니다. HTML 이미지 소스만 필요하고 삭제할 글이기 때문에 제목은 별도로 입력하지 않아도 됩니다.




아래 미디어 추가를 클릭해서 로고로 사용할 이미지를 업로드 합니다. 미디어 추가 버튼을 클릭합니다.



이미지 화일을 업로드 할 수 있는 화면이 나옵니다.



왼쪽 파일 업로드 탭을 클릭하여 로고 이미지 화일을 업로드 합니다.






사이트 로고로 사용할 이미지가 업로드 되었습니다. 화면 하단에 글에 삽입하기 버튼을 클릭합니다. 


본문 입력 HTML 편집기에 이미지 화일이 로딩되었습니다. 




이미지를 마우스로 클릭합니다. 마우스로 클릭하면 이미지가 선택되고 옵션이 뜹니다. 연필 모양의 편집 아이콘을 클릭합니다.



이미지 상세화면이 나타납니다. 표시 설정의 연결 부분에 URL이 보입니다. 이 부분은 이미지를 클릭했을 때 화면이 이동하는 URL 경로입니다.




연결의 옵션부분을 미디어 파일에서 사용자 정의 URL로 변경합니다.


아래 URL 부분은 아직 연결할 페이지가 없으므로 삭제합니다.




고급 옵션 부분에서 새 창/탭 링크 열기 부분에 체크를 한 뒤에 업데이트 버튼을 클릭합니다.



다시 편집기 화면이 나타납니다. 편집기 오른쪽 상단에 텍스트 탭 부분을 클릭합니다.



이미지에 대한 HTML 소스가 나타납니다.




텍스트를 선택해서 복사합니다.



이제 다시 외모 > 위젯 화면으로 이동하여 주 사이드바에 텍스트 위젯을 클릭해서 펼칩니다.



조금전에 복사한 이미지 URL을 텍스트 위젯의 본문 항목에 붙여넣고 저장하기 버튼을 클릭한 뒤에 닫기 버튼을 클릭합니다.



로고 이미지 적용을 확인하기 위해서 화면 왼쪽 상단에 사이트명을 Ctrl 을 누른 상태에서 클릭합니다.



사이트에 왼쪽 상단에 사이트 로고가 정상적으로 생성된 것을 확인 할 수 있습니다.







워드프레스에는 위젯과 플러그인이라는 개념이 있습니다. 둘다 워드프레스에 기능을 확장시키는 도구이지만 위젯은 주로 사이드바에 추가해서 사용하는 보여지는 프로그램인 경우가 많습니다. 하지만 위젯도 크게보면 하나의 플러그인이라고 보아도 무방합니다. 

간단하게 생각하면 위젯은 화면의 사이드바에 얹어 놓고서 사용하는 기본 프로그램들이고 플러그인은 눈에 보이지 않지만 내 사이트를 더욱 유용하게 만들어주는 기능을 하는 프로그램입니다.

그렇다면, 유용한 플러그인과 위젯을 많이 사용하면 사용할수록 좋을까요? 그렇지 않습니다. 소프트웨어에도 과유불급의 법칙은 적용됩니다. 워드프레스도 하나의 소프트웨어 프로그램입니다. 프로그램을 많이 사용한다면 서버의 메모리나 CPU 용량을 잡아먹을 것입니다.
그래서 위젯과 플러그인의 최적화 이슈는 발생합니다.
무분별하게 위젯과 플러그인을 남용하면 웹사이트의 속도는 현저하게 떨어집니다. 그래서 꼭 필요한 위젯과 플러그인만 선별하고 설치하는 지혜가 필요합니다.

위젯 관리 화면 구성

위젯은 외모 메뉴의 서브 메뉴로 존재합니다. 왼편 메뉴바에서 위젯을 클릭하면 다음과 같은 화면이 나옵니다.



위젯 화면은 세 가지 영역으로 구분됩니다.
1번 사용할 수 있는 위젯 영역
2번 위젯 영역(현재 사이트에 위젯을 적용하는 영역)
3번 비활성화 위젯 영역

현재 사이트에 위젯을 넣는 부분은 2번 영역입니다. 워드프레스에서 위젯을 사용하는 방법은 간편합니다.
사용하고자 하는 위젯을 드래그하면 됩니다. 즉, 1번 영역에서 사용할 수 있는 위젯을 2번 영역으로 드래그하면 현재 사이트에서 위젯을 사용할 수 있습니다.


위젯 관리하기

사용자 정의에서 관리하기 버튼을 클릭하면 현재 등록된 위젯과 위젯이 적용된 웹사이트 화면을 볼 수 있습니다. 사용자 정의에서 관리하기 버튼을 클릭합니다.



일종의 위젯 미리보기 화면이라 할 수 있습니다. 왼쪽은 현재 사용되는 위젯 종류가 나오고, 오른쪽에는 위젯이 적용된 미리보기 화면이 나타납니다. 위젯을 클릭해서 세부 옵션이나 속성을 설정할 수 있습니다.



주 사이트바 옵션

그럼 검색창에 이름을 넣어보겠습니다.  왼쪽에 주 사이드바를 클릭합니다.


주 사이드바를 클릭하면 등록된 위젯이 아래와 같이 펼쳐집니다.



여기서 다시 검색 부분을 클릭하면, 검색 옵션이 펼쳐지면서 검색창의 이름을 입력할 수 있는 타이틀 항목이 나옵니다.



타이틀에 사이트 검색이라고 입력합니다.


입력을 하자마자 오른쪽 웹사이트 미리보기 화면에 바로 적용되는 것을 확인할 수 있습니다.     



위젯 부분은 이런 식으로 하나하나 입력하고 눌러보면서 사이트에 적용되는 결과를 확인하면 편하게 작업을 할 수 있습니다. 워드프레스는 테마마다 기본 제공되는 위젯도 상이합니다. 따라서 모든 옵션들을 클릭해보고 어떻게 사이트에 적용되서 보여지는 지를 확인하는 것이 중요합니다. 내게 필요한 기능은 취하고 필요없는 기능은 비활성화 하면 됩니다.


드래그로 위젯 배치하기


이번에는 드래그로 위젯을 배치하겠습니다. 왼쪽 메뉴에서 위젯을 클릭하여 위젯 관리화면으로 이동합니다.





위젯 관리 화면이 나타납니다. 이제 웹사이트에 달력 위젯을 달아보려고 합니다. 아래 화면에서 있는 달력 위젯을 사용해서 웹사이트에 배치 할 것입니다. 워드프레스에서는 마우스 드래그로 간편하게 위젯을 배치할 수 있습니다.




아래와 같이 1번 영역(사용할 수 있는 위젯 영역)에 있는 달력 위젯을 2번 영역(웹사이트 적용 영역)의 콘텐츠 사이드바에 배치하도록 하겠습니다. 작업 방법은 간단합니다.



1번 영역에 있는 달력을 마우스로 클릭한 상태에서 2번영역의 콘텐츠 사이드바로 드래그합니다.



드래그가 완료되면 콘텐츠 사이드바 안에 달력이 들어간 것을 확인할 수 있습니다.



화면에서 사용자 정의에서 관리하기 버튼을 누릅니다.


 
오른쪽에 달력이 나타남을 확인할 수 있습니다. 이렇게 직접 배치를 해보면서 사이트의 어느 위치에 위젯이 위치하고 나타나는지 알 수 있습니다. 스스로 하나하나 설정하고 확인해가면 콘텐츠 사이드바 영역에 추가하면 이렇게 보여지는구나 하고 저절로 이해가 될 것입니다.
위젯의 옵션을 적용하고 확인하는 수고는 반드시 필요합니다. 실제 실습해보지 않고 머리로만 이해했을 때는 실무에서 사용하기가 어렵습니다. 시간이 걸리더라도 적용해 보는 것이 시간을 절약하는 길입니다.




이번에는 1번 위젯영역에서 태그 구름을 드래그해서 2번 영역의 푸터 위젯 영역으로 드래그합니다.




타이틀 이름은 태그 구름들이라고 입력하고 저장하기 버튼을 클릭합니다




이번에는 왼쪽 상단에 사이트명을 클릭하여 적용된 웹사이트를 확인합니다.
사이트 하단에 태그 구름들 이라는 항목이 생긴 것을 확인할 수 있습니다. 아직 작성된 태그가 없어서 목록은 나타나지 않지만 푸터 위젯영역이 이곳이라는 것을 알 수 있는 것입니다.




비활성화 위젯 영역

조금전에 태그 구름들 위젯을 드래그해서 3번 영역으로 이동시킵니다.
3번 영역인 비활성화 위젯 영역은 사용자에게는 보여지지 않지만 삭제하지는 않을 때 사용하는 영역입니다. 
일반적으로 위젯을 오랫동안 사용하면 사용했던 설정과 내역이 보관되어 있습니다. 그렇지만 위젯을 삭제하게되면 그 모든 것이 한 순간에 날라갑니다. 이 때는 사용자에게는 보여지지는 않지만 위젯을 보관만 해두는 기능으로 비활성화 기능을 사용할 수 있습니다.





외모 메뉴는 워드프레스 사이트의 외관을 디자인 하는 곳입니다. 한국어로 외모로 번역이 되어서 사람의 외모가 연상되기는 하지만 워드프레스의 외관을 꾸미는 곳이라 생각하면 됩니다.



테마

테마는 워드프레스의 꽃이라 할 수 있습니다. 워드프레스가 전세계 CMS 시장을 절대적으로 석권한 것에 있어서 테마의 공을 부인할 수 는 없습니다. 워드프레스는 다양한 테마를 통해서 성장해왔다고 해고 과언이 아닙니다. 테마는 원래 원어가 씸(Theme)이지만 우리에게는 스킨이라고 하는 것이 이해하기가 편합니다. 

우리나라에서 가장 많이 사용하는 네이버 블로그의 경우에는 블로그 스킨의 종류나 갯수가 그리 많지 않고, 스킨을 적용해서 블로그 구조를 바꾸는 것 역시 간단한 일은 아닙니다. 하지만, 워드프레스의 경우에는 워드프레스 공식 사이트에서 제공하는 테마만 해도 2,042개가 넘고 씸포레스트등 유료 테마와 템플릿이  5천7백건이 넘었습니다. 지금 이 순간도 전세계의 수많은 디자이너와 개발자들은 자발적으로 멋진 테마를 만들어 내고 있습니다. 테마의 갯수가 수천개가 넘다보니 나의 사이트에 적합한 테마를 잘 고르는 것이 중요합니다.


워드프레스 공식사이트 테마 2,042개, 2015년 10월22일 기준 




유료 사이트 씸포레스트의 테마와 템플릿 5,710개, 2015년 10월22일 기준



워드프레스에 테마를 설치하거나 변경하려면 관리자 페이지에서 테마 화면에 들어가야 합니다.
왼쪽 메뉴바에서 외모 > 테마를 클릭합니다.

이 화면은 테마를 관리하기 위한 화면입니다. 현재 적용된 테마는 맨 왼쪽 상단에 위치하며, 활성화라는 문구가 붙어있습니다.



현재 활성화 되어 적용된 테마는 왼쪽에 나옵니다. 현재는 Twenty Fourteen이 적용되어 있습니다.



사용자 정의하기 버튼을 클릭하면 활성화된 테마의 세부 설정을 할 수 있습니다. 왼쪽 메뉴나 활성화 테마에서 사용자 정의하기 버튼을 클릭합니다.



사용자 정의하기를 클릭하면 다음과 같은 화면을 볼 수 있습니다. 왼쪽에는 테마에 대한 설정을 할 수 있고, 왼쪽에서 설정을 하면 설정된 내용이 오른쪽 화면에 나타납니다. 오른쪽 화면은 일종의 미리보기 화면과 같은 기능을 합니다.



왼편에서 테마의 세부 옵션을 수정할 수 있습니다. 현재 적용된 Twenty Fourteen 테마의 경우에는 테마의 옵션이 사이트 제목과 태그라인, 색상, 헤더이미지, 배경이미지, 위젯, 정적인 전면 페이지, 특성 콘텐츠 등을 변경할 수 있습니다.

이런 항목들은 각각의 테마마다 다릅니다. 테마에 따라서 테마 옵션이 차이가 나는 것입니다.
워드프레스가 쉬운 것 같지만 쉽지 않다고 하는 것은 스스로 수많은 테마들을 사용해보고 옵션들을 적용하면서 내게 적합한 테마를 찾아가는 과정이 있어야하는 것 때문일지도 모릅니다. 물론 최신 테마들을 사용하다보면 버그테스터가 되기도 합니다.




그럼 Twenty Fourteen 테마의 옵션 몇 가지를 살펴보도록 하겠습니다.

사이트 제목과 태그라인

이곳에서는 내가 만드는 웹사이트의 제목과 태그라인을 수정할 수 있습니다. 


색상

테마의 색상을 변경할 수 있는 곳입니다.





헤더 이미지

웹사이트 상단 헤더에 이미지를 넣기 위해서는 이곳에서 새 이미지 추가 버튼을 클릭해서 이미지를 업로드하면 됩니다.




테마 추가하기

새로운 테마를 추가하려면 두가지 방법이 있습니다. 

첫째는 워드프레스 공식사이트나 유료 테마사이트 등에 들어가서 테마를 로컬에 다운로드 받은 뒤 설치하는 방법
둘째는 테마 메뉴에서 새로 추가 버튼을 클릭해서 바로 설치하는 방법입니다.

여기서는 두번째 방법을 사용해 보도록 하겠습니다. 새로 추가 버튼을 클릭합니다.




새로 추가 버튼을 클릭하면 워드프레스 유료 테마사이트와 비슷한 모양의 테마 추가 화면이 나옵니다.



테마 추가에 인기 메뉴를 클릭하겠습니다. 



인기 메뉴를 클릭하면, 왼편의 숫자가 2,042라고 나옵니다. 이것은 현재 워드프레스 공식사이트에 등록된 테마의 숫자입니다. 




테마는 인기도 순으로 나타납니다. 테마의 이름을 알고 있다면 오른쪽의 테마 검색 필드에 입력을 해서 검색할 수도 있습니다. 


이번에는 특성 필터 메뉴를 클릭합니다.



특성 필터 메뉴를 클릭하면 색상, 레이아웃, 특성, 주제에 따라서 2,042건의 테마를 선별해서 조회할 수 있습니다. 조회하기 원하는 항목 체크박스에 체크하고 필터 적용 버튼을 클릭하면 됩니다.



검색을 통해서 테마를 찾고 설치해 보도록 하겠습니다. 검색창에 Gridsby 를 넣고 검색을 합니다. 


검색된 테마 위에 마우스를 가져다 대면 설치 버튼이 나타납니다. 설치 버튼을 클릭하면 해당 테마가 설치됩니다.
설치 버튼을 클릭합니다.




테마의 설치작업이 진행되고 완료되었습니다.



왼쪽 메뉴바에서 테마 메뉴를 클릭합니다.




설치된 Gridsby 테마가 두번째에 보입니다. 




이제 테마를 활성화 하겠습니다. Gridsby 테마에 마우스를 가져다 대면 활성화 버튼이 나타납니다. 활성화 버튼을 클릭합니다.



Gridsby 테마가 활성화 되고 맨 앞쪽에 위치하게 됩니다. 테마가 적용된 사이트를 확인하기 위해서 왼쪽 상단의 사이트 이름을 클릭합니다.



다음과 같이 테마가 적용되었음을 확인할 수 있습니다. 테마 적용을 확인한 뒤에는 다시 원래대로 Twenty Fourteen 테마로 변경합니다. 





댓글 메뉴

워드프레스 관리자 화면에서 왼쪽 메뉴바의 댓글 메뉴를 클릭하면 다음과 같은 댓글 관리 화면이 나타납니다.

댓글 메뉴는 글과 페이지의 댓글을 관리하는 곳입니다. 댓글에 대한 승인 처리를 할 수 있고, 부적절한 댓글에 대해서는 스팸 처리를 해서 댓글을 관리할 수 있습니다.



댓글을 관리하는 것은 중요합니다. 일반적으로 스팸글들이 댓글을 통해서 들어오기 때문입니다. 스팸글을 다는 로봇은 갈수록 지능이 진화하고 있습니다. 그렇지만 로봇으로 댓글을 단 것은 사람이 눈으로 보면 확연히 구별이 갑니다. 아무리 자연어 기반의 댓글을 단다고 해고, 갑작스럽게 생뚱맞게 댓글을 다는 경우가 있기 때문입니다. 가령 오늘 날이 흐려서 비가 오고 있는데, 화창하고 좋은 날이네요. 행복한 하루되세요. 라는 글을 쓰는 경우입니다.

스팸 댓글에 대한 관리를 잘하는 것이 자신의 소중한 사이트가 추락하는 것을 막는 좋은 방법입니다. 따라서 여력이 된다면  댓글을 승인하는 프로세스를 고수하는 것도 사이트 운영의 좋은 방법입니다.

워드프레스는 기본적으로 관리자가 승인하지 않은 댓글은 보여지지 않도록 설정되어 있습니다. 글에 대한 관리자의 권한이 강화된 정책입니다. 그렇지만 관리자가 승인하지 않아도 방문자가 쓴 글이 바로 일반사용자에게 보이도록 할 수 도 있습니다. 그럴 경우에는 왼쪽 상단 메뉴의 설정 > 토론 에서 설정하면 됩니다.




방문자가 작성한 글에 대해서 승인처리는 일괄작업 콤보 박스를 통해서 진행할 수 있습니다. 일괄 작업 콤보 박스를 클릭합니다. 그러면 승인하지 않기, 승인하기, 스팸으로 표시하기, 휴지통으로 이동 등의 선택 항목이 나타납니다. 관리자는 이 선택 항목 중에서 하나를 선택하고 적용 버튼을 클릭해서 댓글을 관리할 수 있습니다.




위에 설명한 것처럼 워드프레스는 자체적으로 댓글 시스템이 탑재되어 있습니다. 그렇지만, 소셜 댓글을 플러그인 연동으로 사용할 수도 있습니다. 대표적으로 많이 사용하는 소셜 댓글은 디스커스(Disqus)가 있습니다. 디스커스에 대해서는 추후 플러그인 시간에 자세히 알아보도록 하겠습니다.



페이지 메뉴


워드프레스에서 글을 써서 콘텐츠를 만들 때 두 가지 방법으로 작성할 수 있습니다.
첫번째는 글이고 두번째는 페이지입니다. 글은 포스트라고도 이야기합니다.

포스트는 블로그 같이 계속되어 작성되는 동적인 글을 쓸 때 사용하고, 페이지(Page)는 회사소개나 담장자소개, 인사말, 사이트소개 등  한번 작성되면 잘 변하지 않는 정적인 글을 작성할 때 사용합니다.
간단하게 생각해서 자주 변경되지 않고 고정되는 정적인 글은 페이지로 작성을 하고, 계속 작성을 하는 동적인 글은 포스트로 작성을 하면 됩니다.

글(포스트) : 일반적으로 이해하기 쉽게 블로그의 포스팅
페이지 : 인사말이나 소개등으로 한 번 작성하면 고정이 되는 정적인 글

왼편 메뉴에서 페이지 위에 마우스를 가져다 대면 서브 메뉴로 모든 페이지와 세 페이지 추가 메뉴가 나타납니다.



모든 페이지

페이지 서브 메뉴에 모든 페이지를 클릭합니다.



모든 페이지 메뉴를 클릭하면 작성된 모든 페이지의 목록을 볼 수 있는 화면이 나옵니다.
아직까지 페이지를 만들지 않았기 때문에 샘플 페이지만 목록에 존재합니다. 글 목록을 보는 화면과 마찬가지로 페이지 목록을 보는 화면도 일괄작업과 조회를 위한 필터 기능을 가지고 있습니다.



새 페이지 만들기

페이지를 추가 하기 위해서 새 페이지 추가 버튼이나 메뉴를 클릭합니다.



새로운 페이지를 만드는 화면입니다.
포스트와 동일하게 페이지도 제목을 적고 본문을 작성하는 글이기 때문에 사용 방법은 크게 어렵지 않습니다.

이전 포스트 참고)



다만, 오른쪽에 페이지 속성이라는 옵션이 있습니다. 글에서는 카데고리와 태그 속성이 있었는데 페이지에는 페이지 속성이 있는 것입니다. 작성하는 페이지의 상위 페이지를 설정할 수 있고, 페이지 템플릿을 적용할 수 있습니다. 순서는 숫자를 입력해서 페이지 순서를 결정할 수 있습니다. 특별히 설정할 것이 없을 때는 디폴트로 그대로 놔두어도 상관없습니다.



제목과 본문을 다음과 같이 작성하고 공개하기 버튼을 클릭합니다.



페이지가 발행되었습니다. 라는 메시지가 뜨면 발행이 완료 된 것입니다. 발행이 완료되고 나면 발행 버튼은 업데이트 버튼으로 변경됩니다.





미디어 라이브러리


왼쪽 메뉴에서 미디어를 클릭합니다.



미디어 메뉴를 클릭하면 오른쪽에 미디어 라이브러리 화면이 나타납니다. 이곳에서 웹사이트의 이미지와 동영상, 오디오 및 첨부화일을 업로드하고 관리할 수 있습니다.



왼쪽에 라이브러리와 파일 올리기 라는 미디어의 서브 메뉴 두 개가 나타납니다. 라이브러리는 기존에 업로드된 미디어 화일을 선택해서 사용하는 것이고, 파일 올리기는 로컬PC에 있는 미디어 화일을 워드프레스로 올리는 기능을 합니다.



워드프레스의 장점 중 하나는 동일한 이미지나 동영상 화일 등 미디어 관련 화일들을 중복해서 업로드하지 않고 한 곳에서 관리할 수 있습니다. 네이버 블로그의 경우에는 동일한 한 개의 이미지를 여러 개의 포스팅에 추가하려면 매번 각각의 글마다 동일한 이미지를 첨부해야 합니다.

이렇게 각각의 글마다 이미지를 첨부하면 동일한 이미지인데도 로컬PC에서 서버로 중복해서 업로딩하기 때문에 비효율적입니다. 그렇지만 워드프레스는 미디어 라이브러리가 일종의 링크 기능을 제공하기 때문에 동일한 이미지를 중복해서 업로드하지 않고 미디어 라이브러리 안에서 통합 관리가 가능합니다.

해당 미디어를 관리하기 위해서는 가운데 미디어 이미지를 클릭하면 이미지 상세화면으로 넘어갑니다.



이미지를 클릭합니다.




이미지 상세화면이 나타납니다. 이 화일은 이미지 화일이기 때문에 이미지에 대한 옵션 정보가 함께 나타납니다.
이곳에서 이미지에 대한 상세 정보 및 속성을 수정할 수 있습니다.




오른쪽에 해당 이미지에 대한 URL 정보가 보입니다. 이미지 URL만 있으면, 어디에서든 중복해서 이미지를 업로드하지 않고 이미지를 사용자에게 보여줄 수 있습니다.

이미지 정보는 최대한 정성껏 입력해야 합니다. 특히 대체 텍스트는 검색엔진의 노출에도 영향을 미치므로 해당 이미지를 잘 설명하는 내용으로 충실히 입력해야 합니다. 적어도 제목과 캡션, 대체 텍스트는 꼭 입력하는 것이 좋습니다.



제목 : 이미지에 대한 제목으로 기본적으로 이미지 화일명이 들어간다. 미디어 라이브러리에서 보이는 제목이다.
캡션 : 이미지 아래에 표시되는 설명이다.
대체 텍스트 : 대체 텍스트 단어는 검색엔진에 노출되어서 내 이미지와 포스팅이 검색되는데 영향을 미친다.
설명 : 이미지에 대한 구체적인 설명, 미디어 라이브러리에서 설명부분에 표시되는 내용이다.

충실한 기입을 위해서 다음과 같이 이미지 정보를 수정합니다. 




간단한 이미지 편집 기능


미디어 라이브러리 화면에서 간단한 이미지 편집도 가능합니다. 왼쪽 가운데 있는 이미지 편집 버튼을 클릭하면 기능을 사용할 수 있습니다. 이미지 편집 버튼을 클릭합니다.



이미지 편집 화면이 나타납니다. 


간단한 이미지 도구가 보입니다. 간단하게 이미지 사이즈나 크기의 변경이 가능하고, 이미지를 자르거나 이미지를 회전하는 기능, 이미지를 좌우 상하로 반전하는 기능도 가능합니다.



이미지 자르기


이미지를 자르기 위해서는 마우스를 이미지 위에 올려놓고 마우스를 클릭해서 드래그하면 자르기 옵션이 활성화 됩니다.




이미지에 마우스를 가져다 대고 드래그 합니다.



파일올리기


왼쪽 메뉴에서 파일올리기를 클릭하면 이미지 화일이나 각종 미디어 화일을 첨부할 수 있는 화면이 나옵니다. 파일을 선택해서 이미지를 첨부하면 됩니다.



글쓰기 메뉴


워드프레스에서 본격적인 글쓰기를 하기위해서 사용하는 것이 글쓰기 메뉴입니다. 왼쪽 메뉴바에서 글 부분에 마우스를 가져다 댑니다.



마우스를 가져다 대면 글에 대한 서브 메뉴가 나오는 것을 확인할 수 있습니다.



왼쪽 메뉴에 글 부분에 마우스를 가져다 대지 않고, 바로 글 부분을 클릭하면 오른쪽 화면은 글의 목록이 나타나고, 왼쪽 메뉴는 글에 대한 서브 메뉴가 나타납니다.



왼쪽의 글 메뉴 아래에는 모든 글, 새 글 쓰기, 카데고리, 태그 이렇게 네 개의 서브메뉴가 존재합니다.



모든 글


먼저 서브 메뉴 중에서 모든 글을 클릭합니다.



모든 글을 클릭할 때 나타나는 화면입니다. 이 화면은 왼쪽 메뉴에서 글을 클릭했을 때 나타나는 화면과 동일합니다. 사이트의 모든 글을 관리하는 화면입니다.


서브 메뉴의 모든 글을 클릭하면 글의 목록이 나타나고, 해당 글에 대한 편집과 삭제 및 일괄 처리가 가능합니다. 그리고 글의 중요한 상태 정보인 글의 발행여부를 확인할 수 있습니다. 내가 작성한 글은 발행이라는 과정을 거쳐야지만 다른 사람들에게 보여지는 글로 바뀝니다. 즉, 발행이라는 과정을 거쳐야 나의 글이 인터넷의 바다에 나아가는 것입니다.(단, 호스팅 서비스를 받아야 가능합니다. 지금은 워드프레스를 로컬PC에 설치하고 작업하고 있기 때문에 다른 사람에게 보여지지 않습니다.)



글 목록 화면에서는 일괄작업 콤보 박스가 있습니다. 일괄작업 콤보 박스를 클릭하면 아래와 같이 일괄작업을 할 수 있는 목록이 나타납니다.
편집, 휴지통으로 이동의 작업을 일괄로 작업할 수 있습니다.



일괄작업 적용 방법 : 원하는 작업을 할 글을 체크박스에서 선택하고 일괄작업을 편집이나 휴지통으로 이동으로 선택한 뒤에 적용 버튼을 클릭하면 됩니다.

모든 날짜, 모든 카데고리 필더 : 날짜나 카데고리로 필터를 걸어서 원하는 조건으로 글을 조회하는 기능입니다. 지금은 글이 없어서 조회할 필요를 느끼지 못하지만 글이 100개만 넘어가도 필터 기능이 없으면 무척 불편합니다.




새 글 쓰기



서브 메뉴 중에서 새 글 쓰기를 클릭하면 글을 작성하는 편집기 화면으로 이동하게 됩니다.
새 글 쓰기는 위에서 처럼 화면 왼쪽 메뉴에서 클릭을 해도 되고 글목록이 나오는 오른쪽 화면에서 새 글 쓰기 버튼을 클릭해도 됩니다.



새 글 쓰기 버튼을 클릭합니다. 새 글 쓰기 를 클릭하면, 일반적인 HTML 편집기와 유사한 글을 작성하기 위한 화면이 나옵니다. 



워드프레스에서 글을 쓰는 화면은 다음과 같이 구성되어 있습니다.

실제 글을 입력하는 제목 입력 부분, 본문 입력부분이 있고,
글에 대한 옵션을 정의하는 공개 범위 선택, 글 형식 세팅, 카데고리, 태그 선택 부분이 있습니다.

먼저 글을 작성하고 글에 대한 옵션을 지정하도록 하겠습니다.



제목 란에 제목을 워드프레스란 무엇일까요? 와 같이 작성하고 본문 란에 내용을 다음과 같이 간략히 작성합니다.



간략한 본문 작성이 완료되었습니다. 이제는 이미지를 첨부해보겠습니다. 이미지 첨부는 미디어 추가 버튼을 통해서 할 수 있습니다. 미디어추가 버튼을 클릭합니다.


포스팅에 업로할 이미지를 드래그하거나 '파일을 선택하세요' 버튼을 클릭합니다.



미디어 라이브러리 탭에 선택한 이미지 화일이 나타납니다. 


첨부되는 이미지의 크기는 디폴트로 보통으로 선택됩니다. 원본크기로 업로드 하려면 전체 크기를 선택하면 됩니다.
설정이 완료되면 화면 우측 하단의 '글에 삽입하기' 버튼을 클릭합니다.




본문에 선택한 이미지가 추가된 것을 볼 수 있습니다.



글쓰기 집중 모드란?


 오른쪽에 글쓰기 집중모드라는 기능이 있습니다. 글쓰기 집중모드 부분을 클릭하겠습니다.





글쓰기 집중 모드를 클릭하면 그림과 같이 글쓰는 것외에는 모든 옵션이 사라집니다. 글쓰는 집중력을 높이기 위한 기능입니다.



공개하기 옵션


글의 작성이 완료되면 공개하기 옵션을 선택해야합니다. 아직 미완성이거나 공개하지 않을 때에는 임시 글로 저장하기 버튼을 클릭하면 됩니다.



미리보기는 글을 공개하기 전에 사전에 어떻게 보여지는지를 확인하는 기능이고, 임시 글로 저장하기 버튼은 저장은 되나 공개는 되지 않는 기능입니다.

워드프레스는 공개하기 버튼을 클릭해야 다른 사람이 볼 수 있는 글로 인터넷상에 퍼블리싱 됩니다. 따라서 글을 포스팅하다가 아직 미완성 중이라면 공개하기 버튼을 클릭하지 않는 것이 좋습니다. 미완성된 글에 공개하기 버튼을 클릭하면 완성되지 않은 글이 다른 사람에게 보여지기 때문입니다. 미완성된 글을 실수로 공개해버리면 구글의 검색엔진은 그 글을 완성된 글이라 판단하고서 해당 글의 완성도 점수를 줄 것입니다. 그렇다면 완성되지 않은 글이기 때문에 그 글에 대한 구글의 최적화 지수는 낮아질 것이고, 전반적으로 자신의 사이트에 좋지 않은 영향을 미치게 됩니다. 그래서 꼭 공개하기 버튼은 글의 모든 작성이 완전히 완료된 뒤에 클릭해야합니다.



글 형식 옵션


글형식 옵션은 기본은 표준으로 세팅되어 있습니다. 이미지나 비디오 위주의 포스팅을 한다면 글 형식을 이미지나 비디오로 변경해서 사용하면 됩니다.



카데고리 옵션


아직까지 카데고리를 등록하지는 않았습니다. 카데고리를 등록하고 해당글을 어떤 카데고리에 속할 지를 결정할 수 있습니다. 추후에 서브 메뉴에 있는 카데고리 기능을 설명하면서 카데고리의 등록과 구성을 어떻게 하는지 알아보도록 하겠습니다.




태그 옵션


태그는 작성한 글에 대한 일종의 요약 정보라 할 수 있습니다. 포스팅을 끝낸 뒤 해당 글을 가장 잘 표현할 수 있는 태그를 달아놓으면 글을 찾거나 관리하는데 무척 유용합니다. 사용자 입장이나 검색엔진 입장에서도 태그는 해당 글을 판별하는 중요한 정보가 됩니다.

입력 필드에 신규 태그를 입력하고 추가하기 버튼을 클릭하면 태그가 생성이 됩니다.




특성이미지 옵션


특성이미지는 하나의 포스팅 글에 여러개의 이미지를 포함하고 있을 때, 여러개의 이미지 중에서 대표해서 보여줄 이미지를 이야기 합니다.
특성 이밎 설정을 클릭해서 이미지를 첨부하거나 선택하면 됩니다.




공개하기 버튼


모든 설정이 끝나면 '공개하기' 버튼을 클릭해서 글의 내용을 포스팅합니다. 공개하기 버튼을 클릭합니다.


공개하기가 완료되면 '글이 발행되었습니다.'라는 메시지가 상단에 나타납니다.



또한 글이 발행되고 나면, 공개하기 옵션에서 공개하기 버튼은 업데이트 버튼으로 변경된 것을 확인 할 수 있습니다.





알림판 메뉴

워드프레스를 설치하고 관리자 계정으로 로그인하면 처음 나타나는 화면이 알림판 화면입니다. 왼쪽에 알림판 메뉴를 클릭해도 아래와 같은 알림판 화면이 나타납니다. 알림판은 대시보드(Dashboard)라고 생각하면 더 이해하기 쉬울수도 있습니다. 대시보드는 모든 현황을 한 분에 볼 수 있는 워드프레스의 상황실입니다. 자동차 계기판이 자동차의 전체적인 상황을 보는 곳이라 생각하면 알림판은 워드프레스의 전체적인 현황을 보는 워드프레스 계기판인 것입니다.



알림판, 외모 등의 용어가 아직은 익숙하지 않습니다. 그렇지만, 계속해서 꾸준히 워드프레스를 사용하다가 보면 국제적인 시각에서 만들어진 대표적인 CMS(Content Management System)인 워드프레스의 구조와 개념에 자연스럽게 익숙해질 것입니다. 세계에서 가장 많이 사용하는 CMS 솔루션을 시간을 내서 공부하는 것은 절대 손해보는 일은 아닙니다. 현재까지는 국내에서는 네이버 블로그가 블로그 플랫폼 시장에서는 1위를 달리고 있지만 언제까지 국내 1위 일지는 아무도 장담할 수 없는 일입니다.

알림판 화면 구성하기

오른쪽 상단에 화면옵션이라는 메뉴를 클릭하면, 알림판 화면의 구성을 재배치하거나 조정할 수 있습니다. 
화면 옵션을 클릭합니다.



화면 옵션을 클릭하면 화면에 보여주기라는 설정 화면이 나타납니다. 화면에 보여주고자 하는 부분을 체크하거나 해제할 수 있습니다. 체크하거나 해제함으로써 화면 구성이 변경되는 것을 확인 할 수 있습니다.




아래와 같이 화면에 보여주기에서 빠른 임시글과 워드프레스 뉴스의 체크박스를 해제합니다.



다음과 같이 체크 해제된 부분이 알림판 화면에서 사라진 것을 확인할 수 있습니다. 



알림판 화면 재배치하기

알림판의 각 항목을 재배치 하는 방법은 간단합니다. 만약 아래 사이트 현황 부분을 오른쪽 빈 점선 부분으로 옮겨 놓으려고 한다면, 사이트 현황 박스의 상단 제목바 부분에 마우스를 가져다 댑니다. 그러면 마우스 커서가 십자 모양으로 변경이 됩니다.



마우스 커서가 십자 모양으로 변경된 상태에서 마우스로 드래스해서 옮겨 놓으면 됩니다.



사이트 현황 제목바 부분을 클릭해서 오른쪽 빈 점선 부분으로 드래그 합니다.
반드시 점선 부분에 옮겨 놓지 않아도 됩니다. 점선이 아니더라도 드래그해서 이동할 곳으로 옮기면 옯겨집니다. 직접 드래그 해보면 옮겨지는 곳과 그렇지 않은 곳을 알게 됩니다.



사이트 현황이 오른쪽으로 이동된 것을 확인할 수 있습니다. 
화면 배치를 마우스 드래그를 통해서 간단하게 작업 하였습니다. 워드프레스는 이렇게 드래그를 이용해서 작업하거나 관리하는 부분이 많이 있습니다. 메뉴나 플러그인등에서도 드래그를 이용한 작업이 많이 있어서 워드프레스는 관리자가 CMS를 관리하고 사용하기에 무척 편리하게 제작되어 있습니다.





관리자 화면 구조 파악하고 테마 바꿔보기

지난 시간에 로컬 컴퓨터에 오토셋과 워드프레스를 모두 설치 및 설정을 완료하였습니다. 
워드프레스 설치가 완료되고 나면, 웹브라우저인 크롬이나 익스플로러에 http://localhost/wordpress 입력함으로 자신이 설치한 워드프레스 사이트에 접속할 수 있습니다.

웹브라우저를 열고 http://localhost/wordpress로 접속합니다. 화면에 다음과 같은 화면이 나타납니다.
이 화면은 워드프레스 4.2.2. 버전 설치시 기본으로 적용되어 있는 Twenty Fifteen 테마가 적용된 화면입니다.

Twenty Fiftteen 테마 적용 화면)



위의 그림에 나타난 워드프레스 사이트는 자신의 로컬PC에 설치한 것으로 아직까지 인터넷 상에서 다른 사람들이 볼 수는 없습니다. 웹호스팅 서비스하는 서버에 워드프레스를 별도로 설치하거나 자신의 로컬PC에 있는 워드프레스 화일들을 FTP를 사용해서 웹호스팅 서버에 파일을 업로드하고 호스팅을 위한 설정을 완료한 뒤에 다른 사람들에게도 보여지는 것입니다.

워드프레스 4.2.2 Powell 버전 설치시 기본 테마는 Twenty Fifteen 입니다.



Twenty Fifteen 테마는 홈페이지 느낌보다는 블로그 느낌이 강한 테마입니다. 이 테마는 워드프레스 4.1 버전이후에 탑재되었습니다.
여기서는 블로그보다 웹사이트 느낌이 있는 워드프레스 3.8 버전이후에 탑재된 Twenty Fourteen 테마를 사용하겠습니다.



테마를 변경하기 위해서는 워드프레스 관리자 화면에 로그인 해야합니다.
워드프레스 관리자 화면은 웹브라우저 주소창에 http://localhost/wordpress/wp-admin URL로 접속할 수 있습니다.
접속 경로 중에 wp-admin 부분이 있는데 이 부분은 향후 워드프레스 보안을 위해서 다른 이름으로 변경하는 것이 좋습니다.
변경 방법은 차후 보안 관련 포스팅에서 설명하도록 하겠습니다.

웹브라우저에서 http://localhost/wordpress/wp-admin 로 접속합니다. 로그인 할 수 있는 화면이 나옵니다.




워드프레스 설치 시 자신이 설정했던 사용자명과 비밀번호를 입력합니다. 입력이 완료된 뒤 로그인 버튼을 클릭합니다.




관리자 화면 구조 파악하기

워드프레스 관리자 화면입니다. 관리자 화면에서는 워드프레스 사이트를 자신의 원하는데로 변경하고 설정할 수 있는 모든 기능을 가지고 있습니다. 관리자 화면은 크게 세 가지 부분으로 나누어집니다. 첫번째, 관리자 메뉴 부분. 두번째, 알림판 사이트 현황 부분. 세번째, 자주 사용하는 기능을 모아 두는 상단 툴바 부분입니다.



1번 영역 : 관리자 메뉴
2번 영역 : 알림판 사이트 현황
3번 영역 : 자주 사용하는 기능을 모아 놓은 상단 툴바



대부분 우리나라 사람들은 티스토리나 네이버 블로그에 익숙해져 있습니다.
티스토리나 네이버 블로그에 익숙한 유저에게 워드프레스 관리자 화면은 어렵게 느껴지기 마련입니다.
워드프레스 관리자 화면에 처음 접할 때 어렵다고 느껴지는 이유는 화면 구조가 생소하고 익숙하지 않은 용어 때문입니다. 그렇지만 자주 접하면 워드프레스 화면과 용어도 금세 자기 것처럼 익숙해지게 됩니다. 


관리자 화면에서 사용자 화면으로 전환하기

관리자 화면에서 사용자 화면으로의 이동은 상단 툴바를 사용하면 간단히 화면 전환이 가능합니다.
워드프레스 화면의 왼쪽 상단에서 자신의 사이트이름에 마우스를 가져다 되면, 사이트보기라는 메뉴가 아래로 펼쳐지고 사이트보기를 클릭하면 사용자 화면으로 전환하게 됩니다.
마우스를 자신의 사이트이름 위에 가져다 댑니다.



그러면 아래 화면과 같이 사이트 보기라는 메뉴가 보입니다. 사이트보기를 클릭합니다.





사이트보기를 클릭하면, 다음과 같이 웹사이트가 나옵니다. 다시 관리자 화면으로 되돌아 가려면 왼쪽 상단의 웹사이트명을 클릭하면 됩니다. 웹사이트 명을 클릭합니다.





기본 테마 변경하기

다시 관리자 화면으로 돌아왔습니다. 이제는 블로그 느낌이 많이나는 Twenty Fifteen 테마 대신에 조금더 일반 웹사이트 느낌에 가까운 Twenty Fourteen 테마로 기본 테마를 변경 하겠습니다.



왼쪽 관리자 메뉴에서 외모 부분에 마우스를 올려놓습니다. 다음과 같이 오른쪽 방향으로 외모에 대한 세부메뉴가 펼쳐지는 것을 볼 수 있습니다. 



테마 부분을 마우스로 클릭합니다.




테마를 관리하는 화면이 나타납니다. 오른쪽에는 설치된 테마가 어떤 것들이 있는지 나타납니다. 아직까지 우리에게 테마라는 용어가 익숙하지 않을 수 있습니다. 테마는 영어 Theme 으로 우리가 이해하기 쉽게 표현하자면 스킨이라고 보아도 무방합니다. 현재 적용된 테마는 맨 왼쪽 상단에 위치하게 되며, 활성화 라고 표시가 되어있습니다. 활성화 되어있는 테마가 현재 웹사이트에 적용된 테마입니다.



현재는 기본 테마인 Twenty Fifteen 테마가 적용되어있습니다. 테마를 변경하는 것은 간단합니다. 원하는 테마를 클릭하고 활성화 버튼을 클릭하면 모든 작업이 끝납니다. 세부적이 설정부분도 있지만, 그 부분은 상세 설명시에 다루도록 하겠습니다.

가운데 Twenty Fourteen 테마 부분에 마우스를 가져다 댑니다.



Twenty Fourteen 부분에 마우스를 가져다 대면 다음과 같이 화면이 변경됩니다. 여기서 활성화 버튼을 클릭하면 바로 테마가 변경됩니다. 활성화 버튼을 클릭합니다.




두 번째에 있던 Twenty Fourteen 테마가 첫 번째로 오면서 활성화 되었음을 확인할 수 있습니다. 




그럼 왼쪽 상단에 사이트보기를 클릭해서 웹사이트 화면으로 이동하겠습니다. 사이트 보기를 클릭합니다.




웹사이트 화면이 변경되었습니다. 일반적으로 워드프레스에서 글을 쓰고 작업을 할 때, 워드프레스 관리자화면과 웹사이트 화면을 자주 왔다갔다 해야합니다. 포스팅을 위한 글을 쓰거나 테마나 플러그인을 설치해도 변경되고 적용된 결과는 웹사이트 화면을 통해서 확인이 가능하기 때문입니다.




관리자 화면과 웹사이트 화면 편리하게 사용하기

관리자 화면에서 왼쪽 상단에 사이트보기를 눌러서 화면을 전환하게 되면 지금 보고 있는 화면이 사라집니다. 관리자 화면이 사용자 화면으로 전환되면서 관리자 화면이 사라지게 되는 것입니다. 이러면 관리자 화면에서 작업을 계속할 때 필요할 때마다 관리자 화면을 웹브라우저에서 열어야 되므로 불편합니다. 이때는 아래 세 가지 방법을 사용하는 것이 편리합니다.

첫 번째 방법, 새 탭으로 열어서 작업하기

왼쪽 상단 사이트명에 마우르를 가져다대고 마우스 오른쪽 버튼을 클릭하면 다음과 같은 화면이 나옵니다. 여기서 '새 탭에서 링크 열기'를 클릭하면 됩니다. 새 탭에서 링크 열기를 클릭합니다.




다음과 같이 새 탭이 열릴 것이고, Ctrl + Tab을 눌러서 화면 전환을 하면서 사용하면 됩니다.





두번째 방법, 새 창으로 열어서 작업하기

이번에는 새 창으로 링크 열기를 클릭합니다. 이때는 별도의 새창이 열립니다. 새창이 열렸으므로 작업시에는 Alt + Tab 키를 단축키로 사용해서 화면 전환을 하면서 사용하면 편리합니다.




세번째 방법, Ctrl 키를 클릭해서 새 Tab을 띄우는 방법

저의 경우 이 방법이 가장 편리해서 자주 사용합니다. 키보드에서 Ctrl 키를 누른 상태에서 마우스로 자신의 사이트이름을 클릭하는 것입니다. Ctrl 키를 누른 상태에서 사이트이름을 클릭합니다. 오른쪽에 관리자 화면 탭이 생성된 것을 확인할 수 있습니다.


Ctrl 키를 누른 상태에서 사이트명을 누르면 사용자 화면은 관리자 화면을, 관리자 화면은 사용자 화면을 새 탭을 열어서 띄우게 됩니다. 토글 기능처럼 간편하게 사용할 수 있습니다.


카페24로 웹호스팅 서비스 신청하기

지난 시간에 닷홈에서 도메인 신청을 하였습니다. 도메인 신청이 완료되었기 때문에 www.shuman.kr 이라는 도메인을 만들었습니다. (신청한 도메인명은 개개인별로 틀릴 것입니다.)

도메인 신청 관련 포스팅)

도메인 신청을 완료하였기 때문에 이제는 호스팅 서비스를 받아야 합니다.
도메인 신청은 닷홈에서 진행하였지만, 웹호스팅 서비스는 카페24에서 받으려고 합니다.



개인적으로 유료 호스팅을 받을 때 카페24를 선택한 이유는 국민 호스팅이라고 선전 할 정도로 개인들이나 중소상인이 많이 사용하기 때문입니다. 가비아나 후이즈의 경우는 기업호스팅에 인지도가 높은 반면에 카페24는 개인쪽에서 영향력을 높은 편입니다. 업체마다 장단점이 있으니 꼼꼼히 비교해보고 선택하는 것도 좋은 방법입니다.

     


참고) 유료가 아닌 무료 호스팅을 받으려면 닷홈의 무료호스팅 서비스 신청을 하면 됩니다.

닷홈의 경우 개인당 3계정을 무료호스팅 받을 수 있습니다.
무료 호스팅은 아래 URL로 접속하면 신청 할 수 있습니다.



그럼, 카페24를 통해서 웹호스팅을 신청하는 방법을 상세히 알아보도록 하겠습니다.
먼저 카페24 사이트(http://www.cafe24.com/)에 접속합니다.



카페24에 회원가입을 진행하고, 로그인을 진행합니다. 


로그인이 완료되면, 화면 중앙에 있는 호스팅 안내 이미지(아래 이미지)를 클릭합니다.



카페24에서 서비스하는 웹호스팅 상품이 나타납니다. 저의 경우 일반형으로 신청하겠습니다.
일반형은 하드용량이 900M로 나와 있습니다. 그렇지만 자세히 보면 전체 하드용량은 900M이지만 워드프레스를 설치하고 이미지와 멀티미디어나 첨부화일들을 첨부할 수 있는 공간은 웹 부분으로 500M가 할당되어 있는 것을 볼 수 있습니다.

일반형의 경우에는 200M의 CDN 용량을 제공합니다. CDN 용량은 향후 이미지 호스팅으로 활용하면 됩니다. 호스팅 신청할 때 디폴트로는 CDN 사용이 디저블 되어있기 때문에 향후에 CDN 신청을 하면 200M를 추가로 사용할 수 있습니다.

처음 시작하는 분들은 절약형으로 사용해도 무방합니다. 절약형으로 사용하다가 용량이 부족하면 용량 증설 신청을 해서 사용하면 됩니다.



일반형 하단의 신청하기 버튼을 클릭합니다.



회원 정보를 등록하는 화면이 나타납니다. 카페24는 기본적으로는 로그인한 ID가 기본 ID가 됩니다. 그렇지만 호스팅 서비스를 여러개 신청하면 서비스에 대한 아이디가 있어야 합니다.
카페24 안에서 아이디별로 호스팅 서비스를 구별하는 것입니다. 회원 정보 항목에서 신청 아이디와 비밀번호 연락처등을 입력합니다.



관리자 정보는 회원정보와 동일하게 체크합니다. 복수 관리자가 관리하고자 할 때는 관리할 사람의 정보를 입력합니다. 
중요한 것은 아래 표시된 적색 박스 안의 FTP, Telnet, DB 비밀번호를 잘 기억해두어야 합니다. 로그인 비밀번호와 별도로 설정되기 때문입니다.



관리자 정보를 모두 입력하고 이용약관에 동의 체크를 한 뒤에 다음 버튼을 클릭합니다.



일반형의 경우에는 월 사용료가 1,100 원이고, 설치비는 11,000원입니다.



기간 콤보박스를 클릭하면, 신청 기간에 따라서 할인폭이 큰 것을 알 수 있습니다. 1년 신청을 하면 10%가 할인됩니다.



서버 환경 설정에서 프로그램 자동 설치 체크박스에 체크합니다. 체크박스에 체크하면 프로그램과 설치 경로를 선택하는 콤보박스가 나타납니다. 워드프레스를 설치할 것이기 때문에 프로그램에는 워드프레스를 선택하고, 설치 경로는 www를 선택합니다.




카페24에서는 글로벌 IT라는 워드프레스 테마를 무료로 제공합니다. 테마는 향후에도 수정 및 삭제가 가능함으로 추가 테마에 글로벌 IT를 선택합니다. 스팸 기능은 사용으로 선택합니다.


도메인을 선택하는 부분입니다. 기본적으로는 카페24의 무료 도메인이 선택되어 있습니다.
무료 도메인의 주소는 shuman.cafe24.com 으로 되어있습니다. 닷홈에서 도메인을 구입하였기 때문에 보유 도메인 부분의 라디오버튼을 클릭합니다.



도메인 입력란에 shuman.kr 을 입력합니다. 그리고 중요한 것은 도메인을 등록한 닷홈에 가서 카페24 네임서버 주소로 변경을 해주어야 합니다.




카페24 네임서버 주소는 다음과 같습니다.



이제 마지막으로 신용카드나 기타 결제방식에 따라서 결제를 완료하면 됩니다.
결제를 진행합니다.


결제가 완료되면 다음과 같은 화면이 나옵니다. 나의 서비스관리로 이동 버튼을 클릭합니다.


나의 서비스 관리화면에 들어오면 10G 광아우토반 FullSSD 일반형 서비스가 제대로 등록된 것을 확인할 수 있습니다.




닷홈 도메인 네임서버 변경하기

아직 닷홈에 카페24의 네임서버를 등록하지 않았기 때문에 www.shuman.kr 웹사이트가 접속이 되지는 않을 것입니다.
인터넷 브라우저 창을 열고 해당 주소로 접속해 보겠습니다. 예상대로 접속이 되지 않습니다. 이제는 닷홈에서 네임서버를 등록할 차례입니다.



닷홈 사이트(http://www.dothome.co.kr/)에 접속합니다. 오른쪽 상단 메뉴의 마이닷홈에서 도메인관리 메뉴를 클릭합니다.



왼쪽 메뉴에서 네임서버/네임호스트 관리 메뉴를 클릭합니다.



네임서버를 변경할 수 있는 화면이 나옵니다. 맨 아래 라디오 버튼을 선택하고 아래 네임서버 변경 버튼을 클릭합니다.





현재 디폴트로 닷홈의 네임서버가 등록되어 있습니다. 이제 이곳에 카페24의 네임서버를 등록하면 됩니다.





카페24의 네임서버는 카페24 홈페이지(http://www.cafe24.com/) 왼쪽 하단에도 바로 나와 있습니다.
이제 아래 주소를 닷홈에 입력하면 됩니다.



카페24 네임서버와 네임서버 IP를 모두 입력한 뒤에 네임서버 변경 버튼을 클릭합니다.




다음과 같이 수정이 완료되었습니다. 메시지가 출력되면 변경이 완료된 것입니다.





네임서버는 변경되었다고 바로 적용되어 사이트가 웹브라우저에서 URL로 접속되는 것은 아닙니다. 저의 경우에는 4-5시간 정도뒤에는 적용이 되었으나, DNS에 고착되기 까지는 24시간 정도가 걸릴 수도 있습니다. 24시간에서 48시간이 지나도 해당 도메인으로 접속이 되지 않으면 서비스에 오류가 있을 수 있으니 고객센터에 문의해야 합니다.

아래 카페24와 닷홈의 안내문을 참고바랍니다.

카페24의 도메인연결 네임서버 관련 안내)



닷홈의 네임서버 관련 안내)








홈페이지나 웹사이트 구축에 있어서 워드프레스 적용을 고민하는 분들을 위해서 워드프레스 장점 두 가지를 정리해보았습니다.

첫째, 워드프레스는 최신 기술 적용이 용이한 플랫폼입니다.

워드프레스는 최신 트랜드와 기술 적용이 용이합니다. 요즈음 IT 트랜드는 모바일입니다. 트랜드라 할 것도 없이 이미 모바일은 생활 깊숙히 침투되어 삶의 한 부분이 되었습니다.
과거 PC를 주로 사용하던 인터넷 접속 환경은 2000년대 말에 시작된 아이폰과 스마트폰, 스마트TV의 등장으로 N-스크린시대를 열게 되었습니다.

N-스크린이란 운영체제와 장비를 따지지 않고 스마트폰, 아이패드, 스마트TV, 노트북 같이 특정 기기나 디바이스와 상관없이 일관성있는 사용자 인터페이스를 제공하는 것을 말합니다.

모바일 환경은 스크린 화면에 다양화를 초래할 수 밖에 없는 구조입니다. 아이폰과 안드로이드폰은 다양한 화면 크기의 디바이스를 출시하고 있습니다. 스마트폰 사이즈 4 ~ 6인치 화면에서 태블릿인 아이패드의 대중화로 9인치대의 넓은 화면을 제공하는 디바이스도 많은 편입니다.





화면의 사이즈가 이제는 여러가지 크기가 존재하다보니, 요즈음 웹사이트의 제작은 반응형 웹디자인(Responsive Web Design)으로 만들어야 합니다. 만약 반응형 웹디자인으로 웹사이트를 제작하지 않는다면, PC용 웹사이트, 모바일용 웹사이트 또는 각각 화면 사이즈에 최적화된 웹사이트를 추가적으로 제작해야 합니다.

반응형 웹디자인으로 제작되어 있다면, 말 그대로 디바이스와 상관없이 자동으로 화면 레이아웃을 조정해서 맞추어 최적의 디자인 뷰를 제공합니다.

워드프레스 테마는 대부분 반응형 웹디자인 기술이 적용되어 있기 때문에 여러 종류의 디바이스와 화면해상도를 위한 고민을 줄일 수 있고, 웹사이트 구축에 많은 시간을 절약할 수 있습니다.

워드프레스는 테마와 플러그인을 통해서 따끈따끈한 최신 기술을 바로 자신의 웹사이트에 적용할 수 있습니다. 


반응형 웹디자인이 적용된 테마 퓨전의 아바다 테마







둘째, 워드프레스는 SNS 연동과 구글 검색엔진 최적화(SEO)에 강합니다.

요즈음의 웹사이트는 SNS와 연동되지 않는다면 생명력을 잃습니다. 콘텐츠를 유통시키기에 SNS보다 훌륭한 도구는 없기 때문입니다. 그런데 기술적으로 특정 웹사이트에 SNS 기능을 접목시키려면 복잡한 프로그램 개발이 필요합니다. 그렇지만 워드프레스는 SNS 연동을 위한 다양한 플러그인을 제공합니다. 다양한 플러그인을 통해서 워드프레스에 콘텐츠를 유통시키기 위한 공유버튼을 제공하고, 손쉽게 소셜의 댓글을 달고, SNS 채널 목록을 확인할 수 있습니다.

페이스북을 사용하는 사용자라면, 페이스북에서 제공하는 페이스북 소셜 플러그인(Facebook Social Plugin) 기능을 사용해서 자신의 웹사이트를 페이스북과 연동시킬 수도 있습니다.

또한 워드프레스는 검색엔진에 최적화(SEO)되어 있어서 구글에서 검색이 잘됩니다. 특별한 설정을 하지 않고도 워드프레스로 웹사이트를 구축하기만 하면 몇 일뒤면 구글에서 자신의 콘텐츠가 검색되는 것을 확인할 수 있습니다. 구글과 다르게 국내 포탈인 네이버와 다음에서는 사이트등록 기능과 RSS등록 기능등 별도의 작업을 하면 포탈에서도 자신의 사이트를 검색되게 할 수 있습니다.




워드프레스로 만든 국내 홈페이지 레퍼런스 여섯 곳

외국과는 달리 국내에서는 아직까지 사람들에게 워드프레스라는 용어가 많이 익숙하지는 않습니다. 혹자는 워드프레스가 MS 워드와 관련된 문서편집기라고 생각하는 사람도 있습니다.

그 만큼 아직까지 국내에서는 저변이 확대되지 않았다고 볼 수도 있습니다. 그렇지만 자세히 확인해보면 국내에서도 워드프레스로 제작된 레퍼런스 사이트가 많이 있습니다.

특히 국내에서 워드프레스 확산에 큰 공신 역할을 한 것은 서울시 입니다. 서울시가 서울특별시 공식 홈페이지를 워드프레스로 구축하면서부터 워드프레스에 대한 국내 인식은 크게 바뀌었습니다. 이 때부터 워드프레스는 국내에서도 빠른 속도로 확산되고 있습니다. 그 전까지만 해도 워드프레스를 개인 블로그에는 많이 사용했지만 규모있는 기업이나 관공서 사이트에 적용하기를 꺼려했던 것이 사실입니다.

국내에서 워드프레스로 제작된 레퍼런스 사이트 여섯 곳을 소개합니다.

























닷홈에서 도메인 신청하기

지난 글에서 살펴본 것 처럼 현재 시점 기준으로 해서 1년 간 도메인을 신청했을 때, 닷홈이 9,790원으로 가장 저렴했습니다. 닷홈을 통해서 도메인을 신청하는 법을 알아보도록 하겠습니다.

먼저 닷홈 홈페이지(http://www.dothome.co.kr/)에 접속합니다.


도메인을 신청할 것이기 때문에 닷홈 홈페이지에 로그인 합니다.


로그인이 완료되면 도메인을 검색할 수 있는 입력 화면이 나옵니다.


자신이 신청하기를 원하는 도메인 주소 URL을 입력 필드에 넣고 검색 버튼을 클릭합니다.
저의 경우에는 shuman.kr 입력하고 검색 버튼을 클릭하니 다음과 같음 메시지가 뜹니다.


닷홈의 경우에는 TLD(탑레벨 도메인)은 빼고 입력해야합니다. shuman.kr 대신 shuman 을 입력하고 다시 검색 버튼을 클릭합니다.



도메인 검색 결과가 나왔습니다.  맨 아래 체크박스를 체크하고 신청하기 버튼을 클릭합니다.



도메인 신규 등록을 위한 화면이 나타납니다.





담당자 정보란에 이름과 이메일 전화번호, 휴대전화를 입력합니다.



소유자 정보를 입력합니다. 이때 이메일과 휴대폰 번호는 반드시 정확하게 입력해야합니다. 도메인이 종료되는 시점에 휴대폰으로 대부분 도메인 서비스를 하는 곳은 알림 서비스를 제공하기 때문입니다.
종료일이 되어서 다른 사람이 내가 쓰던 도메인을 구매해서 사용한다면 다시 그 도메인을 얻기란 쉽지 않은 일입니다.

관리자 정보는 향후 관리를 위해서 소유자와 동일인으로 하는 것이 좋습니다.




네임서버는 닷홈 네임서버 사용을 선택합니다. 닷홈의 경우에는 결제 방법을 신용카드와 계좌이체를 모두 지원합니다. 저는 신용카드로 선택 하였습니다. 구매자명과 이메일, 이동전화 항목을 입력한 뒤에 신청하기 버튼을 클릭합니다.



신용카드 항목에 동의 한뒤 다음 버튼을 클릭하여 결제를 진행하면 됩니다.



결제가 완료되면 다음과 같은 화면이 출력됩니다.



이제 신청한 도메인이 제대로 등록되었는지 도메인 관리 화면에 들어가서 확인하겠습니다.
닷홈의 도메인 관리화면은 오른쪽 상단 메뉴의 마이닷홈에 있습니다. 마이닷홈을 클릭합니다.



마이닷홈을 클릭하면 서브 메뉴가 펼쳐집니다. 마이닷홈 아래에 도메인관리를 클릭합니다.



도메인을 관리하는 화면이 나옵니다. 기존에 등록된 두 개의 도메인 밑에 shuman.kr 이라는 도메인이 생성된 것을 확인할 수 있습니다.
1년을 신청했기 때문에 남은 기간은 365일로 나오는 것을 알 수 있습니다.


등록된 도메인의 세부적인 정보를 확인할 수 있습니다.
맨 아래 신규로 등록된 도메인을 shuman.kr을 선택하고 등록정보 관리 버튼을 클릭합니다.



세부적인 도메인 등록정보를 관리하는 화면입니다. 소유자 정보등 세부 정보를 관리할 수 있습니다.



여기서 whois 조회 버튼을 클릭하면 외부에 보여지는 도메인 정보가 팝업창으로 나타납니다. 외부에서 나의 도메인이 어떻게 보여지는지 확인할 수 있는 기능입니다.










웹호스팅 업체별 도메인 가격 비교하기

자신이 원하는 주소의 도메인을 신청하려면 유료 비용이 발생합니다. 도메인을 신청할 때 웹호스팅 업체 별로 가격과 서비스가 상이하기 때문에 가격을 비교해보고 신청하는 것이 좋습니다. 

여기에서 1년 기준의 도메인 가격을 비교해보고자 하는 업체는 총 네 곳입니다.
가비아, 카페24, 닷홈, 호스팅케이알 입니다. 네 곳 정도를 비교하면 어느 정도 저렴한 곳을 찾을 수 있을 것입니다.
물론 가격은 업체마다 각종 할인 행사등을 통해서 가격이 변동될 수 있으므로, 현재 기준에서의 가격이라고 보시면 됩니다.

먼저 도메인을 신청하려면 자신이 신청하려고 하는 도메인 주소 URL을 생각해야합니다. 도메인 주소 URL은 개개인마다 다를 것입니다.

저는 www.shuman.kr 라는 도메인 주소를 신청하려고 합니다.

그럼, 첫번째로 가비아 입니다. 가비아 홈페이지(https://www.gabia.com/)에 접속합니다.



상단 메뉴에서 도메인 등록 > 도메인 검색을 클릭합니다.




도메인을 검색할 수 있는 화면이 나옵니다.




입력 필드에 shuman.kr을 입력하고 검색 버튼을 클릭합니다.



shuman.kr로 도메인을 검색한 결과 .com .net .org 도메인은 이미 다른 사람이 사용하고 있어서 등록이 불가함을 알 수 있습니다.
.kr 도메인은 가비아에서는 현재 할인이 되어서 1년에 14,000원으로 구매가 가능합니다.(단, 부가세 미포함 가격입니다.) 





두번째로 카페24 입니다. 카페24 사이트(http://www.cafe24.com/)에 접속합니다.




카페24 홈페이지 가운데에 도메인을 검색할 수 있는 입력창이 있습니다. 입력창에 shuman.kr 을 입력하고 검색 버튼을 클릭합니다.




도메인 기간이 디폴트로 2년으로 되어있어서 콤보박스에서 2년을 1년으로 변경합니다.




1년으로 변경하니까 22,000원의 가격이 나옵니다. 카페24는 도메인 비용이 1년에 22,000원입니다.






세번째는 닷홈입니다. 닷홈 홈페이지(http://www.dothome.co.kr/)에 접속합니다.



왼쪽 상단의 도메인 메뉴의 도메인 신청을 클릭합니다.




도메인을 검색할 수 있는 화면이 나옵니다. shuman을 입력하고 검색버튼을 클릭합니다.



닷홈의 경우 1년에 부가세 포함하고서도 9,790원입니다. 현재까지 가장 저렴합니다.



네번째로 호스팅케이알입니다. 호스팅케이알 홈페이지(http://www.hosting.kr/)에 접속합니다.



도메인 검색창에 shuman.kr을 입력하고 도메인 검색버튼을 클릭합니다.



호스팅케이알은 바로 도메인 비용이 나오지 않습니다. 아래 도메인 등록 버튼을 클릭해서 로그인 해야 비용을 알 수 있습니다.
도메인 등록 버튼을 클릭합니다.



로그인 절차를 진행합니다.




로그인을 하니 1년에 10,780원이 나옵니다. 호스팅케이알은 1년에 10,780원을 지불하는 것입니다.



네 개 업체의 가격을 비교표로 정리하면 다음과 같습니다.
현재 시점 기준으로 닷홈이 가장 저렴합니다.


도메인 가격 비교표

 

가비아 

카페24 

닷홈 

호스팅케이알 

 도메인 1년 비용

(부가세 포함가)

15,400원 / 1년 

22,000원 / 1년 

9,790원 / 1년 

10,780원 / 1년 







호스팅과 도메인 이해하기

이전 글에서 설명드린 웹호스팅 서비스를 신청하면 다른 사람들이 내가 만든 사이트를 인터넷이나 모바일로 접속할 수 있습니다. 그렇지만 사실 웹호스팅 서비스안에는 무료 도메인 서비스가 함께 포함되어있습니다.
단, 호스팅 업체에서 제공하는 무료 도메인은 URL이 대부분 길기 때문에, 자신이 원하는 명칭의 URL 주소를 얻기 위해서는 도메인 서비스를 이용해야 합니다.

가령, 카페24에서 웹호스팅 서비스 신청을 하면 무료 도메인을 제공합니다. 카페24에서 제공하는 무료 도메인의 주소는 http://id.cafe24.com 형식의 URL로 이루어져 있습니다. 여기서 id는 카페24에 로그인한 ID를 의미합니다.

만약 저의 경우 shuman 으로 로그인 하였다면 무료 도메인 주소는 다음과 같을 것입니다.

카페24 무료 도메인 주소 : http://shuman.cafe24.com 
그렇지만 일단 이 주소 자체가 길어서 마음에 들지 않아서 나만의 도메인을 www.shuman.kr 로 만들기를 원한다면 유료 도메인 서비스를 받아야합니다.

호스팅과 도메인에 대해서 세부적인 기술적인 부분을 빼고 쉽게 설명하면,

호스팅 : 다른 사람이 내가 만든 웹사이트를 접속가능하게 만들어 주는 서비스
도메인 : 내가 원하는 의미이는 간략한 주소로 접속이 가능하게 해주는 서비스

라고 간단하게 말할 수 있습니다.


도메인의 구성요소

도메인은 다음과 같이 구성됩니다. 
콤머(.)를 기준으로 세 부분으로 나뉘며, 맨 앞은 서브도메인 가운데는 루트도메인, 맨 마지막은 탑레벨도메인 입니다.

서브 도메인.루트 도메인.TLD(탑레벨 도메인)

예를 들어서 www.shuman.kr 이라면,

www : 서브 도메인
shuman : 루트 도메인
kr : TLD(탑레벨 도메인)

이라 할 수 있습니다.



도메인 등록 확인 및 신청하는 방법

웹호스팅과 마찬가지로 도메인 서비스를 제공하는 업체들이 많이있습니다. 일반적으로 웹호스팅 서비스를 제공하는 업체는 대부분 도메인 서비스도 제공합니다. 일전에 설명드렸던 가비아, 카페24, 닷홈도 모두 도메인 서비스를 제공하고 있습니다.

도메인 서비스를 신청하기 위해서는 먼저, 내가 신청하려는 도메인 주소가 사용되고 있는지 확인해야합니다.
만약 www.shuman.kr 이라는 URL 주소로 도메인을 신청하고 싶다면 이 주소로 도메인이 사용되고 있는지 확인해야 합니다.
정확하게 도메인 사용여부를 확인하기 위해서는 웹호스팅 업체 사이트에 들어가서 조회하면 사용여부가 조회됩니다.
그렇지만, 간단하게 확인하는 방법은 웹프라우저를 열고서 해당 URL을 주소창에 입력해보는 것입니다. 일단 웹브라우저 주소창에 입력을 했는데 웹사이트가 열린다면 이미 해당 도메인은 사용되고 있는 것으로 봐도 무방합니다.

그럼 웹브라우저를 열고 주소창에 http://www.shuman.kr/ 을 입력합니다.

다음 화면과 같이 이 페이지를 표시할 수 없습니다. 라고 메시지가 나오면 해당 주소로 도메인을 신청할 수 있는 여지가 있는 것입니다.




도메인을 신청하기 위해서 웹호스팅 업체 사이트에 들어가서 도메인 조회후 신청을 하면 됩니다. 여기에서는 가비아에 들어가서 도메인을 조회하고 신청해보도록 하겠습니다.
가비아 웹사이트(https://www.gabia.com/)에 들어갑니다.




상단 메뉴에 도메인 부문에 마우스를 가져다 대면 세부 메뉴가 나옵니다.
도메인 세부 메뉴에서 도메인 등록 > 도메인 검색을 클릭합니다.





도메인 등록 여부를 검색할 수 있는 화면이 나옵니다. 입력 필드에 shuman.kr 을 입력하고 검색버튼을 클릭합니다.






shuman.kr 도메인은 신청해서 사용할 수 있고, shuman.com과 shuman.net은 이미 등록된 도메인이라서 신청할 수 없습니다.
원하는 도메인을 장바구니에 넣고 신청하기 버튼을 클릭해서 비용을 지불하면 도메인을 사용할 수 있는 것입니다.

실제 도메인 신청은 다음글 '도메인 신청은 가격 비교하고 결정하자 ' 를 통해서 웹호스팅 업체별 가격을 비교해보고 신청하겠습니다.





















+ Recent posts