Jinyweb

웹사이트 빌더 개발 방법론
지니웹 / 이호진
발표 : ABCD 코딩클럽
infohojin@gmail.com
2016-06-24 1

지니웹은 웹사이트/모바일 웹사이트를 구축해 주
는 site builder 입니다.
개발 배경 :
웹사이트의 레이아웃, 메뉴, 게시판등 일체형 기능을 가지고 있는 워드프레스 / 제로
보드 등과 같은 웹사이트 관리툴을 제작 하는 것입니다. 또한, 개발 언어를 사용하지
않고 html 과 CSS 기술로만 웹사이트를 꾸밀 수 있는 웹사이트 빌더 입니다.
2016-06-24 2
지니웹 소개

웹사이트 빌더란 ?
사용자의 입력값에 따라서 프로그램이 자동적으로 웹사이트의 구
성을 조합하고, 페이지를 생성하는 프로그램을 말합니다.
2016-06-24 3
지니웹 소개

주요특징 :
2016-06-24 4
웹사이트 빌더의 이해
① php, java등 프로그램의 언어를 사용하지 않고 html과 CSS 특성만 가지고 웹사이틀 구축
할 수 있습니다.
② 11개언어 이상의 다국어 처리를 통하여 멀티언어 웹사이트를 제작, 운영관리 할 수 있습
니다.
③ 하나의 CMS툴을 이용하여 복수의 도메인 웹사이트를 중앙 집중관리가 가능합니다.
④테마, 레이아웃, 헤더, 풋터, 메뉴, 페이지, 계시판등 일체형 타입으로 추가 별도의 복잡한
플러그인 설치 없이 완전한 홈페이지를 구축 할 수 있습니다.
⑤ 모바일 , PC용 페이지 레이아웃을 이중하 하여 CSS 테크닉이 없어도 디바이스별로 사이트
를 처리할 수 있습니다.

사이트 레이아웃 구성하기
통상적으로 웹사이트는 웹페이지 전체를 담고 있
는 <Body></body> 부분과Header
Menu
Content
Footer
그 안에 들어가는 구성요소
* Header
* Menu
* Content
* Footer
로 구성됩니다
2016-06-24 5

2016-06-24 6

2016-06-24 7
모바일 접속 및 PC접속을 구분하여 레이아웃 스타일을 적용

2016-06-24 8

사이트 레이아웃 + 환경설정
빌더의 장점은 html과 웹사이트의 구조를 잘 모르는 사람들도 쉽게 사이트를 제작할 수 있다
는 것입니다.
따라서 기존 레이아웃을 html로 처리하는 것과 달리, 환경변수에 설정값을 저장후, 저장된 수
치값으로 자동으로 레이아웃을 html 코드를 생성해 주는 것이 핵심입니다.
생성된 Html 코드
설정값
상황별 코드
처리 생성
2016-06-24 9

멀티 도메인
멀티도메인 웹사이트는 하나의 CMS툴을 이용하여 다수의
사이트를 중앙 집중 관리하기 위해서 만들어 놓은 새로운
개념입니다.
사이트 접속 URL을 검사하여, 각각의 사이트별 환경설정값
을 처리 하여 HTML 코드를 생성합니다.
2016-06-24 10

2016-06-24 11

2016-06-24 12

2016-06-24 13

2016-06-24 14

디바이스 검출부
PC접속 및 모바일 접속을 구분하여 페이지 스킨을 구분하여 처리합니다.
2016-06-24 15

2016-06-24 16

다국어 처리
기존 웹사이트 빌더의 경우 통상적으로 하나의 언어만 지원하는 경우가 대부분 입니다.
개발사에서 또는 디자인/프러그인 배포자가 제공하는 언어만 사용이 가능합니다.
다국어를 지원을 한다고 해도, 페이지 구성하기 위한 관리자 cms 가 복잡하여 직관적이
지 않습니다.
2016-06-24 17

추가 언어팩 개발작업 필요 없이, 사용자가 직접 언어를 추가 설정 할 수 있습니다.
2016-06-24 18

추가 언어팩 개발작업 필요 없이, 사용자가 직접 언어를 추가 설정 할 수 있습니다.
모든 문자열은 JSON 형태로 처리하여 DB에 저장이 됩니다.
따라서 어떤 언어든 코드값만 신규로 추가하면 모든 스트링 및 테이터 입력란에 직관적으
로 언어텝으로 각각의 언어 문자열을 사용자가 입력하여 다국어 처리가 가능합니다.
2016-06-24 19

