XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.

XE CAMPUS 바로 가기

#0,#1, #2, #3

앞서 다뤘던 내용과, 다룰 내용

이전 시간에는 더미로 만든 테마의 코드를 알아보고, 파일을 쪼개 경우별로 테마 블레이드 파일을 불러오는 방법에 대해서 알아보았습니다.

이번 시간에는 메뉴를 출력하고 메뉴 선택 시 active class 추가 방법, 테마 설정 별로 class를 다르게 주거나 추가 class 또는 id를 주는 방법에 대해서 알아보고, XE Store에 상품을 등록하는 방법을 간략하게 알아보겠습니다.

메뉴 출력 및 설정

메뉴 출력

메뉴 출력을 위해서는 테마 설정에 menu 타입을 설정해서 지정해야 합니다.
지난번 info.php에 작성해야 할 내용에 gnb라는 ID를 menu 타입이 있습니다.

이를 이용해서, 아래의 코드를 작성하면 메뉴가 출력됩니다.

<ul>
 @foreach(menu_list($config->get('gnb')) as $menu)
  <li>
   <a href="{{ url(https://medium.com/$menu['url']) }}" target="{{ $menu['target'] }}">
     {{ $menu['link'] }}
   </a>
  </li>
  @endforeach
</ul>

물론, 각 테마 또는 템플릿에 맞는 <ul> 또는 <li>를 치환해야 합니다.

메뉴 선택 시 Active

메뉴를 클릭했다면, 굵게 만들거나 선택한 부분을 알려줘야 합니다.
물론, 이 항목들은 css에서 각 선택된 항목에 해당하는 class의 효과 등을 작성해야 합니다.

<li @if($menu[‘selected’]) class=”active” @endif> 코드처럼 @if 문과 @endif 부분을 복사 붙여넣으면 해당 메뉴를 클릭하면 class에 active가 추가됩니다.

선택에 따른 Class 추가

테마 설정에서 컬러별 색상을 다르게 하고 싶은 경우 각 컬러 셋에 맞는 css를 작성한 후, class에 해당 값을 출력해주면 됩니다.

{{ app('xe.frontend')->bodyClass($config->get('color_set')) }}

예시 코드는 body에 컬러 셋 코드를 먼저 추가한 예시입니다.

컨텐츠 출력

컨텐츠는 {{ $content }} 코드를 입력한 곳에서 출력이 됩니다.
단, 이 코드는 한 레이아웃 구성 페이지에서 하나만 사용할 수 있으며, 한개 이상의 컨텐츠 출력 코드가 작성된 경우 오류를 출력하거나, 제대로 화면 구성이 되지 않을 수 있습니다.

만약, 테마 설정에서 메인과 서브를 나누었는데 메인 또는 서브 단일 화면에서 게시판 또는 메인 위젯이 보이지 않는다면 {{ $content }}를 출력할 컨텐츠 div 컨테이너에 입력해주시면 출력됩니다.

배포를 위한 준비

XE3는 기존의 XE1과는 다르게 플러그인 단위를 묶어 배포하거나 판매할 수 있습니다.
이를 패키지라고 부르며, 테마와 위젯, 익스텐션 기능을 나눠 배포하지 않고 한꺼번에 배포하고 싶은 창작자를 위한 패키지 배포를 지원하고 있습니다.

하나의 플러그인에서 make:theme 또는 make:skin 을 사용해 만들고 플러그인을 압축하여 배포하면, 테마와 연관된 스킨을 함께 판매하거나 배포할 수 있게 됩니다.

Composer.json 수정

SSH 또는 관리자 사이트에서 생성된 플러그인 더미에는 더미를 위한 설명과 이름으로 작성되어 있습니다.

이미지처럼 extra란은 설치된 테마 목록에서 나오는 플러그인 명, 플러그인 설명입니다.

그와 더불어 author란은 이 플러그인을 작성한 창작자의 이름, 이메일 등으로 수정하여 저장하면 됩니다.

XE Store 등록

XE Store에 등록하기 위해 회원 가입 이후, 플러그인 등록을 누르면 익스텐션(기능 단위 프로그램)인지 테마인지 구분하게 됩니다.

클릭 후 테마의 카테고리를 최대 2개까지 선택하여 지정한 후, 플러그인을 압축한 소스 코드를 업로드 하면 끝!

XE Store에 내 테마를 등록하여 더 많은 팬을 만들 수 있기 바랍니다!

지금까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)

XE 익스텐션 / 테마 창작자로써 내 플러그인의 팬을 만들어보세요!
XE Store 바로 가기

XE 공식 홈페이지 바로 가기
XE CAMPUS 바로 가기

창작자를 위한 XE3 테마 만드는 방법 #2 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

이 글은 창작자와 기술기업을 위해 XE3 설치 전 필요한 웹 서버 설치 가이드를 제공하고 있습니다.
본 게시글은 엔진엑스(Nginx) 기준으로 작성되어 있으며, 아파치는 별도 설정 없이 .htaccess 사용만 가능하다면 바로 사용하실 수 있습니다.

XE CAMPUS 바로가기

시작하기에 앞서

본 게시글에서는 Linux 기반의 Nginx를 기반으로 XE3를 설치하여 운용할 수 있는 웹 서버 환경 구성 방법에 대해 다루겠습니다.

그와 더불어 서버 OS로 적합한 CentOS를 기준으로 작업하며, 일부 명령어는 CentOS7 이하에서는 작동하지 않거나 다른 명령어일 수 있습니다.

SSH 접속 및 환경 구성

서버 환경 구성도 만들기

개발자 또는 프로젝트마다 다르지만, 운영하기 쉽게 /home 폴더에 domain이라는 폴더를 만들어 그 안에 내 사이트 도메인별로 분류하여 운영할 목적으로 폴더 및 경로를 관리합니다.

예를 들어 xe3dev.test 라는 도메인을 서비스로 운영하기 위해 /home/domain/xe3dev/www 이라는 디렉토리를 만들고, 개발 및 테스트용으로 test.xe3dev.test 라는 도메인을 테스트용으로 운용하려고 하면, /home/domain/xe3dev/test 라는 도메인으로 운영할 것입니다.

프로젝트의 작업자 또는 운영자의 성향에 맞는 디렉토리를 구성하지만 ,보안에도 신경을 써서 디렉토리를 작업해야 합니다.

LEMP 스택

LEMP스택이란 Linux + Nginx + MySQL(MariaDB)로 구성한 웹 어플리케이션을 의미합니다. 비슷한 말로 LAMP 스택이라고 LEMP 스택에서 Nginx 대신 Apache로 구성한 스택도 역시 많이 사용하고 있습니다.

Nginx 설치

Nginx는 웹 서버 종류 중 하나로 아파치(Apache)와 더불어 인기가 많은 웹 서버 중 하나입니다.

기본적인 CentOS의 repo(저장소)로는 Nginx를 설치할 수 없음으로 EPEL 저장소를 설치합니다.

$ wget http://rpms.remirepo.net/enterprise/remi-release-7.rpm
$ rpm -Uvh remi-release-7.rpm

그다음 해당 저장소가 정상적으로 설치되면 아래의 명령어로 Nginx를 설치합니다.

$ yum install nginx -y

설치가 되면, 리눅스를 재부팅하거나 예기치 않게 재부팅되더라도 자동으로 Nginx가 시작될 수 있게 명령어를 입력합니다.

$ systemctl enable nginx

