웹사이트를 만들고 나서 운영하다보면 다른 웹사이트나 책, 광고에서 볼 수 있는 미려한 폰트에 대한 욕심이 생기기 마련입니다. 워드프레스 사이트에 간편하게 적용할 수 있고 일반적으로 많이 사용하는 폰트는 구글 폰트와 네이버 나눔 폰트가 있습니다.
구글은 폰트 서비스를 통해서 전세계의 여러가지 폰트를 제공하고 있습니다. 구글 폰트는 자신이 운영하는 서버나 자신의 PC에 폰트를 다운로드해서 설치하는 방식을 사용할 수도 있고 URL 링크 기반으로 불러오는 방식을 사용할 수도 있습니다. URL 링크 기반으로 불러오는 폰트 사용 방식을 웹폰트 라고도 합니다. 여기에서는 링크 기반의 구글 웹폰트를 사용해서 워드프레스 사이트에 적용하는 방법을 알아보도록 하겠습니다.

구글 폰트


구글 폰트는 많은 종류가 있습니다. 먼저 구글 폰트 서비스 사이트에 들어가서 자신의 사이트에 적합한 폰트를 찾아야합니다. 웹브라우져를 열고 구글 폰트 서비스 사이트에 접속합니다.



구글에서 아직까지는 한국어 폰트는 정식버전으로 제공되고 있지는 않습니다. 왼쪽 Script 항목의 콤보박스를 클릭해서 확인해보면 한국어 버전인 Korean 은 없는 것을 확인할 수 있습니다.


한국어 버전은 임시 서비스(Early Access)로 제공되고 있습니다. Early Access로 제공되는 폰트를 확인하기 위해서 오른쪽 상단 메뉴에서 More Scripts를 클릭합니다.



임시 서비스인 Early Access 폰트가 리스트업 됩니다. 



명조체 관련된 한국어 폰트를 찾기 위해서 웹브라우저 화면에서 Ctrl + F 를 클릭해서 Korean을 입력하고 엔터를 칩니다. 아래로 내리다 보면 나눔 명조체인 Nanum Myeongjo 폰트가 검색됩니다.



구글은 구글 폰트를 사용할 수 있도록 링크와 사용 예제를 제공합니다. Link 부분과 Example 부분의 텍스트를 복사해서 메모장에 붙여넣습니다. 복사한 텍스트는 조금 뒤에 Custom CSS에 적용하는데 쓰일 것입니다.



워드프레스 사이트에 구글 폰트 적용하는 방법


먼저 자신의 워드프레스 사이트에 접속합니다. 아래 화면에서와 같이 슈만의 사이트에서는 고딕계열의 폰트체가 적용된 것을 확인할 수 있습니다.



이제 워드프레스 관리자 화면으로 들어와서 Custom CSS 방식으로 웹사이트 전체에 나눔 명조를 적용하겠습니다. 왼쪽 사이드바 메뉴에서 외모 > CSS 편집 메뉴를 클릭합니다.



CSS 스타일시트 편집기 화면이 나타납니다. 이곳에 구글 나눔명조 폰트를 CSS 스타일로 적용하면 Custom CSS 방식으로 웹사이트 전체의 폰트가 변경될 것입니다. 



조금 전 구글 폰트 사이트에서 복사한 아래의 나눔명조 폰트의 텍스트를 CSS 스타일시트 편집기에 붙여서 사용할 것입니다. 그렇지만 아래 그대로 붙여넣으면 않됩니다. CSS 문법에 맞추어서 붙여 넣어야 합니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

font-family: 'Nanum Myeongjo', serif;


구글 폰트 사이트에 복사한 텍스트를 아래와 같이 CSS 문법에 맞게 편집합니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

body{ font-family: 'Nanum Myeongjo', serif; }


이제 편집한 텍스트를 CSS 스타일시트 편집기에 아래와 같이 붙여넣고 스타일시트 저장 버튼을 클릭합니다.



스타일시트가 저장되었습니다. 라는 메시지가 뜨고 import 구문이 맨 윗줄로 위치가 이동됩니다. 표준 문법에 따라서 위치가 이동되는 것이므로 코드의 위치는 신경쓰지 않아도 됩니다.



이제 구글 폰트가 제대로 적용되었는지 웹사이트에 들어가서 확인합니다. 웹사이트 전체 폰트가 나눔명조체로 적용되었습니다. 




정확하게 소스 코드상에서 어떻게 적용하였는지 확인하기 위해서 마우스를 화면에 놓고 오른쪽 마우스를 클릭해서 뜨는 창에서 검사를 선택해서 HTML 소스코드 요소 검사를 실행합니다.




오른쪽 화면에 HTML 소스에 대한 요소 검사화면이 나타납니다. Ctrl + F를 클릭해서 검색창에서 Nanum 이라고 검색하면 아래와 같이 Custom CSS 스타일이 적용된 것을 확인할 수 있습니다. 나눔 명조체 말고도 구글 폰트 사이트에서 여러 종류의 폰트가 있으지 자신의 웹사이트 성향에 가장 적절한 폰트를 찾아서 적용하면 됩니다.




그라바타란 무엇인가?


워드프레스 설치시 기본 기능에는 아바타를 등록하는 기능은 없습니다. 그렇지만 그라바타(Gravatar) 서비스를 이용하면 아바타 기능을 사용할 수 있습니다. 그라바타는 Globally Recognized Avatar 라는 용어에서 만들어졌습니다. 그라바타 서비스는 그라바타 사이트에서 한 번 아바타를 등록해 놓으면 여러가지 웹사이트나 소셜 계정에서도 별도의 등록 과정없이 그라바타 아바타를 사용할 수 있습니다.

즉, 자신이 사용하는 웹사이트나 소셜에 매번 프로필 사진을 등록할 필요가 없고 단 한번 그라바타 서비스에 아바타로 등록해 놓고서 사용하면 되는 것입니다. 그라바타 서비스에서 인식자로 사용하는 아이디는 이메일 주소입니다.

먼저 그라바타 서비스에 가입 절차를 확인하고 워드프레스에서 아바타를 연결해서 사용하는 방법을 알아보겠습니다.

그라바타 서비스 가입하기


