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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

무료 웹호스팅 환경은 용량도 100MB이고 트래픽 용량도 적어서 사용하기가 불편하므로 유료 웹호스팅 환경을 이용하는 편이 좋습니다. 이번에는 도메인 구입도 하고 하드디스크 용량도 3GB로 된 패키지를 구매해보겠습니다. 여기서 이용할 웹호스팅 서비스는 우비(www.woobi.co.kr)라는 웹호스팅 회사인데, 예전에 무료 서비스를 사용한 적이 있어서 다시 들어가보니 오랫동안 사용하지 않았는데도 삭제되지 않고 내용이 그대로 있더군요. 참 반가운 일입니다. 보통 일정 기간 사용하지 않으면 삭제되고 계정도 없어지거든요. 이곳의 웹호스팅 가격을 보니 매우 저렴합니다. 도메인 구입이 9,700원이고 3GB짜리 하드디스크 용량으로 패키지를 구입하니 4만원이 채 들지 않습니다.



홈페이지에 접속해 도메인을 선택하기 위해 상단 메뉴에서 도메인 → 서비스 신청을 차례로 클릭하면 위와 같은 화면이 나옵니다. 도메인은 블로그의 성격을 가장 잘 대변하는 이름으로 잘 지어야 합니다. 저는 웹디자인을 하고 있으니 webdesigncss3로 정했습니다. 이름을 입력하고 옵션 항목을 체크합니다. 여기서는 국제적으로 많이 사용되는 닷컴을 선택했습니다. 검색 버튼을 클릭하니 하단에 등록 가능 도메인에 이름이 나옵니다. 등록 불가능란에 나오면 다른 이름을 입력하고 다시 검색해야 합니다. 꼭 자신이 원하는 이름으로 하고 싶을 경우 옵션에서 다른 도메인 서픽스(suffix)를 선택해서 검색합니다. 참고로 이 서픽스의 선택도 중요하답니다. 가장 널리 알려지고 익숙한 것이 닷컴이거든요. 같은 도메인이라도 닷넷보다는 닷컴이 익숙하죠. 신청 버튼을 클릭하면 다음 화면으로 넘어갑니다.



원하는 선택 항목을 체크하고 다음 단계로 넘어갑니다.



이용약관에 동의합니다.



웹호스팅 비밀번호를 두 번 입력합니다. 이 비밀번호는 FTP 계정과 MySQL 데이터베이스 비밀번호와 동일합니다.



개인정보는 회원가입 시 나오는 것이므로 별도로 입력하지 않아도 됩니다. 이용약관 동의 및 신청 버튼을 클릭합니다.



결제 항목에 체크하고 결제 방법을 선택한 후 “결제하기” 버튼을 클릭합니다. 무통장 입금을 선택하면 위 화면에서 바로 끝나고 금액을 입금하면 3시간 후에 웹호스팅이 개통되고 신용카드로 결제하면 결제 시스템을 통과하는 데 좀 번거롭지만 결제 후에 바로 웹호스팅 계정이 개설됩니다. 신용카드 결제는 전자결제 시스템 프로그램이 설치돼 있어야 하므로 대부분 인터넷 익스플로러를 사용해야 합니다. 요즘은 크롬이나 다른 부라우저에서도 결제가 되기도 합니다. 다른 브라우저를 사용한 경우 다시 인터넷 익스플로러로 로그인해서 결제하면 됩니다.



인터넷 쇼핑몰에서 결제할 때처럼 여러 단계를 거치면 결제가 정상적으로 처리됐다는 메시지가 나오고 위와 같이 처리 내역 조회 화면이 나옵니다.



사이드바 메뉴에서 웹프로그램 자동 설치를 선택하면 워드프레스를 설치할 수 있지만 영문 버전이 설치됩니다. 여기서 설치하면 바로 사용할 수 있지만 관리자 화면이 영문으로 나와서 불편하죠.



영문 버전을 설치하면 wordpress 디렉터리가 만들어지고 이곳에 워드프레스가 설치되므로 도메인 외에 폴더 이름을 추가로 입력해야 블로그가 나옵니다. 그래서 워드프레스 폴더가 아닌 루트 폴더에 한글 워드프레스를 설치해 보겠습니다.



사이드바 메뉴에서 계정/MySQL 비밀번호 변경을 선택하면 계정 정보가 나옵니다. 제 경우는 무료 서비스를 사용했던 내역이 그대로 있습니다. 호스트네임과 아이디를 확인합니다. 이 아이디는 호스팅 회사의 로그인 아이디와는 다릅니다. 혼동하지 마세요. 파일질라로 업로드 할 때 필요한 정보입니다.



