워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그


처음에 웹디자인을 공부하면서 프로그래밍 언어를 php프로그램으로 정하고 이제 좀 재밋다 싶을때 알게된 블로그 프로그램이 드루팔이었습니다. php 언어로 만들어진 블로그 프로그램이 많더군요. 대표적인 것이 외국의 경우 워드프레스, 줌라, 드루팔이고 국내에서는 그누보드, XE엔진(제로보드), 태터툴즈가 있습니다. 워드프레스는 사용이 쉽기 때문에 세계적으로 수천만개의 프로그램이 블로그로 사용되고 있습니다. 처음 블로그를 공부하기엔 쉬운 프로그램이므로 많이 접근하는 프로그램이죠. 하지만 좀 지나고 보면 좀더 어렵고 다양한 모듈이 있는 프로그램을 찾게 되는데 그것이 드루팔입니다. 드루팔은 개발자들이 선호하는 프로그램이라서 모듈만해도 수천개나 개발이 되어있고 드루팔 전용 모듈이 아니라 해도 드루팔이 워낙에 인기가 있다보니 일반 프로그램이 드루팔 모듈로 개발되기도 합니다. 모듈이란 것은 티스토리의 위젯이나 플러그인처럼 하나의 독립된 프로그램으로 블로그 프로그램에 쉽게 설치해서 사용할 수가 있는 작은 프로그램을 말합니다. 드루팔로 쇼핑몰을 만들려면 관련 모듈을 설치하면 됩니다.  현재 드루팔처럼 개발자들이 열성정으로 참여하고 있는 곳도 드뭅니다. 워드프레스는 개발자보다는 사용자들이 많고 줌라는 디자인이 좋아서인지 디자이너들이 선호하는 프로그램이라고 합니다. 국내에서는 제로보드가 NHN에 인수되면서 XE엔진으로 개발되고 있지만 모듈이 그리 많지는 않더군요. 

php를 이용해서 웹디자인을 하려면 내 컴퓨터에 서버환경을 만들어줘야 스킨제작이나 웹사이트제작을 직접 보면서 수정할 수 있게 됩니다. php를 이용하지 않고 html만 사용하게 되면 서버환경은 필요없고 html과 css로 코딩만 하고 html파일을 클릭하면 바로 웹페이지에서 볼 수가 있지만 php로 만들어진 웹사이트는 MySQL이라는 데이터베이스언어와 서버 프로그램인 아파치(Aphache)와 연동해야하기 때문에 서버환경을 만들어줘야합니다. 가장 대표적으로 사용되는 서버환경 조합이 Aphache, MySQL, PHP의 첫글자를 따서 AMP라고합니다. 여기서 윈도우용이냐 애플용이냐에 따라서 앞에 Windows가 들어가거나 Machintosh가 들어가서 WAMP, 또는 MAMP라고 합니다. 이렇게 모인 언어들 조합을 스택(Stack, 꾸러미)이라고 하는데 가장 대표적인 스택이 XAMPP입니다. 이 스택의 조합은 첫 글자가 X인데 이것은 크로스를 의미합니다. 크로스란 컴퓨터 환경을 넘나드는 프로그램이란 의미입니다. 즉 윈도우, 리눅스, 솔라리스, 매킨토시 등 다양한 플랫폼에서 사용될 수 있다는 의미죠. 마지막에 P가 하나 더 추가 되었는데 이것은 펄(PERL)프로그래밍 언어를 말합니다. 

