홈페이지 만들기

개요

안녕하세요 .애니빌드 입니다.
이번 강좌에서는 메인 화면을 만들어 보겠습니다.

스마트홈관리 APP

우선 메인 화면을 만들기에 앞서 "스마트홈관리APP" 대해서 설명드리고자 합니다.


스마트홈관리 APP을 설치 해주세요.
안드로이드 마켓, 또는 ios앱스토어로 가셔서 "스마트홈관리"를 설치 해주세요.


그리고 현재 계정을 등록 해주세요.

계정등록 알림 설정에서 모두 체크하세요.
이 앱은 홈페이지에 회원가입, 게시글 작성, 쇼핑몰 상품 주문등 다양한 이벤트를 push 메세지로 알려주고 관리하기 편하게 도움을 주는 APP이라고 보시면 될것 같아요.
정상적으로 작동 되는지 확인하기 각 게시판 마다 게시글 5개씩 등록 해주세요. (꼭 등록 하셔야 다음 강좌에서 메인화면에 최근 게시글을 출력시키는 부분을 확인 할수 있습니다.)
게시글 작성시마다 "스마트홈관리APP"으로 push 메세지가 전송 될것 입니다.

메인페이지에 게시글 가져오기

최근게시글 가져오기

게시판에 게시글을 작성 하였다면, 이 게시글을 메인 화면으로 가져와보겠습니다.
공지사항 및 자유게시글은 최신 등록순으로 5개만 출력하고 사진 갤러리는 관리자가 지정한 게시글만 출력 해보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]로 이동 후 [프로그램 마법사 생성]을 클릭 합니다.
[게시글출력 탭]을 클릭 후 프리미엄 그룹디자인에서 "최근 게시글 - 목록형"을 선택 후 생성 합니다.


[사용] 버튼 클릭 하면 아래와 같이 환경 설정 화면이 출력 됩니다. 게시판 코드에 "공지사항"을 선택 하고 출력수를 5 입력 후 그룹디자인을 생성 합니다.


필자는 {GROUP_notice}라고 입력하였습니다.
[디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]으로 이동 해서 적당한 위치에 붙여 보시기 바랍니다.

이제 홈페이지로 접속 해서 확인해보시면 정상적으로 출력 됩니다.



여기서 중요한 점 2가지 이해하고 넘어 가도록 하겠습니다.


[체크포인트 - 첫번째]

애니빌드 솔루션에서 제공 되는 모든 모듈은 제작사가 원하는데로 컨트롤 및 수정 할 수 있도록 자유도가 매우 높은 솔루션 입니다.
예를 들어 방금 {GROUP_notice}을 생성 할 때 마법사 기능을 통해 생성 했는데 간혹 디자인을 수정 할 수 없는줄 알고 오해하시는분들이 있습니다.
소스를 보면 솔루션에서는 조건문에 DB내용만 전달해줄뿐 나머지 출력 부분은 모두 수정 할수 있도록 되어 있습니다. 

{@
...(조건문 생략).....
$new_board_final_row = program_load(NEW_BOARD_FINAL);
@}

위 소스를 보시면 program_load 이 함수가 게시판의 조건을 검색해서 DB 내용을 불러서 $new_board_final_row 에 저장 하게 되어 있습니다.

<!--@foreach($new_board_final_row as $k=>$v)-->
	<li>
		...(중략)
	</li>
<!--@end-->

$new_board_final_row에 자장된 데이타를 loop 또는 foreach 구문을 통해 모두 출력 할수 있도록 되어 있고 이때 원하는데로 디자인 할 수 있습니다.


[체크포인트 - 두번째]

