| 리포트 | 기술문서 | 테크-블로그 | 글로벌 블로그 | 원샷 갤러리 | 통신 방송 통계  | 한국 ICT 기업 총람 |

제품 검색

| 네트워크/통신 뉴스 | 기술자료실 | 자유게시판 |  
 
 
섹션 5G 4G LTE C-RAN/Fronthaul Gigabit Internet IPTV/UHD IoT SDN/NFV Wi-Fi Video Streaming KT SK Telecom LG U+ OTT Network Protocol CDN YouTube Data Center
 
스폰서채널 |

 

  스폰서채널 서비스란?
Step by Step Mobile Optimization
October 19, 2012 | By Akamai
코멘트 (0)
6

Mobile 단말을 위한 웹 트래픽 최적화 방안 목차 - Review Primary Tools - Introduce Demo Mobile Site - Optimize Site in 5 steps     Describe a problem     Show its impact     Discuss the cause     Try out one or more solutions - Summary - Q&A

Thank you for visiting Netmanias! Please leave your comment if you have a question or suggestion.
Transcript
Step By Step Mobile Optimization


ⓒ2012 Akamai

Faster ForwardTM

logo
Agenda

.Review Primary Tools
.Introduce Demo Mobile Site
.Optimize Site in 5 steps
.Describe a problem
.Show its impact
.Discuss the cause
.Try out one or more solutions


.Summary
.Q&A



ⓒ2012 Akamai

Faster ForwardTM

logo
Disclaimers

.Performance Numbers are never perfect
.Numbers vary widely for any given website
.In this deck, the numbers are helpers, not absolutes


.This presentation focuses on Mobile
.Focus is on problems more common in Mobile websites
.I’m intentionally not tackling common Front-End Optimization


.This presentation focuses on dedicated Mobile websites
.I won’t be discussing Responsive Web Design (RWD) here
.If you want to learn about RWD performance, come back tomorrow





ⓒ2012 Akamai

Faster ForwardTM

logo
The Tools


ⓒ2012 Akamai

Faster ForwardTM

logo
Waterfall Chart
Waterfall
Chart

Start Render

Resource
(Request/Response)

Doc Complete,
(a.k.a. onload,
Load Time)
ⓒ2012 Akamai

Faster ForwardTM

logo
WebPageTest

.Free Perf
Measurement Tool
.www.webpagetest.org


.Open Source
.Can be privately installed


.Desktop Browsers
.IE 6-9, Chrome, Firefox


.Uses Traffic Shaping
.Over faster networks





ⓒ2012 Akamai

Faster ForwardTM

logo
“Mobile”-izing WebPageTest with Scripts

.Use Chrome or Firefox as agent
.Chrome more similar to real mobile browsers


.Resize window to smartphone size
.setviewportsize 320 480
.No way to fake a Retina display


.Fake a smartphone user-agent
.setUserAgent <Some-Smartphone-UA>
.Doesn’t update navigator.userAgent


.Navigate to the relevant site…
.navigate http://www.your-site.com/





ⓒ2012 Akamai

Faster ForwardTM

logo
Akamai Mobitest

.Free Mobile Web Perf
Measurement Tool
.http://mobitest.akamai.com/


.Open-Source
.http://bit.ly/open-source-mobitest


.Mobile Browsers
.iOS, Android


.No Traffic Shaping
.Builds on WebPageTest
.Can share a single server





ⓒ2012 Akamai

Faster ForwardTM

logo
iOS 6 Network Link Conditioner . On Device!

How to Enable:

http://www.neglectedpotential.com/2012/09/ios6-network-
link-conditioner/


ⓒ2012 Akamai

Faster ForwardTM

logo
Introduction: SLowe’s Commerce

.Demo eCommerce application
.with dedicated Mobile site


.Built on Magento
.Took the Magento Demo Site
.Made some slight modifications





ⓒ2012 Akamai

Faster ForwardTM

logo
Initial Waterfall Chart

.URL:
www.slowes.org
.Device: iPhone 4
.OS: iOS 6
.Speed: 3G
.Apple’s Definition
.Throttled with Network Link
Conditioner