블로그 프로그램인 드루팔을 사용하기 위해서는 php언어라든가 아파치, MySQL 같은 프로그래밍 언어를 전혀 몰라도 됩니다. 블로그 프로그램인 드루팔 코어를 설치하고 여러가지 모듈을 추가설치해서 사용하는 것만해도 복잡하거든요. 같은 php환경 프로그램인 티스토리의 태터툴즈도 프로그래밍언어를 몰라도 잘 사용할 수가 있는 것처럼 설치하고 사용법만 익히면 되는 것입니다. 스킨이나 디자인을 바꾸려면 HTML이나 CSS에 관한 지식이 필요한 것은 당연합니다. php를 공부하다가 좀 재밋다 싶을때 블로그 프로그램을 알고나서는 php를 접었습니다. 왜냐하면 아무리 php박사가 된다한들 이런 훌륭한 프로그램으로 쉽게 웹페이지를 만들 수 있는데 허송세월 보낸다는 느낌이 들어서였죠. 그래서 배우기 시작한게 CSS입니다. 이것만 알면 웹디자인은 다 할수 있게 됩니다. 물론 같은 php프로그램이라 해도 사용하는 언어 방식이 약간씩 다릅니다. 티스토리의 경우는 치환자라는 것을 사용하듯이 데이터베이스와 연동시키는 용어가 다를 수는 있지만 모든 블로그 프로그램은 php라는 언어를 사용합니다. 치환자는 php프로그램에서 사용자 함수입니다. 가장 쉬운 블로그 프로그램이 티스토리 입니다. html페이지 코드를 보면 html태그와 치환자 밖에 없습니다. 쉽다고 하는 블로그 프로그램인 워드프레스만 해도 디자인을 바꾸려고 코드를 보면 아주 복잡합니다. 각 블로그 프로그램이 각자의 고유함수를 만들어쓰기 때문에 함수들이 다 다릅니다. 초기에 웹디자인을 배울때는 티스토리를 사용하면 재밋게 배울 수 있습니다. 티스토리 시작한지 6개월 지나면서 스킨이 열번은 바뀌었을 겁니다. 자잘하게 바뀐 것은 수백번도 더되죠. 

티스토리는 데이터베이스를 관리하지 못하므로 스킨을 자유롭게 제작하지는 못하지만 처음 웹디자인 공부하기엔 아주 좋은 환경입니다. 같은 프로그램인 태터툴즈를 사용해서 웹호스팅을 만들고 설치하면 같은 환경을 만들 수가 있습니다. 티스토리에서 작성한 글들을 백업해서 태터툴스에 업로드하면 똑같은 블로그가 됩니다.

서버환경을 만들어주기 위한 프로그램이 많은데 드루팔을 위해서 만들어진 서버환경 프로그램을 DAMP라고 합니다. 첫글자가 무엇인지는 아실겁니다. 이것은 Acquia Drupal에서 만든 것으로 드루팔 전용이라서 그런지 다른 서버환경에 비해 속도가 아주 빠릅니다. XAMPP나 WAMP를 설치하고 드루팔 코어를 설치해서 운용하다가 이것을 사용해보면 빠른 속도를 느끼게 됩니다. 내컴퓨터에서 실행하더라도 빠른 속도를 필요로 하는 것은 그만큼 드루팔이 아주 많은 모듈을 사용하기 때문에 그런 것이죠. 하나의 모듈을 사용하기 위해서는 연관된 다른 모듈이 필요하고 제대로된 사이트를 만들려면 아마 수백개의 모듈이 필요할 겁니다. 이러한 모듈이 서로 연결돼서 페이지상에 나타나게 하려면 드루팔 전용 스택이 필요한 것입니다. Acquia에서 만든 DAMP를 사용하면 드루팔 코어가 포함되어있기 때문에 설치도 쉽지만 광고 비슷한게 나오므로 코어를 추가로 설치하여 사용하면 깨끗한 화면이 나오게 됩니다.

자 그러면 드루팔을 맛보기 위한 첫단계로 Acquia 를 설치해보기로 합니다. 이곳 을 클릭하여 Acquia Drupal의 다운로드 페이지로 갑니다.


왼쪽은 Acquia에서 만든 스킨이 포함된 드루팔 코어를 다운 받을 수 있는 곳이고 오른쪽은 스택이 포함된 드루팔 코어가 있는 곳입니다. 윈도우와 맥버전이 있습니다. 드루팔 코어는 현재 7버전까지 있는데 가장 많이 사용되는 것이 6버전입니다. 7버전은 관리자화면이 아주 새롭게 바뀌어서 6버전을 사용하다가 7버전을 사용하면 약간 헷갈립니다. 드루팔 코어는 5메가가 안되는 용량이고 스택은 35메가가 됩니다. 7버전의 윈도우용을 다운 받으면 확장자가 exe로 되어있습니다. 더블클릭해서 설치로 들어갑니다.


설치가 시작되는 첫화면입니다. 다음버튼을 클릭합니다. 코어와 XMail서버가 설치됩니다. 다음을 클릭합니다. 설치되는프로그램 목록과 버전정보가 나옵니다. 다음을 클릭합니다. 라이센스 동의입니다. Yes에 클릭하고 다음을 클릭합니다.


