홈페이지 만들기

사이트 기획

사이트맵 구상하기

홈페이지 제작시 가장 중요한 부분이 사이트맵 입니다. 필자는 아래와 같이 임의로 사이트 맵을 구성 해봤습니다.

  • 회사소개
    • CEO 인사말
    • 오시는 길
  • 제품소개
    • (자동생성 카테고리1)
    • (자동생성 카테고리2)
    • (자동생성 카테고리3)
  • 견적문의
    • 견적문의 현황
    • 방문 상담원소개
    • 제휴문의
  • 커뮤니티
    • 공지사항
    • 자유게시판
    • 갤러리

이정도 사이트맵이라면 아주 일반적인 홍보형 홈페이지의 사이트맵이지 않나 싶네요. ^^
그럼 이제부터 진짜 맞춤형 홈페이지 제작을 시작해보도록 하겠습니다.

기능 구상하기

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

  1. 사이트맵에서 우선 프로그램적인 기능이 전혀 없다면 99% [추가페이지]라고 보시면 됩니다.
    "CEO 인사말", "오시는길"이 해당 됩니다.
  2. 일반적으로 가장 많이 사용되는 게시판 또는 사진게시판인 경우 [일반게시판]이라고 보시면 됩니다.
    "공지사항", "자유게시판", "갤러리"가 해당 됩니다.
  3. 제품소개, 상품소개, 강좌소개 등 결제 기능이 없고 단순 홍보를 목적으로 하며, 관리자가 상품을 추가 및 수정 할 가능성이 있는 경우 [제품소개 솔루션]이라고 보시면 됩니다.
    "제품소개"가 해당 됩니다.
  4. 상담문의, 제휴문의 등 글쓰기 폼만 있고 리스트화면이 없는 경우 [맞춤전송폼]이라고 보시면 됩니다.
    "제휴문의"가 해당 됩니다.
  5. 게시판인데 출력되는 항목이 일반적이지 않은 경우 [맞춤게시판]이라고 보시면 됩니다.
    보통 일반게시판에서 항목을 추가하려고 하는데, 애니빌드 솔루션에서 제공되는 게시판은 [작성자명, 이메일, 핸드폰, 제목, 내용] 이렇게 정해져 있기 때문에 추가 할 수 없도록 되어 있습니다.
    즉 일반게시판에 지역, 성별, 추천상품 등 별도의 항목이 추가 되지 않기 때문에 이런경우 [맞춤게시판]이라고 봐야 합니다. 실제 홈페이지 제작하면서 사용률이 상당히 높은 편이기도 합니다.
    "방문 상담원 소개"가 해당 됩니다.

이렇게 각 페이지 별로 어떻게 만들지 기획을 하였다면 아래와 같은 순서로 홈페이지 제작합니다. (중요)
사이트맵 구성 → 페이지별 기획 → 메인스킨 제작 → 메인화면 제작 → 서브스킨 제작 → 각 페이지별 생성 → 네비게이션 마법사 생성 → 각종 메인 출력 프로그램 세팅 → 완성


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

css생성과 html에 적용하기

css만들기

우선 css 파일부터 생성 해보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > CSS 파일관리]로 이동 후 아래와같이 기본 css파일을 등록 해놓으시기 바랍니다.


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