ⓒ2012 Akamai

Faster ForwardTM

logo
Initial Filmstrip

.16 seconds to start render
.18 seconds to
“Visually Complete”



ⓒ2012 Akamai

Faster ForwardTM

logo
.Slide about redirects, maybe an eschel drawing?


Step 1:
Redirects
ⓒ2012 Akamai

Faster ForwardTM

logo
JavaScript Redirect - The Good

mobileDetect.js:


.Client-side browser detection
.Easy to deploy
.Compared to server changes


.“Future Friendly”
.Can test screen width alongside UAs





ⓒ2012 Akamai

Faster ForwardTM

logo
Client-Side Detection Often Recommended
Nokia:

Mobify:
ⓒ2012 Akamai

Faster ForwardTM

logo
JavaScript Redirect . The Bad

.Slow!
.Redirect only happens after
JS is downloaded and executed


.Unnecessary download of
other resources
.Some above the JS in the HTML
.Some downloaded early by speculative parser





ⓒ2012 Akamai

Faster ForwardTM

logo
JS Redirect => HTTP Redirect

mobileDetect.js Apache

Fallback:
Inline Script on Desktop page
CDN
CMS/App Server
ⓒ2012 Akamai

Faster ForwardTM

logo
Optimization Results - Waterfall

.Real page starts loading
after ~1.5 secs vs 5.5 secs
.~4 Seconds saved


.No downloading of excess
CSS and JS
.All Good: Less requests,
less bytes, less delay



ⓒ2012 Akamai

Faster ForwardTM

logo
Optimization Results - Visual
.~5 seconds acceleration to start render



ⓒ2012 Akamai

Faster ForwardTM

logo
Merging Redirect Chains
.Combine all redirects to one redirect




.Requires combining Application and Mobile logic


Mobile Logic

Application Logic
^/(?:magento/)?(.*)

Only one redirect
/magento/


ⓒ2012 Akamai

Faster ForwardTM

logo
Avoiding Redirects: Serving Client-Specific HTML
.Instead of redirecting, return client-aware HTML
.Same URL returns HTML by client
.Caution: Caching appliances & CDNs must be tuned
.Requires consistent paths across all variations




No Redirect
ⓒ2012 Akamai

Faster ForwardTM

logo
Step 1: Conclusions

.Redirects have a real cost
.Especially in high latency mobile networks


.HTTP Redirects are much faster than JS Redirects
.Use HTTP Redirects
.Use JS Redirects as backup only


.1 Redirect is faster than… more than 1 redirect
.Merge redirect chains whenever possible


.No redirects are faster than even 1 redirect!
.Consider serving different HTML to different clients on one site





ⓒ2012 Akamai

Faster ForwardTM

logo
Step 2:
Compression
ⓒ2012 Akamai

Faster ForwardTM

logo
Lack of HTTP Compression (Gzip)

160 KB (!!!)
No Gzip


ⓒ2012 Akamai

Faster ForwardTM

logo
Solution: Apply Compression
.Gzip compression built into most elements in the stack
.App Server, Web Server, Load Balancer, CDN…





ⓒ2012 Akamai

Faster ForwardTM

logo
Compression matters more on Mobile!
.Mobile websites have less images
.JS & CSS account for more of the bytes
.Therefore, more of the bytes is compressible
.Therefore, compression matters more on Mobile.


.(Practically) all mobile browsers support compression
.Kinda true on desktop these days


.Download bandwidth on mobile is smaller than broadband
.Latency on mobile is higher on broadband



ⓒ2012 Akamai

Faster ForwardTM

logo
TCP Slow Start (diagrams from John Rauser)

Slow Start
Max Packet Size: 1460 bytes
http://velocityconf.com/velocity2010/public/schedule/detail/11792
Delayed ACK

Early TCP
ⓒ2012 Akamai

Faster ForwardTM

logo
TCP Slow Start (diagrams from John Rauser)

http://velocityconf.com/velocity2010/public/schedule/detail/11792
.Time to deliver ~72KB:
.Fiber (4ms RTT): ~24ms
.DSL (50ms RTT): ~300ms
.3G (200ms RTT): 1.2 seconds (!!!)