그 이후 Nginx를 실행하여 정상적으로 실행되었는지 확인합니다.

$ service nginx start
# 또는
$ systemctl start nginx

PHP 7 설치

php7을 설치하기 위해서는 앞서 Nginx를 설치했던 것과 같이 추가적인 저장소 설치가 필요합니다.

$ wget http://rpms.remirepo.net/enterprise/remi-release-7.rpm
$ rpm -Uvh remi-release-7.rpm

위의 명령어를 입력하여, 저장소를 설치한 후, 기본적으로는 php7.2 패키지가 비활성화되어 있음으로 아래의 명령어로 활성화합니다.

$ yum install yum-utils -y
$ yum-config-manager --enable remi-php72

그 이후 php에 기본적인 패키지들을 설치해줍니다.

$ yum --enablerepo=remi,remi-php71 install php-fpm php-common -y

완료되었다면, php의 기본 모듈들을 설치해줍니다.

$ yum --enablerepo=remi,remi-php72 install php-opcache php-pecl-apcu php-cli php-pear php-pdo php-mysqlnd php-pgsql php-pecl-mongodb php-pecl-redis php-pecl-memcache php-pecl-memcached php-gd php-mbstring php-mcrypt php-xml -y

Nginx + PHP 섞기

이제 Nginx와 PHP를 내 마음대로 사용하기 위해서 Nginx에 php가 가동될 수 있게 해줘야 합니다.

먼저, Nginx의 설정을 바꾸기 위해 vi editor로 파일을 만듭니다.

$ vi /etc/nginx/conf.d/default.conf

deafult.conf 내용

server {
    listen   80;
    server_name xe3dev.test;
    #server_name에는 http:// 같이 프로토콜을 제외한 도메인 주소를 입력해도 됩니다.
 
    root   /home/domain/xe3dev/www;
    #원래는 /usr/share/nginx/html 경로
    #원하는 폴더로 변경

    index index.php index.html index.htm;
 
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

server_name에는 내 서버 IP 또는 도메인 등이 알맞게 들어가야 합니다.

또한, root에는 /home/domain/xe3deb/www로 설정되어 있었다는 점을 알아둡시다.

처음에 nginx를 실행하여 봤던 메인 페이지는 상단의 경로에 있던 index.html을 불러와서 보여준 것 입니다.

모든 파일의 작성 및 내용 수정이 끝났다면 nginx를 재 시작합니다.

$ service nginx restart
# 또는
$ systemctl restart nginx

다음에는 PHP-FPM를 세팅할 것입니다.
PHP-FPM 없이도 Nginx만으로도 웹서버를 운영 할 수 있는데 웹 서버만으로는 정적인 페이지밖에 표현을 못 하게 됩니다.

정적인 페이지란 우리가 사전에 만든 파일을 링크해서 이동시키거나 보여주거나 하는 단적인 기능만 할 수 있습니다. 하지만 우리는 그런 페이지가 아닌 DB에 데이터도 저장하고, 데이터를 가공해서 사용자에게 보여주는 등의 사이트를 만드는 것이 목표입니다.

그러기 위해선 추가로 Nginx와 PHP를 연동 시켜 동적인 웹 애플리케이션을 구축 할 수 있게 됩니다.

PHP-FPM를 설정하기 위해서 vi editor로 작성합니다.

$ vi /etc/php-fpm.d/www.conf

www.conf 내용

user = apache를 user = nginx로 수정
group = apache를 group = nginx로 수정

;listen.owner = nobody를 listen.owner = nginx로 수정
;listen.group = nobody를 listen.group = nginx로 수정

listen = 127.0.0.1:9000 를
listen = /var/run/php-fpm/php-fpm.sock 로 수정

하나의 장비에서 Nginx와 PHP-FPM이 운영된다면 유닛스 소켓 방식이 더 유리합니다. 그렇기에, listen에다 unix 소켓을 사용하였고 PHP-FPM 서비스의 권한을 nginx로 수정시켰습니다.

모든 내용의 작성이 끝났다면 언제나 :wq를 입력하여 저장하고 나옵니다.
그 이후 정상적으로 php가 연동되었는지 확인하기 위해, 아래의 php info를 작성하여 해당 페이지로 접속합니다.

<?php phpinfo(); ?>

만약, 작성한 내용이 그대로 보인다면 nginx를 재시작하여 다시 접속하거나, php 관련 설정 내용이 제대로 작성되었는지 확인합니다.

만약 그래도 페이지를 찾을 수 없는 404 Page Not Found 또는 기타 에러가 발생한다면 Selinux라고 하는 리눅스의 보안 정책으로 인해 제한되어 있을 수 있습니다.

대부분 구글링해서 찾게 되면 이 Selinux를 비활성화하라고 나와 있는데, 이는 보안 설정을 전부 비활성화되므로 아래의 명령어를 그대로 실행합니다.

$ stenforce 0

이제 웹 서버와 Nginx를 설치하여 확인했으니 가장 중요한 데이터베이스를 설치하면 끝!

MariaDB 설치

이제 Nginx와 PHP를 내 마음대로 사용하기 위해서 Nginx에 php가 가동될 수 있게 해줘야 합니다.

CentOS7에서는 MySQL이 아닌 MariaDB가 기본으로 잡혀서 MariaDB를 설치할 것입니다.

다음 명령어로 MariaDB를 설치합니다.

$ yum install mariadb-server mariadb -y

설치가 완료되었으면 서비스를 등록합니다.

$ systemctl start mariadb
$ systemctl enable mariadb

마지막으로 다음 명령어를 통해 기본적인 설정을 입력합니다.

$ mysql_secure_installation (이 명령어 입력)

Enter current password for root (enter for none):
...
...
...
...
Success!

Root의 비밀번호를 세팅하고, 가급적 Y 또는 N을 입력하는 항목에는 Y를 대답하여 기본 세팅된 데이터를 삭제하고 권한을 초기화 하는 것이 좋습니다.

이렇게 진행하면 Nginx와 PHP 7, MariaDB까지 모두 설치하였습니다.

이제 대망의 XE3를 설치할 차례입니다.

XE3 설치 및 구성

XE3 Core 다운로드

XE3는 공식 홈페이지( https://www.xpressengine.io/) 에서 다운로드할 수 있으며, 방금 만든 프로젝트의 폴더로 압축을 풀어 올려놓으면 설치 준비 끝!

DB 사용자 설정

DB를 사용하려면 root 계정에 db를 만들어주어야 합니다.
터미널은 너무 어려울 수 있으니, 조금 더 쉬운 adminer를 다운로드받아, 적절한 이름 (db.php 또는 dbdb.php) 으로 바꿔줍니다.

xe3dev.test/db.php 와 같이 변경한 파일명으로 접속하여 root 계정으로 로그인합니다.

데이터베이스 선택 창에서 데이터베이스 만들기 를 클릭합니다.

그 이후 원하는 DB 이름으로 이름을 지은 다음 오른쪽의 utf8mb4_general_ci 를 선택하여 저장합니다.

게시판 제목 또는 내용의 이모지 지원을 위해서 utf8mb4_general_ci 를 선택합니다.

아래와 같이 데이터베이스를 만들었다면, DB 설정도 끝!

축하드려요! 성공적으로 데이터베이스를 만들었습니다!

XE3 설치

DB사용자 설정까지 해주었다면, 이제 XE3를 본격적으로 설치할 때입니다.
XE3 최신 버전을 다운로드 받아 압축 해제하여 프로젝트 폴더에 옮겨줍니다.

본인의 서버 도메인 또는 IP로 접속한 다음 XE3 공식 홈페이지의 매뉴얼의 내용 중 “최신버전 다운로드 (웹/FTP 환경)” 항목을 참고하여 설치하면 끝!

가상서버 또는 리얼서버를 사용하여 웹 서버 설치부터, XE3 설치까지 해보았습니다.

처음 XE를 사용하여 서버를 이전해야 할 때, 또는 급하게 XE를 설치할 서버가 가상서버이거나, 리얼서버라서 당황하지 않고 단숨에!

XE는 창작자와 기술기업을 위한 기술 자료를 공유하고, 상생하는 건강한 커뮤니티 문화를 조성하기 위해 노력하고 있답니다 :)

창작자를 위한 XE 플러그인 장터도 들러보세요!
XE Store 바로 가기

XE 공식 홈페이지 바로 가기
XE CAMPUS 바로 가기

XE3를 위한 웹 서버 세팅 가이드 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

모든지 개발 서버가 있다면 좋지만, 그렇지 못한 경우가 있을 수 있습니다.
그렇다고 사비를 들여 언제 쓸지도 모르는, 장시간 사용하지 않는 개발 서버를 위해서 한달에 몇만원을 사용하기에는 또 아까운 느낌이 들기도 하죠.

Windows 환경에서 간단히 개발 환경을 설정하기 위한 방법과, XE3를 사용하는 방법을 공유합니다.

시작하기 전에

포트확인

가장먼저 80번 포트가 사용되는 곳은 없는지 확인 해야 합니다.
Windows powershell을 열어netstat -ano 명령어를 사용하여 80번 포트에 바인딩된 프로세스가 있는지 확인 합니다.
만약, 바인딩 된 프로세스가 있다면, 해당 작업을 저장 & 백업하고 kill -9 PID 를 실행하여 해당 프로세스를 종료해줍니다.

환경 구성하기

PHP 다운로드 / 설치

현재 설치되어 있는 Windows의 비트수에 맞는 php를 다운로드 합니다.
일반적으로는 4GB이상의 램(메모리)를 사용하고 있는 PC라면 64비트를 사용합니다.

PHP 다운로드

파일은 source code가 아닌 VC** x(64 or 32)의 네이밍이 되어 있는 파일을 다운로드 받아야 합니다.
예) VC15 x64 Non Thread Safe

