SlideShare uma empresa Scribd logo
1 de 11
Baixar para ler offline
너구리 연구소
스마트 러닝팀 신준상 과장
사이트 구조 - 태블릿형(데스크탑)
Type : One Scroll Page (Flip)
가로 PX : 1920 px
전환 PX : 가로길이1024 px 이상
사이트 구조 - 모바일형(스마트폰)
Type : One Scroll Page (Scroll, 헤더 고정형)
가로 PX : 720 px
전환 PX : 가로길이1023 px 이하
개발 플랫폼
Microsoft Azure (Paas)
ASP.NET MVC5
WEB API2
.net 4.5.1
jQuery 1.11.1
fullPage 2.1.8
bootstrap 3.0.0
knockout 3.1.0
kakao 1.0.11
swipe 2.0
용량에 대한 고민
압축
Minify
Image Optimization
용량을 줄일 수 있는 기능들…
압축
Gzip
Webconfig > system.webServer
<urlCompression doStaticCompression="true" doDynamicCompression="true"/>
효과
적용전 : Response Body => 16,118 byte
적용후 : Response Body => 3,935 byte
Minify
- Css, Javascript 를 직접 Minify 해주는 사이트에서 처리
- 라이브러리를 이용
Meleze
효과
적용전 : Response Body => 3,935 byte
적용후 : Response Body => 3,482 byte
Image Optimization
AspNetSprites(.Net 라이브러리)
작동방식
위 이미지를 Splite 하는 css 생
성
용량을 줄일 수 있는 기능들…
Bundles
bundles.Add(new StyleBundle(“~/Tot/css”).Include(
“~/Content/FullPage/css/jquery.fullPage.min.css”,
“~/Content/bootstrap.min.css”,
“~/Content/Default/css/normalize.min.css”,
“~/Content/Default/css/default.css”));
<link href="/Tot/css?v=YttCtMU5FU3B6iIlzIpdSVGWgrXu7btLeaPbcJdFs4c1" rel="stylesheet"/>
bundles.Add(new ScriptBundle(“~/Tot/js”).Include(
“~/Scripts/jquery-1.11.1.min.js”,“~/Scripts/jquery-ui.min.js”,
“~/Scripts/FullPage/jquery.slimscroll.min.js”,“~/Scripts/bootstrap.min.js”,
“~/Scripts/knockout.js”,“~/Scripts/Kakao/kakao-1.0.11.min.js”,
“~/Scripts/Plugin/swipe.js”,“~/Scripts/Default/ops.0.10.js”,
“~/Scripts/respond.min.js”));
<script src="/Tot/js?v=LnYo12IeEry8V5s_JffJbA1x3lsbd-
naeXFAuTo4Jlc1"></script>
Commit
Push Fetch
Pull Merge
2RaccoonLab
RaccoonLab
MVC
MVC
Web API
Web API
DB
DB
Web Deploy
Web Deploy

Mais conteúdo relacionado

Mais procurados

