LinkPresentation

3 답변 글타래를 보이고 있습니다
  • 글쓴이
    • lidium
      참가자
      • 글작성 : 9
      • 답글작성 : 8

      이번주에는 굉장히 생소할 수도 있는 주제를 골랐습니다.
      ToyProject를 하나 기획했는데, (비록 물거품이 되었지만) 그 주제에서 필요했던 기능이었습니다.
      무위로 돌아갔지만 재미있는 기능이겠고, View를 Custom하거나 Library를 사용해야 할 법 한 기능인데
      기본 컴포넌트여서 놀랐고,,, 흥미가 생겨서 공부해보기로 했습니다.

      오늘의 주제는 바로, URL link Preview입니다.
      구글링을 했더니, 트위터에서 글을 쓸 때, 링크를 치면 저렇게 비슷하게 된다고 해서
      Twitter-like url preview라고 검색하니 재밌는 공식문서를 발견하게 되었습니다.


      위와 같은 프레임워크가 기본 컴포넌트로 있었던 것입니다. 우측에 보시는 것과 같이 iOS 13.0 이상부터 지원되는,
      WWDC 2019에서 발표된 따끈따끈한 기능입니다.
      (..그래서 자료가…별로..없…)

      그래서, 일단 자료형을 정리하고 가겠습니다.

      LPMetadataProvider

      URL의 메타데이터를 검색하는 객체

      LPLinkMetadata

      URL의 메타데이터를 소유하고 있는 객체

      LPLinkView

      풍부한 시각적 표현을 보여주는 객체

      https://developer.apple.com/videos/play/wwdc2019/262/?time=63

      WWDC Keynote의 자막을 (파파고랑 같이) 해석했습니다! 오역이나 이해가 안되는 부분은 댓글 달아 주세요,,,,

      모든 사진자료는 해당 출처입니다.

      해당 자료는 크게 세가지 부분으로 나눌 수 있습니다.

      Retreving Metadata – 메타데이터를 가져오기
      Presenting Links – 유저에게 메타데이터를 쉽게 표시하는 방법
      Accelating the share sheets – 가져온 메타데이터를 이용해 ShareSheet(공유)를 빠르게 표현하는 방법
      3번은 나중에 다루고, 오늘은 1번과 2번을 다루어 보겠습니다.

      1. Retreving Metadata


      위 사진은 URL이 LPMetadataProvider객체를 통해, LPLinkMetaData로 전달되는 과정입니다.
      URL이 Provider를 거치기만 하면, 사용 가능한 모든 미디어에 풍부한 시각적 표현이 있는 LPLinkMetadata 객체가 반환이 됩니다.
      해당 코드를 통해, 대략적인 흐름을 기술하면,

      1. LPMetadataProvider() 객체를 선언합니다. 이름에서도 알 수 있듯 무언가 메타데이터를 제공해줄 것 같습니다.
      2. metadataProvider.startFetchingMetadata(for: url)
        는 이름에서도 드러나지만 무언가 메타데이터를 추출해줄 것 같습니다. 원하는 url을 넣고 호출합니다.
      3. completion handler는 오류를 확인합니다.
      4. 오류가 발생하는 이유는 서버 미응답, 인터넷 속도, 네트워크 등의 요인이 있습니다.
      5. 오류가 발생하지 않으면, 메타데이터를 마음껏 사용하면 됩니다.

      자, 그러면 가져온 메타데이터를 사용해야 합니다. LPMetadataProvider()LPLinkMetadata() 를 리턴했습니다.
      메타데이터를 가져온 것 같은데, 이제는 쓰면 안될까요? 형태가 무엇인지 완벽하게 알고 가는게 좋을 것 같습니다.

      공식문서에 따르면, LPLinkMetadata는 URL의 메타데이터를 저장하는 객체입니다.
      공식문서에도 그렇고, 발표자료에도 그렇고, Presenting을 할 때마다 계속 가져와야 하는 형태입니다.
      따라서, 해당 메타데이터를 가능한 한 로컬에 캐싱해 두어야 한다고 합니다.

      타이틀, 아이콘, 이미지와 비디오의 형태는 모두 선택사항이며,
      또한, LPLinkMetadata는 직렬화(Serializable)되어 있습니다. NSSecureCoding 형태로 보호받고 있습니다.
      ( NSSecureCoding : 인코딩과 디코딩을 가능하게 하는 정도로 이해 )

      그럼 이제 링크를 띄울 때입니다.

      2. Presenting Links

      해당 LPLinkMetadata()는 이제 링크를 가져야 합니다. 그러기 위해서는 LPLinkView()로의 변환이 필요합니다.

      어려워 보였지만, 결국 두 단계 변환밖에 없었습니다.
      LPMetadataProvider() -> LPLinkMetadata() -> LPLinkView()
      이제 링크를 만들어 보겠습니다.


      LPLinkView 객체는 metadata를 담을 수 있고,
      해당 메타데이터는 이제 tableView의 Cell에 적절하게 뷰를 그려낼 것입니다.
      링크뷰는 Intrinsic Size를 가지고 있습니다. UILabel 등과 같이 가장 적절한 Size를 계산하여 보여줍니다.

      이상입니다. 감사합니다!😊

    • 야곰
      키 마스터
      • 글작성 : 37
      • 답글작성 : 580

      크으~~ 꽤 유용한 프레임워크죠?

      따끈한 정보 고맙습니다!

    • 성훈
      참가자
      • 글작성 : 2
      • 답글작성 : 14

      좋은 정보 감사합니다!

      한가지 궁금한 것이 있습니다.

      NSSecureCoding형태로 보호받고 있다고 하셨는데,

      NSSecureCoding은 NSCoding과 비교하여  어떤 차이가  있나요?

       

    • lidium
      참가자
      • 글작성 : 9
      • 답글작성 : 8

      답글 감사합니다! 또, 답변이 느려서 죄송합니다;;; 제가 확인을 못했나봐요!
      한번 공식문서를 훑어보는 계기가 되었는데요,

      1, NSSecureCodingNSCoding을 상속한 개체입니다.
      2, NSSecureCoding은 Subsitution Attack을 방어하는 보다 강력한 직렬화 프로토콜입니다.
      NSCoding은 아카이빙과 배포를 위해 인코딩 디코딩을 하는 점에서 목적이 다르다고 생각합니다.

      감사합니다😊

3 답변 글타래를 보이고 있습니다
  • 답변은 로그인 후 가능합니다.

logo landscape small

사업자번호 : 743-81-02195
통신판매업 신고번호 : 제 2022-충북청주-1278 호
고객센터 : 카카오톡채널 @yagom