그 이후 개발하기 편한 개발 디렉토리에 PHP를 업로드 합니다.
C:\php 에 업로드 하면 더욱 관리하기 편해집니다.

그 이후 환경변수 등록을 해야 합니다.
Windows10 기준으로 탐색기 > 내 PC(우클릭) > 속성 > 고급 시스템 설정 > 환경 변수(N) 클릭 하여 환경변수를 아래와 같이 추가합니다.

환경 변수 설정이 끝났다면, php 폴더에 들어가 php.ini-development 파일을 복사하여 php.ini 로 만들어줍니다.

그리고 아래의 변경사항을 반영해줍니다.

date.timezone = Asia/Seoul
extension_dir = "C:\php\ext" #해당 dir주소는 꼭 내 php위치로!

그리고 하단의 extension 을 아래를 복사 붙여넣기 해줍니다.

extension=bz2
extension=curl
extension=fileinfo
extension=gd2
extension=gettext
;extension=gmp
extension=intl
;extension=imap
;extension=interbase
;extension=ldap
extension=mbstring
;extension=exif      ; Must be after mbstring as it depends on it
extension=mysqli
;extension=oci8_12c  ; Use with Oracle Database 12c Instant Client
;extension=odbc
extension=openssl
;extension=pdo_firebird
extension=pdo_mysql
;extension=pdo_oci
;extension=pdo_odbc
extension=pdo_pgsql
extension=pdo_sqlite
;extension=pgsql
;extension=shmop

저장하고 파워쉘 에서php -m 명령어를 실행해 모듈이 잘 불러와지는지 확인합니다.

Composer 다운로드 / 설치

XE3를 사용하기 위해서는 composer가 설치되어 있어야 합니다.
여기를 클릭해 composer를 다운로드 받고 아까 다운로드 받아 옮겨두었던 php의 위치를 지정하여 설치해줍니다.

설치 이후 파워쉘에서 composer 명령어가 작동하는지 확인합니다.
만약 작동하지 않거나 찾을 수 없는 명령어라고 나오는 경우 재부팅을 해줍시다.

MariaDB 다운로드 / 설치

이제 거의 다 왔습니다. XE3를 설치하고 게시판 등의 데이터를 저장하기 위한 MariaDB는 여기를 클릭해서 .msi 으로 된 설치형 파일을 다운로드 하여 설치해줍니다.

root패스워드를 입력하고, 하단의 Service Name을 꼭 MySQL로 바꿔줍니다.

Valet 다운로드 / 설치

드디어 막바지인 Valet을 설치할 차례입니다.
Valet은 PHP 기반 프로젝트를 빠르게 로컬 개발 환경에서 서비스할수 있도록 하는 프로그램입니다.

파워쉘에서 composer global require cretueusebiu/valet-windows 명령어를 실행합니다.

맨 하단에 초록색 글자와 함께 설치가 끝나면 정상적으로 설치된 것입니다.
그 이후 %APPDATA%\Roaming\Composer\vendor\bin 경로로 가면 valet 명령어가 모여있습니다. 이를 path 환경 변수에 등록해줍니다.

이제 파워쉘을 관리자 권한으로 실행한 뒤 valet install 명령어를 실행하여 valet을 인스톨합니다.

Valet installed successfully! 문구가 나온다면 성공!

.test 도메인으로 연결하기 위한 DNS 설정

IPv4 설정을 바꿀경우 외부와의 연결이 되지 않습니다.
현재는 많이 사용하지 않는 IPv6 의 설정만으로 .test 도메인으로 접속할 수 있게끔 합니다.

Windows 설정 > 네트워크 및 인터넷 > 어댑터 옵션 변경 > 이더넷 우클릭 > 속성 에서 DNS 설정을 할 수 있습니다.

인터넷 프로토콜 버전 6(TC/IPv6)를 우클릭하여 속성을 눌러 아래처럼 설정해줍니다.

기본 DNS 서버 주소를 ::1 로 바꾼 다음 확인 버튼을 누르면 끝!

이 작업이 진행되지 않는다면, valet laralvel 을 설치하더라도 접속할 수 없습니다.

Valet용 Laravel 설치

파워쉘에서 composer global require "laravel/installer" 명령어를 입력하여 발렛용 라라벨을 설치합니다.

그 이후, 내가 관리하기 편한 디렉토리로 이동하여 새로운 프로젝트를 만듭니다. 프로젝트를 만드는 명령어는 laravel new 프로젝트명 으로 만들 수 있습니다.

중요!

꼭 프로젝트는 바탕화면 등이 아닌 바탕화면\web과 같은 폴더여야 오류가 나지 않습니다.

그 이후 web과 같은 프로젝트 root 폴더에서 valet park 명령어를 실행하여 Park Path 설정하면 끝!

아까 만든 프로젝트명.test 를 입력하여 웹 브라우저에서 접속이 된다면 끝 개발 환경 구성 끝!

XE3 설치 및 구성

XE3 Core 다운로드

