30분만에 나만의 웹사이트 제작하기#3

#3 사이트 기본 설정하기 (설정하기 10분)

LuisK
XEHub
7 min readJul 3, 2019

--

오랜 웹사이트 제작 히스토리를 가지고 있는 Xpressengine의 세번째 버전, XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기위해 제작되었습니다.
이번 챕터에서는 설치된 XE3를 설정하는 방법을 알아볼 것입니다.

다른 글 보기: #0, #1, #2, #3,#4

XE3 3.0.1 부터 설치시 포함되는 기본테마 “Together”가 설치된 메인 화면입니다.

호스팅 공간에 XE3를 업로드 하여 데이터 베이스 환경을 알아보았고, 설치하였습니다.
이번 시간에는 나만의 웹사이트를 만들기 위해 필요한 XE3의 기본 설정을 알아봅시다.

관리자 메뉴 이동하기

XE3 3.0.1 기준으로 기본 테마로 “Together”라는 이름의 테마가 설치되어 보여집니다. 상단 메뉴의 오른쪽에서 로그인 버튼을 눌러 로그인 한 후, 설정을 클릭합니다.

로그인은 오른쪽의 프로필 모양에 마우스를 올려 로그인 할 수 있습니다.

왼쪽의 관리자 메뉴에서 설정 > 기본 설정을 클릭하여 사이트의 기본 설정을 할 수 있습니다.

기본 설정은, 관리자 메뉴에서 설정 > 기본 설정을 클릭하여 사이트의 기본 설정을 할 수 있습니다.

사이트 기본 설정

기본설정에서는 주로 브라우저에서 보이는 이름사이트의 주소, 사이트의 아이콘인 파비콘과 그 파비콘의 미리보기를 제공하고 있습니다.
더 나아가, 검색 엔진이 내 사이트를 수집할때 더 잘 정리된 컨텐츠를 수집하게 도와주는 상세 설정도 제공하고 있습니다.

부가 설정으로는 메일링과, 뒤에서 설명할 XE STORE TOKEN 설명을 통해 구매한 플러그인 또는 무료 플러그인을 쉽게 설치할 수 있습니다.

기본 설정에서는 이름과, 주소, 파비콘을 등록할 수 있는 환경을 제공합니다.

사이트의 이름은 브라우저에서 아래의 코드를 보여주는 역할을 합니다.

<title>사이트 이름</title>

현재는 아무런 설정을 하지 않아, XE3로 나오고 있지만 나만의 웹사이트 제목을 입력하면 됩니다.

사이트 주소는 기본적으로는 변경하지 않는 항목이지만, 서버이전 또는 도메인을 구매하고 연결해서 도메인이 바뀌는 경우에 사용할 수 있습니다.

파비콘은 필수 사항은 아니지만, 모바일에서 바탕화면 또는 북마크로 등록되거나 하였을때 보여지는 앱의 아이콘과도 같습니다.
조금 더 디테일한 내 사이트를 만들고 싶다면, 파비콘도 만들어서 올리는 것도 좋습니다.

사이트 상세설정

상세 설정에서는 검색 엔진이 내 사이트를 수집할때 더 잘 정리된 컨텐츠를 수집하게 도와주는 설정을 할 수 있습니다.

XE3에서 제공하는 상세설정 환경

브라우저 제목은 게시판의 게시글을 읽을때 아래처럼 나오게 됩니다.

<meta property="og:title" content="게시글제목 - 브라우저 제목">

브라우저 부제목은 직접적으로 브라우저 타이틀에 나오지는 않지만,
검색엔진이 색인하여 가져올때 게시글을 읽는 페이지를 제외하고 아래처럼 나오게 됩니다.

<meta property="og:title" content="브라우저 제목 - 브라우저 부제목">

설명은 검색 엔진에 내 사이트를 소개할 수 있는 문구를 입력하는 항목입니다. 아래에 코드와 이미지 샘플을 보여드립니다.
아래의 예시는 사이트 대표사진 까지 등록했을때의 예시입니다.

