Basic

홈페이지 만들기 2. 레이아웃, 빈페이지, 게시판 만들기

Anybuild
2014-04-20 15:55:00
hit2816
http://lab.anybuild.co.kr/bbs/mission/1644

홈페이지 제작시 가장 중요한 부분이 사이트맵 입니다.

필자는 아래와 같이 임의로 사이트 맵을 구성 해봤습니다.

회사소개

- CEO 인사말

- 오시는 길

제품 소개

- (자동생성 카테고리1)

- (자생성동 카테고리2)

- (자동생성 카테고리3)

견적문의

- 견적문의 현황

- 방문 상담원 소개

- 제휴문의

커뮤니티

- 공지사항

- 자유게시판

- 갤러리

이정도 사이트맵이라면 아주 일반적인 홍보형 홈페이지의 사이트맵이지 않나 싶네요. ^^

그럼 이제부터 진짜 맞춤형 홈페이지 제작을 시작해보도록 하겠습니다.

1. 사이트맵을 구성했다면 어떤 기능으로 구현할 것인지를 고민해봐야 합니다.

여러분은 애니빌드 솔루션을 처음 접하기때문에 각 페이지별로 어떤 기능을 활용해야 할지 본 강좌를 통해 요령을 익히시기 바랍니다. 이 부분은 어렵지 않으므로 쉽게 익히시리라 봅니다.

[요령1] 사이트맵에서 우선 프로그램적인 기능이 전혀 없다면 99% [추가페이지]라고 보시면 됩니다.

"CEO 인사말", "오시는길"이 해당 됩니다.

[요령2] 일반적으로 가장 많이 사용되는 게시판 또는 사진게시판인 경우 [일반게시판]이라고 보시면 됩니다.

"공지사항", "자유게시판", "갤러리"가 해당 됩니다.

[요령3] 제품소개, 상품소개, 강좌소개 등 결제 기능이 없고 단순 홍보를 목적으로 하며, 관리자가 상품을 추가 및 수정 할 가능성이 있는 경우 [제품소개 솔루션]이라고 보시면 됩니다.

"제품소개"가 해당 됩니다.

[요령4] 상담문의, 제휴문의 등 글쓰기 폼만 있고 리스트화면이 없는 경우 [맞춤전송폼]이라고 보시면 됩니다.

"제휴문의"가 해당 됩니다.

[요령5] 게시판인데 출력되는 항목이 일반적이지 않은 경우 [맞춤게시판]이라고 보시면 됩니다.

보통 일반게시판에서 항목을 추가하려고 하는데, 애니빌드 솔루션에서 제공되는 게시판은 [작성자명, 이메일, 핸드폰, 제목, 내용] 이렇게 정해져 있기 때문에 추가 할 수 없도록 되어 있습니다.

즉 일반게시판에 지역, 성별, 추천상품 등 별도의 항목이 추가 되지 않기 때문에 이런경우 [맞춤게시판]이라고 봐야 합니다. 실제 홈페이지 제작하면서 사용률이 상당히 높은 편이기도 합니다.

"방문 상담원 소개"가 해당 됩니다.

이렇게 각 페이지 별로 어떻게 만들지 기획을 하였다면 아래와 같은 순서로 홈페이지 제작합니다. (중요)

사이트맵 구성 → 페이지별 기획 → 메인스킨 제작 → 메인화면 제작 → 서브스킨 제작 → 각 페이지별 생성 → 네비게이션 마법사 생성 → 각종 메인 출력 프로그램 세팅 → 완성

이렇게 정리 했다면 실제 페이지를 만들어 보겠습니다.

2. 우선 css 파일부터 생성 해보도록 하겠습니다.

[디자인관리 > 고급 디자인 관리 > CSS 파일관리]으로 이동후 아래와같이 기본 css파일을 등록 해놓으시기 바랍니다.

