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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Jinyweb

Similar to Jinyweb (20)

Recently uploaded

Recently uploaded (7)

Jinyweb