먼저 그라바타 사이트( http://ko.gravatar.com/ ) 접속합니다. 오른쪽 상단의 로그인 버튼을 클릭합니다.



그라바타 서비스를 이용하기 위해서는 가입형 워드프레스인 워드프레스닷컴 계정이 있어야 합니다. 워드프레스닷컴 계정이 있다면 이메일과 패스워드를 입력하고 로그인 버튼을 클릭합니다. 아직 워드프레스닷컴 계정이 없다면 Create an Account 버튼을 클릭해서 워드프레스닷컴 계정생성 후 로그인합니다.


그라바타 서비스에 로그인하면 My Gravatars 메뉴가 디폴트로 열립니다. 아직 아바타에 사용할 프로필 이미지를 등록하지 않았습니다. 아래에 하나 추가하려면 여기를 클릭하세요! 링크를 클릭해서 이미지를 등록합니다. 그라바타 이미지를 등록할 때 등급이 있는데 전체 공개 등급인 G등급으로 등록하면 됩니다.



등록이 완료되었다면 아래 그림과 같이 Gravatar 관리 화면에 등록된 아바타가 보일 것입니다. 이제 이 아바타를 자신의 웹사이트나 소셜에서 사용할 수 있습니다.




워드프레스에서 아바타 보이게 하기


아직까지 오른쪽 상단 프로필 화면이나 댓글 화면에 아바타가 보여지지는 않습니다. 가장 간단하게 아바타를 확인해 볼 수 있는 방법은 프로필 화면에서 이메일 계정을 그라바타 서비스에 등록한 이메일 계정과 맞추는 것입니다.






아래와 같이 오른쪽 상단 화면에 마우스를 가져다 대면 내 프로필 편집 화면이 나타납니다. 내 프로필 편집을 클릭합니다.



프로필을 설정할 수 있는 화면이 나타납니다. 연락처의 이메일 부분을 자신이 그라바타 서비스에 등록한 것과 동일한 이메일 주소를 입력하고 프로필 업데이트 버튼을 클릭합니다.



프로필 업데이트가 끝나면 화면 오른쪽 상단의 프로필 부분과 댓글 목록 화면에서 그라바타 서비스가 연결된 아바타가 보이는 것을 확인할 수 있습니다.




댓글을 관리하는 것은 워드프레스 콘텐츠 관리에서 중요한 부분입니다. 악의성 댓글이나 스팸 댓글은 사이트의 신뢰도에 영향을 주게됩니다. 일반 사용자들이 댓글이 관리되지 않는 사이트에 방문을 꺼려하는 것도 다 이유가 있는 것입니다.

워드프레스 기본 기능에서는 댓글 관리를 크게 두 곳에서 할 수 있습니다. 전체적인 댓글에 대한 관리는 설정 > 토론 메뉴에서 진행하며, 개별 글에 대한 댓글 관리는 개별글 옵션에서 설정합니다.
전체적인 댓글 관리인 설정 > 토론에서 댓글에 대한 설정을 해두었다고 해도 우선순위는 개별 글에 대한 댓글 설정에 있습니다.
가령 예를 들어서 설정 > 토론 에서 전체 댓글은 허용으로 체크하고 특정 개별 글에 대해서 댓글을 달지 못하도록 설정하면 개별글 댓글 설정에 의해서 댓글을 달지 못하게 됩니다.

댓글 전체 설정


댓글에 대한 전체 설정은 왼쪽 사이드바 메뉴에서 설정 > 토론 메뉴를 클릭해서 관리합니다. 토론 메뉴를 클릭합니다.


토론 설정 화면이 나타납니다. 이곳에서 사이트 전체적으로 댓글 설정을 수행합니다. 전체 댓글을 허용할 수도 있고 거부할 수 있습니다. 각 항목은 한글로 잘 번역이 되어있기 때문에 따로 설명하지 않아도 이해하기가 어렵지 않습니다.



개별 글의 댓글 설정


댓글 설정의 우선 순위는 개별글의 댓글 옵션입니다. 개별 글에 대한 옵션을 확인하기 위해서 개별 글 화면에 들어갑니다. 글 화면에서 오른쪽 상단의 화면 옵션 버튼을 클릭합니다.



화면 옵션을 클릭하면 아래와 같은 화면이 나타납니다. 토론 체크박스는 개별 댓글에 대한 권한 설정 화면을 디스플레이하고, 댓글 체크박스는 실제 글에 달린 댓글을 화면에 디스플레이하는 옵션입니다.
화면 옵션 항목에서 체크가 되면 화면에 보여지고 해제되면 화면에서 사라집니다. 아래와 같이 토론과 댓글 체크박스에 체크를 합니다.



화면 옵션에서 토론과 댓글에 체크를 하면 아래와 같이 글 편집 화면 아래부분에 토론과 댓글 박스가 생성됩니다. 그리고 개별글에 대한 댓글 설정은 토론 박스 안에 댓글 허용 부분에서 설정합니다.



작성된 댓글 관리


관리자는 작성된 댓글에 대해서 관리할 수 있습니다. 댓글을 관리하는 화면은 별도의 메뉴로 있습니다. 왼쪽 사이드바 메뉴에서 댓글을 클릭하면 됩니다.


사용자에 의해서 작성된 댓글을 관리할 수 있는 목록 화면이 나타납니다.



댓글에 대해서 승인 기능을 설정하였다면 아래 화면에서와 같이 댓글 확인후 승인 기능을 사용해서 승인처리할 수 있습니다.


워드프레스에서는 기능상으로는 사용자수를 제한없이 추가 할 수 있습니다. 그렇지만 무조건 사용자를 늘리는 것보다는 꼭 필요한 사용자에게 적절한 권한을 부여하고 역할에 맞게 권한을 조정하는 것이 중요합니다.
과거와는 다르게 요즈음 웹사이트의 트랜드는 굳이 로그인을 하지 않아도 어느정도의 웹사이트 기능을 이용할 수 있게하거나 간략하게 죄소한의 정보로 로그인을 요청하는 사이트들이 많이 있습니다.

패스트(FAST) 사회, 빠름이 경쟁력


이미 기존의 대형 인터넷 쇼핑몰의 매출을 뛰어넘은 소셜 커머스 플랫폼인 쿠팡, 위메프, 티몬만 보아도 알 수 있습니다.
예전에는 쇼핑몰 사이트에 가입하려도 사용자에게 여러가지 정보를 요청했었습니다. 그렇지만 소셜 커머스는 전화번호나 이메일 정도의 정보로 간편하게 가입이 되며 사이트의 모든 기능을 이용할 수 있습니다. 
따라서 워드프레스를 통해서 블로그나 중소형 쇼핑몰을 시작하려고 한다면 굳이 로그인을 요청하거나 로그인 절차를 복잡하게 하는 것은 사용자의 웹사이트 접근성을 떨어트리는 일입니다.

따라서 가능하면 로그인 없이 사이트를 이용할 수 있도록 하는 것이 좋습니다. 그렇지만 팀블로그등 여러명이 운영한다면 관리자외에 편집자나 글쓴이 정도의 권한은 부여해야 합니다.

사용자 추가하기


워드프레스에서 사용자를 추가하고 관리하는 것은 어렵지 않습니다. 먼저 왼쪽 사이드바 메뉴에서 사용자 > 사용자 추가하기 메뉴를 클릭합니다.



사용자를 추가하는 화면이 나타납니다. 필수 정보는 사용자명과 이메일 그리고 역할 부분입니다. 필수 정보를 입력하고 새로운 사용자를 추가 버튼을 클릭하면 사용자가 추가 됩니다.



역할 항목은 사용자의 권한을 나타내는 옵션입니다. 사용자의 권한은 아래 화면과 같이 다섯 가지 권한으로 구성됩니다.



사용자 권한 종류


관리자 : 웹사이트 전체에 대한 권한을 가지고 있는 관리자로 Administrator 라고도 합니다.
편집자 : 글을 쓰는 콘텐츠의 생산뿐만 아니라 콘텐츠를 생상하는 생산자들(편집자, 글쓴이)를 총괄 관리하는 사람입니다. 신문사로 따지면 편집장 정도의 위치라고 보면 됩니다. 글에 대한 모든 권한을 가지고 있습니다.
글쓴이 : 글을 작성하고 글을 발행할 수 있는 권한을 가지고 있는 사람입니다.
기여자 : 글을 작성할 수 는 있지만 발행 권한은 가지고 있지를 않습니다. 따라서 기여자가 작성한 콘텐츠는 관리자나 편집자의 검토를 거친뒤에 발행할 수 있습니다.
구독자 : 말 그대로 글을 읽는 사람을 말합니다. 신문사로 치면 신문 구독자라고 생각하면 됩니다.


워드프레스 사용자 권한표


 
관리자
편집자
글쓴이
기여자
구독자
사용자 관리
가능
X
X
X
X
워드프레스 설정
가능
X
X
X
X
글쓰기 기능
가능
가능
가능
가능(발행 불가)
X
페이지 기능
가능
가능
X
X
X
다른 유저 글수정
가능
가능
X
X
X


사용자 권한을 부여한 뒤에 사용자 관리는 사용자 > 모든 사용자 메뉴를 클릭해서 진행하면 됩니다. 모든 사용자 메뉴를 클릭하면 등록한 사용자 정보가 목록 형태로 디스플레이 됩니다.





워드프레스를 사용하면서 고유주소나 슬러그라는 용어를 자주 접하게 됩니다. 고유주소는 슬러그라고 생각해도 됩니다. 고유주소는 콘텐츠 작성한 글이나 페이지의 URL 주소입니다. 즉, 해당 콘텐츠의 접속 경로입니다. 워드프레스의 고유주소 일반 설정을 글 이름으로 세팅하면 글이나 페이지를 작성시에 입력하는 제목을 기반으로 자동으로 고유주소를 만들어냅니다.

아래처럼 제목을 입력하면 워드프레스는 고유주소를 자동으로 생성합니다.



슬러그를 사용할 때 두 가지 중요사항


첫째, 글이나 페이지를 공개한 뒤에는 가능한 슬러그를 변경하지 않는 것이 좋습니다.

그 이유는 글이나 페이지가 공개된 뒤에 슬러그를 변경하면 이미 SNS 등을 통해서 공유된 슬러그 URL의 링크를 클릭해도 페이지를 오류가 나서 해당 사이트의 신뢰성을 떨어트리기 때문입니다. 또한 공개버튼을 클릭해서 인터넷상에 자신의 글을 발행하게 되면 발행 시점부터 구글등 검색엔진이 해당 페이지에 대해서 검색 색인 작업을 자동으로 하게됩니다. 검색엔진에서는 슬러그 변경 전 URL을 색인해놓았는데 만약 슬러그 변경으로 깨진 링크가 발생하면 역시 사이트의 최적화에 좋은 영향을 주기는 어렵습니다.


둘째, 슬러그는 가능한 영문으로 사용하는 것이 좋습니다.

SNS를 통해서 URL을 공유할 때 어떻때 보면 http://shuman.kr/%20%E2%80%8E 과 같이 깨진 주소처럼 보이는 경우가 있습니다. 영문을 사용해서 슬러그를 입력하면 주소가 깨지지 않지만 한글을 사용하면 위와 같은 현상이 발생합니다.
또한 어떤 경우에는 한글 주소자체를 제대로 인식하지 못해서 접속이 되지 않는 경우 또한 발생합니다. 그런 경우에는 호스팅 서버 세팅의 문제일 경우가 대부분입니다. 따라서 서버 설정에 익숙하지 않다면 가능한 슬러그는 영문을 사용하는 것을 추천합니다.


한글 고유주소로 연결되지 않을 때 처리 방법


한글 고유주소가 연결되지 않는 경우에는 UTF-8 유니코드를 사용하지 않아서 그렇습니다. 이럴때는 서버의 .htaccess 파링의 # END WordPress 아래 부분에 다음 내용을 추가해서 명시적으로 유니코드를 사용하도록 하면 됩니다.

# END WordPress

<IfModule mod_url.c>
CheckURL On
ServerEncoding UTF-8
</IfModule>


워드프레스에서 고유주소 설정하기


왼쪽 사이드바 메뉴에서 설정 > 고유주소를 클릭합니다.



고유주소 설정 화면이 나타납니다. 일반 설정 옵션을 글 이름으로 선택하고 변경사항 저장 버튼을 클릭합니다. 

일반 설정 항목에 보면 여러가지 표시방법으로 고유주소를 설정할 수 있습니다. 기본으로는 http://shuman.kr/?p=123 형태로 되어있지만 추천하지는 않습니다. 가능한 해당 글의 정보를 반영할 수 있는 글 이름으로 설정하는 것이 좋습니다. 날짜나 월별로 관리하고 싶다면 날짜와 이름 이나 월과 이름을 사용해도 크게 문제될 것은 없습니다.


일상의 삶이 된 구글


검색 엔진 사업으로 시작한 구글은 안드로이드 및 유망한 회사를 인수합병하면서 이제는 우리의 현실의 삶에 밀접한 영향을 끼치는 회사가 되었습니다. 아이폰과 함께 등장했던 스마트폰 시장의 애플 기류는 그 자체의 폐쇄성 때문에 시장 확장에 어려움을 겪었던 것이 사실입니다. 아이폰 등장과 함께 스마트폰 시장을 완전히 장식할 것 같은 기세는 이미 꺾긴지 오래고, 아무래도 소스공개와 확장성을 겸비한 구글의 안드로이드에게 밀리고 있습니다.

구글의 시스템들이 삶과 밀접한 관련이 있는 것은 구글이 무료로 배포하는 앱과 프로그램들 때문이라해도 과언이 아닙니다.
구글이 얼마 전 공개한 구글 포토의 용량 무제한 정책은 스마트폰으로 사진 찍기를 좋아하는 일반인들에게 큰 찬사를 받았습니다.

사진을 많이 찍다보면 언제나 접하는 문제는 용량의 장벽입니다. 구글 포토는 용량을 무제한으로 만들어주는 대신 그 대가로 사용자의 정보를 획득할 수 있습니다. 사용자의 정보가 구글 서버에 많아지고 사람들이 올리는 사진이 많아질수록 구글의 자동화 엔진은 사진을 자동으로 분류하는 알고리즘을 최적화 할 수 있습니다.

저 역시 오랫동안 구글프로그램과 앱들을 사용하고 있습니다. 특히 생활하면서 없어서는 안 될 프로그램은 바로 구글 캘린더입니다. 스마트폰으로 구글 캘린더를 사용해서 일정을 관리하고 노트북과 함께 활용하고 있습니다. 아직까지 구글 캘린더를 사용하지 않는 분들은 이번 기회에 활용해보시기 바랍니다.

워드프레스에 들어간 구글 캘린더


일을 하다보면 언제나 들여다보는 것이 일정입니다.
워드프레스에 구글 캘린더를 적용하면 그룹이나 팀 간의 일정을 공유하기에 좋은 플랫폼이 됩니다.
그럼 워드프레스 사이트에 구글 캘린더를 적용해보겠습니다.

구글 캘린더를 워드프레스에 적용하기 위해서는 별도의 플러그인을 설치하지 않아도 됩니다. iframe 형태로 바로 워드프레스에 삽입할 수 있습니다.

구글 캘린더에서 소스 복사


먼저 구글 캘린더( https://calendar.google.com/ )에 로그인 합니다. 구글 캘린더에 로그인하면 현재 캘린더에 기록한 일정들이 디스플레이 됩니다. iFrame을 활용해서 이 캘린더를 그대로 워드프레스에 가져오는 방법을 알아보겠습니다.




왼쪽 메뉴의 내 캘린더에서 고객 주간 미팅에 마우스를 올려놓고 마우스 우클릭을 합니다. 우클릭을 하면 뜨는 팝업에서 캘린더 설정을 클릭합니다.




고객 주간 미팅 세부정보 화면이 디스플레이 됩니다. 아래쪽에 있는 이 캘린더 추가하기 항목에 iframe 소스코드를 복사합니다. 이 소스코드가 바로 구글 캘린더 소스입니다.





워드프레스 페이지에 구글 캘린더 붙여넣기



워드프레스에서 새 페이지 추가를 클릭해서 새 페이지를 생성합니다.



새 페이지의 제목은 구글 캘린더를 입력합니다. 오른쪽에 텍스트 탭을 클릭한 뒤에 조금 전 복사했던 구글 캘린더의 iframe 소스를 붙여 넣고 미리보기 버튼을 클릭합니다.




워드프레스 페이지 내에 구글 캘린더가 정상적으로 삽입된 것을 볼 수 있습니다. 구글 캘린더 자체적으로 많은 기능을 내장하고 있기 때문에 별도의 캘린더 플러그인을 설치하지 않고도 워드프레스에서 캘린더 일정을 함께 공유할 수 있습니다. 플러그인을 설치해서 캘린더를 중복관리하지 않아도 되는 이점이 있는 셈입니다.
     


웹사이트에는 항상 홈(Home)이라는 페이지가 있습니다. 홈은 사이트에 접속할 때 기본적으로 보여지는 페이지를 말합니다.
일반적으로 홈은 회사사이트의 경우 회사 홍보나 간략한 소개로 꾸며지는 경우가 많습니다.
사용자가 사이트에 접속해서 처음 보는 화면이기 때문에 가장 신경이 쓰이는 페이지이도 합니다.

개인 사이트의 경우에도 사이트의 성격을 가장 잘알수 있는 것은 메인 페이지입니다. 워드프레스에서는 메인 페이지를 전면 페이지라는 용어로 사용합니다. 여기에서는 전면 페이지의 디자인 측면은 배제하고 워드프레스를 사용해서 전면 페이지를 만드는 방법을 알아보도록 하겠습니다.

전면 페이지 설정하기


전면 페이지를 꾸미기 위해서는 먼저 Home 이라는 페이지를 만들고 워드프레스 설정 > 읽기 에서 전면 페이지 표시여부에서 정적인 페이지를 선택해야 합니다

먼저 왼쪽 사이트바에서 워드프레스 설정 > 읽기를 클릭합니다.



읽기 설정의 전면 페이지 표시 여부는 디폴트로 최근 글로 되어있습니다. 워드프레스의 태생이 블로그이다 보니 전면 페이지가 글목록이 나오는 최근 글로 선택되어져 있습니다. 이 옵션을 정적인 페이지로 바꾸고 앞으로 만들 전면페이지를 Home 이라는 페이지를 선택해야 전면 페이지가 사이트에서 디폴트 메인페이지로 보이게 됩니다. 정적인 페이지를 선택하고 Home 이라는 페이지를 선택하려면 Home 이라는 페이지를 만들어야 합니다.




Home 이라는 공백의 페이지 만들기


왼쪽 사이드바 메뉴에서 페이지 > 새 페이지 추가 를 클릭합니다.



일단 콘텐츠 내용은 작성하지 않고 정적인페이지로 연결하기 위해서 필요한 물리적인 페이지를 만들기 위해서 제목에 Home 이라고 작성하고 공개하기 버튼을 클릭합니다.




설정 > 읽기 화면에 들어갑니다.



읽기 설정에서 정적인 페이지의 라디오 버튼을 선택하고 전면 페이지에서 Home을 선택한 뒤 일기 설정의 저장버튼을 클릭합니다.



전면 페이지가 Home 으로 지정되었기 때문에 사이트에 접속하면 조금 전 만들었던 HOME 화면이 나타납니다. 이제 화면에 보여지는 전면페이지를 꾸며보도록 하겠습니다. 전면 페이지를 꾸미는데는 지난 시간에 공부한 Shortcodes Ultimate 플러그인을 활용하도록 하겠습니다.




무엇을 어떻게 만들지 먼저 눈으로 확인하면 공부하는데 이해가 빠를 것입니다. 우리가 만들 화면은 아래와 같습니다.

만들어 볼 전면 페이지 화면


아래 보여지는 전면 페이지를 하나하나 만들어 가겠습니다. 숏코드를 활용하기 때문에 HTML과 CSS를 알지 못해도 아래와 같은 화면을 만들어낼 수 있습니다. 그럼 시작하겠습니다.




홍보용 제목과 유튜브 홍보 영상 배치하기


홍보용 제목은 숏코드의 인용구를 사용해서 만들겠습니다. Insert shorcodes 버튼을 클릭합니다.



인용구 숏코드를 사용하기 위해서 Quote를 클릭합니다.



옵션 박스에서 아래와 같이 홍보 영상 제목을 입력한 뒤에 Insert shorcode 버튼을 클릭합니다.



[su_quote] 숏코드가 본문에 자동 입력되었습니다. 오른쪽에 변경내용 미리보기 버튼을 클릭해서 적용화면을 미리 확인하겠습니다. 변경내용 미리보기 버튼을 클릭합니다.



아래 화면과 같이 결과 화면이 디스플레이 되었습니다. 이제는 홍보용 유튜브 영상을 본문에 보이게 하겠습니다.


숏코드에서 Youtube를 선택합니다.



옵션 박스에서 유튜브 홍보영상의 URL을 입력한 뒤에 Insert shortcode 버튼을 클릭합니다.     



본문에 [su_youtube] 로 유튜브 숏코드가 입력되었습니다. 미리보기로 현재까지 화면을 확인하겠습니다.


현재까지 완성된 화면입니다. 조금씩 홈페이지 메인이 완성되고 있습니다.




서비스 내역 소개하기


홈페이지에서 제공하는 서비스 내역을 소개하는데에는 Heading, ROW, Service, Button  총 4개의 숏코드를 사용하였습니다.

숏코드에서 Heading 을 선택합니다.


Heading 옵션 박스에서 Size 항목을 20로 조정하고 Content 항목에 아래 내용을 입력합니다.



본문에 [su_heading] 숏코드가 입력되었습니다. 



지금까지의 적용화면을 확인합니다.



이번에는 서비스 내용을 소개하는 부분을 만들겠습니다. 먼저 Row 숏코드를 사용해서 화면을 삼등분하고 각 각에 서비스 숏코드를 사용해서 상세 설명을 적어가겠습니다. 

숏코드에서 ROW를 선택합니다.


옵션 박스는 디폴트로 그대로 저장합니다.



본문에는 다음과 같이 숏코드가 입력되었습니다. 이제 본문에서 숏코드를 편집하도록 하겠습니다.


위 코드를 정리해보면 아래와 같습니다. 코드는 정리하는 습관을 들이는 것이 좋습니다. 정리된 코드는 가독성을 높이는 효과를 나타냅니다. 아래에 Content 부분에 서비스 숏코드가 들어갈 것입니다. 


첫번째 Content를 지우고 그곳에 마우스 커서를 위치시킨 다음에 숏코드 선택화면을 띄웁니다.


Service를 선택합니다.



옵션 박스에서 제목에 3D 프린팅을 입력하고 Icon picker 버튼을 클릭해서 서비스 제목앞에 들어갈 아이콘을 선택합니다. 서비스 설명은 Content 항목에 입력한 뒤에 Insert shortcode 버튼을 클릭합니다.



본문에 숏코드 소스가 아래와 같이 자동으로 입력되었습니다. 변경내용 미리보기 버튼을 클릭해서 숏코드 적용화면을 확인합니다.



3D 프맂팅 서비스 제목과 내역이 입력된 화면을 아래와 같이 확인할 수 있습니다.  나머지 두 개의 콘텐츠도 서비스 숏코드를 활용해서 입력합니다.




버튼을 입력하기 위해서 버튼 숏코드를 클릭합니다.



아이콘 피커를 사용해서 버튼의 아이콘을 선택하고 버튼 제목을 입력합니다.




전면 페이지 구성을 위한 숏코드 입력이 모두 끝났습니다. 업데이트 버튼을 클릭해서 적용을 완료합니다.



엔드유저 화면에서 정상적으로 디스플레이 되는지 확인하겠습니다. 웹브라우져에 들어가서 http://shuman.kr 사이트로 접속합니다.
모든 코드가 적용되어서 다음과 같은 화면이 디스플레이 된 것을 확인할 수 있습니다.









글 리스트 화면 만들기


읽기 설정에서 정적인 페이지 전면 페이지를 지정하면 이전에 보이던 글 목록 화면은 사라지게 됩니다. 따라서 이때는 글 목록을 볼 수 있는 별도의 '글 리스트'이라는 더미페이지를 만들고 설정 > 읽기 > 읽기 설정의 글 페이지에서 연결을 해주어야 합니다.

새 페이지를 추가해서 제목에 글 리스트라고 작성하고 공개하기 버튼을 클릭합니다.



글 페이지에서 글 리스트를 선택하고 저장합니다.



이제 '글 리스트' 페이지를 메뉴에 추가해도 되고 그렇지 않으면 다음 URL http://shuman.kr/글-리스트/ 로 접속하면 글 목록 화면을 볼 수 있습니다.



워드프레스를 사용하면 글을 작성시 여러 개의 이미지를 첨부해서 간편하게 이미지 갤러리를 만들 수 있습니다. 이미지 갤러리를 만들기 위해서는 글 작성 화면에 들어가야합니다. 왼쪽 사이드바에서 글 > 새 글 쓰기를 클릭합니다.



제목에 이미지 갤러리라고 입력한 뒤에 미디어 추가 버튼을 클릭합니다.




왼쪽 메뉴에 갤러리 생성하기를 클릭합니다. 파일을 선택해서 이미지를 업로드 할 수 있고, 미디어 라이브러리를 사용해서 기존에 업로드된 이미지로 갤러리를 구성할 수 있습니다. 파일을 선택하세요 버튼을 클릭합니다.



총 9개의 이미지를 업로드 하였습니다. 파일을 업로드하면 자동으로 미디어 라이브러리에 추가 되게 됩니다.
오른쪽 아래에 있는 '새 갤러리 생성하기' 버튼을 클릭합니다.



갤러리를 편집하는 화면이 나옵니다. 이미지를 드래그해서 이미지의 순서를 변경할 수 있습니다.



그리고 각 이미지별로 이미지 캡션을 입력할 수 있습니다.



연결은 이미지를 클릭했을 때 연결되는 곳을 선택할 수 있습니다.



열 컬럼은 한 줄에 몇개의 이미지를 보여줄지를 결정하는 것입니다.
랜덤하게 보이기 위해서는 랜던 순서에 체크하면 됩니다.


모든 설정을 마치면 '갤러리 삽입' 버튼을 클릭합니다.

글의 본문에 이미지 갤러리가 삽입된 것을 확인할 수 있습니다. 공개하기 버튼을 클릭합니다.



사이트 보기 화면에 들어가보면 훌륭한 이미지 갤러리 페이지가 만들어진 것을 확인할 수 있습니다.



특정 이미지를 클릭하면 이미지를 상세하게 확인할 수 있습니다.



이곳은 워드프레스 사이트 설정을 하는 곳입니다. 왼쪽 사이드바에서 설정 메뉴를 클릭합니다.
서브 메뉴에는 일반, 쓰기, 읽기, 토론, 미디어, 고유주소가 있습니다. 각각 서브 메뉴를 순서대로 설명하겠습니다.



일반 설정


일반 설정에서는 사이트의 제목과 태그라인등을 작성할 수 있습니다.

사이트 제목 : 웹사이트의 제목입니다. 디폴트는 설치시에 지정한 이름으로 적혀있습니다. 사이트의 특성에 맞게 수정하도록 합니다.
태그 라인 : 태그라인은 방문자에게 사이트를 요약해서 알려줄 수 있습니다.사이트의 설명이나 부제목 정도로 이해하면 됩니다.
워드프레스 주소 : 워드프레스가 실제 설치된 주소입니다.
사이트 주소 : 인터넷 브라우저 주소창에서 보이는 주소입니다. 사이트 주소가 반드시 워드프레스 주소와 동일하지는 않습니다.
이메일 주소 : 블로그 관리용 이메일 주소입니다.
새 사용자를 위한 기본 규칙 : 새 사용자가 만들어질 때 디폴트 사용자 권한입니다.
시간대 : 글의 작성 시간을 표시합니다.
날짜 표시 형식 : 한글이 포함된 것보다. 숫자로 이루어진 두번째 표시 형식을 추천합니다.
사이트 언어 : 사이트의 언어를 설정할 수 있습니다.



쓰기 설정


쓰기 설정은 특별히 설정할 것이 없습니다. 디폴트 설정 그대로 사용합니다.

기본 글 카테고리 : 글을 쓸 때 카데고리를 지정하지 않고 저장했을 때 자동으로 정해지는 카데고리를 설정하는 것입니다.
기본 글 형식 : 글을 쓸 때 기본으로 지정되는 글 형식입니다.





읽기 설정


전면 페이지 표시 : 사이트에 접속했을 때 어떤 화면을 보여줄지를 결정합니다.
최근 글은 블로그처럼 글을 작성한 순서대로 최신글이 맨 위에 위치하도록 하는 것입니다.
정적인 페이지는 특정 페이지를 만들고 사이트 접속시에 첫 화면에서 지정한 페이지를 볼 수 있도록 설정하는 것입니다. 단, 테마에 따라서 테마가 지정한 페이지로 설정되는 경우도 있습니다. 변경은 가능합니다.

페이지당 보여줄 글의 수 : 글 목록에서 몇개의 글을 보여줄지를 결정하는 것입니다.
보여줄 가장 최근의 신디케이션 피드 수 : RSS 피드에 대한 설정입니다. RSS는 Really Simple Syndication 의 약자로서 워드프레스 사이트에 있는 컨텐츠를 RSS로 퍼블리싱해서 사용자가 구독할 수 있도록 합니다. RSS는 일종의 컨텐츠 신문구독 시스템이라 생각을 해도 괜찮습니다.

검색 엔진 접근 여부 : 웹사이트가 완성되기 전까지는 체크를 해제하는 것이 좋습니다. 워드프레스 웹사이트가 완성된 이후에 체크해서 활성화 하면 됩니다.
체크를 하면 구글 검색엔진에 노출되고 구글 검색엔진의 정책 및 조건에 맞으면 색인(Indexing)이 되어서 작성한 글이 구글 검색으로 찾아볼 수 있습니다.          



토론 설정


토론 설정은 댓글에 관한 설정입니다.  

'댓글을 쓸 수 있게 합니다.' : 
회사소개등 페이지에 댓글을 다는 경우는 많지 않기 때문에 페이지 위주로 사이트를 구성할 경우에는 기본 글 설정에서 '댓글 쓸 수 있게 합니다' 를 비활성화 합니다. 그렇지만 블로그성 사이트라면 댓글을 허용하는 편이 좋습니다. 이곳에서 댓글 비활성화를 하여도 개별 글이나 페이지에서 댓글 사용 여부를 선택할 수 있습니다. 개별 글에서 설정한 것이 우선 적용됩니다.

'댓글을 쓴 사람의 이름과 이메일을 꼭 남겨야 됩니다' : 반드시 체크합니다. 스팸 로봇의 댓글을 막을 수 있습니다.

글쓴이에게 이메일 보내기 : 체크를 하면 댓글이 달릴 때 이메일로 알려줍니다.

댓글이 보이기 전에 : 댓글을 다는 것에 대한 승인 여부입니다. 해제하는 것이 좋습니다. 일일이 승인하려면 번거롭습니다.



미디어 설정


이미지의 사본의 크기를 설정하는 곳입니다. 워드프레스는 이미지 업로드시 자동으로 이미지 복사본을 만듭니다. 그 때 생성되는 이미지의 크기를 결정할 수 있습니다.



이미지 설정 팁)

워드프레스를 어느 정도 사용한 유저라면 고화질 이미지 업로드로 호스팅 서버의 하드디스크 용량을 다 써버려서 서버 용량을 추가로 증설해야 하는가? 하는 고민에 빠져본 경험이 있을 것입니다. 따라서 나름대로의 자신만의 이미지 업로드 정책이 필요할 것입니다.

미디어 설정에서 최대 크기의 이미지 폭은 가능한 1024 이하로 하는 것이 좋으며, 최대 크기의 이미지 폭은 워드프레스 전체 레이아웃의 크기와 맞추면 됩니다. 가령 예를 들어서 워드프레스 화면의 폭이 800 이라면 최대 크기의 이미지 폭은 800으로 맞추면 됩니다.

또한 아래처럼 이미지 세로 크기인 높이는 0으로 지정하면 워드프레스가 이미지 폭의 크기에 비례해서 자동으로 리사이징해서 이미지를 생성해주기 때문에 편리하게 이용할 수 있습니다.




고유주소 설정


고유주소 설정은 콘텐츠 글에 대한 URL 주소의 형식을 설정하는 것을 말합니다.
기본, 날짜와 이름, 월과 이름, 숫자, 글 이름, 사용자 정의 구조 중에서 선택할 수 있습니다.

가령, 기본으로 설정을 하면 http://shuman.kr/?p=123 형식으로 글에 대한 주소가 만들어집니다.
그렇지만 동일한 글이지만 글 이름으로 설정을 하면 http://shuman.kr/site-introduce 와 같이 글의 주제를 명시적으로 URL에 표기가 가능합니다
따라서 고유 주소 설정은 '글 이름' 으로 하는 것이 좋습니다.
(단, 페이지의 경우 기본으로 설정하지 않으면 무조건 글이름 형식으로 보여집니다.)







사용자 권한 관리


워드프레스 코어는 기본적으로 사용자의 권한 관리를 위한 사용자 메뉴를 제공합니다. 워드프레스에서 관리하는 사용자의 권한 등급은 아래와 같습니다.

워드프레스 사용자 권한 체계)