필자는 아래와 같이 소스를 붙여 넣었으나 여러분은 각자 취향대로 수정 하셔도 됩니다.

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-size: 12pt; font-family: 돋움, 돋움체, Dotum; text-decoration: none; color: #3f3f3f; }
td { text-decoration: none; font-family: 돋움, 돋움체, tahoma; font-size: 9pt; color: #404040; letter-spacing: 0px; }
.table_dot { border: 1px dashed #666666; }

*PS. FTP에서 css 파일을 만들어서 업로드해도 상관 없지만 본 솔루션에서는 scss 및 보안 인코딩 기능이 있기 때문에 되도록 관리자 모드를 통해 css 파일을 생성 하는 것이 좋습니다.

예전에는 css의 중요성이 그리 크지 않았지만 최근 웹표준화로 인해 css 파일의 비중이 커지고 홈페이지의 전반적인 디자인과 기능까지 관여하고 있기 때문에 보안에도 신경써야 합니다.

본 솔루션에서는 scss 기술이 적용되어 있으므로 코딩작업이 많고 복잡한 css 작업시간을 획기적으로 단축시키고 자동 인코딩 되고 있으므로, 차 후 "홈페이지 제작 속도 + 유지보수 속도 + 보안" 을 생각해서라도 관리자모드에서 css 파일을 생성해주세요.

scss 사용방법 매뉴얼을 여기를 참고하세요. (http://manual.anybuild.co.kr/add/basic1_04)

아래와 같이 css 파일이 생성되었다면 모든 페이지에 적용시켜보도록 하겠습니다.

보통 css파일을 불러올때 아래와 같이 사용하지만

앞으로 애니빌드 솔루션에서는 아래와 같이 사용할것을 권장 합니다.

이유는 <link>는 원칙상 <head>에 들어가야 하지만 홈페이지를 제작하다 보면 모든 css 파일을 <head>에 넣기에는 부담되고, 특정 html 파일에서만 css 불러오기에는 별도의 head include 파일을 생성해야 하기 때문에 비효율적입니다.

하지만 <load> 사용 시 항상 <head>에서 불러주고 중복되는 css 파일을 자동으로 제거하고 있기 때문입니다.

또한 반응형웹에서 주로 사용되는 미디어 쿼리 및 특정 인터넷 익스플로러 버전에 따라 실행 여부를 컨트롤 할 수 있습니다.

*PS. 좀더 자세한 매뉴얼을 원하시면 여기를 클릭 하세요 (http://manual.anybuild.co.kr/add/basic1_02)

이렇게 생성된 css 파일은 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성] 에서 <head> 부분에 붙여넣고 저장합니다.

3. [디자인관리 > 고급 디자인 관리 > 스킨 관리] 로 이동 후 아래와 같이 고유코드 설정 부분에 main 이라는 스킨을 입력합니다.

모든 디자인 소스는 위화면에서 보시는것과 같이 html편집기 모드 보다는 TEXT모드로 사용하시기를 권장 합니다. html 편집기는 css 및 javascript등 수정하기가 어려워지고 변형될 우려가 있기 때문입니다.

아래 소스는 이번 강좌에서 사용된 소스이니 복사해서 붙여 넣으신후 저장 하시기 바랍니다. ^^

(DIV 코딩이 편하신 분은 DIV코딩하셔도 무방합니다.)

<table width="960" align="center" class="table_dot">
<tr>
<td>
<table width="100%">
<tr>
<td width="200" align="center">
<a href="/shop_main/main_body.htm">LOGO</a>
</td>
<td>
<p style="text-align:right">홈 | 로그인 | 회원가입 | 카카오톡 | 카카오스토리 | 페이스북</p>
<br>
[네비게이션 메뉴 출력 되는곳]
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>

<table width="960" align="center">
<tr>
<td valign="top">
{BODY_CONTENT}
</td>
</tr>
</table>
<br>

<table width="960" align="center" class="table_dot">
<tr>
<td valign="top">
[광고 배너 슬라이드 출력]
</td>
</tr>
</table>
<br>

<table width="960" align="center" class="table_dot">
<tr>
<td width="200" align="center">
하단 로고
</td>
<td>
개인정보 취급방침 | 이용약관 | 오시는길<br>
<br>
홈페이지명 : 애니빌드<br>
운영자 : 웹돌이<br>
이메일주소 : aaaa@naver.com<br>
<br>
총방문자수 : 00 / 이달방문자수 : 00 / 오늘 방문자수 : 00
</td>
</tr>
</table>

스킨을 만드실때 본문이 들어갈 부분은 반드시 {BODY_CONTENT}라고 적으시면 됩니다.

즉 여기서는 본문내용을 제외한 외형을 만드는곳이라고 생각하시면 되구요, {BODY_CONENT}는 각종 게시판 및 디자인페이지등 다양한 페이지가 들어갈 공간이라고 보시면 됩니다.

※ 위 소스에서 /shop_main/main_body.htm 은 메인으로 이동하는 링크이므로 꼭 기억해두세요.

(x)<a href="/">메인으로 이동</a>

(x)<a href="http://내도메인">메인으로 이동</a>

(o)<a href="/shop_main/main_body.htm">메인으로 이동</a>

* 간편주소 /main 으로도 사용이 가능합니다.

(o)<a href="/main">메인으로 이동</a>

※ 본 솔루션은 일반 html 및 <div>표준 코딩 모두 적용 가능 합니다.

스킨을 등록 하셨다면 아래와 같이 main 이라는 스킨이 등록된것을 확인 할 수 있습니다.

스킨을 제작 했다고 해서 홈페이지에 바로 출력 할 수 없으며, 별도의 본문 페이지를 생성 할때 사용 된다고 보시면 됩니다.

자세한 사용법은 다음 단계에서 다시 설명 드리겠습니다.

4. 메인 화면 제작

[디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]에서 [새로만들기]를 통해서 메인 페이지를 생성합니다.

본 강좌에서 사용된 html 소스는 아래와 같습니다.

<table width="100%" height="200" class="table_dot">
<tr>
<td width="40%">[공지사항 최근 게시글]</td>
<td width="40%">[자유게시판 최근 게시글]</td>
<td width="20%">[SMS 실시간 문의]</td>
</tr>
</table>
<br>

메인 화면을 등록 했다면 좌측 페이지 목록에서 방금 생성한 메인 소스를 선택 합니다.

그리고 좀전에 등록한 스킨도 선택해주세요.

여기까지 완성했다면 홈페이지 접속 해서 아래와 같이 완성된걸 확인 할 수 있습니다.

홈페이지 확인 하려면 관리자 모드 상단에서 PC확인을 클릭 해주세요.

이제 스킨의 역할이 어떤건지 이해 가시나요?

보통 홈페이지 하단에 개인정보 취급방침, 이용약관, 제휴사 안내등 메인스킨을 불러와서 같이 사용 할 수 있기 때문에 각각 본문만 디자인해서 등록/수정 할 수 있습니다.

또한 유지 보수면에서도 스킨을 얼마나 정리를 잘 해놓느냐에 따라 작업 시간을 크게 단축 시킬수 도 있습니다.

필자는 여러분의 이해를 돕기 위해 디자인을 배제하고 각 기능별로 점선으로만 표시되게 해놨습니다. 디자인은 각자 알아서 하시기 바랍니다.

그리고 안쪽에 들어가는 각종 프로그램은 일단 텍스트로만 표시 해두었구요. 이후 강좌를 통해 하나씩 완성해보고자 합니다.

작업이 많을것 같지만 솔루션에서 제공되는 디자인 컴포넌트와 프로그램 마법사 기능이 많기 때문에 이해만 한다면 쉽고 빠르게 완성 될거라 봅니다.

5. 서브 스킨 생성

메인 스킨을 등록 하였다면 이번엔 각 서브페이지에서 사용 될 스킨을 따로 생성 해야 합니다.

생성 방법은 메인 스킨 생성과 동일 합니다.

<table width="960" align="center">
<tr>
<td width="200" valign="top" class="table_dot">
<br>
[로그인 박스]
<br>
<br>
{GROUP_left_all}
<br>
<br>
[최근 공지게시글]
<br>
<br>
<br>
</td>
<td valign="top">
{BODY_CONTENT}
</td>
</tr>
</table>
<br>

<table width="960" align="center" class="table_dot">
<tr>
<td valign="top">
[광고 배너 슬라이드 출력]
</td>
</tr>
</table>
<br>

6.각 페이지별 생성 - 추가 페이지 생성

CEO 인사말, 오시는길 페이지를 만들어 보도록 하겠습니다.

이때 사용되는 페이지가 [디자인관리 > 고급 디자인 관리 > 추가 페이지 관리] 이며, 주로 프로그램적인 기능이 없고 디자인으로만 구성되어 있는 경우 사용 됩니다.

아래와 같이 스킨은 "서브스킨"을 선택하고 페이지를 생성 합니다.

본 강좌는 디자인 보다는 솔루션에 대한 이해를 위해서 디자인을 고려 안하고 텍스트로 만 구성 하였으니, 여러분은 각자 취향에 맞게 디자인 하시기 바랍니다.

[CEO인사말 소스]

<br>
안녕하세요 CEO 인사말 디자인 페이지 입니다.<br>
<br>
본 페이지 디자인은 생략 하도록 하겠습니다.<br>
<br>
<br>

[오시는길 소스]

오시는길 소스에서 변환 변수가 사용 되었습니다.

변환 변수를 사용하지않고 바로 텍스트 입력해서 사용 할 수도 있지만 좋지 않은 방법입니다.

왜냐하면 홈페이지 운영주가 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 정보를 변경 할 수도 있는데 이렇게 텍스트로 입력해놓게 되면 변경 될때 마다 일일이 다 찾아서 수정해줘야 하기 때문입니다.

이런 번거로움을 줄이기 위해, 사전에 변경될 수 있는 부분에 대해서는 프로그램 변수로 처리하는게 차 후 유지보수 면에서 효과적입니다.

사용 가능한 변수는 여기를 통해 확인 하시기 바랍니다. ( http://manual.anybuild.co.kr/add/basic1_01b )

cond 문법에 대한 자세한 내용은 여기를 통해 확인 하시기 바랍니다. ( http://manual.anybuild.co.kr/add/php1_05 )

위 변수 출력되는것을 확인 하기 위해 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 임의로 정보를 입력 해보시기 바랍니다.

그럼 아래와 같이 정상적으로 출력될겁니다.

http://uany02.anybuild.com/add/sub1_2

PS. 여기서 유심히 보셔야 할 부분이 몇가지 있습니다.

모든 소스 입력 페이지 위쪽에 보시면 [디자인 컴포넌트], [프리미엄 디자인] 버튼이 있습니다.

이 기능은 디자인 작업을 좀 더 빠르게 하기 위한 부가서비스 이며, 누구나 등록 할수 있고 유료로 판매도 할 수 있는 마켓이라고 보시면 됩니다.

우선 지금은 그냥 눈으로 확인만 하시고, 사용하지는 말아 주세요.

왜냐하면 이런 편의 기능을 처음부터 사용하게 되면, 솔루션을 이해하는데 오히려 혼란만 줄 수 있기 때문입니다.

본 강좌를 다 보시고 충분히 이해하고 난 뒤 이용하시는것 좋습니다.

7. 각 페이지별 생성 - 게시판 생성

[커뮤니티 > 게시판 관리 > 게시판 관리]에서 게시판생성 버튼 을 클릭하고 아래와 같이 생성 합니다.

공지사항 게시판은 관지자만 글작성 할수 있도록 설정 한 후 저장 합니다.

자유게시판도 같은 방식으로 생성합니다.

사진 게시판은 사진을 바로 출력 해야 하므로 "디자인관련설정"에서 아래와 같이 출력형태를 앨범형 게시판으로 변경 후 저장 합니다.

디자인 스킨을 선택해줘야 하는데 각 게시판 마다 [디자인관리]를 통해서 서브 스킨을 선택 해줍니다.

이렇게 해서 게시판 3개를 만들어 봤습니다.

8. 각 페이지별 생성 - 제휴 문의 생성

제휴 문의는 접수된 목록이 없고 단순히 입력 양식에 따라 접수만 받는 형태 입니다.

이런 단방향 접수 폼은 모두 [맞춤등록폼]이라고 보시면 될것 같네요.

현재 설치 되지 않은 상태이므로 마켓을 통해 설치 해야 합니다.

[프로그램샵 > 프로그램 추가 설치 > 프로그램 견적 문의] 로 이동 하고 중간쯤 [맞춤 등록폼]이 있습니다. [상세 보기]를 클릭해주세요.

그럼 디자인별로 다양하게 출력 되는데 미리보기를 통해 한번씩 확인해보시기 바랍니다.

본 강좌는 이해를 돕기 위해 [모듈만 설치] 를 통해서 설치 해보도록 하겠습니다.

[상세보기] 클릭 해서 설치까지 합니다.

PS. 프로그램샵에 대해서 중요한점 집고 넘어 가도록 하겠습니다.

* 홈페이지 제작 후 본 관리자 모드가 고객에게 넘어가는데 이때 각 프로그램별 가격이 모두 공개 되는데, 이 부분은 라이센스 계약에 따라 비공개처리 됩니다.

현재 본 강좌에서 사용된 계정은 프리랜서 또는 개인 홈페이지용이기 때문에 모두 공개 되지만, 프리미엄 라이센스 및 엔터프라이즈 라이센스는 아래와 같이 가격이 공개되지 않고 견적문의만 가능하도록 되어 있습니다.

즉, 기업라이센스를 통해 운영시 모든 프로그램 및 디자인 단가는 문의만 가능하고, 직접 설치는 불가능하게 되어 있으며, 프리랜서 계정(현재 계정)은 판매가가 공개 되어 있습니다.

* 프로그램샵에 누구나 상품을 등록 할 수 있으며, 판매 수익의 70% 드립니다.

프리랜서 및 기업에서 직접 디자인템플릿을 제작하여 프로그램샵에 등록시 판매가의 70%를 드리고 있습니다. 자세한 내용은 별도 문의 바랍니다.

이번 강좌를 진행하면서 자신만의 프로그램을 제작해서 등록 해보시기 바랍니다.

[맞춤전송폼]을 설치 하였다면 [프로그램샵 > 프로그램환경설정 > 맞춤전송폼 설정] 이라는 메뉴가 새로 생성된 것을 확인 할 수 있습니다.

아래와 같이 제휴 문의 폼을 만들어 봅시다.

여기서 sms,e-mail , 댓글 등 세부적인 설정은 넘어가도록 하겠습니다. 이 부분은 여러분께서 직접 설정해보시기 바랍니다.

제휴 문의 폼을 생성 하였다면, 고객으로부터 전달받을 항목을 생성해야 합니다.

필자는 아래와 같이 생성하였습니다.

항목을 저장하였다면 디자인을 등록 해야 합니다.

스킨은 "서브 스킨"을 선택하시구요.

기본 디자인 소스는 샘플디자인에서 "phpx 기본 디자인"을 불러와서 셋팅하시면 됩니다.

여기까지 따라 하셨다면 아래와 같이완성 되었을 겁니다.

http://uany02.anybuild.com/shop_contents/myreg_form.htm?myreg_code=jform

PS. 디자인소스를 프리미엄 디자인으로 셋팅 할수 있지만 이해도를 높이기 위해 샘플디자인 소스를 이용하실것을 권해드립니다.

소스에 대해서 간단히 설명을 하고 넘어가도록 하겠습니다.

<table width="100%" border="0" bgcolor="#CCCCCC" align="center" cellpadding="0" cellspacing="1">
<caption style="text-align:left; font-weight:bold;">{$values[subject]}</caption>

<tr loop="$values[fields] as $key2 => $values2">
  <th bgcolor="#f7f7f7" width="100" style="padding:4px;">{$values2[fieldName]} <span cond="$values2[fieldImportant]==1">*</span></th>
  <td bgcolor="#FFFFFF" style="padding:4px;">
   {$values2[fieldTag]}
   <font color="#0066FF">{$values2[fieldComment]}</font>
  </td>
</tr>

</table>
<br/>

PS. 현재 붙여 넣으신 소스 중 foreach 와 loop 라는 구문이 있습니다. cond와 함께 많이 사용되는 구문이므로 꼭 숙지하고 넘어가시는게 좋습니다.

- 반복문 loop 기본 문법 : http://manual.aramschool.co.kr/add/php1_06

- 반복문 loop 실무 예제 : http://manual.aramschool.co.kr/add/php1_07

- foreach 설명 : http://manual.aramschool.co.kr/add/p_foreach

여기서 애니빌드에서 제공되는 phpx소스에 대해서 몇가지 설명드리겠습니다.

애니빌드 솔루션은 어떠한 틀에 구애 받지 않고 제작사가 원하는데로 제작 할수 있도록 최대한 유연성과 확장성을 고려하여 설계된 솔루션 입니다.

위 소스에서 $myreg_form_row 는 데이타 베이스에서 최대한 변형/가공 하지 않은 원DATA를 보존 하고 있으며, 제작사에서 원하는 형태로 가공/출력 할수 있도록 되어 있습니다.

또한 사용법은 일반 php 와 매우 흡사하며, 문법은 동일하다고 보시면 됩니다.

예를 들어 $myreg_form_row 안에 들어가 있는 변수를 확인 하고 싶을때는 var_dump($myreg_form_row) ( http://manual.aramschool.co.kr/add/p_var_dump ) 또는

console_js($myreg_form_row) ( http://manual.aramschool.co.kr/add/p_console )를 통해서 어떤 구조로 DATA가 들어가 있는지 확인 할 수 있습니다.

아래는 console_js($myreg_form_row) 명령어를 삽입하고 크롭에서 실행한 화면 입니다. (크롭에서 F12를 클릭 후 Console 탭을 클릭하시면 됩니다.)

이렇게 넘어온 배열변수를 확인 하고 원하는 형태로 자유롭게 가공 할 수 있도록 설계 되어 있습니다.

조금 생소한 부분도 있을수 있지만 본 설명이 홈페이지 제작 프로그램의 80%이상 차지 할 정도로 많이 사용되므로 foreach , loop, cond 사용법은 꼭 익히시기 바랍니다.

이해가 잘 안되신다면, 일단 다음으로 그냥 넘어가셔도 됩니다. ^^;;;

9. 각 페이지별 생성 - 견적문의 생성

이것도 맞춤 전송폼을 설치했던 절차와 동일합니다.

프로그램샵으로 가셔서 [견적문의] 프로그램에서 모듈만 설치 합니다.

설치를 하고 나면 [프로그램샵 > 프로그램 환경설정 > 견적문의설정] 이라는 메뉴가 새로 생긴것을 확인 할 수 있습니다.

새로운 견적문의 게시판을 아래와 같이 개설해주세요.

스킨은 "서브스킨"을 선택하고, 목록화면, 읽기화면, 쓰기화면, 패스워드 폼 모두 phpx 기본 소스를 불러와서 저장합니다.

견적문의 게시판 특성상 [접수상태 관리]를 설정 해주셔야 합니다.

여기까지 설정 하였다면 홈페이지 상에 접속하셔서 테스트 해보시기 바랍니다.

아래는 완성 된 화면 입니다.

http://uany02.anybuild.com/shop_contents/price_guide_data_list.htm?price_guide_code=price

PS. 출석체크, 이머니충전, 동영상 플레이어, 댓글, 스케쥴관리등 모든 프로그램의 셋팅 방식은 위와 같이 기본 정보 입력, phpx 기본디자인, 부가 옵션 설정으로 이루어져 있으므로 셋팅방법에 대해서 숙지하시기 바랍니다.

10. 각 페이지별 생성 - 방문 상담원 소개 생성

일반 게시판과 비슷하지만 출력항목이 다른 경우 [맞춤게시판]을 이용하시는게 좋습니다.

특히 [맞춤게시판]은 프로그랩샵에서 제공되는 프로그램중 가장 유연성과 활용도가 많으니 정확한 사용방법을 알아두시면 왠만한 게시형 프로그램을 모두 만들 수 있을거라 봅니다.

프로그랩 샵에서 [맞춤 게시판]모듈을 설치 합니다.

설치 후 [프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리] 메뉴가 새로 생성 되었을겁니다.

새로운 맞춤게시판을 아래와 같이 생성하세요.

추가 옵션 부분은 한번씩 훑어 보시기 바랍니다.

기본정보를 설정하고 나면 항목 설정 화면이 나타 납니다. 아래와 같이 설정해주세요.

디자인 등록 화면에서 "서브스킨"을 선택하고, 리스트화면 소스를 "phpx 기본소스"를 불러와서 저장 합니다.

이렇게 저장 후 [컨텐츠관리 > 기본 컨텐츠 관리 > 방문 상담원 소개] 에서 임의로 데이타를 2개 이상 입력하시기 바랍니다.

실제 홈페이지에서 확인 해보시면 아래와 같이 원하지 않는 디자인으로 출력 될것 입니다.

맞춤게시판에 대해서 잠깐 설명 드리겠습니다.

맞춤게시판을 제외한 모든 프로그램은 기본 디자인만 불러와도 바로 사용할 수 있을 정도이기 때문에, 사실 디자인만 조금 수정하면 쉽게 완성 할 수 있습니다.

하지만 맞춤게시판은 워낙 제한 및 규격 자체가 없기 때문에 목록화면, 읽기 화면은 번거롭더라도 수정작업이 꼭 필요로 합니다.

좀 더 쉽게 수정하는 방법에 대해서 안내해 드리도록 하겠습니다.

[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]에서 [기본디자인]을 클릭하면 디자인 소스 수정 화면 밑 부분에 사용가능한 변수들이 있습니다.

필자는 사진이라는 항목의 변수값이 {$s_v1_url} 이지만 여러분은 변수명이 다를수 있습니다.

위 코드표를 참고 하여 아래와 같이 소스를 수정 하세요.

console_js($myboard_mylist_row); // DATA 확인하기 위해 임시로 추가하고 작업 완료 되면 주석 처리 해주세요.

<table width=100% border="0" cellpadding="0" cellspacing="0">
<tr loop="$myboard_mylist_row as $key => $values">
<td width=150 align=center><img src="{$values[s_v1_url]}"></td>
<td >
  <span cond="$values[s_v2]">{$s_v2_name} : <b>{$values[s_v2]}</b></span> <br>
  <span cond="$values[s_v3]">{$s_v3_name} : {$values[s_v3]}</span> <br>
  <span cond="$values[s_v4]">{$s_v4_name} : {$values[s_v4]}</span> <br>
</td>
</tr>
</table>

크롬에서 $myboard_mylist_row 를 확인해 보시면 아래와 같이 출력되고 있음을 알 수 있습니다. 이것을 참고하시면 좀 더 작업하기 편할 것 같네요.

필자는 솔루션 이해를 목적으로 하기때문에 디자인에 대해서는 배제하고 수정 방법에 대해서만 설명 드렸습니다.

여러분은 각자 취향에 맞게 디자인을 수정 해보시기 바랍니다.

완성된 화면 : http://uany02.anybuild.com/shop_contents/myboard_list.htm?myboard_code=cs

맞춤게시판을 통해서 단순하게 리스트만 나오는 게시판을 만들어 봤습니다. 여러분은 읽기, 쓰기 까지 되도록 만들어 보시기 바랍니다. ^^

이렇게 해서 제품 소개를 제외 하고 모두 페이지를 만들어 봤습니다.

우선 제품 소개 부분은 다음강좌에서 설명하기로 하구요. 네비게이션을 먼저 만들어 보도록 하겠습니다.

11. 메뉴 네비게이션 만들기

지금까지 만든 메뉴를 단순 html 링크방식으로 해도 무방하지만 홈페이지라는게 운영도중 언제라도 변경될 소지가 있는 부분이기 때문에 프로그램 처리 하는게 바람직합니다.

[디자인관리 > 전문가 환경설정 > 네비게이션 마법사] 으로 이동 후 아래와 같이 메뉴를 생성 합니다.

- 회사소개 첫번째 메뉴가 "CEO 이사말" 이므로 추가 페이지 안에서 선택 하도록 합니다.

- 제품 소개는 현재 제작하지 않았으므로 # 입력만 합니다.

- 견적문의 첫번째 메뉴가 "견적문의현황" 이므로 직접 URL 입력으로 선택 후 직접 입력하시기 바랍니다. 만약 주소를 모르신다면 [프로그램샵 > 프로그램 환경설정 > 견적문의 설정] 에서 URL주소를 확인 하시기 바랍니다.

이런식으로 하위메뉴까지 등록 하면 아래와 같이 메뉴 트리가 만들어 지게 됩니다.

이제 실제 홈페이지상에 출력 시켜 보도록 하겠습니다.

[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]로 이동 후 [프로그램마법사 생성] 버튼을 클릭 합니다.

PS. 그룹디자인에 대해서 잠깐 설명 드리겠습니다.

그룹디자인은 크게 2가지 역할을 하고 있습니다.

- 일반그룹디자인 : 홈페이지 제작시 같은 디자인이 여러군데 들어가는 경우가 많습니다. 예를 들어 배너라든지, 연락처라든지, 이벤트 페이지라든지 이렇게 반복되는 디자인을 하나로 묶어서 관리 할 수 있도록 해줍니다.

- 프로그램 그룹디자인 : 최근게시글, 추천상품, 슬라이드 배너등 다양하게 제작되어 있는 프로그램 소스를 가져오고 관리 하기 편하도록 마법사 기능을 제공 합니다.

즉 홈페이지 만들면서 그룹디자인 활용에 따라 소스정리도 깔끔해지고 제작속도도 빨라집니다. 또 고객입장에서는 프로그램 마법사 기능을 사용 할 수 있게 되므로 고객이 직접 수정도 가능해집니다.

새창이 열리면 "네비게이션 마법사"를 선택합니다.

아래부분에 "네비게이션 -가로형"에서 [설치]를 클릭합니다.

환경 설정 화면이 나타나는데 변경할 부분이 없으니 [등록]버튼을 클릭해주세요.

이렇게 프로그램 마법사를 통해 그룹디자인을 생성 하였다면, 그룹 코드 {GROUP_nav_h}를 복사해서 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "메인스킨", "서브스킨" 소스에 삽입합니다.

아래와 같이 스킨 소스에서 적당한 위치에 {GROUP_nav_h}을 붙여 넣고 저장 합니다.

이렇게 저장하고 홈페이지 접속 해서 보면 상단에 네비게이션 메뉴가 출력 됩니다. 하지만 서브 메뉴가 상단에만 노출되고 좌측메뉴에는 노출되지 않고 있습니다.

좌측 메뉴는 상단 메뉴 네비게이션 만드는 방식과 동일 합니다.

[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]로 이동 후 [프로그램마법사 생성] 버튼을 클릭 합니다.

새창이 열리면 "네비게이션 마법사"를 선택 합니다.

"네비게이션 - 기본형"을 선택 합니다.

환경 설정 화면에서 아래와 같이 옵션값을 수정 하도록 합니다.

만약 네비게이션 코드값을 모르신다면 [디자인관리 > 전문가 환경설정 > 네비게이션 마법사]에서 확인 가능 합니다.

이와 같은 방식으로 제품소개, 견적문의, 커뮤니티등을 추가로 생성하세요.

각각 [미리보기]를 클릭 하면 정상적으로 출력 되고 있음을 확인 할 수 있습니다.

이제 좌측 메뉴를 스킨에 붙여 넣어야 하는데 한가지 고민해야 할 부분이 있습니다.

좌측 메뉴를 붙이는 방법은 크게 2가지 방법이 있습니다.

[1번째 방법]

서브 스킨을 각 대메뉴별로 따로 만들어서 각각 좌측 메뉴를 다르게 넣는 방법이 있습니다.

이 방법을 선택 한다면 현재 "서브 스킨" 하나만 만들었는데 나머지 3개를 더 만드셔야 합니다.

즉 "메인스킨", "회사소개 스킨", "제품소개 스킨", "견적문의 스킨", "커뮤니티 스킨" 이렇게 총 5개의 스킨을 만들어야 합니다.

이렇게 되면 CEO인사말은 "회사소개 스킨"을 선택해야 하며, 일반게시판은 "커뮤니티 스킨"을 선택해야 합니다.

(백문이 불여일견 이라고, 이 부분은 실습해보고 넘어가시기 바랍니다.)

보통 이렇게 각 대메뉴별로 스킨을 따로 제작하는경우는 대메뉴별로 디자인이 너무 틀린경우 말고는 사용 하지 않습니다.

왜냐하면 만약 홈페이지 운영도중 네비게이션 색상이 바뀐다던가, 상단에 새로운 SNS 링크를 추가해줘야하는 경우 모든 스킨 파일을 다 수정해줘야 하기 때문에 유지보수면에서 좋지 않습니다.

하지만 직관적인면이 있어서 어떤 구조로 짜여져 있는지 확인하기에는 좀 더 쉬울것 같네요 ^^ (이랫다.. 저랫다... )

[2번째 방법]

서브 스킨과, 좌측 메뉴를 한개씩만 만들어서 프로그램 if 문법을 통해 분기를 주는 방법이 있습니다.

이방법을 이용시 전자와 달리 스킨을 하나만 관리하면 되고, 좌측 메뉴도 역시 하나만 관리하면 되기 때문에 유지보수면에서는 훨씬 낫습니다.

필자는 [2번째 방법]으로 진행 하지만 여러분은 반드시 [1번째 방법]을 해보고 다시 [2번째 방법]으로 진행할것을 권해드립니다.

[2번째 방법] 좌측 디자인이 하나만 필요하기 때문에 이전에 만든 좌측 디자인을 모두 삭제 하고

아래와 같이 전체 메뉴가 불러지도록 설정해서 만듭니다.

생성된 {GROUP_left_all} 에서 수정 버튼을 클릭 합니다.

소스를 유심히 보시면 아래와 같이 $var_set[code] 가 있습니다.

여기서 ? 문법은 if문과 동일한 문법 입니다.

문법예제 = (조건식) ? "참인경우" : "거짓인경우"

{@
$program_set[start_code] = ($var_set[code]) ? $var_set[code] : "00000000"; // 네비게이션 출력 위치를 입력해주세요.
$nav = program_load(NAVI_CATEGORY_MENU);
@}

아래와 같이 소스를 변경 하도록 합니다.

{@
$program_set[start_code] = ($my_navi_code) ? $my_navi_code : "00000000"; // 네비게이션 출력 위치를 입력해주세요.
$nav = program_load(NAVI_CATEGORY_MENU);
@}

위 $program_set[start_code] 변수는 메뉴 출력 시작위치를 말하며, $my_navi_code 값이 있는경우 이값을 기준으로 하위 메뉴를 출력하게 되며, 이 값이 없는 경우 대메뉴부터 출력되게 되어 있습니다.

그럼 $my_navi_code 에 값을 넣어줘야 하는데 이값은 각 페이지 별로 소스상에 아래와 같이 소스를 삽입해야 합니다.

매뉴얼 안내 : http://manual.anybuild.co.kr/add/basic1_03

실제로 소스를 삽입해 보도록 하겠습니다.

[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리]에서 CEO 인사말 , 오시는길의 소스 윗부분에 <php name="my_navi_code" value="01000000" /> 을 추가 합니다.

[프로그램샵 > 프로그램 환경설정 > 견적문의 설정] 에서 디자인소스 상단에 <php name="my_navi_code" value="03000000" /> 을 삽입 합니다.

[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리] 에서 디자인소스 상단에 <php name="my_navi_code" value="03000000" /> 을 삽입 합니다.

[프로그램샵 > 프로그램 환경설정 >맞춤 전송폼 설정] 에서 디자인소스 상단에 <php name="my_navi_code" value="03000000" /> 을 삽입 합니다.

[커뮤니티 > 게시판 관리 > 게시판 관리] 에서 디자인소스 상단에 <php name="my_navi_code" value="04000000" /> 을 삽입 합니다.

이렇게 수정 했다면 {GROUP_left_all} 을 서브 스킨에 삽입 합니다.

이제 홈페이지로 접속 해서 정상적으로 작동 되는지 확인 하시기 바랍니다.

아래는 필자가 만든 사이트 이므로 참고 하세요 ^^

http://uany02.anybuild.com

어떠신가요? 아직 부족한건 많지만 그래도 형태가 많이 잡힌 모습 같네요 ^^

다음 강좌에서는 제품 소개 솔루션을 설치해보도록 하겠습니다.

수고하셨습니다.

게시글 공유 URL복사

출력

댓글작성

열기 닫기

prev 이전글: 3. 제품 소개 솔루션 설치

next 다음글: 1. 개요 설명 및 계정 만들기

top