우리는 애니빌드 솔루션에서 제공되는 기능이 너무 많기 때문에 기능을 찾기 위해서는 아래와 같이 찾아 보시기 바랍니다.

  1. 프로그램 샵에서 검색
    프로그램 샵은 검증된 프로그램만 등록되며, 사용 빈도수가 높은 프로그램은 대부분 등록 되어 있습니다.
  2. 프로그램 마법사에서 검색
    위 프로그램 샵에서 검색이 되었다면, 추가 적인 모듈은 프로그램 마법사에서 찾아 보시기 바랍니다.
  3. 환경설정 꼭 확인
    모든 기능은 환경설정 기능이 있습니다. 애니빌드 솔루션은 수많은 옵션이 제공되기때문에 프로그램 사용하기전 반드시 환경설정에 어떤 옵션들이 있는지 한번 훑어 보신 후 작업 하시기 바랍니다.

위 3가지를 확인 했는데도 불구 하고 제공되는 기능이 없다면 운영지원센타로 문의 주시기 바랍니다.



공지 게시판을 불러왔다면 자유게시판도 똑같은 방식으로 만들어 보시기 바랍니다. 작업 방법은 위 와 동일하므로 설명은 생략하겠습니다.

최근 등록한 사진 가져오기

갤러리게시판은 위 공지게시판, 자유게시판과는 달리 관리자가 지정한 게시글만 메인에 출력 해야 합니다.
방법은 비슷한지만 한가지 더 설정해줘야 하는 부분이 있습니다.

[커뮤니티 > 게시판 관리 > 게시물 메인출력 관리]으로 이동 해서 하단부분에서 [메인 갤러리]라는 그룹를 생성 합니다.


생성 된 그룹에 갤러리 게시글을 등록 합니다.


[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]에서 [프로그램마법사 생성]을 통해서 "최신게시글 - 앨범형"을 선택 합니다.


아래와 같은 마법사 환경설정이 나타 나는데 이때 메인출력 그룹에서 "메인 갤러리" 를 선택 합니다. 나머지 부분은 각자 취향대로 입력하시면 됩니다.


필자는 {GROUP_photo}라고 생성하였습니다. 생성된 그룹디자인을 메인화면에 붙여보도록 합니다.
홈페이지로 접속해서 정상적으로 출력되는지 확인해보시기 바랍니다.

완성화면 : http://uany05.anybuild.co.kr/

서브페이지에 게시글 가져오기

모든 서브페이지의 좌측 하단 부분에도 최근 공지게시글을 가져와 보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]에서 "프로그램 마법사"를 통해서 최근 게시글을 가져오는 프로그램을 생성 합니다.
생성된 그룹디자인을 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "서브스킨"에 삽입 합니다.
이렇게 해서 모든 서브 페이지에 최근 공지게시글이 출력 됩니다. 하지만 정상적으로 출력된다기 보다는 아래처럼 약간 깨진듯하게 보이네요.


다들 이유는 간한하게 알수 있습니다. 제목 글자도 너무 길고 날짜도 길어서 보기가 않좋네요.
지금까지 프로그램 마법사에서 제공되는 설정만으로도 쉽게 설정 할수 있지만 이렇게 좀 세세한부분은 소스 수정이 꼭 필요 합니다.
그룹 디자인 소스를 열어서 아래와 같이 수정 해보도록 하겠습니다. 

<!-- 수정전 -->
{$v[subject]}
{$v[reg_date]}

<!-- 수정후 -->
{$v[subject]|cut:12,...}
{$v[reg_date]|date:m/d}


이렇게 수정 하신후 홈페이지에서 확인 해보시면 아래와 같이 보기 좋게 출력됩니다.

애니빌드 솔루션에는 이렇게 변수값을 간편하게 수정하는 모디파이어 기능을 제공 하고 있습니다.
이부분은 본 강좌에서 설명하는것보다 기본 문법 매뉴얼이 있으니 아래 주소를 통해 확인하시기 바랍니다.
(홈페이지 제작하면서 모디파이어는 정말 많이 사용되므로 꼭 숙지 하셔야 합니다. 외울거 5개 내외 이니 충분히 외울수 있어요 ^^)
모디파이어 매뉴얼 : http://manual.anybuild.co.kr/add/php1_03

프로그램 마법사