권한명
권한
구독자(Subscriber)
포스팅된 글을 읽고 댓글을 달 수 있습니다. 자신의 프로필 정보는 수정이 가능합니다.
기여자(Contributor)
글을 쓸 수는 있으나 글을 발행할 수는 없습니다.
글쓴이(Author)
글을 쓸 수도 있고 글을 발행할 수도 있습니다.
편집자(Editor)
기여자나 글쓴이의 글도 편집할 수 있습니다.
관리자(Administrator)
모든 권한을 가지고 있습니다.


국내에서 사용하는 일반적인 시스템의 권한 체계와는 조금 틀린면이 있습니다. 당장 권한의 이름만 보아도 꼭 언론사의 회사 시스템 같은 느낌이 들기도 합니다. 그 이유는 워드프레스의 태싱이 블로그에서부터 출발했기 때문입니다.
태생 자체가 그렇다보니 워드프레스는 웹진과 같은 사이트에는 바로 적용해서 사용하기에 충분합니다.

웹진이나 팀블로그의 경우 두 명이상의 관리자가 운영하는 경우가 많은데 워드프레스는 그런 경우에 최적의 CMS라 할 수 있습니다. 


사용자 메뉴


권한 관리를 위한 사용자 메뉴화면에 들어가기 위해서 왼쪽 사이드바 메뉴에서 사용자를 클릭합니다.