1은 스택 프로그램이 설치되는 경로입니다. 그대로 놔두고 2는 수정을 해줘도 됩니다. 자주 들락거리는 폴더가 되므로 윈도우 탐색기에서 접근하기 쉬운 폴더를 만들고 폴더의 경로를 입력합니다. 다음을 클릭합니다. 아파치 서버포트와 MySQL 데이터베이스 포트는 그대로 두고 다음을 클릭합니다. 사이트 이름과 관리자 이름을 입력합니다. 비밀번호는 쉬운 것으로 합니다. 이메일은 나중에 가입환영 메일이 실제로 전송되므로 관리자의 이메일을 실제 이메일로 해두면 좋습니다. 다음을 클릭하면 설정 내용이 나옵니다. 다음을 클릭합니다.


설치가 진행됩니다. 수분간 진행되고 나면 종료화면이 나옵니다. 1에 체크하고 Finish버튼을 클릭하면 콘트롤 패널이 나옵니다.


아파치 웹서버와 MySQL 데이터베이스 서버가 녹색의 불이 들어오면 설치가 정상적으로 완료된 것입니다. 같이 설치된 드루팔 코어의 Acquia버전을 보려면 우측에서 Go to my site를 클릭합니다.


설치하면서 입력한대로 아이디와 비밀번호를 입력하고 로그인합니다. 30일 무료 어쩌고가 나오고 상단에 구독 어쩌고가 나옵니다. 이것 없이 사용하려면 좀 번거롭지만 별도로 드루팔 코어를 설치해주면 됩니다. 이곳 을 클릭하여 드루팔 홈페이지로 갑니다.


현재 6버전과 7버전이 주로 쓰이기 때문에 초록색으로 추천버전으로 되어있습니다. 같은 버전에서 계속 개발중인 버전은 분홍색입니다. 개발되다가 안정적이다 싶으면 초록색 버전으로 넘어갑니다. 그러면서 버전번호가 높아집니다. 3은 이전의 다른 수많은 버전들을 만날 수 있는 곳입니다. 1의 압축파일을 다운 받아 윈도우 탐색기에서 압축해제한 다음 폴더를 클릭하여 폴더안으로 들어갑니다. 같은 폴더이름이 나오는데 클릭해서 Ctrl+C키를 눌러 복사합니다.


Acquia 버전의 드루팔 코어가 있는 폴더로 이동합니다. 2는 Acquia버전이고 빈곳에 클릭한 후 Ctrl+V키를 누르면 3처럼 복사됩니다. 이 단계에서 폴더명을 원하는 이름으로 바꿔줘도 됩니다. 이 폴더를 클릭해서 들어가면 폴더와 파일들이 보여야합니다.


콘트롤 패널 우측에서 Settings를 클릭합니다.


Sites탭을 클릭하고 Import버튼을 클릭합니다. 창이 나오면 3의 브라우즈 버튼을 클릭해서 복사이동한 드루팔 코어의 폴더를 선택합니다. 4에 체크하여 새로운 데이터베이스를 만듭니다. 5에 데이터베이스 이름을 입력하고 6에서 도메인 서버 이름도 같이 해주면 7에 내 사이트 주소가 나옵니다. Import버튼을 클릭합니다.

 
웹브라우저 화면이 나옵니다. Standard에 체크하고 Save and continue 버튼을 클릭합니다. 언어가 영어뿐이므로 영어에 체크되어있습니다. 언어는 개별 참여자들이 자원해서 번역작업을 하고 있는데 저도 가입은 했지만 시간상 한번도 번역을 하지 못했습니다. 그러면서도 염치없게 무료로 사용하려고 하다니 뻔뻔하죠. 번역이란게 어려운 작업이거든요. 시간내서 해야겠습니다. 한국어 언어파일은 현재 80%정도 번역이 진행된 것 같습니다. 나중에 파일을 설치해서 한국어로 나오게 설정변경합니다. 계속버튼을 클릭하면 설치가 진행됩니다.


이메일 주소를 입력하고 관리자 아이디, 패스워드를 입력합니다.


국가를 선택해주고 표준시간을 선택한 다음 계속 버튼을 클릭하면 마무리 됩니다.


설치가 완료됐습니다. Visit your new site를 클릭하면 사이트로 이동합니다.


  깨끗한 화면의 내 웹사이트가 만들어졌습니다. 여기까지는 쉬운 작업입니다. 이제부터 모듈을 다운받아 설치하고 험난한 여정이 시작됩니다.