예 스탑 홈페이지 제작 솔루션 의 시스템 구조 와 작동 원리 에 대해서 알아봅시다 
 CMS 매뉴얼 솔루션 의 시스템 구조 와 작동 원리 에 대해서 알 아 봅시다 
 2012 - 02 - 25 10 : 25 : 36 
 http : / / www . yestop . co . kr / bbs / manual / 1195 
 시스템 구조 와 원리 에 대해서 알아보 자 . 
 1 . 솔루션 을 통한 홈페이지 제작 방식 의 차이점 
 솔루션 을 사용 하 여 홈페이지 를 제작 할 때 와 일반 맞춤 형 이나 독립 형 홈페이지 를 제작 할 때 를 비교 하 면 서로 다른 부분 들 이 많이 있 습니다 . 솔루션 을 사용 하 지 않 는 경우 에 는 프로그램 되 어 있 는 파일 을 열 어서 디자인 을 설정 하 고 서버 에 업로드 하 는 방식 인데 비해서 솔루션 을 이용 하 는 경우 에 는 솔루션 에서 요구 하 는 방식 에 맞추 어 디자인 을 설정 해야 합니다 . 
 예 를 들 어 , 웹 디모 솔루션 같 은 경우 에 는 상단 / 왼쪽 / 메인 ( body ) / 하단 디자인 이 서로 분리 되 어 있 어 디자인 을 코딩 할 때 각 디자인 에 맞 게 분리 해서 따로 HTML 파일 을 만들 어야 합니다 . 또한 솔루션 에 파일 을 업로드 하 는 방식 이 아닌 HTML 소스 를 솔루션 에 저장 해야 하 며 , 각종 프로그램 도 자바 스크립트 와 연동 되 어 있 으므로 솔루션 에서 제공 되 는 기본 소스 를 참고 하 여 디자인 작업 을 해야 홈페이지 가 완성 됩니다 . 
 2 . 틀 이 없 는 레이아웃 
 대부분 의 솔루션 을 이용 하 면 미니 홈피 , 블로그 , 카페 처럼 제한 된 틀 내 에서 만 디자인 을 변경 할 수 있 습니다 . 국내 대부분 의 쇼핑몰 솔루션 , 기업 형 홈페이지 제작 솔루션 등 은 모두 제한 된 틀 내 에서 만 일부 디자인 을 변경 할 수 있 으며 , 특히 프로그램 과 연계 되 어 있 는 부분 은 디자인 을 변경 할 수 없 는 경우 가 대부분 입니다 . 그러나 조합 형 임대 솔루션 에서 는 그러 한 틀 이 없 으며 어떤 레이아웃 도 자유 롭 게 만들 수 있 도록 모든 페이지 는 99 % HTML 소스 입력 방식 을 지원 합니다 . 그러므로 HTML 소스 사용법 만 안다면 누구 나 쉽 게 솔루션 을 사용 할 수 있 습니다 . 
 본 장 에서 는 기본 적 으로 이미지 전문 편집 프로그램 인 포토샵 과 HTML 을 다룰 수 있 는 사용 자 들 을 위한 기능 입니다 . 간편 디자인 을 작업 할 경우 에 는 기본 디자인 의 원본 파일 인 PSD 파일 을 다운로드 받 아서 편집 해야 하 는데 , 이 경우 에 포토샵 을 숙지 하 고 있 는 사용 자 라면 쉽 고 멋지 게 홈페이지 를 꾸밀 수 있 습니다 . 
 포토샵 과 함께 HTML 을 다루 는 전문 프로그램 인 나모 나 드림 위버 를 다룰 수 있 어야 합니다 . 웹 디모 솔루션 은 HTML 파일 을 생성 하 는 프로그램 이 아니 고 사용자 에 의해서 만들 어 진 HTML 을 솔루션 에 삽입 하 는 방식 을 채택 하 고 있 습니다 . 홈페이지 의 프레임 이 상단 / 왼쪽 / 메인 ( body ) / 하단 디자인 으로 나누 어 져 있 으므로 각 페이지 를 다르 게 만들 어 사용 함 으로 연결 되 는 페이지 를 쉽 게 생성 할 수 있 습니다 . 메인 화면 을 상단 / 왼쪽 / 메인 ( body ) / 하단 디자인 으로 표시 하 면 다음 과 같 습니다 . 
 3 . 홈페이지 제작 시간 단축 을 위한 솔루션 
 모든 페이지 는 상단 / 왼쪽 / 메인 ( body ) / 하단 디자인 이 기본 적 으로 분리 되 어 있 으며 , 각 페이지 마다 상단 / 왼쪽 / 하단 디자인 을 불러 올 수 있 도록 함 으로서 반복 되 는 디자인 을 하나 로 묶 어 관리 할 수 있 습니다 . 예 를 들 어 , 쇼핑몰 같 은 경우 는 상단 디자인 이 모든 페이지 에서 모두 동일 하 고 왼쪽 디자인 은 마이 페이지 를 제외 하 고 모두 동일 합니다 . 
 이 와 같이 디자인 을 묶 어 관리 하 면 디자인 을 한 번 만 적용 해도 되 고 제작 완료 후 에 유지 보수 할 때 에 는 한 번 수정 으로 모든 페이지 에 동일 하 게 적용 되 므로 편리 하 며 관리 하 기 가 용이 해집니다 . 이외 에 도 기본 그룹 디자인 , 나 의 그룹 디자인 을 통해서 반복 되 는 디자인 을 직접 하나 로 묶 을 수 있 으므로 홈페이지 의 제작 시간 을 단축 하 는 효과 가 있 으며 홈페이지 제작 이 완료 된 후 에 는 유지 보수 가 쉬워 집니다 . 
 4 . 자바 스크립트 를 통한 프로그램 연동 
 일반 홈페이지 제작 방식 에서 특정 코너 에 최근 게시물 및 추천 상품 등 을 출력 하 려면 반드시 프로그래머 의 도움 이 필요 하 지만 웹 디모 솔루션 에서 는 모든 부분 들 이 모듈 화 되 어 있 고 99 % HTML 기반 으로 만들 어 져 있 으므로 HTML 에 익숙 한 사용 자 라면 홈페이지 를 쉽 게 구축 하 고 수정 하 기 가 용이 합니다 . 사용자 는 HTML 로 만든 디자인 을 그룹 으로 묶 어서 그룹 디자인 을 생성 할 수 있 습니다 . 다음 그림 은 메인 화면 에 그룹 디자인 을 사용 하 여 표시 한 화면 입니다 . 
 위 의 그림 과 같이 메인 화면 의 HTML 에 그룹 디자인 코드 를 추가 하 여 생성 할 수 있 으며 , 여기 에 자바 스크립트 를 추가 로 사용 하 면 더 멋진 홈페이지 를 만들 수 있 습니다 . 다음 과 같 은 동적 인 메뉴 를 만들 수 있 습니다 . 
 이 와 같이 모든 프로그램 은 자바 스크립트 와 연동 되 어 있 기 때문 에 홈페이지 의 자유 로운 수정 이 가능 하 고 출력 속도 를 높일 수 있 습니다 . 
 웹 디모 솔루션 의 가장 큰 장점 중 의 하나 는 확장 성 이 우수 하 다는 점 을 들 수 있 습니다 . 웹 디모 솔루션 에 는 사용 자 가 홈페이지 에 사용 되 는 게시판 관련 , 예약 관련 , 상품 관련 , 구인 구직 관련 프로그램 등 의 모듈 을 이용 해서 기업 홈페이지 , 쇼핑몰 , 구인 구직 홈페이지 , 중고차 매매 홈페이지 등 의 사용 자 가 원 하 는 형태 의 홈페이지 를 구축 할 수 있 습니다 . 
 1 . 메인 디자인 하 기 
 디자인 관리 》 디자인 마법사 설정 》 기본 XML 파일 생성