2016-06-24 20

도메인별 다국어 레이아웃처리
도메인
언어
레이아웃처리 HTML 코드 생성
2016-06-24 21

Html 케싱
모든 자동 생성되는 html의 경우 매번 DB억세스와 페이지 처리로 인하여 페이지 생성시 마
다 시간이 오래 걸릴 수 있습니다.
이를 방지하고, 처리속도를 개선하기 위하여 일부 생성되는 페이지들은 html 형태로 서버에
캐싱을 하도록 되어 있습니다.
만일 스킨 및 레이아웃이 변경이 되면, 변경된 html을 파일로 저장후, 출력할 때는 파일을 읽
어 처리 합니다.
2016-06-24 22

Html 케싱
if(_is_file("./theme/$theme/$code.$lang.htm")){
$body = _file_load("./theme/$theme/$code.$lang.htm");
} else {
// html 파일이 없는 경우, DB에서 자료를 읽어옴
$body = _theme_page_db($theme,$code,$lang,$mobile);
}
2016-06-24 23

기본 컨텐츠가 포함되어 있지 않은 레이아웃을 생성함.
$body = _theme_emptybody();
$_SESSION['ajaxkey'] = $ajaxkey = md5('ajaxkey'.$_SERVER['PHP_SELF'].$TODAYTIME.microtime());
$body = str_replace("","
<center><img src='../images/loading.gif' border='0'></center>
<form name='goods' method='post' enctype='multipart/form-data'>
<input type='hidden' name='ajaxkey' value='$ajaxkey'>
<input type='hidden' name='limit' value='$limit'>
<input type='hidden' name='searchkey' value='$search'>
<input type='hidden' name='house' value='$house'>
<input type='hidden' name='list_num' value='$list_num'>
<input type='hidden' name='products' value='$products'>
<input type='hidden' name='bom' value='$bom'>
<script>"._javascript_ajax_html("#mainbody",$path_ajax_sales_goods)."</script>
</form>",$body);
echo $body;
페이지 내용을 ajax 방으로 처리하여 컨덴츠
내용을 삽입함.
2016-06-24 24

접속 클라이언트 언어 감지부 도메인/url 감지부 접속 디바이스 감지부
도메인 사이트 레이아웃 처리
URL 별 페이지 스킨 감지
Content 블록 감지 및 파싱 목록
생성
url/언어 스킨 데이터
Content 블럭내용을 블럭데이
터 기반으로 변경치환
디자인 CSS 내용 삽입 및 처리 페이지 CSS 데이터
블록데이터
출력
① ② ③
④
⑤
⑥
⑦
⑧
⑨
ⓐ
ⓑ
ⓒ
블럭방식의 다국어 웹사이트
처리 구현 방법
세일즈호스팅 / 이호진
010-3911-3106 / infohojin@naver.com2016-06-24 25

하단 Footer
웹사이트 하단에 위치하여, 매 페이지화면 마다 고정적으로 나오는
화면을 말합니다.
2016-06-24 26
Footer 구성

푸터 내용 설정
푸터 란?
통상적으로 사이트 하단에 고정적으로 나오는 사이트 운영자 정보 입니다.
환경 설정에서 선택한 테마파일을 읽어서 출력해 줍니다.
2016-06-24 27
Footer 구성

푸터 내용 설정
환경 설정에서 선택한 테마파일을 읽어서 출력해 줍니다.
2016-06-24 28
Footer 구성

해더 내용 설정
해더란?
통상적으로 사이트 상단에 고정적으로 나오는 사이트 정보로 로고/ 회원가입 약간의 네비
게이션 링크를 포함하고 있습니다.
2016-06-24 29
Header 구성

해더 Header
웹사이트 상단에 위치하여, 매 페이지화면 마다 고정적으로 나오는
화면을 말합니다.
로고 이미지 :
2016-06-24 30
Header 구성

메뉴구성
웹사이트 메뉴구조를 구상합니다.
2016-06-24 33
메뉴구성

홈페이지, 쇼핑몰의 메뉴구성을 손쉽게 제작 할 수 있습니다.
2016-06-24 34
메뉴구성

최상위 메뉴를 생성할
수 있습니다.
서브 메뉴 생성은 메뉴 앞쪽에 +를 클릭하면 서브메뉴를 생성할
수 있습니다.
활성화 표시 : 메뉴항목 출력을 활성화/비활성화 가능합니다.
2016-06-24 35
메뉴구성

메뉴번호,
트리번호 구조표기
메뉴를 상/하 로 이동할 수 있습니다.
메뉴코드를 통하여 다수의 메뉴셋을 구성 관리할 수 있습니다.
메뉴 연결 상태 표기
2016-06-24 36
메뉴구성

메뉴 레이아웃 적용
<center>
<table border="0" width="1200" cellspacing="0"
cellpadding="0">
<tr>
<td>{menu}</td>
</tr>
</table>
</center>
메뉴 레이아웃 적용으로 스
타일을 변경할 수 있습니다.
2016-06-24 37
메뉴구성

메뉴 편집 메뉴를 표시하거나, 숨길수 있습니다.
언어별로 메뉴명을 구분하여 출력할 수 있습니다.
메뉴를 클릭하면, 연결 동작할
행동을 설정할 수 있습니다.
2016-06-24 38
메뉴구성

메뉴코드 관리
복수의 사이트 또는 로그인전/로그인후 등 다양한 상태에 따라서 서로 다른 메뉴를 선택 출력할 수 있습니다.
메뉴코드를 이용하면 다양한 구성의 메뉴셋 그룹을 만들어 관리 할 수 있습니다.
2016-06-24 39
메뉴구성

메뉴코드
메뉴색상, 스타일등을 구성할 수 있습니다.
2016-06-24 40
메뉴구성

2016-06-24 41
메뉴구성 내용이 파일로 있을 경우, 속도를 위하여 파일로 로딩
메뉴구성

2016-06-24 42
메뉴 트리 파일이 없는 경우,
DB에서 메뉴를 구성처리함
메뉴구성

사이트 레이아웃 에 따른 컨덴츠 삽입
레이아웃은 웹사이트의 보통 다수의 페이지에 공통되
는 내용으로, 페이지를 처리할 때 각각의 구성요소들을
불러와서 블럭형태로 기본 화면틀을 구성후, 안에 내용
을 삽입하는 형태로 페이를 출력하게 됩니다.
Header
Menu
Content
Footer
2016-06-24 43

2016-06-24 44
페이지 처리 및 AJAX
페이지 레이아웃 / 헤더 / 풋터/ 메뉴가 구성화 틀을 생성합니다.
페이지 내용을, ajax로 처리하여 내용을 삽입 처리함

2016-06-24 45
페이지 처리 및 AJAX
AJAX 키값을 체크

회사소개, 위치, 제품설명등 HTML형태로 웹페이지 내용을 홈페이지>정적페이지 기능을 통하여 페이지를 추가하실
수 있습니다.
2016-06-24 46
고정 HTML 페이지

정적페이지를 생성합니다.
여러 개의 페이지를 한번에 삭제할 수 있습니다.
새창으로 작성된 페이지를
확인할 수있습니다.
사이트 정적페이지 조회
수를 확인, 섭속량을 체크
페이지 코드 (영문으로 구성되며, 중복
되지 않아야 합니다.)
비활성화 된 페이지는, 코드명 가운에
가로줄로 표시됩니다.
페이지 목록 및 관리창
2016-06-24 47

페이지 생성 및 편집
2016-06-24 48

서버에 ftp접속으로 이미지를 개별 등록하지 않고도, 관리창에서 관련된 이미지를 업로드하여 페이지에
html코드로 삽입을 할 수 있습니다.
초보자를 위하여 간략하게 html 코드셈플을 생성해 줍니다.
이미지 파일은 반드시 영문파일명으로 사용을 해야 합니다. 또한 스페이스등 뛰어쓰기가 되어 있지 않은 영
문 파일명으로 작성해 주세요.
예)images_0101-abcd.jpg
2016-06-24 49

