SlideShare a Scribd company logo
1. 웹 UI 프레임웍 개요
2. 웹 UI 프레임웍 활용
3. 드래그홈 제안배경
4. 드래그홈 개요
5. 드래그홈 특징
Ⅰ. 웹 UI 프레임웍
Ⅱ. 드래그홈 소개
6. 드래그홈 관리자화면
7. 드래그홈 제작 사례
목차
Ⅰ. 웹 UI 프레임웍
1. 웹 UI 프레임웍 개요
모듈화모바일웹
웹표준화
MVC기반 모듈의
재사용
글로벌 표준
XHTML/CSS
모바일로의 확장
2. 웹 UI 프레임웍 활용
기업
기타
인트라넷
개인화
개인
업무
시스템
뉴스
블로그
쇼핑몰
커뮤니티
• 드래그홈은 홈페이지를 구성하는 모든 요소들을 모듈화(모듈or위젯)하여 드래그만으로
원하는 시스템을 구축할 수 있는 웹 UI 프레임웍입니다.
• 웹표준을 준수하여 브라우저에 상관없이 동일한 화면으로 서비스할 수 있습니다.
• 자바기반의 MVC모델로 개발하여 확장이 용이할 뿐 아니라 개발자와 디자이너의 업무를
확실하게 구분할 수 있습니다.
• iBatis, Freemarker, lucene, jQuery(Core & UI & 플러그인) 등을 활용하여 개발이 쉽고
ajax을 활용한 다이나믹한 효과를 구현할 수 있습니다.
3. 드래그홈 제안배경
• JAVA 기반 AJAX 웹 UI 프레임웍
• 웹표준 준수 (익스플로러, 파이어폭스, 크롬, 사파리, 오페라)
• 다국어 가능
• jQuery 자바스크립트 프레임웍 사용
• 자체 드래그홈 CSS 프레임웍 사용
4. 드래그홈 개요
• 페이지 개발을 모두 드래그로 처리하는 직관적인
유저 인터페이스를 제공합니다.
• 단위 모듈들을 모두 위젯 형태로 제공되기 때문에
원하는 기능의 위젯을 드래그만 하면 원하는 페이지로
변경됩니다.
5. 드래그홈 특징
직관적인 UI 제공
• JAVA 기반 MVC 모델로 개발하여 새로운
모듈 추가가 용이합니다.
• 개발자와 디자이너의 업무 구분이 명확하여
개발기간이 단축됩니다.
• 시스템을 변경하거나 디자인을 변경할 때 필요한
모듈이나 템플릿만 수정하면 되므로 유지비용이
절약됩니다.
• 회사 홈페이지. 지역 홈페이지, 내부 업무시스템을
하나의 드래그홈 프레임웍으로 제공할 수 있습니다.
• 직관적인 UI 제공으로 페이지를 제작하므로
내부 사용자가 쉽게 적응하여 직원 교육비용이 절약됩니다.
• 웹모바일용 템플릿 제공으로 회사홈페이지나
업무시스템을 모바일로 손쉽게 확장이
가능합니다.
개발의 편리성
유지비용 절약 웹모바일 활용
Ⅱ. 드래그홈 소개
6. 드래그홈 관리자 화면 - 플랜
6. 드래그홈 관리자 화면 - 디자인
드래그
6. 드래그홈 관리자 화면 - 디자인
7. 드래그홈 제작 사례 - 1
사이트명 : 코리아타운 가이드 / 도메인명 : http://yellow.draghome.com
7. 드래그홈 제작 사례 - 2
사이트명 : 지팡이 / 도메인명 : http://elearn2.draghome.com
7. 드래그홈 제작 사례 - 3
사이트명 : 채널스타 / 도메인명 : http://chstar3.draghome.com
7. 드래그홈 제작 사례 - 4
사이트명 : 99샵 / 도메인명 : http://www.99shop.co.kr
7. 드래그홈 제작 사례 - 5
사이트명 : 상담인 / 도메인명 : http://sangdam.draghome.com
7. 드래그홈 제작 사례 - 6
사이트명 : 페이브 클래식 / 도메인명 : http://fave.draghome.com
7. 드래그홈 제작 사례 - 7
사이트명 : 페이브 클래식 / 도메인명 : http://fave.draghome.com
7. 드래그홈 제작 사례 - 8
사이트명 : 킹업 / 도메인명 : http://www.kingup.co.kr
7. 드래그홈 제작 사례 - 9
사이트명 : 대운하 / 도메인명 : http://www.chinaconsulting.co.kr
7. 드래그홈 제작 사례 - 10
사이트명 : 사고팜 / 도메인명 :
7. 드래그홈 제작 사례 - 11
사이트명 : BESTRATE / 도메인명 :
회 사 명 : 라이브피드
전화번호 : 02 – 2066 -1440
팩스번호 : 02 – 2618 - 1440
홈페이지 : http://www.draghome.com
감사합니다.

