워드프레스 웹사이트와 일반 웹사이트의 차이
워드프레스 사이트 제작 과정
이번에는 워드프레스 웹사이트 제작 방법과 일반 웹사이트 제작 방법의 차이점에 대해 한 번 정리해 보려고 합니다.
여기서 일반 웹사이트라고 하면 어드민 없이 html, css, js로 브라우저에서 화면을 표시하는 요소들로 화면을 구성하는 방법을 생각한 것이고, 워드프레스 웹사이트란 어드민을 활용한 웹사이트 제작을 생각한 것임을 참고해 주시기 바랍니다.
1. 일반 웹사이트 제작 방식
설명을 위해 무료 웹사이트 템플릿을 검색해 보다가 'Infinity'라는 템플릿이 눈에 띄었고, 이거로 제작 과정을 진행해 보기로 했습니다. 템플릿 파일을 다운로드한 후 압축 해제를 한 다음 이걸 그대로 웹 호스팅 서버에 업로드해 보겠습니다.
그러면 바로 완성된 웹사이트의 모습이 표시됩니다. > https://styleshout.com/templates/preview/Infinity_2_0_0/ (데모 사이트에서 참고하실 수 있습니다)
화면에 표시되는 모든 내용은 index.html 파일을 열어서 html 코드 중 일부를 수정하면 적용이 됩니다.
기타 주요 파일들을 몇 가지 소개해 보면 화면의 디자인을 적용하는 스타일들은 main.css에, 마우스 클릭 시에 어떤 부분으로 스르륵 이동이 된다거나 이미지가 그리드 형태로 구성이 된다거나 화면을 스크롤 시 등장 효과를 발생시키거나 하는 동작에 대한 컨트롤은 main.js, 그리고 이런 효과나 동작을 위한 기본 코드들은 jQuery의 플러그인을 종합해 놓은 plugins.js에 모아져 있습니다. 이미지들은 images라는 폴더 아래에 정리되어서 업로드가 되었습니다.
이 파일들은 index.html을 통해 연결이 되어 있어서 도메인을 치고 이 웹사이트 주소에 방문을 하면 하나의 완성된 모습으로 표시가 되게 됩니다. (※ 도메인과 연결된 호스팅 서버에서 index.html, index.php 같은 파일이 가장 먼저 읽힙니다.)
이 방식은 화면 그대로를 직접 구성하고 내용들을 표시하는 것으로 구조만 알고 제작을 하면 서버에서 뭔가 해석하고 자료를 준비하지 않아도 되기 때문에 로딩 속도가 매우 빠른 웹사이트를 구축할 수 있습니다. 다만 내용을 수정하고자 할 때 운영하는 사람이 이 구조를 잘 모르면 직접 수정하기는 다소 어려울 수 있습니다.
지금은 완성형 템플릿을 이용해 본 것이라 다 제작된 파일들을 서버에 올리기만 한 것이지만, 만약 디자인대로 이렇게 퍼블리싱을 한 것이라면 제작하는 데에 많은 시간이 소요가 될 수 있습니다. 참고로 원페이지 형태가 아닌 여러 페이지가 존재해야 하는 사이트라면, 헤더와 푸터를 분리하고 index.html, about.html, contact.html 등과 같이 각 페이지들을 html 파일들로 준비를 해야 합니다. 즉 어떤 콘텐츠를 추가하려면 매번 html 코드와 연결되는 파일들의 수정이 필요하게 됩니다.
2. 워드프레스 웹사이트 제작 방식
제작 시도 전에 잠시 워드프레스 사이트로 만들면 얻을 수 있는 이점을 한 번 정리해 봅니다.
1) 어드민에서 페이지 및 기타 콘텐츠들을 관리할 수 있음
2) 메뉴를 html 수정이 아닌 '외모> 메뉴'에서 관리를 할 수 있음
3) 화면을 헤더, 본문, 푸터로 나누어 각각 관리할 수 있음
4) 기획이나 디자인 변경 시 코드 수정이 아닌 어드민에서 적용이 가능
※ 워드프레스로 웹사이트를 만드는 방법들은 아래 소개하는 내용 외에 다양한 방법이 있습니다. (테마를 제작하여 일반 웹사이트 제작과 비슷하게 적용하는 경우 등) 저는 최대한 운영 시 직접 수정이 가능한 방법으로 제작을 하기 위해 페이지 빌더를 사용하는 쪽으로 제작을 한 것임을 참고해 주시기 바랍니다.
2-1. 헤더, 푸터, 본문 영역 나누기
로고와 메뉴 버튼이 있는 부분(투명하게 처리했지만 헤더로 봅니다)과 사이트의 맨 아래쪽 문장 및 메뉴, 메일 가입, 카피라이트 정보 등이 나오는 부분, 그리고 그 나머지 부분은 이후 페이지로 제작할 본문 영역으로 나눠서 작업을 합니다.
2-2. 헤더 만들기 (Impreza > Headers)
헤더는 pc 화면부터 이미 사이드 메뉴가 나오는 방식이 적용이 되어 있어서 모바일 메뉴를 처음부터 보이게 설정하고, 왼쪽에는 로고 이미지를 넣었습니다.
오른쪽 연결될 메뉴 구조는 '외모 > 메뉴'에서 리스트를 만들고 관리합니다. 원페이지이고 페이지 이동이 아닌 메뉴와 일치하는 섹션으로 스크롤 이동이 되는 사이트를 만드는 것이라 섹션의 아이디(#id)를 URL로 적어줍니다.
2-3. 푸터 만들기 (Impreza > Page Blocks)
Footer라는 페이지 블록을 하나 만들고 디자인대로 칼럼을 나눠서 데이터를 입력했습니다. 칼럼을 나눌 때 최대 12조각으로 나누어 공간을 계획할 수 있습니다.
모든 화면 요소에는 편집 시 Design 설정을 이용해서 css 관련 스타일을 지정할 수 있습니다. 여기서 지정할 수 없는 css가 있다면 톱니 모양의 버튼을 눌러서 따로 css를 직접 입력할 수 있습니다. 즉 푸터 관련 스타일은 이곳에서 모두 고려를 하면 되는 구조입니다.
2-4. 페이지 레이아웃 설정
만들어진 헤더와 푸터는 테마 설정에서 연결함으로써 화면에 표시를 할 수 있습니다.
설정 중에서 '- Show content as is -'란 본문 영역은 페이지에서 작성한 내용 그대로 표시하겠다 약속을 하는 것입니다.
2-5. 메인 페이지 만들기 (Pages > Add New Page)
이제 메인 화면의 내용을 만들 페이지를 하나 만들어줍니다.
큰 주제별 내용들을 섹션(Row)으로 구분을 한 다음 메뉴를 클릭했을 때 연결이 될 섹션에는 ID 이름을 넣어줍니다. ID가 부여된 섹션과 아닌 섹션은 회색 바에 #ID라는 것이 표시되기 때문에 구분이 쉽습니다.
푸터 제작 때와 마찬가지로 모든 화면 요소들은 디자인 탭에서 css를 코드로 적지 않고 스타일을 적용할 수 있습니다. 각 요소에서 스타일 정의를 할 수 없는 부분들은 페이지 설정(톱니바퀴)을 클릭해서 이쪽에 css 코드를 추가합니다. 즉 이 페이지 내에서만 사용이 되는 스타일 정의들은 이곳에서 관리를 하면 되겠습니다.
2-6. 공통 CSS 설정
헤더 스타일 및 전체 사이트에 공통적으로 적용이 될 스타일은 테마 옵션에 있는 'Custom Code' 설정을 이용하면 되겠습니다.
시간이 너무 소요가 되는 관계로 이미지 그리드 호버 시 내용 표시 및 contact 섹션, 그리고 슬라이드 메뉴의 구성 일부 등은 생략을 했습니다.
2-7. 웹사이트 테스트, 모바일 화면 조정
위 내용까지 적용하고 사이트를 열어 보면 아래와 같이 웹사이트가 열리게 되는 것을 볼 수 있습니다. 모바일 화면도 열어서 공간 조정 및 폰트 사이즈 등을 조정합니다.
(임시 테스트 사이트 > http://oks-together.hol.es/onepage/, 혹 사이트가 안 열릴 때에는 구글 DNS 설정이 필요할 수 있습니다.)
정리해 보고자 했던 워드프레스 웹사이트 제작 방식의 차이점이 잘 전달이 되었는지 모르겠습니다. 소개용 페이지라면 굳이 워드프레스를 가지고 사이트를 만들지 않아도 되지만, 이후 계속 추가될 콘텐츠(post, portfolio)가 있거나 내용의 수정이 많은 경우에는 어드민이 있는 워드프레스 사이트가 더 도움이 될 수도 있습니다. 물론 저라면 제작 속도의 이점으로라도 워드프레스로 사이트를 만들 거긴 합니다. 이건 워드프레스의 이점이라기 보단 페이지 빌더의 이점일 수 있겠습니다.
이후 웹사이트가 필요한데 워드프레스로 해야 하는지 아닌지를 고민하시는 경우라면 한 번 참고해 보세요.
- 끝.