- 모든 사용자 

나의 웹사이트에 등록된 모든 사용자 목록을 조회할 수 있는 화면입니다. 현재는 shuman 이라는 사용자 1명만 등록되어있습니다. 역할을 보니 관리자로 되어있습니다. shuman은 관리자이기 때문에 사용자를 등록하고 워드프레스 사이트를 관리하는 모든 권한을 부여받은 사용자입니다.



- 사용자 추가하기

이 화면은 새로운 사용자를 추가하는 화면입니다. 이곳에서 사용자 정보를 입력하여 사용자를 추가하고 역할을 설정할 수 있습니다. 그럼 사용자를 추가하겠습니다.



사용자 정보를 입력합니다. 사용자명은 한글로 입력하면 오류가 발생하기 때문에 영문으로 입력합니다.
역할 부분을 선택해서 원하는 사용자 권한을 부여할 수 있습니다. 홍길도 유저는 구독자 권한으로 선택하고 '새로운 사용자를 추가' 버튼을 클릭합니다.



사용자 목록 화면에 honggildong 사용자가 추가된 것을 확인할 수 있습니다. 역할은 구독자 입니다. 이런식으로 각각의 사용자를 등록해서 권한을 부여하면 됩니다.

실제로 웹진이나 팀블로그 같은 사이트는 혼자서 사이트에 글을 쓰는 경우는 많지 않습니다. 여러명이 글을 쓰고 글들을 검토하는 권한을 부여받아서 공동으로 작업을 하는 경우가 많습니다. 글을 쓰는 사람들을 기자라고 하면 기자는 기여자(Contributor) , 글쓴이(Author) 의 권한을 부여하고 편집장 역할을 하는 사람에게는 편집자(Editor) 권한을 부여하면 훌륭한 팀블로그를 만들어 갈 수 있습니다.