.Time to deliver ~300KB:
.Fiber (4ms RTT): ~40ms
.DSL (50ms RTT): ~500ms
.3G (200ms RTT): 2 seconds (!!!)


.Slow-Start is per connection



ⓒ2012 Akamai

Faster ForwardTM

logo
Step 2: Conclusions
.Compression is a critical optimization
.Easy to implement, especially in Mobile
.All mobile browsers (that you care about) support it


.Especially important on Mobile
.Compressible content (JS,CSS…) accounts for a bigger part of the page
.High latency makes large download slow
.High packet loss makes large downloads unbearable





ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3: Consolidation
ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3: Fragmented JS/CSS Files

2 CSS Files
16 JS Files


ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3: Consolidate CSS & JS Files
ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3: Consolidate JS/CSS Files - Visual
Consolidation made it worse!

Fragmented
Consolidated


ⓒ2012 Akamai

Faster ForwardTM

logo
Consolidated vs. Fragmented - Test
.10 scripts, with IDs from 1 - 10
.Each script weights ~100 KB
.Each script ends with:
.document.write(\'Processed file ID @, time is \' + new Date());




.1 consolidated script
.~1 MB in size



ⓒ2012 Akamai

Faster ForwardTM

logo
Consolidated vs. Fragmented - Result

Fragmented Consolidated

Fragmented
Consolidated
Starts painting ~5
seconds earlier!
ⓒ2012 Akamai

Faster ForwardTM

logo
Consolidation & Progressive Processing

.Browsers only process JavaScript & CSS when fully loaded
.Unlike HTML, which is processed (roughly) as soon as it arrives


.Consolidation delays the first script execution, CSS evaluation
.Especially with many scripts of varying sizes
.Possibly not always true for CSS


.This means Consolidation often delays dynamic requests
.Generated by scripts, thus not seen until execution
.Often results in a slower page


.Making consolidating “streaming” is doable, but hard
.http://www.guypo.com/uncategorized/consolidation-not-simple-addition/





ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3a: Async Scripts

.Defer external script execution to onload
.Often useful to defer download as well!


.Replace dependent inline scripts with event handlers
.Invoked in “onload” of appropriate external script
.No need to touch inline scripts with no dependencies


.Complications:
.Scripts required for basic page functionality
.Scripts that use document.write()
.3rd party scripts (you don’t know what they use…)


.Complications not as common in simpler mobile websites



ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3a: Simulation . remove combined.js
No Visual
Difference!


ⓒ2012 Akamai

Faster ForwardTM

logo
Step 3: Conclusions
.Consolidation is good and bad
.Good: Reduces roundtrips
.Bad: Hurts caching, progressive processing


.Consolidate with Care
.Merge small files together, especially if functionally related
.If you can, use Adaptive and Streaming Consolidation
.http://www.guypo.com/uncategorized/consolidation-not-simple-addition/






.Procrastinate - Defer as much as you can
.Often easier to do on Mobile websites


.Measure!!!



ⓒ2012 Akamai

Faster ForwardTM

logo
Step 4:
Retina Images
ⓒ2012 Akamai

Faster ForwardTM

logo
Retina Images
bg_header_retina.png . 56 KB
bg_header.png .
14KB

1 2
4 3


ⓒ2012 Akamai

Faster ForwardTM

logo
Lossless Image Compression
Retina:
Regular:
.“Image Minification”
.Sheds bytes without
reducing quality
.Sample techniques:
.Remove Geo data
.Remove Histogram data
.Remove unused colors
.Replace GIF with PNG-8
.…





ⓒ2012 Akamai

Faster ForwardTM

logo
Lossy Image Compression

.Reduce quality without hurting User Experience
.For Desktop, reduce to high-end screen resolution
.For Mobile, reduce to display size & resolution
.Known as “Responsive Images”




Image

Original

Lossless
Compression

“Desktop”
Resolution

Reduce to
320px wide

Reduce to
128px wide

Retina

56KB

48.2KB (14%)

26.6KB (53%)

6.8 KB (88%)

2.2KB (96%)

Regular

14KB

11.5KB (18%)

7KB (50%)

7KB (50%)

2.2KB (85%)



Image

Original

Lossless
Compression

Retina

56KB

48.2KB (14%)

Regular

14KB

11.5KB (18%)



Image

Original

Lossless
Compression

“Desktop”
Resolution

Retina

56KB

48.2KB (14%)

26.6KB (53%)

Regular

14KB

11.5KB (18%)

7KB (50%)



Image

Original

Lossless
Compression

“Desktop”
Resolution

Reduce to
320px wide

Retina

56KB

48.2KB (14%)

26.6KB (53%)

6.8 KB (88%)

Regular

14KB

11.5KB (18%)

7KB (50%)

7KB (50%)




ⓒ2012 Akamai

Faster ForwardTM

logo
Responsive Images

128px,
2.9 KB 240px, 6.8 KB
320px, 10.6 KB
480px, 21.3 KB

Full Res, 50.1 KB
Site:
lonelyplanet.com
Device:
iPhone 4
Before:
867 KB
After:
570 KB
ⓒ2012 Akamai

Faster ForwardTM

logo
Standardizing Responsive Images
@srcset
<picture>
https://github.com/scottjehl/picturefill


ⓒ2012 Akamai

Faster ForwardTM

logo
Responsive Images - Summary
.Smaller screens don’t benefit from high quality images
.Solution: Respond to screen size by reducing image quality
.Screen size detection usually done on client side
.But same technique can be used on server-side
.Examples: Sencha.io Src (Free), Akamai EIM (Commercial)


.Don’t forget CSS background images!
.Implementation is easier . with a few catches we’ll discuss later…


.Optional: Lazy-load higher quality images
.May defer them to onload
.May load them on demand





ⓒ2012 Akamai

Faster ForwardTM

logo
Step 4a: Banner Image Compression impact
Lossy
Compression:
No Retina
Image:
No Image
Optimization:


ⓒ2012 Akamai

Faster ForwardTM

logo
Step 4: Conclusions
.Mobile screen size & resolution are an opportunity & a threat
.Opportunity: Reduce bytes on smaller screens
.Threat: Using Retina images broadly


.Lossless Image Compression should be a given
.No trade-offs, just do it.


.Lossy Comp/Responsive Images avoid excessive quality
.Avoid images too big for a user to appreciate (on this device)
.Optionally load low quality images first, high quality images at onload


.Measure!!!
.Show your designers the UX impact of every image quality change





ⓒ2012 Akamai

Faster ForwardTM

logo
iPhone Optimization: Summary
ⓒ2012 Akamai

Faster ForwardTM

logo
Interim Summary - Actions

.Step 1: Improved Redirects
.Replaced JS Redirect with HTTP Redirect
.Merged redirect chains


.Step 2: Applied HTTP Compression
.Step 3: Consolidated JavaScript and CSS files
.Async’d JavaScript files too


.Step 4: Compressed Images
.Lossless Compression
.Lossy Compression
.No Retina Images





ⓒ2012 Akamai

Faster ForwardTM

logo
Interim Summary - Acceleration
Browsing www.slowes.org (including app redirect)


ⓒ2012 Akamai

Faster ForwardTM

logo
Step 5:
Android


ⓒ2012 Akamai

Faster ForwardTM

logo
Testing on Android
.No network Throttling on-device
.iOS had the same problem until a few weeks ago (with iOS 6)


.Alternative: Tether to laptop, throttle there
.Instructions on how to tether: http://pcapperf.appspot.com/
.Unfortunately, newer Androids can’t connect through laptop


.Realistic alternative: Test w/out throttling
.No 3G load times, but can find interesting data in Waterfall chart
.Use Real User Measurement to monitor real world numbers
.Use Mobitest for Android Browser, Remote Debugging for Chrome





ⓒ2012 Akamai

Faster ForwardTM

logo
Step 5: Android Test
Strange gap
(~200 ms)
# Connections
Limit
22 files
(vs. 14
on
iPhone)
Both Retina &
regular reqs
ⓒ2012 Akamai

Faster ForwardTM

logo
Duplicate Requests on Android . Tim Kadlec’s Test

http://timkadlec.com/2012/04/media-query-asset-downloading-results/
ⓒ2012 Akamai

Faster ForwardTM

logo
Duplicate Requests on Android . Slowe’s


ⓒ2012 Akamai

Faster ForwardTM

logo
Duplicate Requests - Solution
.One solution works (almost) everywhere…
.As long as you support media queries…





ⓒ2012 Akamai

Faster ForwardTM

logo
Step 5a: Eliminate Duplicate Requests - Results
ⓒ2012 Akamai

Faster ForwardTM

logo
Mind the Gap…
Strange gap
(~200 ms)

.Theories
.It’s the weak mobile device…
.But it doesn’t happen on iPhone!




.It’s the old Android browser…
.Harder to test Chrome for Android
.Let’s test with desktop Chrome




.Ok, let’s test on Chrome for Android…
.Using Remote Debugging
.https://developers.google.com/chrome/mobile/docs/debugging


.On Nexus 7 Tablet, No gap!








Android
Chrome

Chrome for Android
ⓒ2012 Akamai

Faster ForwardTM

logo
Problem: Translate3D
combined.css
“The translate3d() CSS function
moves the position of the
element in the 3D space. This
transformation is characterized
by a 3-dimension vector whose
coordinates define how much it
moves in each direction”
ⓒ2012 Akamai

Faster ForwardTM

logo
Step 5b: Remove translate3d calls

Chrome
.Results on iPhone, Nexus Tablet remain unchanged
.Issue seems to occur only when Hardware Acceleration is not supported




Gap a tiny bit
smaller (~170 ms)

Android
ⓒ2012 Akamai

Faster ForwardTM

logo
Step 5: Conclusions
.Not all (mobile) browsers/devices are the same
.Even if they’re WebKit based


.Don’t optimize things you’re not doing
.Especially if you’re using hacks to do the optimization


.Say it with me: MEASURE!!!
.In Mobile, you have to test on multiple devices
.Android devices vary by OS Version, OEM, device…
.Use analytics to find your top clients,





ⓒ2012 Akamai

Faster ForwardTM

logo
Use Analytics to determine YOUR top devices
Google Analytics
ⓒ2012 Akamai

Faster ForwardTM

logo
.Summary


Summary
ⓒ2012 Akamai

Faster ForwardTM

logo
What have we done?

.We optimized one home page in 5 steps:
.Step 1: Redirect Optimization
.Step 2: HTTP Optimization
.Step 3: JS/CSS Optimization
.Step 4: Image Optimization
.Step 5: Cross-Device Optimization


.We MEASURED during each step
.Assuming less-than-stellar network conditions


.We made the page ~5x faster



ⓒ2012 Akamai

Faster ForwardTM

logo
C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original HiRes.jpg
C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original

Manual FEO C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual optimize page.png
Optimized iStock_OldManFrustrated.jpg
C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original C:\\Users\\Guypo\\Documents\\My Dropbox\\Blaze\\Graphics\\individual original page.png
Original
ⓒ2012 Akamai

Faster ForwardTM

logo
Automated FEO

Web
Server
Slow,
Generic HTML http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg
http://upload.wikimedia.org/wikipedia/commons/6/6c/IOS.png
Optimized HTML


Pixie Dust
.Automates much of the optimization process
.Can’t fix everything, but can save a lot of effort


.Doesn’t replace performance awareness
.For example, measuring…




* Visual from
Patrick Meenan
ⓒ2012 Akamai

Faster ForwardTM

logo
Final Words
.A mobile page with few images != A fast page
.Mobile Site Common Pitfalls:
.Slow and repeated redirects
.Excess JavaScript & CSS


.Mobile Site Opportunities:
.Reduce image size: Smaller Screen
.Defer JS: Simpler content can be visually complete without it


.Measuring Is Critical
.Test on different devices and browsers
.Should be built into QA & Build System regression tests





Akamai Confidential

logo
PPT_Cover_16x9_BLACK_b2.png
logo
Guy Podjarny

@guypod

http://www.guypo.com/

Step By Step Mobile Optimization

Thank You!

Questions?
View All (819)
4G (2) 4G Evolution (1) 5G (36) 5g (1) 802.11 (1) 802.1X (1) ALTO (1) ANDSF (1) AT&T (2) Acceleration (1) Adobe HDS (3) Akamai (6) Amazon (3) Apple HLS (4) Authentication (1) BRAS (2) BT (1) Backbone (4) Backhaul (12) BitTorrent (1) Broadcasting (3) C-RAN (13) C-RAN/Fronthaul (12) CCN (4) CDN (52) CDNi (1) COLT (1) CORD (1) CPRI (2) Cache Control (1) Caching (5) Carrier Cloud (2) Carrier Ethernet (9) Channel Zapping (4) China Mobile (1) China Telecom (1) Cloud (10) Cloudfront (1) DASH (2) DCA (1) DHCP (3) DNS (1) DSA (1) Data Center (7) Dynamic Web Acceleration (1) EDGE (1) EPC (5) Energy (1) Ericsson (5) Ethernet (8) FEO (2) Fairness (1) Fronthaul (5) GiGAtopia (1) Gigabit Internet (2) Global CDN (1) Google (5) HLS (1) HTTP (1) HTTP Adaptive Streaming (18) HTTP Progressive Download (3) HTTP Streaming (1) HetNet (1) Hot-Lining (1) Hotspot 2.0 (2) Huawei (3) ICN (4) IP (1) IP Allocation (1) IP Routing (8) IPTV (15) Intel (1) Internet (1) Interoperability (2) IoST (1) IoT (14) KT (22) LG U+ (3) LTE (70) LTE MAC (1) LTE-A (2) Licensed CDN (1) M2M (3) MEC (3) MPLS (25) MVNO (1) Market (4) Metro Ethernet (7) Microsoft (2) Migration (1) Mobile (4) Mobile Backhaul (1) Mobile Broadcasting (1) Mobile CDN (2) Mobile IP (1) Mobile IPTV (3) Mobile Video (1) Mobile Web Perormance (1) Mobility (1) Multi-Screen (7) Multicast (7) NFC (1) NFV (2) NTT Docomo (2) Netflix (6) Network Protocol (31) Network Recovery (3) OAM (6) OTT (31) Ofcom (1) Offloading (2) OpenFlow (1) Operator CDN (14) Orange (1) P2P (4) PCC (1) Page Speed (1) Programmable (1) Protocol (7) Pseudowire (1) QoS (5) Router (1) SCAN (1) SD-WAN (1) SDN (15) SDN/NFV (15) SK Telecom (22) SON (1) SaMOG (1) Samsung (2) Security (6) Service Overlay (1) Silverlight (4) Small Cell (3) Smart Cell (1) Smart Grid (2) Smart Network (2) Supper Cell (1) Telefonica (1) Telstra (1) Terms (1) Traffic (2) Traffic Engineering (1) Transcoding (3) Transparent Cache (2) Transparent Caching (14) VLAN (2) VPLS (2) VPN (9) VRF (2) Vendor Product (2) Verizon (2) Video Optimization (4) Video Pacing (1) Video Streaming (14) Virtual Private Cloud (1) Virtualization (3) White Box (1) Wholesale CDN (4) Wi-Fi (13) WiBro(WiMAX) (4) Wireless Operator (5) YouTube (4) eMBMS (4) eNB (1) 망이용대가 (1) 망중립성 (1) 스마트 노드 (1)

 

 

     
         
     

 

     
     

넷매니아즈 회원 가입 하기

2020년 1월 현재 넷매니아즈 회원은 49,000+분입니다.

 

넷매니아즈 회원 가입을 하시면,

► 넷매니아즈 신규 컨텐츠 발행 소식 등의 정보를

   이메일 뉴스레터로 발송해드립니다.

► 넷매니아즈의 모든 컨텐츠를 pdf 파일로 다운로드

   받으실 수 있습니다. 

     
     

 

     
         
     

 

 

비밀번호 확인
코멘트 작성시 등록하신 비밀번호를 입력하여주세요.
비밀번호