[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
 
PHP 와 MySQL을 이용한 게임 랭킹 구축하기
PHP 와 MySQL을 이용한 게임 랭킹 구축하기PHP 와 MySQL을 이용한 게임 랭킹 구축하기
PHP 와 MySQL을 이용한 게임 랭킹 구축하기Yo-Chang Song
 
지금까지 상상한 Web 표현의한계를넘자 WebGL
지금까지 상상한 Web 표현의한계를넘자 WebGL지금까지 상상한 Web 표현의한계를넘자 WebGL
지금까지 상상한 Web 표현의한계를넘자 WebGLJun Ho Lee
 
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기Youngjae Kim
 
Saturday Azure Live 1701 Azure WebApp 개념원리
Saturday Azure Live 1701 Azure WebApp 개념원리Saturday Azure Live 1701 Azure WebApp 개념원리
Saturday Azure Live 1701 Azure WebApp 개념원리Youngjae Kim
 
iFunEngine: 30분 만에 게임 서버 만들기
iFunEngine: 30분 만에 게임 서버 만들기iFunEngine: 30분 만에 게임 서버 만들기
iFunEngine: 30분 만에 게임 서버 만들기iFunFactory Inc.
 
프라우드넷 사용법 훑어보기
프라우드넷 사용법 훑어보기프라우드넷 사용법 훑어보기
프라우드넷 사용법 훑어보기Hyun-jik Bae
 
스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들Hyunjik Bae
 
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요Youngjae Kim
 
[OCI 새소식] OCI Burstable Instance
[OCI 새소식] OCI Burstable Instance[OCI 새소식] OCI Burstable Instance
[OCI 새소식] OCI Burstable InstanceTaewan Kim
 
[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트
[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트
[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트iFunFactory Inc.
 
NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉
NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉
NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉iFunFactory Inc.
 
ProudNet 1.7 소개
ProudNet 1.7 소개ProudNet 1.7 소개
ProudNet 1.7 소개Hyunjik Bae
 
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망gueste9d250
 
NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법
NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법
NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법Jeongsang Baek
 
아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)
아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)
아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)Brian Hong
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래NAVER D2
 
게임서버 구축 방법비교 : GBaaS vs. Self-hosting
게임서버 구축 방법비교 : GBaaS vs. Self-hosting게임서버 구축 방법비교 : GBaaS vs. Self-hosting
게임서버 구축 방법비교 : GBaaS vs. Self-hostingiFunFactory Inc.
 

Mais procurados (19)

[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버
 
PHP 와 MySQL을 이용한 게임 랭킹 구축하기
PHP 와 MySQL을 이용한 게임 랭킹 구축하기PHP 와 MySQL을 이용한 게임 랭킹 구축하기
PHP 와 MySQL을 이용한 게임 랭킹 구축하기
 
지금까지 상상한 Web 표현의한계를넘자 WebGL
지금까지 상상한 Web 표현의한계를넘자 WebGL지금까지 상상한 Web 표현의한계를넘자 WebGL
지금까지 상상한 Web 표현의한계를넘자 WebGL
 
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
 
Saturday Azure Live 1701 Azure WebApp 개념원리
Saturday Azure Live 1701 Azure WebApp 개념원리Saturday Azure Live 1701 Azure WebApp 개념원리
Saturday Azure Live 1701 Azure WebApp 개념원리
 
iFunEngine: 30분 만에 게임 서버 만들기
iFunEngine: 30분 만에 게임 서버 만들기iFunEngine: 30분 만에 게임 서버 만들기
iFunEngine: 30분 만에 게임 서버 만들기
 
프라우드넷 사용법 훑어보기
프라우드넷 사용법 훑어보기프라우드넷 사용법 훑어보기
프라우드넷 사용법 훑어보기
 
스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들
 
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
[테크데이즈2015] 개발하기 바쁜데 푸시와 메시지큐는 있는거 쓸래요
 
[OCI 새소식] OCI Burstable Instance
[OCI 새소식] OCI Burstable Instance[OCI 새소식] OCI Burstable Instance
[OCI 새소식] OCI Burstable Instance
 
[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트
[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트
[아이펀팩토리]2017 NDC 강연 자료_아이펀 엔진 개발 노트
 
NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉
NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉
NDC14 범용 게임 서버 프레임워크 디자인 및 테크닉
 
ProudNet 1.7 소개
ProudNet 1.7 소개ProudNet 1.7 소개
ProudNet 1.7 소개
 
게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망게임 서버 기술 현황 및 전망
게임 서버 기술 현황 및 전망
 
NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법
NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법
NDC15_백정상_최종_모바일_앱의_실시간_운영을_위한_유저분석과_타게팅_기법
 
아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)
아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)
아마존 클라우드와 함께한 1개월, 쿠키런 사례중심 (KGC 2013)
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래
 
iFun Deploy 소개
iFun Deploy 소개iFun Deploy 소개
iFun Deploy 소개
 
게임서버 구축 방법비교 : GBaaS vs. Self-hosting
게임서버 구축 방법비교 : GBaaS vs. Self-hosting게임서버 구축 방법비교 : GBaaS vs. Self-hosting
게임서버 구축 방법비교 : GBaaS vs. Self-hosting
 

Semelhante a 너구리연구소

캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012Daum DNA
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기NAVER D2
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...JinKwon Lee
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)IMQA
 
1711 azure-live
1711 azure-live1711 azure-live
1711 azure-live세준 김
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rdPark Jonggun
 
Tensorflow service & Machine Learning
Tensorflow service & Machine LearningTensorflow service & Machine Learning
Tensorflow service & Machine LearningJEEHYUN PAIK
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법SooHwan Ok
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수NAVER Engineering
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Appsjungkees
 
CoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCore.Today
 
PWA 파헤치기
PWA 파헤치기PWA 파헤치기
PWA 파헤치기SangHun Lee
 
댓글 플러그인 아포가토
댓글 플러그인 아포가토댓글 플러그인 아포가토
댓글 플러그인 아포가토Goonoo Kim
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER Engineering
 
AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016
AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016
AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016Amazon Web Services Korea
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)수보 김
 