- 나의 프로필

관리자의 프로필 정보를 설정하는 곳입니다. 




사용자명은 변경할 수 없으며 이름, 성, 닉네임, 이메일등 사이트 대표 관리자의 프로필 정보를 입력하는 곳입니다.




메뉴 구성하기


홈페이지에서 사용할 페이지와 카테고리를 등록했으면 홈페이지 메뉴에서 보이도록 하는 연결 작업을 진행해야 합니다.
메뉴 연결 작업은 메뉴 편집기에서 할 수 있습니다. 메뉴 편집기는 왼쪽 사이드바의 외모 > 메뉴를 클릭하여 들어갑니다.



메뉴 편집하기 탭에서 메뉴를 구성하고 편집할 수 있습니다.



메뉴에 사용하기 위해서 이미 만들어놓은 페이지와 사용자정의 링크, 카테고리가 왼쪽 박스에 나타납니다. 

메뉴를 구성하는 작업순서는 다음과 같습니다.
첫 번째, 메뉴에 연결할 페이지를 배치
두 번째, 메뉴에 연결할 카데고리를 배치



모두 보기 탭을 클릭해서 추가했던 모든 페이지를 확인합니다.



메뉴에 추가 하기를 원하는 항목을 체크한 뒤에 '메뉴에 추가' 버튼을 클릭합니다.



