[Swift] MarkdownView

RYEOL·2024년 3월 6일

Swift

목록 보기

8/14

앱을 사용하다 보면 텍스트를 Markdown 방식을 지원하는 앱을 본 경험이 있을 것이라고 생각해요.
오늘은 Swift에서 Markdown을 지원하는 방법에 대해서 다뤄볼 예정입니다.
기존에 개발중이던 어플리케이션에 게시판 부분을 Markdown으로 바꾸는 과정을 예시코드로 설명할 예정입니다.

Markdown?

velog에 글을 쓰는 입장에서는 수시로 경험하는 텍스트 기반의 경량 마크업 언어에요.
# - > **text** ```code``` 등 여러 방식으로 텍스트를 꾸밀 수 있고 가독성 또한 올려줄 수 있는 좋은 수단이라고 생각합니다.

Package

Swift에서 MarkdownView를 구현할 수 있는 방법은 지금 포스트에서 설명하는 Package를 제외하고도 더 있을 것 이라고 생각합니다.
하지만 이번 포스팅에서는 MarkdownView 라는 Package를 다룰 예정이에요.

Package Download

SPM을 사용해서 Package를 Xcode 내 프로젝트에 추가합니다.
Xcode => File => Add Package Dependenceis 를 열고

Search or Enter Package URL에 아래 Github URL을 추가합니다.
https://github.com/keitaoouchi/MarkdownView
이후 Add Package를 통해 프로젝트에 추가합니다.
간혹 Package를 제대로 추가했는데 프로젝트에 추가가 안되는 것 같다는 질문을 받을 때가 있는데..
꼭..Add Package 클릭 이후 나오는 Target을 확인하는 것을 잊지마세요!

Package 설명

우선 실제 프로젝트에 적용하기 전에 Package가 지원하는 code를 사용하는 방법을 알아보려고해요.
위에 언급한 Github URL을 들어가면 설명을 볼 수 있지만 영어 울렁증이 있으신 분들은 아래를 참고해주세요.

MarkdownView

다양한 기능이 있지만 기본적인 기능 몇 가지만 설명하겠습니다.

생성하기

  import MarkdownView
  let md = MarkdownView()

.load(markdown: String)
md.load(markdown : "# Hello World!") # Hello World!라는 Markdown 문자열을 뷰에 렌더링합니다.
.isScrollEnabled = Bool
MarkdownView의 스크롤 기능 사용 여부를 나타냅니다. false 또는 true를 통해서 스크롤 기능을 비활성화 또는 활성화 할 수 있어요!
.onRendered{}
Markdown 렌더링 완료된 이후에 호출되는 콜백 함수를 설정합니다.
.onTouchLink{}
MarkdownView 내부의 링크가 터치되었을 때 호출되는 콜백 함수를 설정합니다.

Project에 적용해보기

MarkdownView 생성

import MarkdownView
let markdownView = MarkdownView()

위처럼 우선 MarkdownView를 markdownView라는 이름으로 생성해줍니다.

MarkdownView().load(markdown: String)

markdownView.load(markdown: 원하는 String Data)

위와같이 load를 통해 markdownView영역에 String Data를 Markdown 양식으로 보여줄 수 있어요.
예시 사진)

Markdown 적용 전	Markdown 적용 후

.onTouchLink{}

게시글에 이메일 또는 오픈채팅 링크를 추가해서 터치했을 때 이벤트를 만들 고 싶어서 사용해본 예시입니다.
.load(markdown:) 을 통해 들어오는 String 데이터가 [이름](url)이런식으로 링크가 걸린 데이터가 들어온다면 아래와 같은 로직을 통해 브라우저로 이동하는 작업을 수행 할 수 있습니다.

markdownView.onTouchLink = { request in
          guard let url = request.url else { return false }
           if url.scheme == "https" {
              print(url)
              UIApplication.shared.open(url, options: [:], completionHandler: nil)
            return false
          } else {
            return false
          }
    }

위 깃허브에 가면 [weak self] 키워드를 사용하라고 하는데 이부분은 다른 포스트에서 자세히 다뤄보도록 하겠습니다.
.onTouchLink 에 url을 인식하고 https로 들어오는 url은 외부 safari와 같은 브라우저로 볼 수 있도록 작성했습니다.