CMS매뉴얼 디자인관리 》 고급 디자인 관리 》 메인 화면 디자인
2012-02-25 10:13:34

메인 화면 디자인 [디자인관리》고급 디자인 관리》메인 화면 디자인]

메인화면 디자인은 홈페이지 구축시 가장 중요한 부분입니다. 우선 메인화면 디자인을 설정하는 절차에 대해서 알아보도록 하겠습니다.


? 메인화면 템플릿 선택

애니빌드 솔루션에서는 기본적으로 상단/왼쪽/메인(Body)/하단으로 분리 되어 있습니다. 디자인 작업시에는 해당 부분을 선택한 후 디자인변경 및 추가를 해야 합니다. 홈페이지의 경우에는 상단/좌측/하단을 고정시켜 놓고 메인(Body)부분을 변경하여 페이지를 구성할 수 있습니다.


? 나만의 디자인과 기본템플릿

나만의 디자인에서는 직접 디자인을 추가/삭제/선택할 수 있습니다. 홈페이지 제작시에는 필요한 만큼 나만의 디자인을 추가하여 사용할 수 있습니다.

기본템플릿은 본 솔루션에서 제공되는 기본디자인으로 수정이 불가능하다는 단점이 있으므로 참고용으로만 사용하시기 바랍니다. 가능한 나만의 디자인에서 직접 디자인을 추가/수정해서 사용하시기 바랍니다. 메인화면에 사용할 디자인을 적용하기 위해서는 해당 디자인의 체크박스에 체크하고 적용버튼을 클릭하여 적용할 수 있습니다.


? 디자인 제목과 디자인 입력

실제 디자인을 입력하는 부분이며 디자인 제목과 디자인을 입력합니다. 디자인을 입력할 때에는 편집기로 입력하는 방식과 HTML코드를 직접 입력하는 전문가용 방식이 있습니다. 모드를 전환할 때에는 도구에서 을 클릭하여 사용할 수 있습니다.


[편집기 모드로 입력하는 방식]


[전문가 모드로 입력하는 방식]


편집기를 사용하는 경우에는 다음의 편집도구들을 참고하시기 바랍니다.


기본적인 편집모드는 편집기를 사용할 수 있는 초보자용모드로 되어 있습니다. 편집기 없이 웹디자이너전용으로 HTML을 직접 입력하고자 할 경우에는 [기본정보》기타운영정보설정》기타설정]에서 HTML편집기 사용여부에서 '편집기를 사용하지 않습니다.(웹디자이너 전용)'을 선택해야 합니다.


? Link URL, 문자변환코드, 기본 그룹디자인, 나만의 그룹디자인

?  Link URL

다음 그림과 같이 홈페이지에서 연결할수 있는 모든 페이지의 연결 URL을 볼 수 있습니다. 필요한 URL을 복사(Ctrl+C)해서 필요한 위치에 삽입(Ctrl+V)하여 사용할 수 있습니다.


독립형으로 홈페이지를 제작할 경우에는 파일명을 직접 지정할 수도 있지만, 애니빌드 솔루션에서는 파일명이 고정 되어 있습니다. 따라서 솔루션에서 제공되는 모든 파일은 생성/수정/삭제가 불가능하므로 반드시 Link URL에 표시되는 링크정보를 통해서만 사용할 수 있습니다.


다음 소스는 Link URL을 추가한 디자인을 실제 홈페이지 삽입한 화면입니다.

? 문자변환코드

솔루션에 기본으로 설정되어 있는 문자변환코드를 표시하는 부분입니다. 홈페이지 운영시 전화번호, 주소, 연락처, 로고, 약관, 개인정보 취급방침, 개인정보 담당자, 기타 등의 정보가 변경 될 때마다 디자이너를 통해서 수정하기에는 상당한 시간소모와 인력이 들어가게 됩니다. 이렇게 수정이 빈번하게 발생되는 정보를 코드화 하여 홈페이지 운영자가 정보 변경시 홈페이지 상에서 즉시 반영이 될 수 있도록 [문자변환코드]를 이용하는 것이 좋습니다.

상단/왼쪽/ 메인(Body)/하단디자인에서 사용할 수 있는 문자변환코드가 다르게 표시되기 때문에 각 디자인 작업시에는 해당하는 문자변환코드를 사용하여 입력하시기 바랍니다. 사용방법은 문자변환코드를 복사(Ctrl+C)해서 필요한 위치에 삽입(Ctrl+V)하여 사용합니다.



다음 소스는 문자변환코드를 추가한 디자인을 실제 홈페이지 삽입한 화면입니다.

홈페이지에서 실행하면 다음과 같이 표시됩니다.


? 기본그룹디자인

애니빌드 솔루션에서 기본적으로 제공하고 있는 그룹디자인입니다. 자주 사용되는 상품목록, 최근게시물, 설문조사, 마이페이지, 기타 디자인 등의 다소 어려운 디자인소스 입력부분을 그룹으로 설정해 놓은 코드를 사용하여 보다 쉽고 빠르게 작업할 수 있습니다. 기본그룹디자인의 코드명은 '{PRO_'로 시작하며 디자인 입력시 필요한 코드를 복사(Ctrl+C)하여 원하는 위치에 삽입(Ctrl+V)합니다.


? 나만의 그룹디자인

자주 사용하는 디자인(HTML)을 직접 코드로 등록하여 사용할 수 있는 기능입니다. 위치에 상관없이 사용할 수 있기 때문에 홈페이지를 쉽고 빠르게 작업을 할 수 있습니다. 나의 그룹디자인은 그룹명이 '{GROUP_' 으로 시작되며 상단/왼쪽/메인(Body)/하단디자인에서 동일하게 적용됩니다. 디자인 입력시 코드를 복사(Ctrl+C)하여 필요한 위치에 삽입(Ctrl+V)하여 사용합니다.


다음 소스는 문자변환코드를 추가한 디자인을 실제 홈페이지 삽입한 화면입니다. 자세한 내용은 [전문가 스텝1]의 [6.나의 그룹디자인 관리]를 참고하시기 바랍니다.


지금까지 메인화면 디자인을 설정하는 방법에 대해서 알아보았습니다.


메인화면 디자인은 메인화면 뿐만 아니라 세부화면의 디자인에도 영향을 미치고 있습니다. 예를 들어, http://uhanla001.web-in.co.kr(한라상조)는 상단 디자인이 2개, 왼쪽디자인 6개, 하단 디자인 1개, 메인(Body)디자인 1개로 구성되어 있습니다.


상단디자인은 메인화면과 세부화면이 다르기 때문에 2개의 나만의 디자인이 생성되었습니다.


왼쪽디자인은 홈페이지에서 세부화면으로 사용하는 회사소개, 회원혜택, 상품안내, 애경사서비스, 커뮤니티, 마이페이지 등이 모두 다르기 때문에 6개의 나만의 디자인이 생성되었습니다.


메인(Body) 디자인은 메인화면에서 나타나는 페이지만 사용하기 때문에 1개의 디자인이 생성되었습니다.


하단 디자인은 메인화면과 세부화면이 동일하게 표시되므로 1개의 나만의 디자인이 생성되었습니다.

이와 같이 상단/왼쪽/메인(Body)/하단디자인이 홈페이지의 특성에 따라서 개수가 다르게 됩니다. 입력된 디자인을 메인 화면으로 적용하기 위해서는 각 상단/왼쪽/메인(Body)/하단디자인에서 원하는 템플릿을 선택하고 적용버튼을 클릭하면 적용이 됩니다.

 

<출처> 예성출판 - "홈페이지빌더 2.0"  일부 발취