diff options
Diffstat (limited to 'files/ko/web/guide/mobile')
| -rw-r--r-- | files/ko/web/guide/mobile/index.html | 77 | ||||
| -rw-r--r-- | files/ko/web/guide/mobile/separate_sites/index.html | 53 |
2 files changed, 130 insertions, 0 deletions
diff --git a/files/ko/web/guide/mobile/index.html b/files/ko/web/guide/mobile/index.html new file mode 100644 index 0000000000..8437bf49b5 --- /dev/null +++ b/files/ko/web/guide/mobile/index.html @@ -0,0 +1,77 @@ +--- +title: Mobile Web Development +slug: Web/Guide/Mobile +tags: + - Intermediate + - NeedsExample + - NeedsTranslation + - TopicStub +translation_of: Web/Guide/Mobile +--- +<p>이 페이지에는 모바일 기기에서도 잘 작동하는 웹 사이트를 디자인하기 위한 몇 가지의 방법과 노하우가 담겨 있습니다. Mozilla Firefox OS 프로젝트에 대한 정보를 찾고 계신다면, <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> 페이지를 참고하세요. 아니면 <a href="/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>에 대한 자세한 정보를 찾아보실 수도 있습니다.</p> + +<p>We've organized it into two sections, <a href="#Designing_for_mobile_devices">designing for mobile devices</a> and <a href="#Cross-browser_development">cross-browser compatibility</a>. Also see Jason Grlicky's guide to <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a> for web developers.</p> + +<h2 id="모바일_기기를_위한_디자인">모바일 기기를 위한 디자인</h2> + +<p>Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.</p> + +<h3 id="작은_화면에_대응하기">작은 화면에 대응하기</h3> + +<p><a href="/en-US/docs/Web/Guide/Responsive_design" title="/en-US/docs/Web/Guide/Responsive_design">Responsive Web Design</a> is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:</p> + +<ul> + <li>fluid CSS layouts, to make the page adapt smoothly as the browser window size changes</li> + <li>the use of <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">media queries</a> to conditionally include CSS rules appropriate for the device screen <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a> and <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a></li> +</ul> + +<p>The <a href="/en/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">viewport meta tag</a> instructs the browser to display your site at the appropriate scale for the user's device.</p> + +<h3 id="터치_스크린에_대응하기">터치 스크린에 대응하기</h3> + +<p>터치 스크린을 사용하려면 당신은 <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM 터치 이벤트</a>에 대해서 배워야 합니다. You won't be able to use the <a href="/En/CSS/:hover" title="En/CSS/:hover">CSS :hover</a> pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a>.</p> + +<p><a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> 미디어 쿼리를 이용해 터치를 사용할 수 있는 기기에서 다른 CSS 파일을 불러들일 수도 있습니다.</p> + +<h3 id="이미지_최적화하기">이미지 최적화하기</h3> + +<p>네트워크 속도가 느리거나 비용이 비싼 기기를 사용하는 사용자들을 위해, 디바이스 화면 크기와 해상도에 맞게 최적화된 이미지를 불러들이게 할 수 있습니다. You do this in CSS by querying for screen <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, and <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p> + +<p>You can also make use of CSS properties to implement visual effects like <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> and <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> without images.</p> + +<h3 id="모바일_API">모바일 API</h3> + +<p>Finally, you can take advantage of the new possibilities offered by mobile devices, such as <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> and <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p> + +<h2 id="크로스_브라우저_개발">크로스 브라우저 개발</h2> + +<h3 id="크로스_브라우저_코드_작성하기">크로스 브라우저 코드 작성하기</h3> + +<p>다양한 모바일 브라우저에서 잘 작동하는 웹 사이트를 만들기 위해서는 다음 내용을 알아두셔야 합니다. :</p> + +<ul> + <li>벤더별 접두어(vendor-prefix)가 사용된 CSS 프로퍼티 등 특정 브라우저에서만 작동하는 기능 사용을 배제할 것.</li> + <li>그러한 특정 기능을 사용해야 하는 경우, 다른 브라우저에서도 그러한 기능이 구현되어 있는지 확인할 것. 그러한 기능이 있다면, 그 브라우저에 대한 지원도 목표로 할 것.</li> + <li>다른 브라우저에서 그러한 특정 기능이 지원되지 않는다면, 그런 브라우저들을 위해 납득 가능한 대체재(fallback)를 만들어 둘 것.</li> +</ul> + +<p>For example, if you set a gradient as a background for some text using a vendor-prefixed property like <code>-webkit-linear-gradient</code>, it's best to include the other vendor-prefixed versions of the <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a> property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your <code>linear-gradient</code> rule.</p> + +<p>See this <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">list of Gecko-specific properties</a>, and this list of <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-specific properties</a>, and Peter Beverloo's <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a>.</p> + +<p>Using tools like <a class="external" href="http://csslint.net/">CSS Lint</a> can help find problems like this in code, and preprocessors like <a class="external" href="http://sass-lang.com/">SASS</a> and <a class="external" href="http://lesscss.org/">LESS</a> can help you to produce cross-browser code.</p> + +<h3 id="Take_care_with_user_agent_sniffing">Take care with user agent sniffing</h3> + +<p>It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.</p> + +<p>If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a particular browser's user agent string. See this <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guide to using the user agent string to determine device type</a>.</p> + +<h3 id="다양한_브라우저에서_테스트하기">다양한 브라우저에서 테스트하기</h3> + +<p>Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.</p> + +<ul> + <li>test mobile Safari on the iPhone using the <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a></li> + <li>test Opera and Firefox using the <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. See these additional instructions for <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">running Firefox for Android using the Android emulator</a>.</li> +</ul> diff --git a/files/ko/web/guide/mobile/separate_sites/index.html b/files/ko/web/guide/mobile/separate_sites/index.html new file mode 100644 index 0000000000..ba86ec0e9b --- /dev/null +++ b/files/ko/web/guide/mobile/separate_sites/index.html @@ -0,0 +1,53 @@ +--- +title: 모바일과 데스크톱용 개별 사이트 +slug: Web/Guide/Mobile/Separate_sites +tags: + - 모바일 + - 모바일웹 + - 웹개발 + - 접근방식 +translation_of: Web/Guide/Mobile/Separate_sites +--- +<p>모바일 웹 개발에 관한 "개별 사이트" 접근 방식은 모바일과 데스크톱 웹 사용자를 위해 서로 다른 사이트를 제작한다는 의미입니다. 이러한 접근 방식에는 긍정적인 측면과 부정적인 측면이 있습니다. </p> + +<h2 id="장점">장점</h2> + +<p>첫 번째 선택 사항은 가장 대중적입니다. 전화기에서 사용자들이 전형적인 m.example.com 식의 개별 모바일 사이트로 가도록 <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">사용자 에이전트 탐지(user-agent detection)</a>를 이용합니다. 간단히 말하면, 이 기술은 <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">바일 웹 개발에서의 3가지 목표</a>를 한 번에 해결하고자 서버 측(server-side) 로직을 사용합니다. 사용자의 브라우저가 전화기에 있는 것 같으면, 전화기에 맞춰 형식화되고 속도에 최적화된 모바일 콘텐츠를 제공합니다.</p> + +<p>개념적으로 단순한 이 방식은 기존에 있는 사이트에 추가하면 되는 가장 쉬운 선택 사항입니다. 특히 템플릿을 제공하는 CMS나 웹 애플리케이션을 이용하고 있다면 말이죠. 모바일에 특화된 콘텐츠와 스타일, 스크립트만 모바일 사용자에게 보내지기 때문에 이 방식은 여기에서 보여진 다른 선택 사항들 중에 가장 높은 성능을 제공하기도 합니다. 마지막으로 데스크톱과 모바일에서 완전히 차별화된 사용자 경험을 줄 수 있습니다. 결국에는 두 개의 다른 사이트니까요!</p> + +<h2 id="단점">단점</h2> + +<p>아쉽게도, 이 접근 방식에 문제점이 없지는 않습니다. 우선 첫째로, 모바일 사용자에게 보여주고 싶은 여러분의 사이트에서 모든 페이지에 대해 2가지 서로 다른 페이지를 유지 보수하게 됩니다. 만약 CMS를 사용 중이라면 이런 중복 작업을 최소화할 방법으로 사이트 템플릿을 정리할 수 있겠지요. 그렇더라도 모바일과 데스크톱 템플릿 간에 차이가 있는 때에는 코드에 복잡한 소스가 생길 가능성이 있습니다. 마찬가지로 프론트엔드 로직의 2세트에 대해 코드를 작성해야 하므로 새로운 사이트 피처(features)를 제공하는 시간이 길어집니다. </p> + +<p>그보다 더 중요한 것은 사용자 에이전트 탐지에 본질적인 오류가 있고 결코 미래를 대비하지 못한다는 사실입니다. 새로운 브라우저가 나올 때마다 그에 부응하는 알고리즘을 수정해야 합니다. 그리고 긍정 오류(false positives)는 특히나 두렵습니다. 우연히 데스크톱 사용자들에게 모바일 사이트를 제공하는 황당함을 범할 수 있기 때문입니다.</p> + +<h2 id="이_선택이_옳은_경우">이 선택이 옳은 경우</h2> + +<p><img alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png" style="float: right;">우선 목표 대상(target audience)에 오래되거나 저가(low-end) <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">피처폰</a>을 사용하는 사용자들을 포함한다면, 필히 이 전략을 <a class="external" href="http://www.passani.it/gap/#adaptation" title="Mobile Adaptation">어느 정도</a> 이용해야 한다는 데 주목할 가치가 있습니다. 이는 일부 피처폰에 장착된 기본 브라우저에서 데스크톱용 대상인 웹사이트를 코딩하는데 쓰인 동일한 마크업을 지원하지 않기 때문입니다. 그대신<a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a>이나 더 오래된 <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a> 형식을 알고 있습니다.</p> + +<p>이 요인 외에 이 전략이 다른 방식보다 더 빛을 발하는 경우가 하나 있습니다. 모바일 기기에서 사용자에게 제공하고 싶은 기능이 데스크톱에서의 기능과 완전히 다르다면, 개별 사이트를 이용하는 것이 <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">가장 실용적인 선택</a>이 될 수 있습니다. 전혀 서로 다른 HTML과 자바스크립트, CSS를 전화기와 PC로 전송하는 선택 사항이기 때문이지요.</p> + +<p>이 접근 방식을 강제로 써야 할 수 있는 또 다른 경우는, 이유가 무엇이든지, 기존에 있는 데스크톱 사이트를 수정하지 못해서 100% 개별 모바일 사이트가 필요할 때입니다. 이상적이진 않지만, 최소한 이런 선택 사항은 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p><a class="external" href="http://m.facebook.com/">Facebook</a>과 <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>를 포함해 여러분이 세상에서 보는 주요 웹 애플리케이션 중 대다수가 이 경로를 택했습니다. 실은 모질라는 <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO)와 <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO)의 모바일 버전에도 이 전략을 선택했지요. 만약 여러분이 실제로 적용된 이 접근 방식의 예제 배후에 있는 소스 코드를 보고 싶다면, 맘 편히 <a class="link-https" href="https://github.com/jbalogh/zamboni/">github repository for AMO</a> or <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>를 확인해 보세요.</p> + +<h2 id="모바일_웹_개발에_관한_접근_방식">모바일 웹 개발에 관한 접근 방식</h2> + +<p>모바일 플랫폼 개발에 관한 배경과 다른 접근 방식을 다룬 아래 글들을 참조해 보세요. </p> + +<ul> + <li><a href="/en/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">모바일 친화적(mobile-friendliness)이란 무엇인가?</a></li> + <li><a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">반응형 디자인</a></li> + <li><a href="/en-US/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">하이브리드 방식</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="원문에_관한_정보">원문에 관한 정보</h3> + +<p>이 글은 본래 제이슨 그를리키(Jason Grlicky)가 작성한 "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">모바일 웹 개발로의 접근 방식 2부 – 개별 사이트</a>"로 모질라 웹데브(Mozilla Webdev) 블로그에 2011년 5월 13일자로 게재되었습니다.</p> +</div> + +<p> </p> |