이렇게 해서 메인 및 서브페이지에서 최근 게시글 가져오는 부분을 설명드렸습니다.
사실 작업량은 얼마안되는데 설명이 장황하게 길었던것 같네요.
그래도 한번 배우실때 확실하게 배우셔야 다음에 응용 할 수 있기 때문에 제대로 배우시는게 좋을것 같네요.
그런 의미에서 몇가지 더 알고 넘어갑시다.
위 프로그램 마법사를 통해서 생성 된 프로그램 소스를 잘보시면 아래와 같이 $var_set[xxxxx] 와 같은 변수가 있습니다. 

{@
$program_set[its_code] = $var_set[code]; // 게시판 코드를 입력. 대소문자 구분
$program_set[its_code2] = $var_set[category_idx]; // 게시판 카테고리 IDX 값
$program_set[its_code3] = $var_set[group_code]; // 게시판 그룹코드
$program_set[its_etc1] = $var_set[main_code]; // [커뮤니티 》 게시판 관리 》 게시물 메인출력 관리]에서 등록한 그룹 코드
$program_set[its_etc2] = $var_set[print]; // 이미지 있는것만 출력:Y, 이미지 없는것만 출력:N, 모두 출력:ALL
$program_set[its_limit] = $var_set[limit]; // 출력수. 반드시 2자리 입력
$program_set[its_order_type] = $var_set[sort]; // 정렬 방식. 기본정렬:DEFAULT, 조회수순:VIEW, 덧글수:COMMENT, 랜덤:RAND
$program_set[its_thumb_w] = "100"; // 썸네일 이미지 가로크기
$program_set[its_thumb_h] = "100"; // 썸네일 이미지 세로크기
$program_set[its_thumb_type] = "1"; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2: 위 사이즈보다 큰경우 잘라내기)
$new_board_final_row = program_load(NEW_BOARD_FINAL);
@}

소스 내용으로만 봤을때 $program_set[its_code] = 'notice'; 이렇게 입력해도 무방하지만 $var_set[code] 로 변수 처리가 되어 있는 이유는 프로그램 마법사와 연동 되어 있기 때문입니다.
그럼 프로그램 마법사에서 사용되는 변수는 어디 있을까요?
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]에서 {GROUP_notice} 소스 수정 화면으로 가봅시다.
하단 부에 [phpx 변수 관리] 라는 버튼이 있습니다. 클릭해보세요.


그럼 아래와 같이 프로그램 마법사를 관리하는 환경설정이 나타납니다.
유심히 보시면 프로그램 마법사와 아주 유사하며, 원하는데로 모두 수정 할 수 있음을 알 수 있습니다.

여기서 프로그램 마법사를 통해서 만들기만 하면 되는데 왜? 만드는 원리까지 굳이 알아야 할까요?
문제는 유지보수와 재사용성 때문 입니다.

프로그램마법사를 사용해야하는 이유1

홈페이지 제작은 비용을 받고 진행하기때문에 손실발생이 없지만 유지보수는 워낙 저가로 형성되어 있기 때문에 원할한 유지보수가 이루어지 않으면 손실로 발생되는경우 많습니다.
우선 위와 같이 변수처리 하였을때 고객이 메인화면에 공지 게시글을 6개로 늘릴려고 할때, 아래와 같이 직접 수정 이 가능해진다는 장점이 있습니다.

관리자 모드 상단 부분에 [스마트디자인수정]을 클릭 합니다.


아래와 같이 스마트 디자인 모드로 접속되는데, 간단하게 설명드리자면 고객이 직접 편리하게 수정할수 있도록 도움을 주는 플랫폼 이라고 보시면 될것 같습니다.
여기서 갤러리 부분을 클릭하면 우측에 소스수정, 프로그램마법사, 게시글관리, 게시글 출력 순서관리등이 나타납니다.

이 우측 메뉴에서 프로그램마법사를 클릭해보시기 바랍니다.

이렇듯 고객이 쉽게 수정 할 수 있도록 마법사 기능이 자동 부여 되며, 게시글 관리 및 게시글 출력 순서 변경등 고객이 관리자모드에서 메뉴를 찾아야 하는 번거로움 없이 바로 처리 가능하다는 장점이 있습니다.