More Related Content

What's hot

웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
Seungmin Lee
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
Daum DNA
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
 
해외 대상 홈페이지 전략
해외 대상 홈페이지 전략해외 대상 홈페이지 전략
해외 대상 홈페이지 전략
성혁 장
 
Webframeworks.kr의 소개
Webframeworks.kr의 소개Webframeworks.kr의 소개
Webframeworks.kr의 소개
WebFrameworks
 
Open hab&webapp.net
Open hab&webapp.netOpen hab&webapp.net
Open hab&webapp.net
Tae Young Lee
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰Kenu, GwangNam Heo
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
우현 김
 
Sencha architect 사용기
Sencha architect 사용기Sencha architect 사용기
Sencha architect 사용기Hyeonmin Kim
 
Bootstrap
BootstrapBootstrap
Bootstrap
SangHun Lee
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
NAVER D2
 
FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표
Daum DNA
 
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소 (MIRAE WEB)
 
실무자를 위한 ExtJS 엔터프라이즈 개발 노하우
실무자를 위한  ExtJS  엔터프라이즈 개발 노하우실무자를 위한  ExtJS  엔터프라이즈 개발 노하우
실무자를 위한 ExtJS 엔터프라이즈 개발 노하우
미래웹기술연구소 (MIRAE WEB)
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
Junsu Kim
 
블로그아카데미 소개서 최신버젼
블로그아카데미 소개서 최신버젼블로그아카데미 소개서 최신버젼
블로그아카데미 소개서 최신버젼inno jung
 
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
미래웹기술연구소 (MIRAE WEB)
 
응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란
redribbon1307
 
Man's community(Man's)
Man's community(Man's)Man's community(Man's)
Man's community(Man's)
송 준일
 

What's hot (20)

웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기웹 디자이너의 도전: Vue.js 따라하기
웹 디자이너의 도전: Vue.js 따라하기
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
 
해외 대상 홈페이지 전략
해외 대상 홈페이지 전략해외 대상 홈페이지 전략
해외 대상 홈페이지 전략
 
Webframeworks.kr의 소개
Webframeworks.kr의 소개Webframeworks.kr의 소개
Webframeworks.kr의 소개
 
Open hab&webapp.net
Open hab&webapp.netOpen hab&webapp.net
Open hab&webapp.net
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
Sencha architect 사용기
Sencha architect 사용기Sencha architect 사용기
Sencha architect 사용기
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
 
FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표FT직군의 현재와 미래 - 홍윤표
FT직군의 현재와 미래 - 홍윤표
 
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
 
실무자를 위한 ExtJS 엔터프라이즈 개발 노하우
실무자를 위한  ExtJS  엔터프라이즈 개발 노하우실무자를 위한  ExtJS  엔터프라이즈 개발 노하우
실무자를 위한 ExtJS 엔터프라이즈 개발 노하우
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
블로그아카데미 소개서 최신버젼
블로그아카데미 소개서 최신버젼블로그아카데미 소개서 최신버젼
블로그아카데미 소개서 최신버젼
 
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
[Sencha 엔터프라이즈 웹애플리케이션 세미나] 기업 환경에서 HTML5 도입전략 소개
 
응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란응답하라 반응형웹 - 1. 반응형 웹이란
응답하라 반응형웹 - 1. 반응형 웹이란
 
Man's community(Man's)
Man's community(Man's)Man's community(Man's)
Man's community(Man's)
 
2013 app design trends
2013 app design trends2013 app design trends
2013 app design trends
 

Viewers also liked

의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리
진보 심
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
yamoo9
 
올디너리 피플 상상드림프로젝트 - 복사본
올디너리 피플   상상드림프로젝트 - 복사본올디너리 피플   상상드림프로젝트 - 복사본
올디너리 피플 상상드림프로젝트 - 복사본
Jn Jin
 
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
준완 박
 
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
JeongHeon Lee
 
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
더브이씨 (THE VC)
 