이미지 HTML 코드 설명
서버에 등록한 이미지를 홈페이지에서 출력을 하기 위해서는 간단하게 html코드를 작성해야지만 이미지가 출력이
됩니다.
작성예1)
<img src=“파일경로명” border=0 width=“이미지가로크기” >
작성예2) 스타일시트를 통하여 페이지 크기 100%로 표기
<img src=“파일경로명” border=0 style="max-width:100%;height:auto;">
2016-06-24 50

등록한 이미지 위치
관리자 툴에서 이미지를 등록하면 하기와 같은 위치에 파일이 등록이 됩니다.
http://도메인 / pages / company / sample.jpg
코드명
파일명저장소 위치
(고정값)
2016-06-24 51

페이지 내용은 11개국 언어 이상의 다양한 언어로 각각 페이지를 생성할 수 있습니다. 상단의 언어코드 텝을 클릭
하시면 해당 언어로 페이지 내용을 입력, 저장할 수 있습니다.
구글 검색엔진 최적화를 위하여 SEO 기능을 지원합니다. 또한 SEO 값도 언어별로 각각 설정하여 검색 최적화를
하실 수 있습니다.
2016-06-24 52

페이지 내용은 PC접속용과 모바일용으로 각각 구분하여 언어별 2개씩 입력을 하실 수 있습니다. 내용은 글자 또는
HTML 코드로 작성하여 올릴 수 있습니다.
2016-06-24 53