프로그램마법사를 사용해야하는 이유2

우리는 애니빌드 솔루션을 이용하는 이유는 하나의 홈페이지를 제작하기 위함이 아니라 수십개 또는 수백개 이상 홈페이지 제작하기 위해 이용하는 경우가 많습니다.
그룹디자인 소스 수정 모드로 들어 갔을때 아래와 같은 설정을 보셨을겁니다.


이 기능은 홈페이지 제작하면서 어렵게 만든 컨텐츠를 한번 쓰고 버릴게 아니라 다른 홈페이지 만들때 재사용 할수 있도록 하거나, 다른 제작사에게 유료로 판매 할 수 있습니다.
예를들어 사진 갤러리부분을 가로로 움직이도록 추가 개발 하였다고 가정했을때, 이 그룹디자인을 "마켓 등록" 합니다.
그리고 차 후 다른 홈페이지 제작시 똑같은 기능이 필요로 할 때 바로 가져와서 사용 할수 있는 장점이 있습니다.
즉, 우리가 사진갤러리 프로그램 마법사를 통해서 컨텐츠를 만들었던것처럼 우리가 만든 프로그램도 똑같이 재사용 할 수 있다라는 겁니다.

여러분도 멋지게 그룹디자인 상품을 만들어서 등록해서 사용해 보시기 바랍니다.

PS. 위 "마켓 등록"은 본 강좌용(프리랜서) 계정 인 경우, 또는 관리자 모드 로그인시 "마스터 패스워드"로 로그인 한 경우에만 나타 납니다.
프리미엄 라이센스 및 엔터프라이즈 라이센스로 계약 하신분은 실제 고객에게는 나타나지 않으므로 안심하시기 바랍니다.

메인에 SMS 실시간 문의 폼 설치

[프로그램샵 > 프로그램샵 견적문의 > SMS 실시간 문의]에서 모듈만 설치 합니다.


[프로그램샵 > 프로그램 환경설정 > SMS 실시간 문의]에서 아래와 같이 권한 및 작성완료시 멘트등을 수정 합니다.

본 강좌에서는 메인화면에만 "SMS 실시간 문의" 환경설정에서는 디자인 소스를 사용 하지 않고 넘어 가도록 하겠습니다.


[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]으로 가셔서 [프로그램 마법사] 클릭합니다.



[기타탭]을 선택 후 "SMS 전송폼 A" 를 선택 하고 그룹디자인을 만듭니다.


생성된 {GROUP_sms} 를 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]에서 적당한 위치에 삽입합니다.
메인으로 접속해서 실제 SMS 발송 해보면 아래와 같이 정상적으로 발송 되지 않습니다.

이유는 크게 2가지 유형이 있습니다.
유형1. [프로그램샵 > 프로그램 환경설정 > SMS 실시간 문의]에서 "사용안함" 으로 설정 되어 있는 경우.
유형2. [이용료안내/결제 > 이용료 안내 및 결제 > e-Money 충전] 에서 이머니를 충전하지 않은 경우.

아마 이머니가 없어서 문자 전송이 되지 않는듯 합니다.
본 강좌를 통해 생성된 홈페이지를 실제 사용 할 계획이시라면 이머니 충전하시구요, 단지 교육용이라면 이머니 충전 하지 마시고 넘어가셔도 될것 같습니다.

메인에 전송폼 설치

보통 상담문의, 상품문의등 매출에 직접적인 영향을 주는경우가 많습니다. 마케팅적인면에서도 고객이 최대한 간편하고 빠르게 문의 할 수 있도록 메인에도 전송폼(상담문의, 상품문의등..)을 설치하는게 좋습니다.

[견적문의 → 제휴문의]를 메인화면 하단부분에 설치해 보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]에서 [프로그램 마법사]를 실행 합니다.
"맞춤전송폼" 탭에서 "맞춤전송폼-기본형"을 선택 합니다.



설치환경설정 화면에서 맞춤전송폼을 "제휴문의"를 선택 하고 저장 합니다.


