애니빌드.LAB
홈페이지 만들기
개요
안녕하세요.
이번 강좌는 홈페이지 제작 이후 자주 변경되는 이미지와 CSS 색상코드를 변수화 하는 방법에 대해서 알아보도록 하겠습니다.
카피라이트 정보 입력
[디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "메인스킨","서브스킨" 모두 아래와 같이 수정 하시기 바랍니다.
<a href="/shop_info/privacy.htm">개인정보 취급방침</a> | <a href="/shop_info/agree.htm">이용약관</a> | <a href="/shop_add_page/index.htm?page_code=sub1_2">오시는길</a> <br> <br> <span cond="$shop_base[shop_name]">홈페이지명 : {$shop_base[shop_name]}</span> <span cond="$shop_base[company_name]">상호 : {$shop_base[company_name]}</span> <span cond="$shop_base[ceo_name]">대표 : {$shop_base[ceo_name]}</span> <span cond="$shop_base[regno]">사업자 번호 : {$shop_base[regno]}</span> <br> <span cond="$shop_base[comregno]">통신판매신고번호 : {$shop_base[comregno]}</span> <span cond="$shop_base[help_email]">email : {$shop_base[help_email]}</span> <span cond="$shop_base[help_tel]">TEL : {$shop_base[help_tel]}</span> <br> <span>주소 : {$shop_base[addr1] {$shop_base[addr2]}</span> <br> 총방문자수 : {$shop_base[count_total]} / 이달방문자수 : {$shop_base[count_month]} / 오늘 방문자수 : {$shop_base[count_today]}
개인정보 취금 방침은 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]에서 "기본페이지" 탭안에 있습니다.
이용약관은 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]에서 "기본페이지" 탭안에 있습니다.
위 페이지 둘다 스킨을 "메인스킨"으로 설정해주세요.
그리고 나머지 변수들은 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 가져오는 변수들이므로 각종 정보를 입력하시면 자동으로 홈페이지에 출력됩니다.
솔루션에서 기본 제공되는 변수를 조회 하시려면 매뉴얼을 참조하세요. (http://manual.anybuild.co.kr/add/basic1_01b)
방문자수는 [마케팅지원 > 마케팅지원 > 누적 접속수 설정]에서 설정 가능합니다. 보시면 어떻게 사용해야하는지 금방 아실겁니다. ^^;
위에서 <span cond= ""> 이부분은 이전강좌에도 설명 드렸듯이 cond 안의 조건은 '참' 이면 출력해라는 뜻입니다.
즉 고객이 입력한것에 대해서만 출력 됩니다.
cond 자세한 사용방법은 매뉴얼을 참조 하시기 바랍니다. (http://manual.anybuild.co.kr/add/php1_05)
카피라이트라고 해서 소스상에 바로 타이핑하면 편할수도 있지만 그렇게 하시면 안됩니다. ^^
이유는 아래 "간편디자인"활용 부분에서 설명 드리도록 하겠습니다.
로고 이미지 등록
우리는 홈페이지를 하나 만들고 끝낼게 아니라 제작된 홈페이지를 복사하고 로고 및 일부 정보만 간단하게 변경하고 완성해야하는 경우가 많습니다.
만약 홈페이지 100개를 만들어야 한다면 일일이 FTP 들어가서 로고 이미지 변경하고 고객이 확인 후 수정요청하면 다시 반복 수정해야하는 경우가 발생됩니다.
이런 경우를 대비해서 꼭 변경되는 이미지는 고객이 직접 변경 할 수 있도록 "간편디자인" 코드로 변환해놓는것이 좋습니다.
[디자인관리 > 전문가 환경설정 > 간편디자인 환경설정] 으로 가셔서 아래와 같이 메뉴를 생성 합니다.
[간편디자인 코드 추가]를 클릭 하고, 아래와 같이 입력합니다.
여기서 "기본파일 첨부" 라고 있는데 이 항목은 고객이 로고 이미지를 첨부 하지 않았을때 기본 출력되는 이미지 입니다.
"기본파일첨부"를 등록 하지 않으면 아무런 표시가 나지 않으므로 고객은 해당 영역에 어떤것이 있고 변경 가능 여부를 알수 없게 되므로 임시로라도 이미지를 넣어두는것이 좋습니다.
연결주소는 메인을 클릭했을때 메인으로 이동 되어야 하므로 "/shop_main/main_body.htm" (간편주소 /main)을 입력해야 합니다.
간혹 메인 링크 주소를 http://www.mydomain.com 으로 한다던지, / 만입력하던가, ../index.htm 이렇게입력하는경우가 있는데 절대 이렇게 입력하시면 됩니다.
홈페이지 도메인주소는 언제든지 변경될 수 있으며, 인트로 페이지가 생길수도 있기 때문에 정확한 메인페이지 주소는 "/shop_main/main_body.htm" (간편주소 /main)이므로 숙지 하시기 바랍니다.
이렇게 설정하였다면 저장하세요.
그리고 하단에도 로고가 있으니 위와 똑같은 방식으로 을 만들어주세요. (하단로고는 일반적으로 링크를 걸지 않습니다.)
상단로고, 하단로고의 "간편디자인 코드"를 등록 했다면 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "메인스킨", "서브스킨" 모두 적당한 위치에 붙여 넣으시기 바랍니다.
그리고 홈페이지로 가셔서 어떻게 출력되는지 확인해 보시기 바랍니다.
여기까지 작업 하셨다면 한번쯤 이런생각하실겁니다.
"그냥 단순하게 <img> 태그를 써서 이미지 등록 하면 될것을 왜이렇게 복잡하게 등록 할까?"
필자도 홈페이지 제작을 많이 해봤지만 저 역시도 처음에는 이렇게 생각했습니다.
반론을 하자는건 아니지만 우리는 2가지 목적을 위해서 이렇게 간편디자인을 사용한다고 보시면 됩니다.
-
간편디자인을 써야 하는 이유 첫번째
홈페이지 제작 완성 후, 로고변경 요청, 배너이미지 변경 요청, 오타 수정 요청, 글자 수정요청등이 무수히 발생되는데 사실 비용받고 해줄수 없는 애매한 수정건이 정말 많습니다. 이럴때 "고객님께서 직접 수정하시면 됩니다."라고 한마디만 하면 끝나기 때문입니다. -
간편디자인을 써야 하는 이유 두번째
홈페이지 제작 완성 후 홈페이지를 그대로 복사하면, 이와 같은 모든 설정이 그대로 복사 되기 때문에 정말 빠르게 홈페이지 완성 할 수 있습니다.
그래도 간편디자인이 죽어도 싫다면 <img> 태그로 바로 출력하셔도 무방합니다. ^^;;;;;;
이렇게 기본 로고이미지가 등록 되었다면 이제 실제 고객 로고로 변경 해야 합니다.
"스마트 디자인 모드"로 접속 합니다.
사이트 로고를 클릭 하면 우측 설정폼에서 바로 변경 할수 있습니다.
또는, [디자인 관리 > 간편디자인 관리]로 가시면 아래와 같이 모든 간편 디자인을 한꺼번에 변경도 가능 합니다.
여기까지 간편디자인 코드를 활용하여 로고를 변경해봤습니다.
이와 똑같은 방식으로 몇가지 더 만들어 보도록 하겠습니다.
[디자인관리 > 전문가 환경설정 > 간편디자인 환경설정]으로 가셔서 아래와 같이 생성해보시기 바랍니다. (생성 방법은 위와 동일 하므로 생략 하겠습니다. ^^)
[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리]에서 "CEO 인사말"을 수정 합니다.
"스마트 디자인 모드"로 접속해서 아래와 같이 정상 장동 되는지 확인하시기 바랍니다.
"스마트 디자인 모드"가 PC에서만 작동되는 도구가 아니며 스마트 폰에서도 정상적으로 작동 됩니다.
아래와 같이 "스마트 홈 관리"를 실행하고, 등록된 계정에서 "스마트 디자인 관리"를 클릭 합니다.
수정 할 위치를 터치 합니다.
바로 수정 처리 합니다. (스마트폰 촬영해서 바로 첨부도 가능 합니다. ^^)
여기까지 하셨다면 앞으로 간편디자인를 어떻게 활용해야 할지 머리가 복잡해지실겁니다. ^^
간편디자인만 잘 활용하면 홈페이지 제작, 모바일웹 제작, 반응형 홈페이지 제작, 템플릿 제작 등 누구나 쉽게 수정 할 수 있게 되므로 비즈니스 측면에서 매우 중요합니다.
CSS 활용
[디자인관리 > 고급 디자인 관리 > CSS 파일관리]으로 이동 후 "기본 css 파일"에서 [수정]버튼을 클릭 합니다.
보통 CSS 파일은 단순 파일형태로 존재 하지만 애니빌드 솔루션에서는 CSS 편집이 용이하도록 SCSS 문법을 제공 하고 있기 때문에 아래와 같이 2단으로 나누어져 있습니다.
좌측에 있는 편집창은 SCSS 또는 CSS 소스를 입력하는곳이구요,
우측에 있는 편집창은 수정이 불가능하며, 좌측 편집창에서 입력한 소스를 디코딩 후의 결과물만 볼 수 있도록 되어 있습니다.
SCSS 에 대한 사용법은 본 강좌에서 설명하는것보다 매뉴얼을 참고하시는게 좋을 것 같네요 (http://manual.anybuild.co.kr/add/basic1_04)
[주의사항] 좌측에 있는 편집창에서 문법에 어긋나는 소스 입력시 error 발생되므로 주의하셔야 합니다.
예를 들어 .table {border: 1px solid;border: 1px solid} 이런식으로 같은 속성이 2번 들어 간다던지 오타가 있는경우, 문법상 오류가 있는경우 모두 error 처리 됩니다.
SCSS 사용법은 천천히 익혀보는걸로 하구요. 이번 시간에는 CSS 변수에 대해서 사용법을 설명 드리고자 합니다.
간혹 이런 경우가 있습니다.
홈페이지가 거의 90% 이상 완료된 상태에서 고객이 홈페이지의 전반적인 색상을 변경요청하는 경우가 있습니다.
사실 이정도 수정건이면, 전면 대공사라고 봐야 합니다.
이런 대공사를 예방하기 위해서는 CSS변수 활용을 권해 드리고 있습니다.
현재 "기본 css 파일" 수정 화면 하단에 [변환코드등록]이라는 버튼이 있습니다. 클릭해주세요.
아래와 같이 설정 후 저장해주세요.
CSS변환코드를 등록 했다면 아래와 같이 CSS 소스를 수정해주세요.
[수정 전]
.table_dot {border:1px dashed #666666;}
[수정 후]
.table_dot {border:1px dashed {$css_var[line_color]};}
홈페이지 접속해서 확인해보시면 모든 점선이 파란색으로 변경 되었을 겁니다.
만약 고객이 이 색상을 변경 하려고 한다면 아래와 같이 수정 가능 합니다. [디자인관리 > 간편디자인관리 > CSS 간편 수정]으로 가시면 아래와 같이 변경 가능 합니다.
[스마트 디자인 모드] 에서도 쉽게 수정 할수 있습니다.
필자는 아주 간단하게 색상 하나만 CSS변수로 설정 했지만 여러분은 폰트 사이트 크기, 이미지 선택, 클래스명 변경 등 다양한 용도로 활용해 보시기 바랍니다.
CSS변수만 잘 설정해놓으시면 하나의 홈페이지가 다양한 템플릿효과를 낼수 있기 때문에 활용가치가 높다고 판단 됩니다.
SNS 연결
SNS 연결은 크게 2가지 방식이 있습니다.
-
단순 링크 주소 스크랩 방식
이 방식은 현재 보고 있는 페이지를 자신의 SNS에 포스트 할 수 있는 기능 이며, 사용 방법이 아주 간단합니다.
예를 들어 게시글 상세보기 화면에서 페이스북 스크랩 버튼 클릭시 자신의 페이지 북으로 이동 되며, 글작성 기본 내용에 해당 페이지 정보가 입력되어 있습니다. 여기서 사용자가 "글쓰기"버튼을 클릭해야지만 정상적으로 등록됩니다.
조금 수동방식이죠. ^^ -
API 연동 방식
이 방식은 해당 SNS의 개발자 센타에서 API key를 가져와서 자동으로 작성되게 하는 기능이며, 사용방법은 전자보다 아주 편리하지만 설정방법은 아무래도 복잡합니다.
예를들어 현재 보고 있는 게시글에서 댓글을 작성시 페이스북 또는 트위터에 자동로그인 동시에 자신의 SNS에 게시글이 등록 됩니다.
또한 페이지북의 "좋아요"가 연동 되므로 페이지의 활용 가치를 높일수 있습니다.
본 강좌에서는 첫번째 방식으로 연동 해보도록 하겠습니다. (두번째 방식은 조금 복잡하지만 매뉴얼 보시면서 직접 해보시기 바랍니다. ^^)>
우선 매뉴얼 확인해보시기 바랍니다. (http://manual.anybuild.co.kr/add/basic1_05)
매뉴얼 보시면 딱히 추가로 설명 할 필요가 없어보이네요.
필요한 소스만 긁어서 [디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 "메인스킨", "서브스킨" 모두 붙여 넣어 보시기 바랍니다.
완성화면 : http://uany06.anybuild.co.kr
이렇게 해서 홈페이지 제작에 주로 많이 사용되는 기능을 위주로 홍보형 홈페이지를 만들어 봤습니다.
사실 추가 적으로 퀵메뉴, 팝업창, 각종, 연혁 프로그램, 방명록, 출석체크등 세부적인 기능이 아주 많지만 사실 사용방법은 다 동일 하기 때문에 추가적인 설명은 생략하구요, 필요하면 운영지원센타를 통해 지원받으시는게 좋을것 같습니다.
또한 쇼핑몰 솔루션, 동영상 강좌 솔루션, 구인구직 솔루션은 모두 제품 홍보 솔루션과 동일하기 때문에 제작하시는데 문제 없으리라 판단됩니다. ^^
여기까지 정말 수고 많으셨습니다. ^^