HTML 코드에 익숙하지 않은 사람을 위하여 WYSIWYG 에디터를 지원합니다.
WYSIWYG 변환버튼
WYSIWYG
2016-06-24 54

HTML 코드 입력시 주의사항
페이지 내용
페이지는 사이트 상단과 하단의 틀을 유지하면서 중앙에 내용만 변경 관리하게 되어 있습니다. 따라서 사이트 전체
에 영향이 주어지는 html 코드를 같이 사용을 하시면 전체적이 사이트가 엉망이 될 수 있습니다.
HTML코드는
<html>
<head>
</head>
<body>
</body>
</html>
<body></body>안에 있는 순수 html 내
용 코드만 방췌하여 입력해 주세요.
2016-06-24 55

작성한 페이지 사이트 접속 및 확인 방법
작성된 정적 페이지는 하기와 같은 접속 url을 통하여 확인 할 수 있습니다.
http:// 도메인 / pages.php ? code = 코드값
또한, 메뉴 선택에서 클릭시 해당 주소로 이동을 할 수 있도록 정적페이지 연결 기능을 제공하고 있습니다.
보다 자세한 방법은 메뉴 구성부분을 참조하세요.
2016-06-24 56

사이트 테마?
사이트 테마란 홈페이지 프로그램 관 별개로 html / css / 이미지등 디자인에 관련된 요소만 별도로 분리하여, 웹 프로
그램에 대한 지식이 없어도 손쉽게 디자인을 적용할 수 있는 기능입니다.
2016-06-24 57
사이트 테마

사이트 디자인
모니터
디자인테마 -> layout
모니터의 좌측정렬, 중앙정렬등 사이트
의 기본적인 외형틀을 코딩할 수 있습니
다.
Header
footer
디자인테마 -> header
웹사이트의 고정된 상단 내용을 코팅
디자인테마 -> Footer
웹사이트의 고정된 한단 내용을 코팅
Menu
메뉴>홈페이지 > 메뉴
비주얼하게 메뉴 트리를 구성할 수 있습
니다.
Index 또는 content
디자인테마 -> index
사이트 초기화면 index를 구성할 수 있습
니다.
정적페이지/ 게시판 / 상
품목록등….
2016-06-24 58
사이트 테마

2016-06-24 59
사이트 테마

2016-06-24 60
사이트 테마

2016-06-24 61
사이트 테마

2016-06-24 62
디자인 CSS 관리
사이트의 디자인 CSS를 효율적으로 관리를 하기 위하여 CSS 디자인 빌더를 탑제하여, 관리자 창에서 실시
간으로 적용을 할 수 있습니다.
기존 :
CSS 파일을 생성/수정
하여 서버로 파일을 올
린후, 웹페이지를 갱신
하여 테스트
CSS 관리 :
관리 창에서 CSS코드와 내용을 입력한후 적용을 선
택하면, 자동으로 CSS코드를 생성하여 화면에 직접
적용된

2016-06-24 63

2016-06-24 64

왼쪽메뉴 : CSS 이름
#submenu_title
메뉴 타이틀바 div
#submenu_tree
메뉴트리를 포함한 div 박스
#submenu
좌측 메뉴 전체 div
#submenu_item0
#submenu_item1
#submenu_item2
#submenu_item3
각각의 메뉴 항목을 선택합니다.
2016-06-24 65

왼쪽메뉴
#control_box
#data_rows
2016-06-24 66

2016-06-24 67
블럭형 디자인 컨셉
블럭형 디자인이란? 기존 홈페이지를 제작하는데 있어서 중복되는 요소들과 내용을을 각각 항목으로 개
별분리한후, 필요한 페이지의 내용에 맞도록 사이트 내용을 자동으로 출력해 주는 기능입니다.