성공적인 IR Program의 평가
성공적인 IR Program의 평가성공적인 IR Program의 평가
성공적인 IR Program의 평가smartkudos
 
공연 지원 사업 - 뮤지션 날개를 달다
공연 지원 사업 - 뮤지션 날개를 달다공연 지원 사업 - 뮤지션 날개를 달다
공연 지원 사업 - 뮤지션 날개를 달다
Ditto58
 
[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)
[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)
[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)
JEONG HAN Eom
 
[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT
[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT
[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT
ONOFFMIX Inc
 

Viewers also liked (10)

의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리
 
Improve CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for AccessibilityImprove CSS IR & Sprites Image Techniques for Accessibility
Improve CSS IR & Sprites Image Techniques for Accessibility
 
올디너리 피플 상상드림프로젝트 - 복사본
올디너리 피플   상상드림프로젝트 - 복사본올디너리 피플   상상드림프로젝트 - 복사본
올디너리 피플 상상드림프로젝트 - 복사본
 
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
 
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
 
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
 
성공적인 IR Program의 평가
성공적인 IR Program의 평가성공적인 IR Program의 평가
성공적인 IR Program의 평가
 
공연 지원 사업 - 뮤지션 날개를 달다
공연 지원 사업 - 뮤지션 날개를 달다공연 지원 사업 - 뮤지션 날개를 달다
공연 지원 사업 - 뮤지션 날개를 달다
 
[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)
[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)
[RoA] 투자자 피칭용 IR 10 pages slide 2013_ver1(가로)
 
[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT
[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT
[프레젠테이션월드 2016 키노트 ] 사업계획서 쓰는법 ≠ 실제 투자 받는 PT
 

Similar to 드래그홈 표준제안서 2014

2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서
블로그코디
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
Wendyst Communication
 
도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day
도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day
도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day
Amazon Web Services Korea
 
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
DataUs
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
Amy Young Ah Kim
 
2015 블로그코디 회사소개서
2015 블로그코디 회사소개서2015 블로그코디 회사소개서
2015 블로그코디 회사소개서
블로그코디
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
Sang Seok Lim
 
Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼
Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼
Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼
MarketingUracle
 
웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해
Leehooan
 
About WebCAT
About WebCATAbout WebCAT
About WebCAT
hyungjoo park
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Sung-tae Ryu
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
준극 김
 
AWS 기반 마이크로 프론트엔드 아키텍처 구축하기
AWS 기반 마이크로 프론트엔드 아키텍처 구축하기AWS 기반 마이크로 프론트엔드 아키텍처 구축하기
AWS 기반 마이크로 프론트엔드 아키텍처 구축하기
Eunsu Kim
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
 
[20140624]소개자료
[20140624]소개자료[20140624]소개자료
[20140624]소개자료
유석 남
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
Deo Kim
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
Michael Yang
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
hellotutorial
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
ChangGyum Kim
 
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
SangHoon Han
 

Similar to 드래그홈 표준제안서 2014 (20)

2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day
도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day
도커 컨테이너 활용 사례 Codigm - 남 유석 개발팀장 :: AWS Container Day
 
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
 
2015 블로그코디 회사소개서
2015 블로그코디 회사소개서2015 블로그코디 회사소개서
2015 블로그코디 회사소개서
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼
Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼
Enterprise mobile standard, morpheus 모피어스 모바일 표준 플랫폼
 
웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해
 
About WebCAT
About WebCATAbout WebCAT
About WebCAT
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
AWS 기반 마이크로 프론트엔드 아키텍처 구축하기
AWS 기반 마이크로 프론트엔드 아키텍처 구축하기AWS 기반 마이크로 프론트엔드 아키텍처 구축하기
AWS 기반 마이크로 프론트엔드 아키텍처 구축하기
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
[20140624]소개자료
[20140624]소개자료[20140624]소개자료
[20140624]소개자료
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
 

드래그홈 표준제안서 2014

  • 1.
  • 2. 1. 웹 UI 프레임웍 개요 2. 웹 UI 프레임웍 활용 3. 드래그홈 제안배경 4. 드래그홈 개요 5. 드래그홈 특징 Ⅰ. 웹 UI 프레임웍 Ⅱ. 드래그홈 소개 6. 드래그홈 관리자화면 7. 드래그홈 제작 사례 목차
  • 3. Ⅰ. 웹 UI 프레임웍
  • 4. 1. 웹 UI 프레임웍 개요 모듈화모바일웹 웹표준화 MVC기반 모듈의 재사용 글로벌 표준 XHTML/CSS 모바일로의 확장
  • 5. 2. 웹 UI 프레임웍 활용 기업 기타 인트라넷 개인화 개인 업무 시스템 뉴스 블로그 쇼핑몰 커뮤니티
  • 6. • 드래그홈은 홈페이지를 구성하는 모든 요소들을 모듈화(모듈or위젯)하여 드래그만으로 원하는 시스템을 구축할 수 있는 웹 UI 프레임웍입니다. • 웹표준을 준수하여 브라우저에 상관없이 동일한 화면으로 서비스할 수 있습니다. • 자바기반의 MVC모델로 개발하여 확장이 용이할 뿐 아니라 개발자와 디자이너의 업무를 확실하게 구분할 수 있습니다. • iBatis, Freemarker, lucene, jQuery(Core & UI & 플러그인) 등을 활용하여 개발이 쉽고 ajax을 활용한 다이나믹한 효과를 구현할 수 있습니다. 3. 드래그홈 제안배경
  • 7. • JAVA 기반 AJAX 웹 UI 프레임웍 • 웹표준 준수 (익스플로러, 파이어폭스, 크롬, 사파리, 오페라) • 다국어 가능 • jQuery 자바스크립트 프레임웍 사용 • 자체 드래그홈 CSS 프레임웍 사용 4. 드래그홈 개요
  • 8. • 페이지 개발을 모두 드래그로 처리하는 직관적인 유저 인터페이스를 제공합니다. • 단위 모듈들을 모두 위젯 형태로 제공되기 때문에 원하는 기능의 위젯을 드래그만 하면 원하는 페이지로 변경됩니다. 5. 드래그홈 특징 직관적인 UI 제공 • JAVA 기반 MVC 모델로 개발하여 새로운 모듈 추가가 용이합니다. • 개발자와 디자이너의 업무 구분이 명확하여 개발기간이 단축됩니다. • 시스템을 변경하거나 디자인을 변경할 때 필요한 모듈이나 템플릿만 수정하면 되므로 유지비용이 절약됩니다. • 회사 홈페이지. 지역 홈페이지, 내부 업무시스템을 하나의 드래그홈 프레임웍으로 제공할 수 있습니다. • 직관적인 UI 제공으로 페이지를 제작하므로 내부 사용자가 쉽게 적응하여 직원 교육비용이 절약됩니다. • 웹모바일용 템플릿 제공으로 회사홈페이지나 업무시스템을 모바일로 손쉽게 확장이 가능합니다. 개발의 편리성 유지비용 절약 웹모바일 활용
  • 10. 6. 드래그홈 관리자 화면 - 플랜
  • 11. 6. 드래그홈 관리자 화면 - 디자인
  • 13. 7. 드래그홈 제작 사례 - 1 사이트명 : 코리아타운 가이드 / 도메인명 : http://yellow.draghome.com
  • 14. 7. 드래그홈 제작 사례 - 2 사이트명 : 지팡이 / 도메인명 : http://elearn2.draghome.com
  • 15. 7. 드래그홈 제작 사례 - 3 사이트명 : 채널스타 / 도메인명 : http://chstar3.draghome.com
  • 16. 7. 드래그홈 제작 사례 - 4 사이트명 : 99샵 / 도메인명 : http://www.99shop.co.kr
  • 17. 7. 드래그홈 제작 사례 - 5 사이트명 : 상담인 / 도메인명 : http://sangdam.draghome.com
  • 18. 7. 드래그홈 제작 사례 - 6 사이트명 : 페이브 클래식 / 도메인명 : http://fave.draghome.com
  • 19. 7. 드래그홈 제작 사례 - 7 사이트명 : 페이브 클래식 / 도메인명 : http://fave.draghome.com
  • 20. 7. 드래그홈 제작 사례 - 8 사이트명 : 킹업 / 도메인명 : http://www.kingup.co.kr
  • 21. 7. 드래그홈 제작 사례 - 9 사이트명 : 대운하 / 도메인명 : http://www.chinaconsulting.co.kr
  • 22. 7. 드래그홈 제작 사례 - 10 사이트명 : 사고팜 / 도메인명 :
  • 23. 7. 드래그홈 제작 사례 - 11 사이트명 : BESTRATE / 도메인명 :
  • 24. 회 사 명 : 라이브피드 전화번호 : 02 – 2066 -1440 팩스번호 : 02 – 2618 - 1440 홈페이지 : http://www.draghome.com 감사합니다.