XE3는 공식 홈페이지( https://www.xpressengine.io/) 에서 다운로드 할 수 있으며, 방금 만든 프로젝트의 폴더로 압축을 풀어 올려놓으면 설치 준비 끝!

DB 사용자 설정

DB를 사용하려면 root계정에 db를 만들어주어야 합니다.
터미널은 너무 어려울 수 있으니, 조금 더 쉬운 adminer를 다운로드 받아, 적절한 이름 (db.php 또는 dbdb.php) 으로 바꿔줍니다.

프로젝트명.test/db.php 와 같이 변경한 파일명으로 접속하여 root계정으로 로그인 합니다.

데이터베이스 선택창에서 데이터베이스 만들기 를 클릭합니다.

그 이후 원하는 DB이름으로 이름을 지은 다음 오른쪽의 utf8mb4_general_ci 를 선택하여 저장합니다.

아래와 같이 데이터베이스를 만들었다면, DB 설정도 끝!

XE3 설치

DB사용자 설정까지 해주었다면, 이제 XE3를 본격적으로 설치할 때입니다.
웹 프로젝트 폴더로 이동하여 기본 생성된 라라벨 파일들을 모두 삭제합니다.

그 이후 XE3 최신 버전을 다운로드 받아 압축 해제하여 프로젝트 폴더에 옮겨줍니다.

프로젝트명.test로 접속한 다음 XE3 공식 홈페이지의 매뉴얼의 내용중 “최신버전 다운로드 (웹/FTP 환경)” 항목을 참고하여 설치하면 끝!

Windows 환경에서는 테스트하거나 개발하기 위한 개발환경을 만들기가 까다롭다는 이야기들이 많았습니다.

이 개발팁 공유를 통해 많은 창작자 분들이 XE3로 더 멋진 프로젝트를 이어나갈 수 있도록 응원하겠습니다.

지금 까지 Windows 환경에서 Valet + XE3 개발환경 만들기에 대해서 알아보았습니다!

창작자를 위한 XE 플러그인 장터가 준비되어 있어요!
XE Store 바로가기

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

Windows 환경에서 valet + XE3 설치하기 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.

XE CAMPUS 바로가기

#0,#1, #2, #3

앞서 다뤘던 내용과, 다룰 내용

이전시간에는 XE의 의존성 관리와 플러그인 등록, 플러그인 폴더의 구조에 대해서 알아보았습니다.
이번시간에는 더미로 만들어진 테마 파일로 어떠한 코드가 무슨 역할을 하는지 알아보도록 하겠습니다.

테마의 정보

테마의 구조

내 테마의 위치는 privates 폴더에 위치한 내 플러그인의 src/Themes/테마이름/ 폴더에 위치하고 있습니다.

이 폴더안에도 플러그인 폴더와 같은 assets와 views 폴더를 가지고 있습니다.
views폴더에 이번에 우리가 수정하고 만들 blade 템플릿 파일이 위치해 있습니다.

테마의 옵션 설정 수정하기 : info.php 작성

내 플러그인의 내 테마 위치로 이동하면 info.php 파일이 있는 것을 볼 수 있습니다.
info.php 에서는 테마의 설정, 메뉴의 설정 등을 할 수 있도록 도와줍니다.

이 부분을 잘 활용하기 위해서는 어느정도의 학습이 필요하지만 알아야 하는 내용이 많지는 않으니 처음 테마를 제작하시는 분이라면 info.php를 활용하여 테마 구성을 하시기를 권장합니다.

info.php에 작성해야 할 내용으로 이글에서 다룰 부분은 view, setting, editable 이 3가지 요소만 알면 테마 세팅을 진행할 수 있습니다.

<?php
return [
    'view' => 'theme',
    'setting' => [
        'logoImage' => [
            '_type' => 'image',
            'label' => '로고 이미지',
            'description' => '로고 이미지'
        ],
        'spot_title' => [
            '_type' => 'text',
            '_section' => '스팟 설정',
            'label' => '스팟 타이틀',
            'placeholder' => '스팟의 제목을 입력',
            'description' => '스팟의 제목을 입력',
        ],
        'gnb' => [
            '_type' => 'menu',
            '_section' => '메뉴 설정',
            'label' => '메인메뉴',
        ]
    ],
    'support' => [
        'mobile' => true,
        'desktop' => true
    ],
    'editable' => [
        'theme.blade.php',
        'gnb.blade.php'
    ]
];

위 문법은 php 배열 구성 문법이고 지정된 스펙대로 작성을 해주면 됩니다.

info.php의 구성 요소

테마 설정을 위한 info.php에는 아래의 구성 요소를 가지고 있습니다.

• view
  ‘editable’ => [ Code] 이 부분은 관리자 페이지에서 수정할 수 있는 views디렉토리 하위의 파일들을 지정합니다.
  [관리자 페이지] -> [설정] -> [테마에디터] 페이지에 진입하면 여기에서 지정된 파일들을 편집할 수 있는 페이지가 나오게 됩니다.
  editable항목에 파일이 있어야 해당 페이지에서 수정할 수 있게 됩니다.
• setting
  ‘setting’ => [ …. ] 이라고 되어 있는 부분은 관리자화면 테마 설정페이지에서 노출될 폼필드들을 작성합니다.
  이 부분을 작성하게 되면 테마 설정페이지에서 폼화면을 만들어주고 저장이 되었을때 config로 등록하여 설정 정보를 저장하는 부분까지 XE에서 작업을 자동으로 해주게 되어 설정 정보를 저장하는 페이지 구성시간을 단축해 줍니다.
• ID 예> ’logoImage’ 또는 ‘spot_title’
  html 컴포넌트의 name요소에 지정됩니다. 하나의 테마에 유일값으로 사용해야 합니다. 중복되는 경우 가장 먼저 선언된 Name 요소만 출력되거나 오류로 설정페이지에 진입하지 못할 수 있습니다.
• _type
  XE에서 정해진 스펙이 있고 그 내용대로 넣어주게 되면 text, textarea, select 등의 html 컴포넌트 또는 XE컴포넌트들을 생성해주게 됩니다.
  자세한 내용은 폼빌더 가이드 를 참고!
• _section
  관리자 테마 설정 페이지에서 하나로 만들어질 그룹을 지정하고 타이틀을 지정합니다.
• label
  panel그룹내에서 해당 요소를 보여줄 명칭(title)을 정의합니다.
• Description
  해당 요소의 설명을 입력합니다.
• placeholder
  컴포넌트에 사용될 placeholder속성을 지정합니다.
  위의 내용과 같이 입력하고 [관리자 페이지] -> [설정] -> [테마에디터] 페이지에 접근하면 아래와 같은 화면이 출력됩니다.

ASSET 파일 불러오기

Asset파일 불러오기

XE에서는 효과적인 파일 관리 및 가독성을 위하여 아래의 코드를 사용하여, asset파일을 불러오고 있습니다.

{{-- stylesheet --}}
{{ app('xe.frontend')->css([
    $_theme::asset('../../../assets/css/theme.css'),
    $_theme::asset('../../../assets/libs/slick/slick.css')
])->load() }}

{{-- script --}}
{{ app('xe.frontend')->js([
    $_theme::asset('../../../assets/libs/slick/slick.min.js'),
    $_theme::asset('../../../assets/js/common.js')
])->appendTo('head')->load() }}

상단의 내용은 XE의 번들 기본 테마인 together의 css/js를 불러오는 코드의 일부를 가져왔습니다.

에셋 파일을로드하려면 $theme::asset() 메소드를 사용하면 됩니다.
assets 디렉토리를 기준으로 파일의 상대경로를 입력하여 불러올 수 있습니다.

★ 공부를 위한 따라하기★ (메인/서브 구분옵션)

테마에는 메인과 서브 타입이 존재합니다.
그렇다고 sub.blade.php 과 main.blade.php 를 따로 만들어서 적용하기에는 너무 번거로운 일입니다.
우리는 설정에 따라서 메인과 서브를 나눠 하나의 파일에서 관리하는 법을 알아보겠습니다.

먼저 메인과 서브를 나눌 테마의 info.php을 열어 중간 적절한 공간에 아래의 코드를 입력해주세요.

'layout_type' => [
            '_type' => 'select',
            '_section' => '테마 일반 설정',
            'label' => '테마 형태',
            'options' => [
                        'sub' => '서브 페이지용',
                        'main' => '메인 페이지용'
                    ]
        ],

이렇게 작성하고 저장하면 내 테마 설정에 아래와 같은 설정 항목이 나타납니다.

해당 설정을 할 페이지 또는 테마 설정에 테마 형태를 지정하면 설정값에 layout_type 항목이 저장됩니다.

이 설정을 사용하여, 아래와 같이 작성할 수 있습니다.

@if($config->get('layout_type') == 'sub')
    서브 테마 코드
@else
    메인 테마 코드
@endif

각각 설정에 맞는 테마의 템플릿 코드를 입력하여, 설정의 폭과 자유로운 테마 설정이 가능합니다.

오늘 알아본 내용

테마를 구성하기 위한 설정 파일인 info.php를 알아보았고, info.php를 작성하고 설정하는 방법.
그리고 그 값을 통해 테마의 외형 또는 기능상 구현을 할 수 있는 방법에 대해 알아보았습니다.

다음 시간에는 테마의 if문을 사용한 메뉴의 active 상태의 class 추가 방법과, Store에 올리는 방법으로 테마 제작 이야기는 마무리 짓도록 하겠습니다.

지금 까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)