2016-06-24 68

2016-06-24 69

2016-06-24 70

관리자 페이지에서 홈페이지 타이틀 이미지 변
경할 수 있습니다.
타이틀 이미지는 도메인 주소별, PC용/모바일
별로 다양하게 적용 할 수 있습니다.
2016-06-24 71
타이틀 이미지 관리
홈페이지의 첫페이지 등에서 주로 사용하는 대표 타이틀 이미지를 관리 할 수 있습니다.

2016-06-24 72

2016-06-24 73

오버레이 타이틀은 이미지에 포토샵등 글자를 직접 편집, 제작하지 않고 이미지 위에 html 코드로 필요한 내용
을 가변적으로 글자를 겹쳐 표시할 수 있는 신트렌드 기법입니다.
또한, 이러한 오버레이 텍스트 기술은 검색엔진에서 보다 많은 내용을 스켄하여 내 홈페이지가 더 많이 노출하
게 하는 방법중에 하나 입니다.
2016-06-24 74
오버레이 타이틀

오버레이 텍스트 위치 설정 및 크기
2016-06-24 75

글자 크기 및 색상 변경하여 글씨쓰기
<p style=“color:#000000; font-size:12px;”> 글쓰기 </p>
2016-06-24 76

2016-06-24 77
게시판 관리
게시판을 생성하고, 글을 관리 할 수 있습니다.

2016-06-24 78
게시판 관리

2016-06-24 79
게시판 관리

2016-06-24 80
게시판 관리

2016-06-24 81
게시판 관리

2016-06-24 82
게시판 관리

2016-06-24 83
게시판 관리

2016-06-24 84
게시판 관리

2016-06-24 85
회원관리
자체 회원관리 기능을 탑제하여, 별도의 플러그인 없이 회원 가입제도 및 운영을 할 수 있습니다.
• 회원가입
• 적립금 관리
• 포인트 관리
• 블랙리스트 관리
• 예약 이메일 관리
• 소셜 로그인 관리

회원관리
2016-06-24 86
이메일 기반의 회원 관리 시스템

2016-06-24 87
회원관리
회원 관리자에서 직접 회원 추가를 할 수 있습니다.

2016-06-24 88
회원가입 동의서
동의서는 한 개 이상의 멀티 동의서를 관리를 할 수 있습니다. 회원 가입시 1개 또는 2개/3개등 복수의 동
의서를 관리할 수 있습니다.
회원가입시 2개의
동의서를 출력 할
수 있습니다.

2016-06-24 89
회원가입 동의서

2016-06-24 90
회원 적립금 관리

2016-06-24 91
회원 포인트 관리

2016-06-24 92
회원 블랙리스트 관리
블랙 리스트 회원 이메일을 등록하여 접속을 차단할 수 있도록 할 수 있습니다.

2016-06-24 93
회원 예약이메일 관리
특정 이메일의 경우 신규회원 가입 이메일로 사용을 못하게 해야 하는 경우가 있습니다. 이런경우 예약
이메일 리스트를 입력해 놓으며, 회원가입시 입력이 되지 않도록 필터링을 합니다.

2016-06-24 94
소셜 로그인
소셜 로그인 연동을 통하여 회원가입 없이도 로그인 및 자동회원 가입을 처리 할 수 있습니다.

2016-06-24 95
소셜 로그인 관리 설정
도메인별 발급받은 소셜 로그인 토큰키를 관리 할 수 있습니다.
도메인별 토큰키를 DB로 관리하여, 다양한 소셜키를 유
연하게 처리를 할 수 있습니다.

2016-06-24 96
소셜 로그인

다양한 최신 기술들을 종합 적용하여 제작
2016-06-24 97
적용 기술

저희 프로젝트의 기능을 재능해줄 분을 찾습니다.
PHP / JAVA / C 언어 계열의 프로그래머
Mysql , Oracle 등의 DB 사용가능
Android / iOS 계열의 프로그래머
Linux 계열의 서버 운영자 및 호스팅 서비스 유경험자
약간의 html / css를 겸비한 참신한 디자이너
서비스 테스트 및 사용법 교육등 홍보업무
2016-06-24 98

Jinyweb

More Related Content

What's hot

Viewers also liked

Similar to Jinyweb

Jinyweb