오른쪽 박스에 메뉴가 추가된 것을 볼 수 있습니다. 




메뉴를 원하는 트리 구조로 구성하는 것은 어렵지않습니다. 단지 메뉴를 마우스로 클릭해서 드래그해서 원하는 곳에 가져다 놓으면 됩니다. 서브메뉴로 만드는 것도 간단합니다. 메뉴 간의 상하위 구조를 만들기 위해서 살짝 오른쪽으로 움직이면 서브메뉴로 만들어집니다.
회사 비전을 드래그해서 회사 소개 쪽으로 아래 그림과 같이 배치합니다.




이러한 방법으로 나머지 메뉴도 배치해서 메뉴 구성 작업을 완료합니다.



이번에는 카데고리를 메뉴에 추가해보겠습니다. 왼쪽 박스에서 카테고리를 선택한뒤에 모두 보기 탭을 클릭합니다.



조금 전에 페이지에서 했던 작업처럼 메뉴에 구성하기 원하는 항목을 체크한 뒤에 메뉴에 추가 버튼을 클릭합니다.





오른쪽 박스에 카테고리 항목도 새롭게 추가된 것을 볼 수 있습니다.


카데고리 항목도 마우스로 드래그해서 메뉴 구성을 진행합니다. 금주 제품서비스 안내 카데고리를 드래그해서 제품서비스 안내 밑으로 배치합니다.