XE 익스텐션 / 테마 창작자가 내 플러그인의 팬을 만들어보세요!
XE Store 바로가기

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

창작자를 위한 XE3 테마 만드는 방법 #1 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.

XE CAMPUS 바로가기

#0,#1, #2, #3

앞서 다뤘던 내용과, 다룰 내용

XE를 설치하고, 기본설정, 내 사이트의 메뉴를 구성하고 메인 페이지를 구성하는 방법들에 대해서 알아보았습니다.
더 나아가, 게시판의 설정을 통해 특정 기능을 할 수 있게 해주는 방법들도 알아보았습니다.

이전 스텝인 STEP1에서는 웹초보자를 위한 XE3의 안내였다면 STEP2에서는 코딩을 아는 웹디자이너와 개발자를 위한 테마와 스킨 제작 방법에 대해서 차근차근 총 5부작으로 알아보겠습니다.

XE 구조

구조 파헤치기

XE는 익스텐션과 테마로 크게 나뉘어 집니다.
익스텐션은 어떠한 동작을 하게 해주는 프로그램 단위의 그룹이고, 테마는 겉 모습을 꾸며주는 스킨 단위의 그룹입니다.

이 두 분류는 xe가 설치된 디렉토리의 /plugins 폴더에 위치합니다.

예를 들어, my_theme 라는 테마를 만든경우 xe경로/privates/my_theme 라는 폴더 위치에 내 테마가 위치하게 됩니다.

privates 폴더는 다른 git저장소 또는 packagist와 같은 개념으로, 로컬 저장소에 있는 플러그인을 plugin에 설치할 수 있게 해주는 개념입니다.

빈 플러그인 만들기

XE 에서는 테마를 만들기 위한 기본 뼈대를 갖춘 더미를 제공하고 있습니다.
XE 3.0.2 부터는 웹에서 테마/익스텐션 제작을 할 수 없으니, SSH 사용이 가능한 환경에서 따라해주세요. SSH(터미널)이 처음이시라면, 여기를 눌러 SSH 접속 방법 및 명령어를 확인하실 수 있습니다.

먼저, XE가 설치된 디렉토리로 SSH의 명령어를 통해 이동해주세요.
디렉토리 이동은 cd 명령어로 가능하며 상대 경로 또는 절대 경로로 이동할 수 있습니다.

그 이후 아래의 명령어를 입력합니다.

php artisan make:plugin <테마이름><제작자명>

이 명령어를 실행하면, 아래와 같이 초록색 배경의 글자와 함께 메시지를 마주하게 됩니다.

이렇게 정상적으로 플러그인이 만들어지면 xe경로/plugins/테마명 으로 폴더가 만들어지며 내 테마 플러그인이 XE관리자 화면에서도 확인할 수 있게 됩니다!

본격 테마 플러그인 만들기

빈 플러그인 상자를 만들었다면, 이제 그 상자안에 예쁜 테마를 담을 준비를 해봅시다.

위에서 입력했던 명령어중 make:plugin을 make:theme로 바꿔 입력하면 됩니다.

php artisan make:theme <플러그인명> <테마명> 이 되게 됩니다.

명령어를 실행하면 테마를 추가할 것인지 물어봅니다.
우리는 테마를 만들기 위해 yes를 입력후 엔터를 누르면 끝!

여기서 잠깐!

만약, 기존에 만든 플러그인이 있고 그 플러그인에 테마만 추가하고 싶다면, 위쪽에 플러그인을 만들지 말고, 테마 명령어인 make:theme 만 실행해주세요

플러그인 구조 뽀개기

이렇게 SSH명령어를 통해 만들어진 플러그인과 테마는 xe3경로/privates/플러그인명 의 폴더로 저장되어 있습니다.

이 폴더로 접근하면 아래의 모습을 볼 수 있습니다.

privates/(plugins 심볼릭 폴더)
└── myplugin
    ├── assets/
    ├── screenshots/
    ├── src/
    ├── views/
    ├── icon.png
    ├── composer.json
    └── plugin.php

플러그인은 plugin.php 와 composer.json의 작성만으로도 구현이 가능합니다. 하지만 규모가 큰 익스텐션이나 패키지단위를 제작하는 경우 더욱 많은 파일과 리소스를 필요로 하게 됩니다.

많은 파일을 제대로 관리하기 위해서 디렉토리 구조를 잘 설계해야 하기에 위의 구조를 권장하고 있습니다.

assets 폴더는 css, js, 이미지 파일과 같은 파일들을 담는 디렉토리입니다. 웹 브라우저에서 직접적으로 요청하는 파일들을 이 디렉토리에 넣어 관리합니다.

src 폴더는 PHP 클래스나 함수와 같이 php로 작성된 파일들을 담는 디렉토리입니다. 컨트롤러 및 컴포넌트 파일들을 이 디렉토리에 넣습니다.

views 폴더는 템플릿 파일을 담는 디렉토리입니다. XE에서는 blade 템플릿 엔진을 사용합니다. blade 템플릿으로 작성된 PHP 파일, 또는 순수한 PHP 작성된 템플릿 파일을 이 디렉토리에 넣습니다.

screenshots 폴더에는 익스텐션의 스크린샷 이미지를 넣으세요

icon.png와 같이 익스텐션의 아이콘 이미지 파일은 플러그인의 루트 폴더에 넣어주세요. (예 : privates/xe3_theme/icon.png )

스크린샷 이미지나 아이콘 이미지는 composer.json파일의 extra > xpressengine에 파일경로를 지정해 주어야 합니다.