<meta property="og:description" content="사이트 설명">
<meta property="og:image" content="설정한 이미지 파일 주소">
왼쪽은 통합검색, 오른쪽은 SNS형 미리보기 입니다.

메일링 기본 설정

이 설정이 끝났다면, 아래의 항목중 “메일링 기본 설정” 항목이 있습니다.

메일링이란, 사이트에서 공지 또는 기타 필요로 의해 보내는 메일의 발신자 이름과 주소를 설정할 수 있는 항목입니다.

메일 발신자 이름은 메일을 보낼때 발신자 이름을 설정할 수 있고,
발신 이메일 주소는 발신 전용 메일 주소 또는 회신 받을 수 있는 이메일 주소를 설정하여 이메일을 보낼 수 있습니다.

예를 들어 위의 이미지 처럼 메일링 설정을 하고 저장하면 네이버에서는 아래의 이메일을 받을 수 있습니다.

메일 주소는 꼭 본인 사이트의 도메인 또는 회신 받을 수 있는 이메일 주소로 설정하여 스팸(SPAM) 으로 등록되는 일이 없도록 유의 해주시면 좋겠습니다.

플러그인 설치 설정

이제 우리는 사이트 구성에 필요한 플러그인을 받을때를 대비하여, 미리 XE Store에 사이트를 등록하고 토큰이라고 하는 인증키를 받을 것입니다.

XE Store에서는 XE3로 사이트를 만들면서 필요한 익스텐션과 테마를 판매, 제공하는 오픈스토어 입니다.

토큰을 입력해서 미리 내 사이트에 추가한 테마나 익스텐션을 내려 받아 설치하거나, 유료 플러그인의 인증을 할때 사용됩니다.

아래 주소에서 우리는 토큰을 발급받을 수 있습니다.

https://store.xehub.io/

XE3의 공식 홈페이지 계정과, 네이버, 깃허브로 로그인을 할 수 있습니다.

XE 스토어에서는 XE3 공식 홈페이지 계정과 ,네이버, 깃허브 계정으로 로그인 할 수 있습니다.

원하는 계정으로 로그인 또는 회원 가입을 해주세요.

로그인 하고 내 프로필을 클릭한 후, 내 사이트를 클릭하여 아래의 화면으로 이동할 수 있습니다.

이 화면에서 상단의 사이트 추가하기 버튼을 클릭하여 내 사이트를 아래의 예시처럼 추가합니다. 이 페이지에서 등록한 사이트들은 추후 라이선스 관리 및 유료 플러그인 활성화에 필요한 인증수단으로 사용됩니다.

사이트의 이름은 관리용 이름을 입력하고, 사이트 주소는 기본설정에 있는 주소를 복사하여 http:// 또는 https:// 를 포함하여 입력해주세요!

모두 입력했다면, 하단의 사이트 추가 버튼을 눌러 아래 화면이 나타날 것입니다.

토큰을 추가해야하는 사이트의 토큰 보기를 클릭하면 아래와 같이 내가 만든 사이트의 토큰을 보여줍니다.

이 토큰을 복사하여, 플러그인 설치 설정 항목에 붙여넣은 다음 저장버튼을 누르면 됩니다.

각자 본인의 사이트의 토큰을 복사해 주세요.
복사한 토큰은 맨 하단의 플러그인 설치 설정 항목에서 붙여넣을 수 있습니다.

우리는 10분만에 사이트의 기본 설정을 끝냈고, 나중을 위한 XE Store에 가입하여 사이트 등록까지 끝 마쳤습니다.

여기 까지 읽으신 여러분은 잠시 일어나 쉬어도 좋습니다.
충분히 휴식을 취한 뒤 사이트를 구성하는데의 핵심인 메뉴를 만드는 방법에 대해서 알아보도록 하겠습니다.

다음 글 보러가기 : #4 사이트 이름과 메뉴 만들기 (준비중)

--

--