Semelhante a 너구리연구소 (20)

캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)모니터링 영역의 변천사_클라우드, 디지털 경험까지)
모니터링 영역의 변천사_클라우드, 디지털 경험까지)
 
1711 azure-live
1711 azure-live1711 azure-live
1711 azure-live
 
[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd[IoT] MAKE with Open H/W + Node.JS - 3rd
[IoT] MAKE with Open H/W + Node.JS - 3rd
 
Tensorflow service & Machine Learning
Tensorflow service & Machine LearningTensorflow service & Machine Learning
Tensorflow service & Machine Learning
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법
 
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
200819 NAVER TECH CONCERT 01_100만 달러짜리 빠른 앱을 만드는 비법 전수
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
CoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCoreDot TechSeminar 2018 - Session2 Ji Donghyun
CoreDot TechSeminar 2018 - Session2 Ji Donghyun
 
PWA 파헤치기
PWA 파헤치기PWA 파헤치기
PWA 파헤치기
 
댓글 플러그인 아포가토
댓글 플러그인 아포가토댓글 플러그인 아포가토
댓글 플러그인 아포가토
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016
AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016
AWS 클라우드로 천만명 웹 서비스 확장하기 - 윤석찬 백승현 - AWS Summit 2016
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 

너구리연구소

Notas do Editor

  1. Css, Javascript 를 직접 Minify 해주는 사이트에서 처리 의 단점은 Html 은 Minify 할 수가 없다 Meleze : Nuget 패키지에서 설치
  2. AspNetSprites : .Net 라이브러리 너구리 연구소에는 적용하지 않음 스케일 업/다운 해야 하는 상황이라서 적용하지 않음.
  3. ASP.NET 4.5에서는 요청 적재 시간(Request Load Time)을 향상시킬 수 있는 묶기와 축소라는 두 가지 기법이 제공됩니다. 묶기와 축소는 서버에 대한 요청 횟수 자체를 줄이고, 요청된 자산(Assets, CSS 및 자바스크립트 등)의 전체 크기를 감소시키는 방식으로 적재 시간을 향상시켜줍니다. 요청 응답 전체 시간이며 아래것은 대기 시간이다
  4. ASP.NET 4.5에서는 요청 적재 시간(Request Load Time)을 향상시킬 수 있는 묶기와 축소라는 두 가지 기법이 제공됩니다. 묶기와 축소는 서버에 대한 요청 횟수 자체를 줄이고, 요청된 자산(Assets, CSS 및 자바스크립트 등)의 전체 크기를 감소시키는 방식으로 적재 시간을 향상시켜줍니다. d