여기까지 배운 내용

XE에는 확장 프로그램의 익스텐션과 테마가 구분되어있습니다.
하지만 이 두개의 프로그램 단위는 플러그인이라는 항목의 패키지 형태로 묶여 있습니다.

의존성 관리를 위해 composer를 사용하고 있으며, 플러그인 등록 및 활성화 등 을 위해 plugin.php를 사용하고 있습니다.

플러그인과 테마를 만들기 위해 php artisan 을 이용한 make:plugin & make:theme를 사용해서 각각 만들어주었으며, 효율적인 리소스(파일)관리를 위한 권장 폴더 유형도 알아보았습니다.

다음 시간에는 theme.blade.php 파일과 gnb.blade.php 파일을 뜯어보며, XE에서 어떠한 코드로 테마가 랜더링 되는지 알아 보겠습니다.

지금 까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)

XE 익스텐션 / 테마 창작자가 내 플러그인의 팬을 만들어보세요!
XE Store 바로가기

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

창작자를 위한 XE 테마 만드는 방법 #0 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

#XE3로 배우는 쉬운 웹사이트 제작 방법

XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 상담 게시판과 같이 고객의 이름과 전화번호 등의 정보를 입력받아 보여주는 게시판을 만드는 방법을 알아보겠습니다.

XE CAMPUS 바로가기

XE CAMPUS에서는 XE를 사용하여 내 사이트를 보다 쉽게 만들기 위한 컨텐츠를 제공하고 있습니다.

이번에 알아볼 것은, 상담 게시판과 같이 고객의 이름과 전화번호 등의 정보를 입력받아 보여주는 게시판을 만드는 방법을 알아보겠습니다.

시작하기 전에

본 내용은 XE3에 기본 번들로 포함되어있는 게시판 플러그인을 기준으로 작성하고 있으며, 게시판 플러그인이 아닌 다른 플러그인에서는 다른 방법으로 활성화 하거나 접근 할 수 있습니다.

확장 필드란?

확장필드는 일반 게시판 기능에서 문의게시판 또는 상담게시판과 같이 특이한 상황에서 본문에 글을 쓰는 것이 아닌, 별도 폼으로 받아 저장해주는 기능을 합니다.

또는 뉴스게시판, 스크랩게시판에서 원본의 글 주소를 붙여넣을 공간을 마련해주기도 합니다.

확장 필드 세팅하기

이번 예시에서는 “문의게시판”에서 [고객이름, 휴대폰 번호, 이메일주소]를 받는 문의 게시판을 만드는 것으로 예시를 들어 만들어 보도록 하겠습니다.

게시판 설정의 확장 필드를 클릭한 후, 오른쪽에 위치한 추가 버튼을 클릭합니다.
우선 고객 이름을 받는 확장 필드를 만들기 위해서는 회원의 이름은 글자이므로 종류는 Text-문자 를 선택하고 아이디는 우리가 알기 쉽게 customer_name 으로 해줍니다.

라벨은 회원 이름 으로 해주고, 라벨 상세 설명에는 회원이 볼 수 있는 설명이므로, “고객님의 이름을 입력해 주세요” 라고 입력합니다.

모두 입력하면 아래와 같은 형태가 완성됩니다.

그와 동시에 설정할 수 있는 것이 있습니다.

• 사용 : 이 체크박스를 체크 해제 하는 경우, 입력칸과 입력된 값을 더 이상 볼 수 없습니다. (이미 입력되어 있는 게시글 포함)
• 입력 필수 : 게시글 작성시에 필수 여부를 설정할 수 있습니다.
• 검색 가능 : 이 확장 변수 값으로 검색을 할 수 있습니다.

우리는 회원 이름이 필수여야 고객 관리가 가능하므로, 회원 이름은 필수여야 하고, 일대일 게시판 이기 때문에 추후 이전 문의를 보려면 검색해야 하므로, 상단의 체크 박스를 기본 값으로 두고 저장을 클릭합니다.

그 이후 게시판 글쓰기에서 볼 수 있는 폼은 아래와 같습니다.

이렇게 나머지 정보인 “휴대폰 번호”와 이메일 주소를 받아보겠습니다.

위 이미지와 같이 입력하게 되면, 위에서 필요한 이름과 휴대폰 번호, 이메일 주소를 받을 수 있게 되었습니다.

그리고 아이디는 본인이 입력하기 쉽거나 관리하기 쉽게 입력해도 되며, 꼭 예시와 동일하게 입력하지 않아도 됩니다.

확장 필드로 검색하기

게시판에 게시글이 지속적으로 쌓이게 되고, 특정 회원의 게시글 목록을 뽑고 싶을때 아래와 같이 할 수 있습니다.

상단의 검색 버튼을 클릭 후 오른쪽에 위치한 상세검색을 클릭하면 아래와 같은 화면을 볼 수 있습니다.

하단의 회원 이름 또는 이메일 또는 전화번호를 검색할 수 있으나, 예시에서는 전화번호는 검색하지 못하도록 설정하여, 검색 목록에는 나오지 않습니다.

예시로 김엑스라는 회원이 작성한 문의 게시글 전체를 보겠습니다.

이렇게 사이트 운영에서 필요한 문의 게시판을 확장 필드를 통해 손쉽고 효율적으로 관리하는 방법을 알아보았습니다.

확장 필드는 꼭 문의게시판이 아니더라도, 다양한 범위에서 사용할 수 있고 스킨을 직접 만들거나 고쳐 내가 원하는대로 수정할 수도 있다는 점!

지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)

웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

게시판을 문의 게시판으로 사용하기 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 게시판의 권한을 설정하고, 에디터를 바꾸는 등의 작업을 할 수 있게 도와줍니다.

XE CAMPUS 바로가기

XE CAMPUS에서는 XE를 사용하여 내 사이트를 보다 쉽게 만들기 위한 컨텐츠를 제공하고 있습니다.

이번에 알아볼 것은, 게시판 플러그인에 있는 각각의 게시판 설정을 통해 그룹별 게시판 또는 회원제 게시판 등을 만드는 방법에 대해서 알아보겠습니다.

시작하기 전에

XE에서는 댓글과 게시판을 서로 다른 기능의 단위인 익스텐션으로 나누어 관리하고 있습니다.
따라서, 게시판만 사용하고 댓글을 사용하지 않고 싶다면 댓글 익스텐션을 꺼두면 아무런 설정 없이도 사용할 수 있습니다.

권한 설정 하기

게시판의 권한 설정은 아이템 설정 > 상세 설정 > 권한 으로 이동하여 할 수 있습니다.

이 페이지에서 설정할 수 있는 권한은 아래와 같습니다.

• create : 게시글을 작성할 수 있는 권한
• read : 게시글을 읽을 수 있는 권한
• list : 게시판의 게시글 리스트를 볼 수 있는 권한
• manage : 게시판을 관리할 수 있는 권한

이번에는 운영 일지라는 게시판이 있다는 전제하에 운영진이라는 그룹이 쓰고 읽는 권한을 부여하려고 합니다.
하지만, 이 운영진 중에 John이라는 회원은 보지 못하게 하려고 합니다.

첫번째로 Create 권한의 “상위 설정에 따름” 체크를 해제하고 포함할 그룹 또는 사용자에서 %운영진 이라고 입력하면, 하단에 입력한 그룹이 검색됩니다.
하단에 검색된 그룹을 선택하면 끝입니다.