생성된 그룹디자인을 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]에서 적당한 위치에 삽입 합니다.
이제 정상적으로 작동되는지 홈페이지로 접속해서 확인해보시기 바랍니다.
완성화면 : http://uany05.anybuild.co.kr/shop_main/main_body.htm

메인에 슬라이드 이미지 설치

홈페이지 제작시 빠지지 않을 정도로 많이 사용 되는 슬라이드 이미지를 만들어 보도록 하겠습니다.
슬라이드 이미지란? 이미지가 가로 또는 세로로 움직이는 이미지를 말하며, 예전에는 플래시로 많이 만들었습니다.
하지만 최근 스마트폰에서 플래시 사용이 제한되기 때문에 대체수단으로 jQuery(제이쿼리) 로 많이 사용 합니다.
개인적으로 플래시보다 제작하기 쉽고 빠르며, 특히 유지보수 시간면에서는 월등하다고 생각합니다.
본 솔루션에서는 jQuery로 제작된 기본소스가 다양하게 제공되고 있으므로 이를 활용해서 만들어 보도록 하겠습니다.

[프로그램샵 > 프로그램 추가설치 > 견적문의]로 이동 후 "미디어"를 클릭합니다.

우리는 "Flex Slider Basic"을 설치할껀데 설치하기전 몇가지 보셔야 할부분이 있습니다.
프로그램샵에서는 많은 기능들이 포함되어 있는데, 해당 프로그램을 설치 했을 때 어디에 어떤 기능이 활성화되는지 알 수 없습니다. (지금까지 필자가 일일이 알려드렸죠 ^^)
이부분은 각 프로그램마다 설치위치가 모두 기재되어 있으니 확인 후 설치 하시는 것이 좋습니다.


"Flex Slider Basic"을 선택 했을때 아래와 같이 "맞춤 XML 파일생성"이라는 새로운 매뉴가 설치됨을 알수 있습니다.


[설치하기]를 클릭 하면 각 프로그램마다 고유 코드를 변경 할 수 있도록 되어 있습니다.


이부분 중요합니다.
변환될 코드명에 빈값으로 두게 되면 원본 코드명과 동일하게 설치되는데, 만약 이미 같은 코드명이 존재하는 경우, 임의로 코드명이 변경되어 설치 됩니다.
예를들어 맞춤xml 프로그램 중 "slider1" 을 설치하고, 다시 똑같은 컨텐츠를 구매하게 되면 "pro451578"와 같은 형태로 임의로 변경하게 됩니다.
"이미지 슬라이드"는 여러군데 사용하게 되는데 만약 같은 컨텐츠를 10번 구매하게 되면 xml코드가 pro4578547,pro78954,pro123487,...(생략) 이런 형태로 생성되기 때문에 관리면에서 매우 좋지 않습니다.
우리는 프로그램 설치할때마다 변환될 코드명을 모두 입력하는 습관을 가지는게 좋습니다.

필자는 아래와 같이 입력하고 프로그램을 설치 하였습니다.


설치 후 어디에 설치 되어 있는지 방화하지마시고 위에서 설명 드렸듯이 프로그램 상세 정보에서 확인 해보세요.
위 선택한 프로그램은 그룹디자인1개, 맞춤xml 1개가 설치 됩니다.

[디자인관리 > 전문가 환경설정 > 맞춤 XML 파일생성]으로 이동해서 정상적으로 설치 되었는지 확인 합니다.


정상적으로 설치 되었는지 확인 했다면 위 그룹디자인 에서 [프로그램마법사]를 통해서 아래와 같이 수정 하시기 바랍니다.
(꼭 필자와 똑같이 할 필요는 없구요, 원하시는데로 수정 하시면 됩니다.)


이렇게 생성된 {GROUP_top_img}를 [디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]에 붙여 보도록 하겠습니다.

실제 홈페이지에서 어떻게 구동 되는지 확인해 보시기 바랍니다.


