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


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

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

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



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



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



위젯 관리 화면에 들어습니다. 이미지 로고는 텍스트 위젯을 활용해서 보여줄 수 있습니다. 원래 텍스트 위젯은 텍스트나 글을 보여주는 위젯이지만 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를 관리하고 사용하기에 무척 편리하게 제작되어 있습니다.





+ Recent posts