메뉴의 배치가 다음과 같이 완료되었습니다. 



이제 메뉴 설정부분에 '상단 주 메뉴' 체크박스 부분에 체크를 한 뒤에 메뉴 저장 버튼을 클릭하여 메뉴 구성을 완료합니다.



웹사이트 화면에 등록한 메뉴가 정상적으로 보이는지 확인하기 위해서 왼쪽 상단의 사이트명을 클릭해서 사용자 화면으로 이동합니다.



사용자 웹사이트 화면을 확인하면 오른쪽 상단에 메뉴가 생성된 것을 볼 수 있습니다.




 
일전에도 강조했듯이 메뉴를 만들기 위해서 무엇보다도 중요한 것은 사이트맵을 기획하거나 메뉴구조도를 미리 만들어 보는 것입니다.

자신의 생각을 글이나 그림, 도표로 정리되지 않은 상태에서 메뉴를 구성하면 여러 번 변경하는 일이 빈번하게 발생할 수 있기 때문입니다. 먼저 내가 만들 워드프레스 사이트의 목적을 생각하고 목적에 입각해서 메뉴 구성을 그려보고 워드프레스에 적용하면 됩니다.



페이지 만들기


워드프레스의 콘텐츠 형식은 두 가지로 분류됩니다. 글과 페이지입니다. 글은 블로그 같은 동적인 곳에 적합하고 페이지는 정적인 곳에 적합하기 때문에 회사 소개나 사이트 소개에 대한 내용은 페이지(Page) 콘텐츠로 작성해야 합니다.

왼쪽 사이드바에 페이지 > 새 페이지 추가를 클릭합니다.



페이지를 추가 할 수 있는 화면이 나옵니다. 페이지를 만드는 것도 카테고리와 동일하게 스프레드시트를 통해서 정리한 뒤 입력하는 것이 좋습니다. 페이지를 추가 할 목록은 다음과 같습니다.


이곳에 사이트 소개에 대한 제목과 본문을 입력해야 합니다.
메뉴 연결을 구성을 위해 만드는 것이므로, 본문 내용은 임시로 간략하게 작성합니다. 



제목에 '회사 소개'라고 입력합니다. 제목을 입력하자마자 하단에 고유주소가 생성되는 것을 볼 수 있습니다.


고유주소는 작성하는 페이지에 접속할 수 있는 URL이 됩니다. 고유주소란에 노란색으로 마킹되는 부분이 나타나는데 이곳이 바로 슬러그 부분입니다. 슬러그는 해당 글에 대한 짦막한 요약 정보라고 보면됩니다. 제목을 한글로 입력하면 자동으로 생성되는 슬러그는 한글로 생성이 됩니다. 그렇지만 슬러그는 영문으로 변경하는 것이 좋습니다. 간혹 호스팅 업체에 따라서 한글이 깨지는 경우가 발생하기 때문입니다.

슬러그를 편집하려면 고유주소 옆에 편집 버튼을 클릭해서 변경할 수 있습니다. 슬러그는 잘 작성하는 것이 좋습니다. 글에 대해서 잘 정리된 슬러그는 구글 검색엔진에게도 좋은 정보를 제공하기 때문입니다.

페이지에 대한 슬러그는 메뉴구조도 등에 따로 잘 정리해 두는 것이 좋습니다.



그럼 조금 전 입력한 한글 슬러그를 편집 버튼을 클릭해서 영문 슬러그 변경하고 OK 버튼을 클릭합니다.



고유주소 슬러그(노란색 마킹) 부분이 영문으로 변경되었습니다.



오른쪽에는 페이지 속성부분이 있습니다. 내용은 어렵지 않습니다.



상위 : 페이지의 상하위 구조를 만들 때 사용하는 것입니다. (카테고리의 부모 옵션으로 생각하면 됩니다.)
템플릿 : 일반적으로 기본 템플릿을 사용합니다. 테마에 따라 제공하는 템플릿이 상이합니다.
순서 : 화면에서 보이는 순서를 조정합니다.



마지막으로 본문 내용을 간략히 입력하고 공개하기 버튼을 클릭합니다. 본문 작성이 완료되면 반드시 공개하기 버튼을 클릭해야 합니다.  아직 공개하기 버튼이 눌러지지 않은 페이지는 메뉴를 구성하기 위한 메뉴 편집기 화면에서 나타나지 않아서 메뉴로 구성할 수 없습니다.



왼쪽 사이드 메뉴에서 페이지 > 모든 페이지를 클릭합니다.



회사 소개 페이지가 추가된 것을 확인할 수 있습니다. 이제 등록해야할 나머지 페이지들도 지금까지 했던 방법대로 등록합니다.



나머지 페이지 들도 위와 같은 방법으로 차례차례 등록을 진행합니다.


모두 등록이 완료되면 모든 페이지 목록에 다음과 같이 메뉴에 사용할 페이지가 나타날 것 입니다.




카테고리란?


카테고리란 글에 대한 주제를 분류할 수 있는 워드프레스의 기능입니다. 카테고리 자체에는 콘텐츠가 담겨있지 않습니다. 단지 사용자가 카테고리를 클릭하면 그 카테고리로 지정된 글 목록이 보여지게 됩니다.

처음에 글을 쓰게 되면 글의 갯수가 많지 않아서 분류의 필요성을 느끼지 못합니다. 그렇지만 작성한 글의 갯수가 많아지면 태그나 카테고리를 통한 분류를 하지않을 경우 글이 정리 되지 않고 나중에 찾아보기도 어렵습니다.

카테고리는 글의 정리를 위한 도구인 셈입니다. 워드프레스에서 카테고리 기능은 왼쪽 사이드바에 글 > 카테고리 에 위치하고 있습니다. 카테고리는 글에 대한 관리의 목적으로 만들어진 것이라고 볼 수 있습니다. 카테고리 아래에 있는 태그 역시 마찬가지 입니다.


워드프레스에서 글을 작성하면 시간의 역순으로 글이 보여집니다. 가장 최근에 작성한 글이 맨 위에 보이는 식입니다. 기본적으로 글이 시간의 역순으로 보여지는 까닭은 워드프레스의 태생 자체가 블로그를 위한 프로그램으로 시작되었기 때문입니다. 