body {margin: 0; font-size: 13px; font-family: sans-serif; color: #333;}
table {border-collapse: collapse;}
img {border: none;}


*PS. FTP에서 css 파일을 만들어서 업로드해도 상관 없지만 본 솔루션에서는 scss 및 보안 인코딩 기능이 있기 때문에 되도록 관리자 모드를 통해 css 파일을 생성 하는 것이 좋습니다.
예전에는 css의 중요성이 그리 크지 않았지만 최근 웹표준화로 인해 css 파일의 비중이 커지고 홈페이지의 전반적인 디자인과 기능까지 관여하고 있기 때문에 보안에도 신경써야 합니다.
본 솔루션에서는 scss 기술이 적용되어 있으므로 코딩작업이 많고 복잡한 css 작업시간을 획기적으로 단축시키고 자동 인코딩 되고 있으므로, 차 후 "홈페이지 제작 속도 + 유지보수 속도 + 보안" 을 생각해서라도 관리자모드에서 css 파일을 생성해주세요.

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

css를 html에 적용하기

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

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

<link rel="stylesheet" href="/img_up/shop_pds/uany02/src_css/default.css" />
앞으로 애니빌드 솔루션에서는 아래와 같이 사용할것을 권장 합니다.
<load target="/img_up/shop_pds/uany02/src_css/default.css">


이유는 <link>는 원칙상 <head>에 들어가야 하지만 홈페이지를 제작하다 보면 모든 css 파일을 <head>에 넣기에는 부담되고, 특정 html 파일에서만 css 불러오기에는 별도의 head include 파일을 생성해야 하기 때문에 비효율적입니다.
하지만 <load> 사용시 항상 <head>에서 불러주고 중복되는 css 파일을 자동으로 제거하고 있기 때문입니다.
또한 반응형웹에서 주로 사용되는 미디어 쿼리 및 특정 인터넷 익스플로러 버전에 따라 실행 여부를 컨트롤 할 수 있습니다.

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


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

레이아웃 스킨 만들기

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

아래 소스는 이번 강좌에서 사용된 소스이니 복사해서 붙여 넣으신후 저장 하시기 바랍니다. ^^ (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>

<!-- BODY 본문 디자인 출력 부분 -->
<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 이라는 스킨이 등록된것을 확인 할 수 있습니다.

스킨을 제작 했다고 해서 홈페이지에 바로 출력 할 수 없으며, 별도의 본문 페이지를 생성 할때 사용 된다고 보시면 됩니다.
자세한 사용법은 다음 단계에서 다시 설명 드리겠습니다.

메인화면 제작

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


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

<table width="100%" height="300" class="table_dot">
	<tr>
		<td>[메인 슬라이드 이미지 출력 프로그램]</td>
	</tr>
</table>
<br>
<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>
<table width="100%" height="100" class="table_dot">
	<tr>
		<td>[사진 게시판 최근 게시글 슬라이드]</td>
	</tr>
</table>
<br>
<table width="100%" height="100" class="table_dot">
	<tr>
		<td>[견적 문의 폼 프로그램]</td>
	</tr>
</table>


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

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


여기까지 완성했다면 홈페이지 접속해서 아래와 같이 완성된걸 확인 할 수 있습니다.
홈페이지 확인 하려면 관리자 모드 상단에서 PC확인을 클릭 해주세요.

이제 스킨의 역할이 어떤건지 이해 가시나요?
보통 홈페이지 하단에 개인정보 취급방침, 이용약관, 제휴사 안내등 메인스킨을 불러와서 같이 사용 할 수 있기 때문에 각각 본문만 디자인해서 등록/수정 할 수 있습니다.
또한 유지 보수면에서도 스킨을 얼마나 정리를 잘 해놓느냐에 따라 작업 시간을 크게 단축 시킬수 도 있습니다.

필자는 여러분의 이해를 돕기 위해 디자인을 배제하고 각 기능별로 점선으로만 표시되게 해놨습니다. 디자인은 각자 알아서 하시기 바랍니다.
그리고 안쪽에 들어가는 각종 프로그램은 일단 텍스트로만 표시 해두었구요. 이후 강좌를 통해 하나씩 완성해보고자 합니다.
작업이 많을것 같지만 솔루션에서 제공되는 프로그램 마법사 기능이 많기 때문에 이해만 한다면 쉽고 빠르게 완성 될거라 봅니다.

서브스킨 생성

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

<!-- 상단 디자인 출력 부분 -->
<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>

<!-- BODY 본문 디자인 출력 부분 -->
<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>

<!-- 하단 디자인 출력 부분 -->
<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>

컨텐츠 생성

추가 페이지

CEO 인사말, 오시는길 페이지를 만들어 보도록 하겠습니다.
이때 사용되는 페이지가 [디자인관리 > 고급 디자인 관리 > 추가 페이지 관리]이며, 주로 프로그램적인 기능이 없고 디자인으로만 구성되어 있는 경우 사용 됩니다.
아래와 같이 스킨은 "서브스킨"을 선택하고 페이지를 생성 합니다.

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

CEO인사말 소스

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

오시는길 소스

<script>
// 타이틀, 주소, 가로, 세로, 줌
// 주소를 입력하지 않으면 접속한 회원의 현재위치를 출력한다.
google_map_addr("{$shop_base[company_name]}","{$shop_base[addr1]} {$shop_base[addr2]}",'100%',400,16);
</script>
<br>
<br>
<span cond="$shop_base[company_name]">상호 : {$shop_base[company_name]}</span><br>
<span cond="$shop_base[addr1]">주소 : {$shop_base[addr1]} {$shop_base[addr2]}</span><br>
<span cond="$shop_base[help_tel]">연락처 : {$shop_base[help_tel]}</span><br>


오시는길 소스에서 변환 변수가 사용 되었습니다.
변환 변수를 사용하지않고 바로 텍스트 입력해서 사용 할 수도 있지만 좋지 않은 방법입니다.

<script>
google_map_addr("우리홈페이지","서울시 종로구 태평로1가 31",'100%',400,16);
</script>

왜냐하면 홈페이지 운영주가 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 정보를 변경 할 수도 있는데 이렇게 텍스트로 입력해놓게 되면 변경 될때 마다 일일이 다 찾아서 수정해줘야 하기 때문입니다.
이런 번거로움을 줄이기 위해, 사전에 변경될 수 있는 부분에 대해서는 프로그램 변수로 처리하는게 차 후 유지보수 면에서 효과적입니다.
사용 가능한 변수는 여기를 통해 확인 하시기 바랍니다. (http://manual.anybuild.co.kr/page/basic1_01b)
cond 문법에 대한 자세한 내용은 여기를 통해 확인 하시기 바랍니다. (http://manual.anybuild.co.kr/page/php1_05)

위 변수 출력되는것을 확인 하기 위해 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 임의로 정보를 입력 해보시기 바랍니다.
그럼 아래와 같이 정상적으로 출력될겁니다.
http://uany02.anybuild.co.kr/page/sub1_2


게시판 생성

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

공지사항 게시판은 관지자만 글작성 할수 있도록 설정 한 후 저장 합니다.
자유게시판도 같은 방식으로 생성합니다.
사진 게시판은 사진을 바로 출력 해야 하므로 "디자인관련설정"에서 아래와 같이 출력형태를 앨범형 게시판으로 변경 후 저장 합니다.


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

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

제휴문의 생성

제휴 문의는 접수된 목록이 없고 단순히 입력 양식에 따라 접수만 받는 형태 입니다.
이런 단방향 접수 폼은 모두 [맞춤등록폼]이라고 보시면 될것 같네요.
현재 설치 되지 않은 상태이므로 마켓을 통해 설치 해야 합니다.
[프로그램샵 > 프로그램 추가 설치 > 프로그램 견적 문의]로 이동하고 중간쯤 [맞춤 등록폼]이 있습니다. [상세 보기]를 클릭해주세요.

그럼 디자인별로 다양하게 출력 되는데 미리보기를 통해 한번씩 확인해보시기 바랍니다.
본 강좌는 이해를 돕기 위해 [모듈만 설치] 를 통해서 설치 해보도록 하겠습니다.

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


PS. 프로그램샵에 대해서 중요한점 집고 넘어 가도록 하겠습니다.
* 홈페이지 제작 후 본 관리자 모드가 고객에게 넘어가는데 이때 각 프로그램별 가격이 모두 공개 되는데, 이 부분은 라이센스 계약에 따라 비공개처리 됩니다.
현재 본 강좌에서 사용된 계정은 프리랜서 또는 개인 홈페이지용이기 때문에 모두 공개 되지만, 프리미엄 라이센스 및 엔터프라이즈 라이센스는 아래와 같이 가격이 공개되지 않고 견적문의만 가능하도록 되어 있습니다.

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


프로그램샵에 누구나 상품을 등록 할 수 있으며, 판매 수익의 70% 드립니다.
프리랜서 및 기업에서 직접 디자인템플릿을 제작하여 프로그램샵에 등록시 판매가의 70%를 드리고 있습니다. 자세한 내용은 별도 문의 바랍니다.
이번 강좌를 진행하면서 자신만의 프로그램을 제작해서 등록 해보시기 바랍니다.


[맞춤전송폼]을 설치 하였다면 [프로그램샵 > 프로그램환경설정 > 맞춤전송폼 설정]이라는 메뉴가 새로 생성된것을 확인 할 수 있습니다.
아래와 같이 제휴 문의 폼을 만들어 봅시다.

여기서 sms, e-mail, 댓글 등 세부적인 설정은 넘어가도록 하겠습니다. 이 부분은 여러분께서 직접 설정해보시기 바랍니다.
제휴 문의 폼을 생성 하였다면, 고객으로부터 전달받을 항목을 생성해야 합니다.

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


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

스킨은 "서브 스킨"을 선택하시구요.
기본 디자인 소스는 샘플디자인에서 "phpx 기본 디자인"을 불러와서 셋팅하시면 됩니다.
여기까지 따라 하셨다면 아래와 같이완성 되었을 겁니다.
http://uany02.anybuild.co.kr/shop_contents/myreg_form.htm?myreg_code=jform




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

<!--@foreach($myreg_form_row as $key => $values)-->
	<table width="100%" border="0"  bgcolor="#CCCCCC" align="center" cellpadding="0" cellspacing="1">
		<caption style="text-align:left; font-weight:bold;">{$values[subject]}</caption>
		<!--@foreach($values[fields] as $key2 => $values2)-->
			<tr>
				<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>
		<!--@end-->
	</table>
	<br/>
<!--@end-->


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



여기서 애니빌드에서 제공되는 phpx소스에 대해서 몇가지 설명드리겠습니다.
애니빌드 솔루션은 어떠한 틀에 구애 받지 않고 제작사가 원하는데로 제작 할수 있도록 최대한 유연성과 확장성을 고려하여 설계된 솔루션 입니다.

위 소스에서 $myreg_form_row 는 데이타 베이스에서 최대한 변형/가공 하지 않은 원DATA를 보존 하고 있으며, 제작사에서 원하는 형태로 가공/출력 할수 있도록 되어 있습니다.
또한 사용법은 일반 php 와 매우 흡사하며, 문법은 동일하다고 보시면 됩니다.
예를 들어 $myreg_form_row 안에 들어가 있는 변수를 확인 하고 싶을때는 var_dump($myreg_form_row); (http://manual.anybuild.co.kr/add/p_var_dump) 또는 console_js($myreg_form_row); (http://manual.anybuild.co.kr/add/p_console)를 통해서 어떤 구조로 DATA가 들어가 있는지 확인 할 수 있습니다.

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

이렇게 넘어온 배열변수를 확인 하고 원하는 형태로 자유롭게 가공 할 수 있도록 설계 되어 있습니다.
조금 생소한 부분도 있을수 있지만 본 설명이 홈페이지 제작 프로그램의 80%이상 차지 할 정도로 많이 사용되므로 foreach , loop, cond 사용법은 꼭 익히시기 바랍니다.

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

견적문의 게시판 생성

이것도 맞춤 전송폼을 설치했던 절차와 동일합니다.
프로그램샵으로 가셔서 [견적문의] 프로그램에서 모듈만 설치 합니다.



설치를 하고 나면 [프로그램샵 > 프로그램 환경설정 > 견적문의설정] 이라는 메뉴가 새로 생긴것을 확인 할 수 있습니다.
새로운 견적문의 게시판을 아래와 같이 개설해주세요.


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


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

여기까지 설정 하였다면 홈페이지 상에 접속하셔서 테스트 해보시기 바랍니다.
아래는 완성 된 화면 입니다.

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


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

방문 상담원 소개 생성

일반 게시판과 비슷하지만 출력항목이 다른 경우 [맞춤게시판]을 이용하시는게 좋습니다.
특히 [맞춤게시판]은 프로그랩샵에서 제공되는 프로그램중 가장 유연성과 활용도가 많으니 정확한 사용방법을 알아두시면 왠만한 게시형 프로그램을 모두 만들 수 있을거라 봅니다.

프로그랩 샵에서 [맞춤 게시판]모듈을 설치 합니다.
설치 후 [프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리] 메뉴가 새로 생성 되었을겁니다.
새로운 맞춤게시판을 아래와 같이 생성하세요.


추가 옵션 부분은 한번씩 훑어 보시기 바랍니다.
기본정보를 설정하고 나면 항목 설정 화면이 나타 납니다. 아래와 같이 설정해주세요.


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


이렇게 저장 후 [컨텐츠관리 > 기본 컨텐츠 관리 > 방문 상담원 소개]에서 임의로 데이타를 2개 이상 입력하시기 바랍니다.
실제 홈페이지에서 확인 해보시면 아래와 같이 원하지 않는 디자인으로 출력 될것 입니다.


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

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

좀 더 쉽게 수정하는 방법에 대해서 안내해 드리도록 하겠습니다.
[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]에서 [기본디자인]을 클릭하면 디자인 소스 수정 화면 밑 부분에 사용가능한 변수들이 있습니다.


필자는 사진이라는 항목의 변수값이 {$s_v1_url} 이지만 여러분은 변수명이 다를수 있습니다.
위 코드표를 참고 하여 아래와 같이 소스를 수정 하세요.

{@
console_js($myboard_mylist_row); // DATA 확인하기 위해  임시로 추가하고 작업 완료 되면 주석 처리 해주세요.
@}
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
	<!--@foreach($myboard_mylist_row as $key => $values)-->
		<tr>
			<td width="150" align="center"><img src="{$values[s_v1_url]}"></td>
			<td>
				<span cond="$values[s_v2]">{$s_v2_name} : <strong>{$values[s_v2]}</strong></span> <br>
				<span cond="$values[s_v2]">{$s_v3_name} : {$values[s_v3]}</span> <br>
				<span cond="$values[s_v4]">{$s_v4_name} : {$values[s_v4]}</span> <br>
			</td>
		</tr>
	<!--@end-->
</table>


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


필자는 솔루션 이해를 목적으로 하기때문에 디자인에 대해서는 배제하고 수정 방법에 대해서만 설명 드렸습니다.
여러분은 각자 취향에 맞게 디자인을 수정 해보시기 바랍니다.

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

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


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


top