* 상단 네비게이션의 서브메뉴가 이미지 슬라이드에 가려서 안보일 경우 '메인스킨'의 제일 윗줄을 다음과 같이 변경하시기 바랍니다.
<!-- 상단 디자인 출력 부분 -->
<table width="960" align="center" class="table_dot" style="position:relative;z-index:100;">


이미지를 변경하시려면 [디자인관리 > 간편디자인관리 > xml 이미지 관리]로 가서 변경하거나 "스마트 디자인관리"로 가셔서 아래와 같이 수정 하시면 됩니다.


강좌대로 따라했다면 별 무리없이 정상적으로 잘 작동 될것 입니다.
따라하는것도 좋지만 더욱 중요한건 아무래도 어떻게 구동 되는지 이해하고 넘어가야 겠죠?
위 슬라이드는 2개의 프로그램이 하나로 합쳐져서 구동 되고 있습니다.
[디자인관리 > 전문가 환경설정 > 맞춤 XML 파일생성]으로 이동해서 "환경설정"을 클릭해보세요.



그리고 xml소스 파일을 열어보시기 바랍니다.


설명드리자면 "환경설정"에서 사용하고자 하는 컬럼에 항목명을 입력하면 자동으로 활성화가 되고, 데이타 추가시 자동으로 XML문서가 생성됩니다.
xml문서는 본 솔루션에 국한 되는것이 아니라 다른 솔루션(타사 솔루션)에서도 xml문서를 불러서 자유롭게 출력 할 수 있습니다.
즉 맞춤XML은 단순하게 데이타베이스(DB)역할만 하며, 출력 부분은 따로 구현해야 합니다.

여기서 출력 부분은 그룹디자인에서 담당하고 있습니다.
[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]으로 가셔서 {GROUP_top_img}의 소스를 보시기 바랍니다. 

{@
$program_set[limit] = "$var_set[limit]"; // 출력수
$program_set[xml_code] = "$var_set[code]"; // XML고유코드
$my_xml_row = program_load(MY_XML);
@}

위 program_load(MY_XML) 이부분이 실제 xml문서를 불러오고 있습니다. 이렇게 불러온 xml문서는 $my_xml_row변수에 배열로 저장되며, 아래 소스처럼 반복문으로 출력을 하고 있습니다. 

<!--@foreach($my_xml_row as $k=>$v)-->
	{@
	$ok_img_url = thum_img($v[img1_url],$var_set[img_w],$var_set[img_h],$var_set[img_cut]);
	@}
	<li>
		<a href="{$v[url1_value]}">
			<img src="{$ok_img_url}" alt="{$v[txt1_value]}" cond="$ok_img_url" />
		</a>
	</li>
<!--@end-->


PS. 위 thum_img() 함수는 썸네일 함수 이며, 자세한 사용법은 (http://manual.anybuild.co.kr/add/basic1_08)에서 확인 바랍니다.


작업량은 얼마 안되는데 설명이 쓸데없이 길었네요.
여기까지 이미지 슬라이드를 만들어 봤는데요. 어떤가요?
솔루션의 도움을 전혀 받지 않고 직접 jQuery만으로도 만들수도 있지만 고객이 직접 이미지를 변경 할 수 없고, 유지보수면에서도 효과적이지 않기 때문에 추천하지 않습니다.
차 후 사이트 복사 및 템플릿화까지 고려했을때 처음 한번 만들때 잘 만들어 놓는 것이 중요합니다.

이제 홈페이지 하단에 "광고배너슬라이드"를 만들어야 하는데 이부분은 위와 작업 방법이 동일하므로 간략하게 설명만 하고 넘어가겠습니다 ^^

  1. 프로그램샵에서 [미디어 > Flex Slider Carousel] 설치
  2. 광고배너 슬라이드는 모든 페이지에서 출력되어야 하므로 생성된 그룹디자인을 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 메인 및 서브 모두 삽입합니다.

이렇게 해서 메인에 필요한 모든 컨텐츠를 추가해보았습니다.

완성화면 : http://uany05.anybuild.co.kr/


수고하셨습니다.

top