View in English

  • 메뉴 열기 메뉴 닫기
  • Apple Developer
검색
검색 닫기
  • Apple Developer
  • 뉴스
  • 둘러보기
  • 디자인
  • 개발
  • 배포
  • 지원
  • 계정
페이지에서만 검색

빠른 링크

5 빠른 링크

비디오

메뉴 열기 메뉴 닫기
  • 컬렉션
  • 주제
  • 전체 비디오
  • 소개

더 많은 비디오

  • 소개
  • 요약
  • 자막 전문
  • SF Symbols 7의 새로운 기능

    Apple의 아이콘 라이브러리인 SF Symbols의 최신 업데이트를 확인하세요. 손으로 직접 그린 획의 유기적인 흐름을 기호가 모방할 수 있도록 하는 새로운 애니메이션 시스템인 Draw와 강도 또는 진전을 표현하는 데 사용할 수 있는 Variable Draw를 소개합니다. 기호에 차원감과 흥미로운 시각적 요소를 더하는 Gradients와 관련 기호 간에 더욱 긴밀한 연속성을 제공하는 매직 대치의 개선 사항을 확인하세요. 그리고 이러한 기능을 미리 보고 자신의 앱에 통합하는 방법을 학습할 수 있습니다.

    챕터

    • 0:00 - 서론
    • 2:19 - Draw
    • 6:02 - 매직 대치
    • 7:01 - Gradients
    • 8:02 - 맞춤형 기호
    • 20:52 - 새 API

    리소스

      • HD 비디오
      • SD 비디오

    관련 비디오

    WWDC24

    • SF Symbols 6의 새로운 기능
  • 비디오 검색…

    안녕하세요, Apple Design Team의 Kelsey입니다 SF Symbols의 새 소식을 알려 드리게 되어 기쁩니다 아직 시청 전이라면 작년 WWDC 세션인 'SF Symbols 6의 새로운 기능'을 시청하세요 새 기능을 파악 및 준비할 때 매우 유용한 자료입니다 시작 전, 기호의 디자인 및 구성을 잠깐 살펴보죠 올해 새로워진 기능을 알아보는 중요한 단계예요 각 기호는 세심하게 디자인되고 제작되어서 누구나 바로 알아볼 수 있는 아이디어나 감정을 전달합니다 그리고 나서 이러한 아이디어는 하나의 벡터 점에서 시작해 먼저 형태를 갖추고 연속적인 경로를 만들면서 디자인으로 바뀌게 됩니다 각 벡터 점과 곡선을 통해 선은 의도적으로 조정되어 형태의 특징과 윤곽을 분명히 나타냅니다 모든 곡선과 각은 의도적이고 균형 잡혀 있으며 시각적으로 의미를 전달해야 합니다

    화살표를 살펴보겠습니다 기호는 단순히 윤곽선을 표시한 경로만은 아닙니다 훌륭한 기호의 요건인 디테일을 담을 수 없기 때문이죠 대신, 윤곽선이 세밀한 형태로 구성되어서 비율, 여백, 시각적 무게감을 정교하게 조정할 수 있습니다 그러면 의도적으로 명확하고, 일관되며 더욱 세련된 모습을 갖추게 됩니다 몇 가지 형태는 서로 반대 방향으로 향하는 두 개의 다른 경로로 만들어져 개별 경로에서 정교하게 다듬을 수 있습니다 이 요소는 애니메이션 방식을 정의하는 데 중요합니다 이제 올해 선보일 새로운 기능을 살펴보면서 디테일이 최신 경험에 어떻게 반영되었는지 알아보겠습니다 먼저 Draw입니다 새로운 애니메이션과 렌더링 프리셋이 있죠 그 다음으로는 매직 대치의 업데이트입니다 올해는 이 기능을 한층 더 강화했습니다 그리고 그라디언트입니다 맞춤형 기호의 주석 처리를 자세히 살펴보기 전 기호와 렌더링 모드에 적용된 방법을 살펴보죠 끝으로 API 업데이트 내용을 소개하며 마무리하겠습니다 다루어야 할 내용이 많으니 바로 시작하겠습니다 드디어 SF Symbols에 Draw가 도입됩니다 손글씨에서 영감을 받은 새로운 기능을 사용하면 정해진 경로를 따라 기호를 생동감 있게 그릴 수 있습니다

    Draw와 함께 두 가지 새 애니메이션 프리셋이 도입됐죠 Draw On은 애니메이션으로 기호를 화면에 표시하고 Draw Off는 애니메이션으로 기호를 화면에서 없애죠 이러한 프리셋은 기호의 레이어 구조를 활용하고 경험으로 통합되어 애니메이션을 통해 중요한 순간을 강조할 수 있습니다 두 기능은 기존의 재생 옵션을 지원합니다 각 경로를 시차를 두고 순차적으로 그리는 기본 옵션인 By Layer처럼 말이죠 더욱 빠르고 즉각적인 효과가 필요하면 모든 레이어를 동시에 그려 각 그리기 경로가 동시에 시작하고 끝이 나는 Whole Symbol로 애니메이션화할 수 있습니다 또는 각 레이어를 하나씩 그려 이전 레이어를 그릴 때까지 기다렸다 다음 레이어를 시작하는 individually로 재생 옵션을 활용할 수도 있죠 의도를 보이고 움직일 때마다 주의를 끌고 싶으면 이 옵션을 활용해 보세요 Draw를 유연하게 설계하여 각 기호마다 그리기 방식이 정의되도록 했습니다 바람은 움직임 전달을 위해 왼쪽에서 오른쪽으로 아랍어 문자는 오른쪽에서 왼쪽으로 그려져 쓰는 방향이 일치됩니다 또한 일부 기호는 가운데서부터 그려질 수 있습니다 이런 대칭 기호처럼요 그리기 방향을 이해하면 당신만의 맞춤형 기호를 주석 처리할 때 도움이 됩니다 이 내용은 세션 후반에 다루기로 하죠 어떤 기호는 화살표와 같이 두 가지 모양이 하나로 동작하는 복잡한 구조로 이루어져 있습니다 Draw는 이렇게 구성된 모양도 지원하여 화살촉이 경로를 따라 움직일 수 있게 합니다 이 움직임은 기호의 의미를 강화하고 앱을 생동감 있게 만드는 데 도움이 됩니다 Draw 소개를 마쳤으니 SF Symbols 앱에서 새로운 애니메이션을 미리 보겠습니다 Draw On, Draw Off 모두 속성의 애니메이션 목록에 추가됐죠 Draw On을 선택해 시작하겠습니다 앞에서 다루었던 사용 가능한 세 가지 재생 옵션이 표시되죠 기존 애니메이션 프리셋처럼 앱에서 미리 볼 수 있습니다 Draw Off는 거의 동일하고 역방향 스위치만 추가됐습니다 경로가 그리기 방향에 따라 기존 움직임을 지울지 끝에서부터 역방향으로 지울지를 표시합니다 Draw는 애니메이션으로 생동감 있는 앱을 만드는 좋은 방법이지만 진행 상황 전달도 가능합니다 가변 색상에 익숙한 경우라면 일부 기호가 색상으로 강도나 진행 상황을 전달하도록 가변 렌더링을 지원한다는 사실을 잘 아실 겁니다 더 정확한 표현을 위해 렌더링 프리셋에 가변 그리기를 도입했죠 이 기능은 참여 레이어에서 새 그리기 주석을 활용합니다

    경로를 특정 비율로 렌더링하여 불투명도가 줄어든 레이어 위에 표시합니다 다운로드, 온도 변화 또는 요가 세션 완료 진행 상태를 시각화할 수 있는 매우 유용한 방법입니다

    SF Symbols 앱으로 다시 돌아가서 렌더링 속성에 대한 업데이트 내용을 살펴보겠습니다 이제 가변 그리기를 미리 볼 수 있습니다 새 그리기 옵션이 포함되도록 기존 가변 렌더링 선택기를 개선했습니다

    그리기를 선택하면 참여 그리기 레이어는 가변 색상처럼 가변 렌더링에 반응합니다

    기호는 가변 색상과 그리기를 모두 지원하도록 선택할 수 있지만 렌더링 시에는 둘 중 하나만 선택할 수 있습니다 이러한 경우에는 시스템이 선호하는 가변 렌더링 모드를 적용하는 기본 옵션을 사용할 수 있습니다 새 Draw 애니메이션과 함께 매직 대치를 개선하여 관련 기호 사이를 애니메이션화할 때 높은 연속성도 제공합니다 매직 대치는 이제 일치하는 인클로저를 인식하여 두 상태 간의 원활한 전환을 제공합니다 두 기호가 같은 인클로저를 공유하는 경우 시스템은 이를 보존하는 동시에 다른 레이어를 교체합니다 또한 지원되는 기호에선 매직 대치에 Draw를 도입해 나가는 기호에는 Draw Off를 들어오는 기호에는 Draw On을 사용했죠 시스템은 인클로저 일치와 결합되어 참여 기호에 이러한 새 기능을 혼합 또는 일치시켜 가장 완벽하고 다양한 전환을 제공합니다 이러한 개선 사항은 애니메이션 속성의 기존 매직 대치 프리셋을 통해 미리 볼 수 있습니다 SF Symbols 앱을 처음 사용하는 경우에는 다른 프리셋과 함께 애니메이션 선택기에서 찾을 수 있습니다 그라디언트는 일반적으로 깊이, 입체감, 시각적 관심을 그리기에 추가하는 데 사용되죠 올해 그라디언트가 SF Symbols에 도입됐습니다 기호에 적용되면 그라디언트는 단색으로 표시되지 않는 조명의 감각 생성에 도움을 줍니다 SF Symbols의 새로운 그라디언트 렌더링은 단일 소스 색상에서 자연스러운 선형 그라디언트를 생성하며 시스템 색상과 맞춤형 색상 모두에서 사용할 수 있습니다 이러한 기능은 모든 렌더링 모드에서 사용할 수 있고 맞춤형 기호에도 적용될 수 있습니다

    그라디언트는 모든 비율과 크기에서 뛰어나게 렌더링되지만 대형 인스턴스에서 더욱 돋보입니다 기호의 깊이와 입체감에 대한 관심을 끌고 싶은 위치에 그라디언트를 활용하세요 SF Symbols 앱에서 이 그라디언트를 미리 보죠 속성의 렌더링 모드 아래에 새롭게 추가된 스위치를 사용하여 켤 수 있습니다 그라디언트를 미리 볼 때 색상 그라디언트는 선택된 옵션을 사용하여 모든 렌더링 모드에 적용됩니다 시스템 기호에서 작동되는 새 기능을 모두 봤으니 새 기능 활용을 위해 맞춤형 기호를 추적 처리하는 방법을 알아보겠습니다 여기선 시스템 기호에 주석 처리하는 법을 보여 줍니다 직접 해보고 싶으면 언제든지 맞춤형 기호로 복제하고 기존 안내 지점을 삭제하고 함께 주석을 달 수 있습니다 그리기 주석이 어떻게 작동하는지 이해하기 위해서는 기호가 그려지는 디테일한 방법을 기억해야 합니다 여기에서 기호는 두 개의 별도 경로를 통해 구성됩니다 scribble.variable은 가변 너비로 그려지죠 경로에 선을 긋는 것만으론 애니메이션을 만들 수 없습니다 그럼 Draw는 실제로 어떻게 작동할까요?

    애니메이션 그리기는 안내 지점에 의존해 원하는 그리기 경로를 따라 배치됩니다 이름처럼 이 지점은 정의된 라우트로 경로를 안내합니다 그리기 경로를 올바르게 계산하려면 경로에는 최소 두 개의 안내 지점이 포함되어야 합니다 시작 지점은 펼쳐진 원으로 표시되고 종료 지점은 닫힌 원으로 표시됩니다 경로가 더 복잡해지면 시작과 끝의 틈을 채우도록 추가 안내 지점이 필요하거나, 그리기 경로를 표시하거나, 경로를 따라 화살촉을 안내할 수 있죠 일부 기호에는 시스템이 그리기 경로를 올바르게 계산하도록 특수 안내 지점이 필요할 수 있습니다 여러 하위 경로는 시작과 종료 지점을 공유할 수 있지만 경로의 급격한 커브는 모서리 지점으로 표시되어야 합니다 다룰 내용이 많으니 SF Symbols 앱의 실제 기호 주석 처리 방법을 살펴보겠습니다 line.diagonal로 시작하죠 앱 툴바의 사용 가능한 제어 기능으로 갤러리 뷰로 전환했습니다 애니메이션 목록에서 Draw On 또는 Draw Off 선택 시 캔버스 상단에 Draw 툴바가 표시됩니다 가장 왼쪽 버튼을 선택하면 안내 지점 모드로 들어가 캔버스에서 움직이면 배치 미리 보기가 표시됩니다

    위치에 만족하면 한 번의 클릭으로 안내 지점을 배치할 수 있습니다 그러면 다음 지점을 배치할 준비가 됩니다 배치한 첫 번째 안내 지점이 자동으로 시작 지점이 된다는 것을 알 수 있습니다 두 번째 안내 지점 배치 시 시스템은 종료 지점과 그리기 방향을 결정하고 화살표로 표시됩니다

    이제 애니메이션을 시도할 준비가 되었습니다

    선은 정의된 경로를 따라 위쪽으로 그려집니다

    하지만 좀 더 복잡한 기호가 있다면 어떻게 될까요? 손글씨 곡선은 꽤 많고 각 곡선에서 애니메이션을 안내하려면 경로와 함께 더 많은 안내 지점을 배치해야 합니다 SF Symbols 앱에서 이 주석을 재현하죠

    이미 몇 개의 안내 지점을 배치했지만 급격한 곡선 주변의 틈을 채워야 합니다 더욱 복잡한 모양을 통해 경로가 애니메이션화되도록 여기서는 정확해야 합니다 확인해 보겠습니다

    완벽하네요 이제 애니메이션이 곡선을 잘 처리합니다 지금까지는 단일 경로로 기호를 주석 처리했습니다 그러나 두 개 이상의 경로를 그리는 기호가 있다면요? 기호의 각 경로는 동일한 규칙으로 특정한 그리기 경로와 방향을 정의할 수 있습니다 저와 함께 주석 처리하는 중이시라면 line.3.horizontal로 이동하여 시도해 보세요

    다양한 방법으로 이 기호를 주석 처리할 수 있지만 각 레이어를 선택하여 왼쪽에서 오른쪽으로 그리도록 주석 처리하는 것부터 시작하겠습니다

    괜찮지만 중간선을 반대로 그려야 할지도 모르겠습니다 경로를 따라 기존 장소 안내 지점을 드래그할 수 있죠 시작 지점을 기존의 다른 안내 지점으로 드래그하면 화살표 방향이 바뀌어 경로가 이제 반대 방향으로 그려진다는 것을 알 수 있죠 단방향으로 그려지는 기호에 매우 적합하지만 일부 기호는 중심을 기준으로 방향성이 암시됩니다 이러한 기호는 주석 처리로 양방향으로 그릴 수 있습니다 wave.3.up은 유용한 사용 사례입니다 경로의 중심에서 시작 지점 배치를 시작한 다음 시작 지점 양쪽에 추가 안내 지점을 배치할 수 있죠 시스템은 자동으로 양방향성을 인식하고 시작 지점 양쪽에 화살표로 양방향성을 표시합니다 대칭 효과를 보장하려면 레이어의 모든 시작 지점이 일렬로 정렬돼야 합니다 이 작업을 위해 스냅 기능을 켤 수 있습니다

    다음 두 경로를 주석 처리할 때 제 안내 지점이 경로의 꼭짓점과 다른 레이어에 있는 기존 안내 지점 모두에 맞춰지는 것을 알 수 있죠

    제 애니메이션을 살펴보고 모든 경로가 중심에서 바깥으로 그려지는지 확인해 보죠 이 지점에서 몇 가지 기호를 주석 처리했으니 그리기 애니메이션을 맞춤화하도록 추가 구성 옵션을 몇 가지 살펴보겠습니다 기본적으로 경로는 둥근 엔드캡으로 그려지지만 약간 다른 형태가 필요할 수도 있습니다 이 예에선 애니메이션이 조금 갑작스럽게 끝나죠 둥근 엔드캡이 그림과 정확히 일치하지 않기 때문입니다 그렇지만 수정할 수 있습니다 시작 지점에서 빠른 메뉴를 사용하여 적응형 엔드캡을 구성해 애니메이션 도중 경로 엔드캡 스타일을 사용하겠습니다 다시 시도해 봅시다

    훨씬 좋아 보이네요 이제 그리기 스타일에 맞게 애니메이션화될 수 있습니다 적응형 엔드캡은 단방향 기호에서만 사용할 수 있다는 점에 유의해야 합니다 지금까지 살펴본 모든 기호는 하나의 하위 경로 모양으로 구성되었습니다 그러나 모든 기호가 이렇게 디자인되진 않았죠 여러 하위 경로로 구성된 기호도 그리기에 맞게 주석 처리될 수 있지만 메커니즘이 약간 다릅니다 이 원을 주석 처리하죠 첫 안내 지점 배치 시 시스템은 두 하위 경로에 배치되어 있음을 감지하고 시작 및 종료 지점으로 처리해 안내 지점 끝부분에 캡슐로 표시됩니다 기본적으로 애니메이션은 시계 방향으로 그려집니다

    원을 시계 반대 방향으로 그리려면 안내 지점의 빠른 메뉴로 언제나 방향을 전환하고 필요 시, 복잡한 모양에 맞게 경로를 따라 언제라도 더 많은 안내 지점을 추가할 수 있습니다 보셨듯이 이러한 유형의 그리기는 단방향 애니메이션만 지원하고 양방향으로 그리도록 주석 처리될 수 없습니다 그리기와 비그리기 구성 요소 모두가 있는 기호에선 기본적으로 비그리기 구성 요소가 표시됩니다 그러나 어떤 경우에는 화살표와 같이 원하는 결과를 위해 추가적인 주석 작업이 필요할 수 있습니다 그럼 주석 처리하는 방법을 살펴보겠습니다

    당연히 기호의 선 구성 요소는 시계 방향으로 훌륭한 애니메이션을 그려줍니다 하지만 선을 그릴 때 화살촉이 선과 함께 연결되어 그려지면 훨씬 더 좋겠죠 이미 배치된 안내 지점 위에 화살촉을 드래그하면 안내 지점과 연관된 비그리기 요소인 첨부를 생성할 수 있습니다 첨부 안내 지점은 첨부가 나타나는 위치와 경로를 따라 움직이기 시작하는 위치를 표시합니다 첨부를 만들면 연관된 안내 지점에 첨부된 경로를 미리 확인할 수 있죠 제거하려면 경로를 안내 지점에서 드래그해 캔버스 내 아무 곳에나 놓으면 됩니다 첨부를 만들려면 화살촉이 기본 경로와 구분된 별도의 경로로 그려져야 한다는 점에 유의해야 합니다 그리기 첨부를 활용하려면 화살촉과 같이 요소를 분리하기 위해 맞춤형 기호를 살펴보고 수정해야 할 수 있습니다 안내 지점의 자동 배치 기능을 사용하여 이 지점의 다양한 기호를 주석 처리했습니다 하지만 모든 기호가 그렇게 간단하지 않기에 까다로운 경로를 주석 처리할 수 있는 고급 옵션을 포함했죠 안내 지점을 배치할 때 시스템은 각 측면의 기본적인 배치 방향 결정에 도움을 줍니다 하지만 경우에 따라 기본 위치는 기호에 가장 적합한 배치가 아닐 수 있습니다

    이러한 경우에는 옵션 키를 누른 상태에서 안내 지점의 한쪽 면을 경로에 따라 앞뒤로 드래그할 수 있고 연관된 지점에 영향을 주지 않습니다 기호 또는 경로가 서로 위에 겹쳐져 있는 경우 레이어 수준에서 올바른 하위 경로에 안내 지점을 배치하는 것은 어려울 수 있습니다 이러한 상황에서는 레이어 목록에서 항상 하위 경로를 직접 선택해 하위 경로에서 특정 안내 지점을 강제 적용할 수 있습니다 세션 앞부분에서 안내 지점의 주제를 소개할 때 몇 가지 특정한 유형의 안내 지점인 시작 지점과 종료 지점에 대해 잠깐 다루었습니다 안내 지점 배치 시, 시스템은 경로와 함께 배치를 기반으로 유형을 결정합니다 배치와 유사하게 기본 유형을 덮어씌워 안내 지점의 빠른 메뉴로 언제든지 수행할 수 있습니다 여기서 안내 지점을 표준 지점으로 둘지 아니면 종료 지점의 역할을 하도록 지정할지를 결정할 수 있습니다 언제든지 안내 지점을 자동으로 재설정해 시스템이 복잡한 작업을 대신 처리하도록 할 수 있습니다 이 목록에서 아직 다루지 않은 추가적인 안내 지점 유형이 있다는 걸 알고 계실 수도 있습니다 바로 모서리죠 특히 날카로운 모서리를 따라 경로를 그릴 때 시스템은 안내 지점을 모서리 지점으로 지정해 수행되는 특별한 방법으로 이를 처리해야 합니다 다른 모든 안내 지점 유형은 그릴 경로의 양쪽에 하나씩 두 개의 지점을 연결하여 작동합니다 모서리 지점의 특징은 경로의 같은 쪽에 있는 두 점을 연결하고 다이아몬드 모양으로 표시된다는 것입니다 기호의 디자인에 따라 주석 처리하는 데 약간의 시행착오가 필요할 수 있습니다 다시 시작해야 할 경우 각 레이어의 빠른 메뉴 안내 지점 재설정 옵션을 사용하면 됩니다 안내 지점을 배치하는 올바른 방법은 여러 가지입니다 다양한 배치를 시도하여 기호에 가장 적합한 배치를 찾으세요 기호는 9가지 굵기 및 3가지 크기를 지원합니다 모든 구성에서 맞춤형 기호가 올바르게 애니메이션화되는지 확인하는 것이 중요합니다 걱정하지 마세요, 이 중 세 가지만 주석 처리하면 나머지는 시스템이 처리합니다 사용자 정의 기호를 주석 처리할 때 일반 굵기부터 시작하는 것이 중요합니다 기본 주석의 역할을 하며 안내 지점 추가 및 제거를 위한 유일한 굵기죠

    시스템은 다른 두 템플릿 굵기 울트라라이트와 블랙에도 자동으로 안내 지점 배치를 보간합니다

    울트라라이트와 블랙에서의 각 안내 지점은 일반 굵기에서 시작된 원래의 안내 지점과 연관되어 있습니다

    일반 굵기에서 안내 지점을 이동시키면 울트라라이트와 블랙에서 연관된 안내 지점도 이동합니다

    기호가 템플릿으로 굵기를 보간할 수 있기 때문에 연관된 안내 지점이 일반 및 울트라라이트, 블랙 모두에서 동일한 순서를 유지하는지 확인하는 것이 중요합니다 현재의 안내 지점 배치를 살펴보겠습니다 대부분의 경우 문제 없이 좋은 상태입니다 하지만 블랙 굵기에서 안내 지점이 잘못 배치된 것 같네요 잘못 배치된 안내 지점은 쉽게 수정할 수 있지만 순서가 정확한지 확인해야 합니다 그러기 위해, 안내 지점 번호를 토글해 각 안내 지점 옆 고유한 번호를 붙여 일반 굵기에서 연관된 순서를 기준으로 안내 지점이 나타나는 순서를 표시합니다 6, 7, 8이 순서대로 배열되어 있지 않습니다 새 위치로 드래그하여 빠르게 수정할 수 있죠 덮어써진 안내 지점은 주황색으로 표시되며 기호가 모든 구성에서 올바르게 그려지도록 보장합니다 이로써 Draw용 기호의 주석 처리가 끝났습니다 몇 단계만 거치면 기호를 애니메이션화할 수 있습니다

    이제 주석 처리가 끝났으니 가변 그리기의 사용 여부를 선택할 수 있습니다

    설정 팝오버에서 가변 렌더링 스위치를 켠 후 레이어 목록의 가변 그리기 버튼을 사용하여 레이어를 활성화할 수 있습니다 그리고 앞에서 살펴본 가변 렌더링 슬라이더로 언제든지 미리 볼 수 있습니다 선택할 때 참여할 레이어를 결정하기 위해 각 레이어를 신중하게 살펴보는 것이 중요합니다 온도계 예에서 단 하나의 레이어만 활성화하여 다른 그리기 레이어에 영향을 주지 않고 미터 부분이 진행 상황을 전달하도록 했죠 지금까지 Draw용 맞춤형 기호의 주석 처리였습니다 SF Symbols 7의 새 기능을 모두 소개했으니 코드에서 직접 새로운 기능을 활용할 수 있도록 API 업데이트 내용을 살펴보겠습니다 새 애니메이션 프리셋에선 기존 기호 애니메이션 패턴을 따라 symbolEffect 수정자를 사용해 Draw를 적용할 수 있죠 SwiftUI에서 isHidden 값이 업데이트되면 기호가 지워졌다 다시 그려지는 애니메이션이 적용됩니다 AppKit과 UIKit에서 Draw On, Off를 각각 지정해 각 애니메이션을 트리거할 수 있습니다 그리고 다른 기호의 효과와 마찬가지로 By Layer 기본값을 덮어쓸 경우 항상 원하는 재생 모드를 인라인으로 직접 선택 가능하죠

    가변 그리기를 활용하려면 관련 섹션에서 가변 값 모드를 지정하세요 그리고 기호 구성 시, 원하는 변수를 설정하세요 마지막으로 그라디언트 렌더링을 활용하려면 SwiftUI 보기 수정자 또는 UIKit과 AppKit의 기호 구성 옵션으로 색상 렌더링 모드를 그라디언트로 설정하세요 코드에 몇 가지만 추가하면 SF Symbols 7의 모든 기능을 활용할 수 있습니다 그리고 필요하면 언제든지 SF Symbols 앱에서 직접 코드 복사하기 버튼을 다시 참고할 수 있습니다 오늘 많은 내용을 다루었으니 이제 이 새 기능을 최대한 활용하기 위한 다음 단계를 살펴보겠습니다

    SF Symbols 7의 새 베타 다운로드 전이라면 다운로드하여 기호 라이브러리 업데이트를 둘러보고 그라디언트를 미리 보고 모든 Draw 기능을 경험하세요 맞춤형 그리기를 살펴보고 사용 가능한 모든 주석 옵션을 활용할 수 있도록 설계되었는지 확인하세요 그리고 프레임워크 문서를 둘러보고 새 기능을 코드에서 직접 활용하는 방법을 자세히 보세요 SF Symbols 7의 새로운 기능을 모두 살펴보았습니다 오늘 다룬 새로운 기능이 많은 도움이 되기를 바랍니다

    • 0:00 - 서론
    • 즉시 인식할 수 있도록 세심하게 제작된 아이콘 컬렉션인 SF Symbols 업데이트에 대해 알아보세요. 업데이트 내용은 다음과 같습니다. Draw라는 새로운 애니메이션 및 렌더링 사전 설정 향상된 ‘매직 대치’ 기능 사용자 정의 기호에 주석을 달기 위한 도구인 그래디언트 소개 API 업데이트

    • 2:19 - Draw
    • SF Symbols는 두 가지 사전 설정을 사용하여 기호가 경로를 따라 애니메이션을 적용할 수 있는 새로운 기능인 Draw를 소개합니다. 바로 ‘Draw On’과 ‘Draw Off’입니다. 이러한 사전 설정은 ‘By Layer’, ‘Whole Symbol’ 그리고 보다 의도적인 애니메이션을 위한 새로운 ‘Individually’ 옵션을 포함한 다양한 재생 옵션을 지원합니다. 각 기호의 그리기 방향은 디자인과 의미에 따라 사용자 정의가 가능하고 복잡하게 구성된 모양도 지원됩니다. Draw를 사용하여 기호에 생명을 불어넣고 진행 상황을 전달하세요. 새로운 ‘가변 그리기’ 옵션을 사용하면 가변 색상이 강도나 진행 상황을 전달하는 방식과 유사하게 부분적 렌더링을 통해 진행 상황을 시각화할 수 있습니다.

    • 6:02 - 매직 대치
    • SF Symbols의 매직 대치에는 이제 인클로저 일치 및 Draw 애니메이션과의 통합을 포함한 향상된 기능이 있습니다. 이를 통해 Draw On 및 Draw Off 효과를 사용할 수 있는 옵션과 함께 인클로저를 보존하고 다른 레이어를 교체하여 관련 신호 간의 원활한 전환이 지원됩니다. 애니메이션 검사기에서 이러한 개선 사항을 미리 볼 수 있습니다.

    • 7:01 - Gradients
    • SF Symbols에 선형 그래디언트가 추가되어 부드러운 색상 전환으로 기호에 심도와 차원감이 더해졌습니다. 모든 렌더링 모드에서 시스템 및 사용자 정의 색상에서 사용할 수 있는 그래디언트는 시각적 흥미를 높여주며 사용자 정의 기호에 적용할 수 있습니다.

    • 8:02 - 맞춤형 기호
    • SF Symbols 앱에서 사용자 정의 기호에 주석을 달아 그리기 애니메이션을 활성화하는 방법을 알아보세요. 이 과정에는 원하는 그리기 경로를 따라 가이드 포인트를 배치하는 작업이 포함됩니다. 각 경로에는 최소 두 개의 가이드 지점인 시작점(열린 원)과 끝점(닫힌 원)이 필요합니다. 복잡한 도형, 급하게 구부러진 곳 또는 여러 개의 하위 경로의 경우 추가 안내점이 필요할 수 있습니다. 또한 특정 시나리오에 전문화된 안내점을 사용할 수도 있습니다. 가이드 포인트 모드를 전환하고, 포인트를 배치하며, 포인트 위치를 조정할 수 있는 툴이 있습니다. 사람들은 엔드캡 스타일을 변경하고, 양방향 그리기를 활성화하며, 여러 하위 경로가 있는 기호의 회전 방향을 토글하여 애니메이션을 사용자화할 수 있습니다. 안내점의 정확한 배치는 매끄럽고 정확한 애니메이션을 위해 매우 중요합니다. 화살표에 애니메이션 효과를 적용하려면 별도의 경로로 그려서 안내점에 연결해야 합니다. 안내점은 수동으로 배치, 조정 또는 재정의할 수 있고 시작, 종료, 모서리 지점에 대한 특정 유형이 있습니다. 시스템이 다양한 기호 가중치에 걸쳐 안내점을 자동으로 보간하지만, 동일한 순서로 유지되도록 하는 것이 중요합니다. 고급 옵션에는 안내점 배치 조정, 하위 경로 직접 선택 그리고 특정 레이어가 그리기 과정에 참여하도록 지원하여 보다 동적인 애니메이션을 지원하는 변수 그리기 사용이 포함됩니다.

    • 20:52 - 새 API
    • SF Symbols 7에는 애니메이션 프리셋, 변수 그리기, 그래디언트 렌더링을 포함한 새로운 기능이 도입되었습니다. 이러한 옵션을 수식 및 구성 옵션을 통해 SwiftUI, AppKit, UIKit에 적용할 수 있습니다. 베타 다운로드하고, 문서를 검토하며, 사용자 지정 드로잉을 업데이트하여 이러한 새로운 기능을 활용해 보세요.

