Ensuring Beautiful Rich Links

더 많은 비디오

Ensuring Beautiful Rich Links

Website links received in Messages can be made vastly more inviting than a simple text URL. By providing small amounts of metadata in your web pages, links to your website can include rich content such as icons, images and even video. Learn how visitors to your website can share links that look as good as your website.

리소스
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC21
- Design for Safari 15
WWDC19
- Embedding and Sharing Visually Rich Links
다운로드

Hi, I'm Tim Horton from the Safari and WebKit team, and today I'm going to show you how easy it is to ensure that users get beautiful, rich presentations when sharing links to your website in Messages and elsewhere on the system.
Imagine that a user of your site is reading about your latest new product, and wants to share a link to it with their friend. They'll use the Share Sheet in Safari and send it via Messages.
On the other side, their friend will see a very inviting link to tap on.
I'm going to walk you through the straightforward steps you need to take to get your link looking just as good as these. First, we'll talk about customizing the title. Then, about adding helpful icons. And then large images, to make our links really pop. Then we'll go a step beyond the links we've seen so far and add autoplaying inline video. And finally, we'll finish up with a few other resources you can use to help improve your site. So, let's jump right in by customizing the title of our link. You likely already have an HTML tag </span></span><span class="sentence"><span data-start="69.0">in the <head> of your pages, and that will work just fine. </span></span><span class="sentence"><span data-start="74.0">There is a little bit of unnecessary duplication </span></span><span class="sentence"><span data-start="76.0">between the title and the domain, though. </span></span><span class="sentence"><span data-start="78.0">We could change the page's title, </span></span><span class="sentence"><span data-start="80.0">but in this case, we still want the window title in Safari </span></span><span class="sentence"><span data-start="82.0">to have the Apple suffix. </span></span><span class="sentence"><span data-start="85.0">So instead, we can add another tag to our page's <head>. </span></span><span class="sentence"><span data-start="89.0">This is a <meta> tag, with the name "og:title". </span></span><span class="sentence"><span data-start="93.0">The "og" there stands for "Open Graph," </span></span><span class="sentence"><span data-start="96.0">which is the standard that specifies </span></span><span class="sentence"><span data-start="97.0">the names of these tags. </span></span><span class="sentence"><span data-start="99.0">The web browser will still use the <title> tag </span></span><span class="sentence"><span data-start="101.0">for the window title, </span></span><span class="sentence"><span data-start="103.0">but the rich link will use the "og:title" instead. </span></span><span class="sentence"><span data-start="108.0">Now we have a nice title with no redundancy. </span></span><span class="sentence"><span data-start="112.0">It's best to keep titles unique and informative </span></span><span class="sentence"><span data-start="114.0">so that rich links contain at least as much context </span></span><span class="sentence"><span data-start="116.0">as the URL would have provided. </span></span><span class="sentence"><span data-start="119.0">You should also avoid </span></span><span class="sentence"><span data-start="120.0">duplicating the site name in the title, </span></span><span class="sentence"><span data-start="122.0">since the domain name is also provided </span></span><span class="sentence"><span data-start="124.0">on the second line of the link. </span></span><span class="sentence"><span data-start="126.0">It's important to keep in mind </span></span><span class="sentence"><span data-start="127.0">that JavaScript does not run when creating rich links, </span></span><span class="sentence"><span data-start="130.0">so the Open Graph tags </span></span><span class="sentence"><span data-start="132.0">need to be in the source of the page </span></span><span class="sentence"><span data-start="134.0">and cannot be generated dynamically. </span></span><span class="sentence"><span data-start="137.0">Next, we can spruce up our link a bit </span></span><span class="sentence"><span data-start="139.0">by adding an icon. </span></span><span class="sentence"><span data-start="142.0">There are many ways to specify icons, </span></span><span class="sentence"><span data-start="144.0">from favicons to Apple touch icons, </span></span><span class="sentence"><span data-start="146.0">and it's likely your site already uses one of them. </span></span><span class="sentence"><span data-start="150.0">If it doesn't, the best way to add an icon </span></span><span class="sentence"><span data-start="152.0">is by adding a "link rel equals icon" tag </span></span><span class="sentence"><span data-start="155.0">to your site's <head>. </span></span><span class="sentence"><span data-start="158.0">And this is what our link looks like now. </span></span><span class="sentence"><span data-start="160.0">For some pages, this is all you need. </span></span><span class="sentence"><span data-start="162.0">If a large hero image doesn't make sense, </span></span><span class="sentence"><span data-start="164.0">you can stop here. </span></span><span class="sentence"><span data-start="167.0">But in our case, we have a nice big image </span></span><span class="sentence"><span data-start="168.0">that is specific to this page, </span></span><span class="sentence"><span data-start="170.0">so let's continue on and make our link even nicer. </span></span><span class="sentence"><span data-start="175.0">To provide an image for a rich link, </span></span><span class="sentence"><span data-start="177.0">we can add another Open Graph meta tag to our <head> -- </span></span><span class="sentence"><span data-start="179.0">this time, "og:image". </span></span><span class="sentence"><span data-start="182.0">The content is just the URL of the image. </span></span><span class="sentence"><span data-start="186.0">Now our link looks just like the real one on apple.com! </span></span><span class="sentence"><span data-start="190.0">You may have noticed that we don't show the icon </span></span><span class="sentence"><span data-start="191.0">if we have an image. </span></span><span class="sentence"><span data-start="193.0">It's still a good idea to specify both, </span></span><span class="sentence"><span data-start="195.0">because there are times when we'll fall back to the icon -- </span></span><span class="sentence"><span data-start="198.0">for example, in cases of poor network connectivity.</p><p></span></span><span class="sentence"><span data-start="203.0">You should only use "og:image" for interesting images </span></span><span class="sentence"><span data-start="205.0">that are specific to the particular page. </span></span><span class="sentence"><span data-start="208.0">Generic fallback images -- </span></span><span class="sentence"><span data-start="209.0">like your company's logo or a user's avatar -- </span></span><span class="sentence"><span data-start="212.0">should be icons instead. </span></span><span class="sentence"><span data-start="215.0">Images should not include text. </span></span><span class="sentence"><span data-start="217.0">Rich links are presented at many sizes, across many devices. </span></span><span class="sentence"><span data-start="221.0">The same image will be shown all the way from Apple Watch </span></span><span class="sentence"><span data-start="223.0">to iPad Pro, </span></span><span class="sentence"><span data-start="224.0">and text in an image will not scale well </span></span><span class="sentence"><span data-start="226.0">across all of those. </span></span><span class="sentence"><span data-start="228.0">And as I mentioned before, you should still specify an icon </span></span><span class="sentence"><span data-start="231.0">even if you also have an image.</p><p></span></span><span class="sentence"><span data-start="234.0">Now we'll take our link a step beyond images </span></span><span class="sentence"><span data-start="237.0">and introduce an autoplaying, autolooping video. </span></span><span class="sentence"><span data-start="241.0">All that's needed for inline video </span></span><span class="sentence"><span data-start="243.0">is yet another Open Graph tag. </span></span><span class="sentence"><span data-start="246.0">This time, "og:video". </span></span><span class="sentence"><span data-start="248.0">The URL should point to a small, downloadable video file </span></span><span class="sentence"><span data-start="252.0">of any format that iOS and macOS can natively play.</p><p></span></span><span class="sentence"><span data-start="257.0">As you see, the video plays inline. </span></span><span class="sentence"><span data-start="260.0">If the video contains audio, </span></span><span class="sentence"><span data-start="261.0">it starts out muted but with the option to unmute it. </span></span><span class="sentence"><span data-start="266.0">If you can't host a video file yourself, </span></span><span class="sentence"><span data-start="268.0">you can instead point your og:video at a YouTube embed URL. </span></span><span class="sentence"><span data-start="273.0">YouTube videos won't autoplay, </span></span><span class="sentence"><span data-start="275.0">but the user can tap to play them. </span></span><span class="sentence"><span data-start="277.0">It's important to note that this is specific to YouTube; </span></span><span class="sentence"><span data-start="280.0">other embedded players will not work.</p><p></span></span><span class="sentence"><span data-start="284.0">When adding video metadata to your site, </span></span><span class="sentence"><span data-start="287.0">it's important to keep the size in mind. </span></span><span class="sentence"><span data-start="289.0">The icon, image, and video together </span></span><span class="sentence"><span data-start="292.0">are limited to 10 megabytes, </span></span><span class="sentence"><span data-start="294.0">and the smaller they are, the faster the link will appear </span></span><span class="sentence"><span data-start="296.0">and the happier your users will be. </span></span><span class="sentence"><span data-start="300.0">You should use directly referenced video files </span></span><span class="sentence"><span data-start="302.0">for the ideal autoplaying behavior. </span></span><span class="sentence"><span data-start="305.0">And like I said earlier, except for YouTube, </span></span><span class="sentence"><span data-start="307.0">embedded video that requires HTML or plug-ins </span></span><span class="sentence"><span data-start="310.0">is not supported. </span></span><span class="sentence"><span data-start="313.0">I hope you'll take this information </span></span><span class="sentence"><span data-start="314.0">and go and add Open Graph metadata to your website </span></span><span class="sentence"><span data-start="317.0">to make sure that when your users share links to it, </span></span><span class="sentence"><span data-start="319.0">they get the best possible experience. </span></span><span class="sentence"><span data-start="321.0">For more information and additional resources about </span></span><span class="sentence"><span data-start="323.0">what we've talked about, </span></span><span class="sentence"><span data-start="325.0">use the links in the Resources section </span></span><span class="sentence"><span data-start="327.0">associated with this video.</span></span></p> </section> </li>  <li class="supplement sample-code" data-supplement-id="sample-code"> <section> <ul class="no-bullet padding-top-small margin-bottom"> </ul> </section> </li>  <li class="supplement search active" data-supplement-id="search"> <section class="transcript-results-summary"> <p class="message smaller lighter"></p> <p class="instructions smaller lighter text-center">찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.</p> <p class="error smaller lighter italic text-center" style="display:none;">쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.</p> </section>  <ul class="transcript-results row"> </ul> </li> </ul> </section> </section> </section> <input id="analytics-meta" type="hidden" data-event-name="Tech Talks" data-event-id="tech-talks-205" data-session-id="205" data-video-name="Ensuring Beautiful Rich Links" data-session-response-id=""> </main> <link rel="stylesheet" href="/assets/styles/footer.dist.css"> <footer id="footer" class="footer" role="contentinfo" aria-labelledby="footer-label"> <div class="footer-content"> <h2 class="footer-label" id="footer-label">Developer Footer</h2> <developer-breadcrumbs> <li class="footer-breadcrumbs-item"><a href="/videos/">비디오</a></li> <li class="footer-breadcrumbs-item"><a href="/videos/tech-talks/">Tech Talks</a></li> <li class="footer-breadcrumbs-item">Ensuring Beautiful Rich Links</li> </developer-breadcrumbs> <nav class="footer-directory" aria-label="Apple Developer 디렉토리" role="navigation" lang="ko-KR">  <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-platform" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-platform"> <h3 class="footer-directory-column-section-title">플랫폼</h3> </label> <a href="#footer-directory-column-section-state-platform" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/ios/">iOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/ipados/">iPadOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/macos/">macOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/tvos/">tvOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/visionos/">visionOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/watchos/">watchOS</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-tools" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-tools"> <h3 class="footer-directory-column-section-title">도구</h3> </label> <a href="#footer-directory-column-section-state-tools" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/swift/">Swift</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/xcode/swiftui/">SwiftUI</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/swift-playgrounds/">Swift Playgrounds</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/testflight/">TestFlight</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/xcode/">Xcode</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/xcode-cloud/">Xcode Cloud</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/sf-symbols/">SF Symbols</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-topics" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-topics"> <h3 class="footer-directory-column-section-title">주제 및 기술</h3> </label> <a href="#footer-directory-column-section-state-topics" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/accessibility/">손쉬운 사용</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/accessories/">액세서리</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/app-extensions/">앱 확장 프로그램</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/app-store/">App Store</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/audio/">오디오 및 비디오(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/augmented-reality/">증강 현실</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/design/">디자인</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/distribute/">배포</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/education/">교육</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/fonts/">서체(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/games/">게임</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/health-fitness/">건강 및 피트니스</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/in-app-purchase/">앱 내 구입</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/localization/">현지화</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/maps/">지도 및 위치</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/machine-learning/">머신 러닝</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://opensource.apple.com">오픈 소스(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/security/">보안</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/safari/">Safari 및 웹(영문)</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-resources" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-resources"> <h3 class="footer-directory-column-section-title">리소스 및 지원</h3> </label> <a href="#footer-directory-column-section-state-resources" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/documentation/">문서(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/learn/">튜토리얼</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/download/">다운로드(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/forums/">포럼(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/videos/">비디오</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-support" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-support"> <h3 class="footer-directory-column-section-title">지원</h3> </label> <a href="#footer-directory-column-section-state-support" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/support/articles/">지원 문서</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/contact/">문의하기</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/bug-reporting/">버그 보고</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/system-status/">시스템 상태(영문)</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-account" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-account"> <h3 class="footer-directory-column-section-title">계정</h3> </label> <a href="#footer-directory-column-section-state-account" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/">Apple Developer</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://appstoreconnect.apple.com/">App Store Connect</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/ios/certificate/">인증서, 식별자 및 프로파일(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://feedbackassistant.apple.com/">피드백 지원<span class="loc-en-only"></span></a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-programs" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-programs"> <h3 class="footer-directory-column-section-title">프로그램 및 이벤트</h3> </label> <a href="#footer-directory-column-section-state-programs" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/programs/">Apple Developer Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/programs/enterprise/">Apple Developer Enterprise Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/app-store/small-business-program/">App Store Small Business Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://mfi.apple.com/">MFi Program(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/news-partner/">News Partner Program(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/video-partner/">Video Partner Program(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security-bounty/">Security Bounty Program(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/security-research-device/">Security Research Device Program(영문)</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-events" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-events"> <h3 class="footer-directory-column-section-title">이벤트</h3> </label> <a href="#footer-directory-column-section-state-events" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">메뉴 열기</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">메뉴 닫기</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/events/">Apple과의 만남</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/events/developer-centers/">Apple Developer Center</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/app-store-awards/">App Store 어워드(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/design/awards/">Apple 디자인 어워드</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/academies/">Apple Developer Academy(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/entrepreneur-camp/">Entrepreneur Camp(영문)</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/kr/wwdc24/">WWDC</a></li> </ul> </div> </div>  </nav> <section class="footer-mini" vocab="http://schema.org/" typeof="Organization" lang="ko-KR"> <div class="footer-mini-news"> <div class="copy"> <a href="https://apps.apple.com/kr/app/apple-developer/id640199958">Apple Developer 앱</a> 받기 </div> <div class="content"> <div class="color-scheme-toggle" role="radiogroup" tabindex="0" aria-label="Select a color scheme preference"> <label data-color-scheme-option="light"> <input type="radio" value="light" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Light</div> </label> <label data-color-scheme-option="dark"> <input type="radio" value="dark" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Dark</div> </label> <label data-color-scheme-option="auto"> <input type="radio" value="auto" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Auto</div> </label> </div> <script async src="/assets/scripts/color-scheme-toggle.js"></script> </div> </div> <link rel="stylesheet" href="/assets/styles/language-dropdown.css?17182448067"> <div class="language-dropdown dropdown-container legacy-form hidden"> <select class="dropdown" aria-label="Language Dropdown"></select> <span class="dropdown-icon icon icon-chevrondown" aria-hidden="true"></span> </div> <script src="/assets/scripts/language-dropdown.js?17182448067"></script> <link rel="stylesheet" href="/assets/styles/language-dropdown.css"> <div class="footer-mini-legal"> <div class="footer-mini-legal-copyright">Copyright © 2024 <a href="https://www.apple.com/kr/">Apple Inc.</a> 모든 권리 보유.</div> <div class="footer-mini-legal-links"> <a class="footer-mini-legal-link" href="https://www.apple.com/kr/legal/internet-services/terms/site.html" class="first">약관</a> <a class="footer-mini-legal-link" href="https://www.apple.com/kr/legal/privacy/">개인정보 처리방침</a> <a class="footer-mini-legal-link" href="/kr/support/terms/">계약 및 지침</a> </div> </div> </section> </div> </footer> <script src="/assets/scripts/params.js"></script> <script src="/assets/scripts/watchable.js"></script> <script src="/assets/scripts/timeout.js"></script> <script src="/videos/scripts/play/play.js?04012409282"></script> <script src="/videos/scripts/hls/rtc.min.js?59182451067"></script> <script src="/videos/scripts/hls/hls.min.js?59182451067"></script> </body> </html>

리소스

관련 비디오

WWDC21

WWDC19