그 다음은 read 권한에서 상단의 create 권한과 동일하게 설정하지만, 포함할 그룹 바로 아래에는 제외할 사용자를 선택할 수 있습니다.
“ @ john ” 이라고 검색하면 내 사이트에 john이라는 아이디를 가진 사용자를 선택할 수 있습니다.

마지막으로 list권한도 상단의 read권한과 동일하게 설정하면 끝!

이렇게 설정하면, 운영진이라는 권한을 가졌고, john(설정한 사용자)을 제외한 사용자라면 읽고 쓰고, 게시판 리스트에 접근할 수 있는 권한이 부여됩니다.

스킨 설정 하기

각 게시판 별로 스킨을 다르게 설정하거나, 바꿀 수 있습니다.
권한 탭 오른쪽에 위치한 스킨탭을 클릭하여 스킨을 지정하여 설정할 수 있습니다.

에디터 설정하기

게시판의 글쓰기(create)에서 보여지는 에디터를 추가하였거나, 다른 것으로 바꾸고 싶은 경우가 있습니다.
이 경우에는 스킨 바로 오른쪽의 에디터 탭을 클릭하여, 하단의 에디터의 편집 버튼을 눌러 변경 후 저장을 클릭하면 됩니다.

출력순서 변경 하기

게시판 목록 화면에서 필요 없는 정보거나, 또는 술력 순서를 바꿔야 하는 경우가 있습니다.

이 경우, 출력 순서 탭을 클릭하여 페이지를 이동 한 다음 아래의 이미지 처럼 원하는 타입대로 작업하면 됩니다.

이렇게 사이트 운영에 필요한 게시판 권한 설정과 출력순서, 에디터 변경 방법 등에 대해서 알아보았습니다.

지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)

웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

게시판 설정으로 조금 더 완벽한 내 사이트 만드는 방법 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 회원 그룹을 설정하고, 스킨을 설정하는 방법에 대해서 소개합니다.

XE CAMPUS 바로가기

XE CAMPUS에서는 XE를 사용하여 내 사이트를 보다 쉽게 만들기 위한 컨텐츠를 제공하고 있습니다.

이번에 알아볼 것은, XE3에 있는 회원 설정을 통해, 블로그 또는 커뮤니티에서 사용되는 등급 등을 사용하는 방법에 대해서 알아볼 수 있습니다.

시작하기 전에

먼저 회원 정보는 민감 정보에 해당합니다.
만약 회원 목록등의 개인정보 페이지에 접근 하는 경우 아래의 화면을 마주하게 됩니다.

회원 기본설정 하기

대시보드에 진입 후 회원을 클릭하고, 설정 > 기본 설정을 클릭해주세요.

클릭하면 로그인 시 캡챠를 사용할 수 있는 설정 항목과 회원 가입을 설정할지에 대한 설정이 눈에 들어옵니다.

캡챠의 경우 무한 대입을 일시적으로 막기 위한 수단으로 사용할 수 있으며, 이 기능을 사용하기 위해서는 별도의 코어 설정이 필요합니다.

회원 가입 설정하기

회원 가입을 거절하게 되면, 회원 가입 페이지 주소를 입력하더라도 거절페이지를 마주하며 가입할 수 없는 상태가 됩니다.
개인 블로그나 기타 회원 발급제 사이트라면 거절하고 사용하는것이 편리하겠죠?

이메일 인증은, 회원 가입하여 활동하기 전에 이메일 인증한 회원만 로그인하여 활동할 수 있도록 해주며, 흔히 말하는 존재하지 않는 이메일 계정을 사전에 차단할 수 있습니다.

그리고 그 아래에서는 어떠한 폼 양식을 먼저 보여줄 것인지 설정할 수 있고, 보여주지 않을 수도 있습니다.

약관 설정

그렇게 설정을 마쳤다면, 약관 설정에서 약관을 작성할 수 있으며, 회원 가입시 사용할 약관을 미리 작성하여 가입 페이지 또는 기타 페이지에서 보여줄 수 있습니다.

스킨 설정

스킨 설정에서는 스킨을 지정할 수 있습니다.
회원가입과 로그인의 스킨, 내 정보를 수정하고 볼 수 있는 마이페이지 스킨과, 내 프로필을 보여주는 프로필 스킨을 별도로 만들어 설정할 수 있습니다.

확장 필드 설정

확장 필드 설정으로 이동하면, 기본 XE3의 회원 가입 폼 이외의 정보를 받고 싶은 경우, 추가할 수 있습니다.
추가후 회원 가입 페이지로 이동 하면 아래처럼 표시됩니다.

회원 토글 메뉴 설정

그렇게 설정을 마치고, 회원 토글 메뉴로 이동하게 되면, 회원의 닉네임 또는 이름을 클릭하였을 때 나오는 메뉴를 숨기거나 보여줄 수 있으며, 순서를 바꿀 수 있는 화면이 표시됩니다.
이동 후 에는 꼭 저장 버튼을 눌러줘야 한답니다

단, 회원정보 관리는 관리자만 노출된다는 점. 알아두세요 :)

회원가입 또는 회원 정보에 대한 스킨 설정 및 추가 설정은 끝이 났습니다

회원 그룹 설정

관리자 메뉴의 회원에 있는 그룹을 클릭하면, 그룹을 설정할 수 있으며, 수정하고 싶은 그룹의 오른쪽에 위치하는 관리 버튼을 클릭하여 그룹을 아래처럼 수정할 수 있습니다.

추가는 오른쪽 위에 있는 새 그룹 추가를 통해 그룹 이름과, 설명을 넣으면 됩니다

이렇게 사이트 운영에 필요한 그룹 설정과 회원 설정에 관련한 것들을 알아보았습니다.

지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)

웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

내 사이트의 회원 구성을 쉽게 정하는 방법 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 테마를 다운 받고, 설정하는 방법에 대해서 소개합니다.

XE CAMPUS 바로가기

XE CAMPUS에서 진행한, 30분만에 나만의 웹사이트 만들기 ( #0, #1, #2, #3,#4 ) 까지에서는 XE3를 설치하기 위한 웹사이트 공간 마련과, 설치, 기본 설정, 메뉴설정 까지 해 보았습니다.

이번 게시물에서 알아볼 것은, XE3에 있는 테마 설치를 통해, 쉽게 내 사이트를 꾸미는 방법에 대해서 알아보겠습니다.

XE에서 테마란, 사람으로 비유하면 옷이라고 비유할 수 있습니다.
옷을 신중히 골라 나와 만날 사람(사이트에 방문할 사람)을 첫 인상에 있어서 좋은 인상을 남기는 것과 비슷합니다.

테마 다운로드 하기

먼저 우리는 내 XE의 관리자 아이디로 로그인 하여, 관리자 사이트로 이동해야 합니다.

XE 3.0.4 버전에서는 테마와 익스텐션이 분리되어 있습니다.
테마 > 테마 추가 메뉴를 클릭합니다.

혹시라도 XE를 처음 설치하시는 사용자님이 테마를 설치하기 위해 이 글을 읽고 있다면 #XE_기본설정 하기 를 참고하여, XE Store Token을 입력 후 시도해주세요 :)

테마 추가 페이지에서 마음에 드는 테마를 찾았다면, 지금 설치 버튼을 눌러 테마를 바로 설치해주세요!

조금만 기다리면 내 사이트를 예쁘게 꾸며줄 테마가 설치된답니다.

설치가 완료 되면, 테마 > 설치된 테마 메뉴에서 확인하실 수 있습니다.

방금 설치한 테마를 활성화 버튼을 눌러 활성화 해줍니다.

그 이후 테마 > 테마 설정에서

방금 설치한 테마를 기본 설정으로 설정하기 위해 체크한 후 저장 버튼을 클릭합니다.

이 설정을 하면, 앞으로 만드는 아이템 또는 메뉴에서 기본설정한 테마가 사용됩니다.

각각 사이트맵에 테마 설정이 있다면, 사용할 테마로 기본 테마를 설정 후 내 사이트를 방문하면..?

내가 마음에 들어하던 테마가 내 사이트의 모습으로 쨘!

이렇게, XE를 사용해서 쉽게 내 사이트를 꾸미는 방법에 대해서 알아보았습니다.

지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)

웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

테마를 다운받아, 쉽게 내 사이트를 꾸미는 방법 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.

XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 위젯을 구성하고 설정하는 방법에 대해서 소개합니다.

XE CAMPUS 바로가기

XE CAMPUS에서 진행한, 30분만에 나만의 웹사이트 만들기 ( #0, #1, #2, #3,#4 ) 까지에서는 XE3를 설치하기 위한 웹사이트 공간 마련과, 설치, 기본 설정, 메뉴설정 까지 해 보았습니다.

이번 게시물에서 알아볼 것은, XE3에 있는 간편한 위젯 구성 방식인 위젯 박스로 내 사이트 메인 페이지를 구성하는 방법에 대해서 알아 보겠습니다.

XE 에서 위젯이란, 화면에 표시되는 작은 프로그램 단위입니다.
최근게시물이나 회원정보 등과 같은 플러그인과 연동된 위젯도 있으며, 외부의 정보를 가져오는 것도 존재합니다.

위젯의 개념 이해하기

먼저 구성하기 전에, 위젯의 단위는 어떻게 되는지 알아봐야겠죠.
일단, 일반 방문자가 내 사이트를 보는 시점의 위젯으로 쉽게 알아보겠습니다.

XE3 를 처음 설치하면 제공되는 Together 테마와 위젯은 크게 6개의 위젯 구성으로 이루어져 있습니다.

우리는 이 처음 세팅 된 위젯 구성을 참고하여, 나만의 메인 페이지 구성하는 방법에 대해서 알아보겠습니다.

위젯 박스로 편집하기

XE에서는 관리자 아이디로 로그인하면, 별도의 프로그래밍 코드를 작성할 필요 없이, 마우스와 설정만으로 메인 페이지를 구성할 수 있는 방법인 “위젯 박스"를 제공하고 있습니다.

내 사이트에서 관리자 아이디로 로그인 후 메인페이지 또는 위젯페이지로 이동합니다.

그 이후, 하단에 있는 편집하기를 클릭합니다.

위젯 박스 이해하기

편집하기 버튼을 클릭하면 나오는 화면은 생소한 화면으로 무언가를 구성하고 있을 것으로 보입니다.
아래의 이미지는 기본으로 설정되어 있는 위젯 구성을 기반으로 제공되는 이미지 입니다.

실제로, 우리가 만든 새 위젯 페이지는 빈 위젯 구성으로 보일 것 입니다.

왼쪽의위젯 컨트롤 박스에서 셀과 위젯을 생성하고, 오른쪽의 위젯 편집 영역에서는 각각의 위젯단위를 마우스로 클릭해 움직이거나, 수정, 삭제할 수 있습니다.

위젯을 구성하는데에 필요한 것은 열과 셀 그리고 위젯입니다.

• 열 : 셀을 그룹단위로 묶을 수 있음.
• 셀 : 위젯을 그룹 단위로 묶기가 가능.
• 위젯 : 화면에 표시되는 작은 프로그램 단위

조금 더 들어가자면, 위젯의 크기는 그리드(Grid)라는 시스템으로 크기를 조절하고, 구성할 수 있습니다.

그리드에 대한 자세한 설명은 여기에서 읽어보실 수 있습니다.

위젯박스 사용하기

무엇이든지 직접 해보지 않으면, 완벽히 이해하기 어렵습니다.
위젯박스로 위젯을 추가하는 방법에 대해서 알아보겠습니다.

먼저 직접 만든 위젯 페이지로 들어가, 편집 버튼을 누릅니다.

아까 우리가 원래 있던 페이지에서 편집 버튼을 누른것에 비해 많이 비어 있는 것을 느낄 수 있습니다.

위젯 박스에서 위젯을 구성하기 위해서는 “셀"이라는 것을 추가해야 합니다.

왼쪽의 열 추가를 클릭하면, 오른쪽의 편집영역에 붉은색의 row라는 열이 만들어진 것을 확인할 수 있습니다.
이제 우리는, 위젯을 구성할 수 있는 셀을 추가할 수 있습니다.

먼저 붉은 열의 빈 공간을 클릭하고, 컨트롤 패널의 셀 추가를 클릭 해봅시다.

아무런 설정을 하지 않았다면 셀의 이름은 md:1이며, 조그마한 상자가 추가된 것을 알 수 있습니다.

그렇다면, 셀의 크기를 5로 하고 추가 해 봅시다.

아까와는 다르게 가로의 크기가 조금 더 넓어진 셀이 추가 되었고, 셀의 이름이 md:5 인 셀이 나왔습니다.

눈치 채신 분들도 계시겠지만, 위젯 박스에서는 최대 가로 길이의 그리드 값이 12 이며, 이 크기 안에서 자유롭게 위젯을 구성할 수 있는 시스템을 제공하고 있습니다.

방금 추가한 셀 두개를 모두 x를 눌러 삭제해주시고, 셀의 크기가 12인 셀을 생성해주세요.

그렇게 하면, 열의 크기와 셀의 크기가 모두 동일하게 되어 있는 셀이 위의 이미지 처럼 편집영역에 추가 되어 있습니다.

크기가 12인 셀의 빈 영역을 클릭 한 후, 위젯 추가 버튼을 클릭 합니다.

게시물을 보여줄 게시물 리스트 위젯을 먼저 선택한 다음, 투게더-갤러리 스킨을 클릭하면,아래에 위젯 설정 항목 들이 있는 것을 보실 수 있습니다.

각각의 설정을 추가하면, 아래의 항목처럼 됩니다.

모두 설정 하였다면, 하단의 저장 버튼을 누르고, 위젯박스의 저장 버튼을 클릭 합니다.

메인 위젯박스를 닫으면, 내가 설정한 스킨과 항목들이 메인페이지 또는 위젯 페이지에 노출되는 것을 볼 수 있습니다.

이런식으로 하나하나의 스킨을 설정하여, 위젯을 구성할 수 있습니다.

또한, 하나의 셀 안에 여러개의 위젯을 포함할 수 있고, 아래의 이미지 처럼 여러개의 위젯을 마우스로 배치를 바꿀 수 있습니다.

하지만, 위젯을 담고 있는 셀과 셀 끼리는 마우스로 배치할 수 없다는 점, 알아두면 좋습니다 :)

이렇게, XE3를 사용해 내가 원하는 게시판의 컨텐츠를 원하는 방식으로 보여줄 수 있는 위젯 사용 방법을 알아보았습니다.

지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)

웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

위젯박스로 내 사이트 메인 페이지 구성하기 was originally published in XEHub on Medium, where people are continuing the conversation by highlighting and responding to this story.