워드프레스에는 페이지라는 개념도 있습니다. 카테고리의 글이 동적이라면, 페이지는 회사 소개등에서 볼 수 있는 정적인 페이지를 표현하는데 주로 사용합니다.

워드프레스를 처음 설치하고 글을 쓰기 시작할 때 카테고리를 따로 지정하지 않았습니다. 그렇지만 워드프레스가 설치되고 나면 기본적으로 '미분류'라는 카테고리가 생성되어 있습니다. 그래서 카테고리를 새로 만들지 않은 글들은 자동으로 '미분류'라는 카테고리로 분류가 되는 것입니다.


그럼 이제 카테고리를 새로 만들고 구성해보도록 하겠습니다.    


카테고리 구성하기


카테고리를 구성하기 위해서는 왼쪽 사이드바 메뉴에서 글 > 카테고리 화면에 들어가야합니다. 글 > 카테고리를 클릭합니다.



카테고리 화면을 보면 새 카테고리를 추가하기 위해서 이름을 입력하고 슬러그를 입력하게 되어있습니다. 슬러그를 입력할 때는 가능한 영어로 네이밍을 하는 것이 좋습니다. 한글로 작성했을 때 호스팅 서비스에서 충돌을 일으킬 때 한글이 깨지는 경우가 간혹 발생할 수 있기 때문입니다.
또한, 구글 검색엔진에 최적화를 위해서도 영어로 슬러그를 작성할 것을 권고합니다.



카테고리는 카테고리간 상하위 구조로 구성할 수 있습니다. 상하위 구조로 구성할 때 사용하는 것이 '부모' 옵션입니다. 이 옵션을 사용해서 계층적인 구조로 카테고리를 구성할 수 있는 것입니다.




현재 구성하려고 하는 카테고리를 스프레드시트에 정리합니다. 대분류 중분류 옆에 해당 카테고리의 슬러그도 영문으로 함께 기입합니다. 아래과 같이 작성이 스프레드시트에 작성이 완료되고 나면 워드프레스 카테고리 화면에서 입력하여 구성하면 됩니다.



그럼 먼저 대분류인 '제품서비스 안내' 부분을 입력하겠습니다. 이름란에 '제품서비스 안내'를 입력합니다. 그리고 슬러그에는 product-report 라고 입력합니다. 부모 부분은 최상위이기 때문에 없음으로 선택된 상태에서 새 카테고리 추가 버튼을 클릭합니다.



오른쪽 화면에 '제품서비스 안내' 카데고리가 추가되었습니다. 




이번에는 두번째로 중분류인 '금주 제품서비스 안내'를 추가하겠습니다.


중분류인 '금주 제품서비스 안내'는 대분류인 '제품서비스 안내' 밑에 트리처럼 연결되어야 하므로, 부모 옵션에서 '제품서비스 안내'를 선택해야 합니다.




중분류인 '워드프레스 시작하기'는 대분류인 '워드프레스 강좌' 밑에 트리처럼 연결되어야 하므로, 부모 옵션에서는 '워드프레스 강좌'를 선택해야 합니다. 부모를 선택한 뒤, 이름과 슬러그를 입력하고 새 카테고리 추가 버튼을 클릭합니다.



'금주 제품서비스 안내' 가 하위라는 것을 알려주는 인식자인 대쉬(-)가 붙고 중분류가 추가 된것을 목록에서 확인할 수 있습니다.



등록한 카테고리에 대한 수정을 하려면 카테고리 이름 아래에 있는 편집을 클릭합니다. 


※ 삭제 버튼을 클릭할 때는 주의를 해야합니다. 카테고리의 삭제를 하면 별도의 휴지통에 보관되지 않고 바로 완전히 삭제되기 때문입니다.

카테고리 편집 화면에서 이름이나 슬러그 부모 옵션을 변경하고 수정할 수 있습니다. 



이제 이런 방법으로 구성할 나머지 카테고리도 모두 등록합니다. 






워드프레스의 사이트 메뉴를 구성하는 방법을 알아보도록 하겠습니다.
왼쪽 메뉴바에서 외모 > 메뉴를 클릭합니다. 아래에 나오는 화면이 메뉴를 편집하는 화면입니다. 이곳에서 내 사이트의 메뉴를 구성할 수 있습니다.


현재 사이트 화면에서 오른쪽 상단의 메뉴 부분에는 아직 메뉴를 구성하지 않았기 때문에 디폴트로 샘플페이지가 보입니다.



메뉴구조도 만들기

메뉴를 구성하기 위해서는 먼저 메뉴구조도를 만드는 것이 중요합니다.

메뉴 구조도는 사이트를 기획할 때 가장 중요한 요소 중의 하나입니다. 잘 구성된 메뉴구조도는 구글 검색엔진 최적화(SEO)에도 좋은 결과를 나타냅니다. 사이트 기획의 핵심 요소인 메뉴구조도를 만드는 것은 어렵지 않습니다.
메뉴 구조도를 만들 때 앞서 설명한 알마인드를 사용해도 되고 MS 엑셀이나 구글 스프레드시트를 이용해도 됩니다.

참고 포스팅)

아니면, 컴퓨터 프로그램이 아닌 단순히 종이에 연필만 있어도 메뉴구조도를 만드는데는 문제가 없습니다.
여기에서는 스프레드시트를 사용해서 메뉴구조도를 만들고, 워드프레스 메뉴 관리화면에 적용하도록 하겠습니다. 

먼저는 머리속에 만들려는 사이트에 대한 구상을 하고 그 다음은 생각했던 내용을 메뉴 구조도로 만들면 됩니다.
메뉴 구성은 대분류, 중분류로 2단계 구성합니다. 


항목 중에 구분이라는 항목을 두었는데 구분은 메뉴에 연결된 화면의 종류에 따라서 페이지, 카데고리, 사용자 정의로 분류할 예정입니다.

머리속에 구상한 가상 회사의 메뉴 구조도를 아래와 같이 작성하였습니다.



사이트 메뉴 구성 준비하기

이제 메뉴구조도를 기반으로 워드프레스 사이트의 메뉴를 구성하겠습니다. 



현재까지 메뉴 이름 왼쪽에 페이지, 사용자정의 링크, 카테고리 부분이 비활성화 되어있습니다. 



메뉴를 구성하기 위해서는 먼저 메뉴를 생성해야 합니다. 메뉴 이름 란에 기본 메뉴 라고 입력한 뒤 메뉴 생성 버튼을 클릭합니다.




조금전에 비활성화 되어있던 왼쪽의 페이지, 사용자정의 링크, 카테고리 부분이 활성화 되고, 오른쪽에 메뉴 설정 부분도 설정이 가능하게 변경되었습니다.




워드프레스에서 메뉴를 구성하는 방법은 왼쪽(페이지, 사용자정의 링크, 카테고리) 부분에서 메뉴를 구성하기를 희망하는 것을 선정해서 메뉴에 추가하면 됩니다.

그렇지만, 메뉴를 구성하기 위해서는 실제로 구성할 페이지와 사용자정의 링크, 카테고리가 존재해야 합니다. 그래야 메뉴와 연결할 수 있습니다. 카데고리, 페이지등 메뉴 연결에 필요한 세부적인 작업은 바로 다음 글에서 이어서 진행하겠습니다.

이어지는 포스트)
카테고리 만들고 구성하기


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


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

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

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



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



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



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



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





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





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



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

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




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



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



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






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


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




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



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




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


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




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



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



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




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



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



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



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



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






+ Recent posts