무료 웹호스팅 환경에 워드프레스를 설치할 때처럼 호스트네임, 아이디, 비밀번호를 입력하고 포트에는 21을 입력한 후 빠른 연결 버튼을 클릭해 로그인합니다. 그런 다음 리모트 사이트에서 루트 폴더를 클릭합니다. 웹호스팅 회사별로 다르지만 루트 폴더는 대개 www나 public_html인 경우가 대부분입니다. 루트 폴더를 선택하면 아래에 index.html 파일만 있습니다. 안내 메시지가 나오는 파일이니 마우스 오른쪽 버튼을 클릭한 후 ‘삭제’를 선택해 삭제합니다. 로컬사이트는 내 컴퓨터이니 워드프레스 한글 버전의 압축이 풀린 폴더로 이동하면 아래에 모든 파일이 나옵니다. 이 상태에서 Ctrl+A를 눌러 전체 파일과 폴더를 선택하고 마우스 오른쪽 버튼을 클릭해 ‘업로드’를 선택하면 리모트 사이트의 루트 디렉터리에 모두 전송됩니다. 이전에는 wp-config.php 파일을 만들어 전송했지만 이번에는 텍스트 편집기에서 이 파일을 직접 열어서 편집하고 저장하는 방법을 사용해봅니다.



앱타나 스튜디오는 무료이면서도 웹 개발툴로 사용하기 좋은 텍스트 에디터입니다. 웹브라우저에서 http://www.aptana.com/products/studio3으로 이동한 후 프로그램을 내려받아 설치하면 바로 사용할 수 있습니다. 앱타나 스튜디오는 나중에 테마를 수정할 때도 필요한 툴입니다.

프로그램을 처음 열면 어두운 배경으로 나옵니다. 색상 아이콘의 옆에 있는 작은 세모를 클릭하면 스킨을 바꿀 수 있습니다. 위 화면은 Mac Classic를 선택한 화면입니다. 이 프로그램의 장점은 무료임에도 다양한 기능을 제공한다는 것입니다. 특히 FTP로 직접 연결해 서버의 파일을 수정하고 저장하면 바로 적용되는 기능을 제공합니다. FTP로 서버와 연결하기 위해 메뉴에서 Window → Show View → Remote를 차례로 선택합니다.



왼쪽에 리모트 패널이 나타났습니다. 지구본 아이콘을 클릭하면 창이 나오고 Site Name에 적당한 이름을 넣습니다. Remote info에 웹호스팅 정보에 해당하는 내용을 입력합니다. 웹호스팅 회사마다 다르므로 회사별로 제공하는 정보를 정확하게 입력합니다. 여기서 server는 예제에 나오듯이 ftp.가 들어가는 경우도 있지만 우비에서 제공하는 정보에는 이것이 없으므로 제공하는 대로만 입력하면 됩니다. Username과 Password에 각각 아이디와 비밀번호를 입력하고 아래에서 More Options를 클릭해 Port에 21을 입력하고 Test 버튼을 클릭하면 연결이 성공했다고 나옵니다. 연결이 실패한 경우는 위 정보를 잘못 입력한 경우이니 꼼꼼히 살펴서 입력하세요. 연결이 성공하고 창을 닫으면 Remote 패널에 사이트 이름과 아이콘이 나타납니다.



플러스 아이콘을 클릭하면 폴더가 펼쳐집니다. wp-config-sample.php 파일을 더블클릭 하면 해당 파일이 열립니다. 웹 호스팅 회사의 서버의 파일이 내 컴퓨터에서 직접 열리는 것입니다. 여기서 파일을 수정하고 저장하면 파일질라를 사용할 필요가 없습니다. 간단한 수정은 이런 프로그램을 이용하고 많은 파일을 업로드할 때는 파일질라를 사용하는 편이 좋습니다. 앞에서 다룬 4가지 접속 관련 정보를 웹호스팅에서 제공하는 내용을 참고해서 입력하고 아래로 내려서 해킹 방지용 암호화 키를 교체한 다음 Ctrl+S를 누르면 바로 저장됩니다. 다시 이 파일을 대상으로 마우스 오른쪽 버튼을 클릭하면 메뉴가 나오는데, 여기서 Rename을 선택하면 이름을 수정할 수 있게 입력박스로 전환됩니다. 여기서 -sample을 지우고 엔터키를 치면 수정됩니다. 여기까지 하면 서버에 파일이 수정돼서 저장되고 이제 설치만 하면 됩니다.



웹브라우저의 주소란에 내가 만든 도메인 이름을 입력하고 엔터키를 치면 워드프레스 설치화면이 바로 나타납니다. 사이트제목, 사용자명, 비밀번호를 입력하고 이메일 주소를 입력한 다음 “워드프레스 설치하기” 버튼을 클릭하면 바로 설치됩니다. 다음 화면에서 로그인하면 설치가 완료되고 위에서 입력한 이메일 주소로 워드프레스로부터 이메일이 옵니다.