Developer Footer

  • 비디오
  • WWDC25
  • SF Symbols 7의 새로운 기능
  • 메뉴 열기 메뉴 닫기
    • iOS
    • iPadOS
    • macOS
    • tvOS
    • visionOS
    • watchOS
    메뉴 열기 메뉴 닫기
    • Swift
    • SwiftUI
    • Swift Playground
    • TestFlight
    • Xcode
    • Xcode Cloud
    • SF Symbols
    메뉴 열기 메뉴 닫기
    • 손쉬운 사용
    • 액세서리
    • 앱 확장 프로그램
    • App Store
    • 오디오 및 비디오(영문)
    • 증강 현실
    • 디자인
    • 배포
    • 교육
    • 서체(영문)
    • 게임
    • 건강 및 피트니스
    • 앱 내 구입
    • 현지화
    • 지도 및 위치
    • 머신 러닝 및 AI
    • 오픈 소스(영문)
    • 보안
    • Safari 및 웹(영문)
    메뉴 열기 메뉴 닫기
    • 문서(영문)
    • 튜토리얼
    • 다운로드(영문)
    • 포럼(영문)
    • 비디오
    메뉴 열기 메뉴 닫기
    • 지원 문서
    • 문의하기
    • 버그 보고
    • 시스템 상태(영문)
    메뉴 열기 메뉴 닫기
    • Apple Developer
    • App Store Connect
    • 인증서, 식별자 및 프로파일(영문)
    • 피드백 지원
    메뉴 열기 메뉴 닫기
    • Apple Developer Program
    • Apple Developer Enterprise Program
    • App Store Small Business Program
    • MFi Program(영문)
    • News Partner Program(영문)
    • Video Partner Program(영문)
    • Security Bounty Program(영문)
    • Security Research Device Program(영문)
    메뉴 열기 메뉴 닫기
    • Apple과의 만남
    • Apple Developer Center
    • App Store 어워드(영문)
    • Apple 디자인 어워드
    • Apple Developer Academy(영문)
    • WWDC
    Apple Developer 앱 받기
    Copyright © 2025 Apple Inc. 모든 권리 보유.
    약관 개인정보 처리방침 계약 및 지침