[SWIFT] 카카오 링크 기능 추가하기

[카카오링크]

https://developers.kakao.com/docs/ios#카카오링크

카카오링크란 기본적으로 사용자에게 메시지를 보내고, 이미지 텍스트 버튼 등을 넣어서 해당 버튼을 눌렀을 때 특정 URL이동이라던지.. 정보 등을 알려주는데 활용한다. 특히, 앱 내에 공유하기처럼 카카오톡 지인들에게 정보를 전달할 때 활용하는 기능이다.

카카오내비, 카카오스토리 등 다양한 기능의 API들도 있지만, 대표적인 카카오 링크에 대해 알아본다. 위의 레퍼런스 사이트에서 참고해서 그대로 하면되지만, 기본적인 설명이 Object-C로 되어있다. 물론 샘플예제를 열어보면 SWIFT로 작성한 내용이 있기 때문에 그것을 참고해도 괜찮겠다.

[준비작업]

1. SDK다운로드 : https://developers.kakao.com/docs/sdk 에서 ios용을 다운받고 해당 폴더안에 있는 여러 SDK 중 KakaoLink.framework를 엑스코드 내 프로젝트 하위에 드래그해서 넣는다. 

Copy와 타겟이 프로젝트로 체크되어있는지 확인한 뒤 넣는다. 정상적으로 들어갔다면 

위처럼 엑스코드 상에서 제대로 등록되었는지 General탭(프로젝트 이름 클릭하면 나옴) 하단에서 확인할 수 있다.

2. Build Setting탭으로 이동하여 하단 Linking -> Other Linker Flag에 -all_load를 추가한다.

3. 다음으로 plist를 수정하는데, 간단히 하려면 좌측에서 plist파일을 우클릭해서 Open As -> Source Code로 연 뒤 아래처럼 코드를 입력한다.

위처럼 작업해서 Source Code 상으로 보면

위 처럼 된다. 1111이 들어가있는 부분이 카카오 네이티브 앱 키이며, 이 키는 https://developers.kakao.com 에 로그인해서 애플리케이션 생성하는 로직을 따라 진행한다. 그리고 진행하면서 앱 정보 부분에서 사용할 플랫폼 (iOS, android, Web) 설정들을 해주는데, 스위프트만 테스트할 것이라면 iOS 플랫폼을 추가하고 패키지명을 입력해주면 된다.

그리고 생성된 네이티브 앱키를 위의 1111대신 입력하며 되는 것이다.

4. 그리고 헤더 파일, 카카오링크는 Object-C로 작성이 되어있는데 스위프트에서 사용하려면 브릿지 헤더라는 것을 이용해서 사용할 수 있도록 세팅해야한다. 직접 이름을 만들어도 되지만, 다운받은 SDK의 샘플 폴더에 swift -> LinkSample에 들어가면 헤더파일이 있다. 이 헤더파일을 SDK프레임워크에 넣은 것처럼 드래그해서 넣으면 된다.

물론 직접 만들겠다면 File -> New -> File을 눌러서 헤더파일을 선택하고 만들면된다. 이름은 KakaoOpenSDK-Bridging-Header.h 로 한다. 그리고 그 헤더안에는 

#import <KakaoLink/KakaoLink.h>

를 넣어주는데, 샘플것을 그대로 썼다면 입력되어 있을 것이다. 

5. 이 헤더파일을 넣는다고 끝난게 아니라, 이 헤더파일을 읽을 것이라고 알려줘야하므로 다시 Build Settings으로 가서 Object-C Bridging Header에 해당 파일명을 입력한다.

준비는 이대로 끝! 이제 응용이다.

버튼 하나를 생성하고, 버튼 액션을 연결한 뒤 아래처럼 코드를 작성한다.

    @IBAction func btnClicked(_ sender: UIButton) {
        // Location 타입 템플릿 오브젝트 생성
        let template = KLKLocationTemplate.init { (locationTemplateBuilder) in
            
            // 주소
            locationTemplateBuilder.address = "경기 성남시 분당구 판교역로 235 에이치스퀘어 N동 8층"
            locationTemplateBuilder.addressTitle = "카카오 판교오피스 카페톡"
            
            // 컨텐츠
            locationTemplateBuilder.content = KLKContentObject.init(builderBlock: { (contentBuilder) in
                contentBuilder.title = "신메뉴 출시❤️ 체리블라썸라떼"
                contentBuilder.desc = "이번 주는 체리블라썸라떼 1+1"
                contentBuilder.imageURL = URL.init(string: "http://mud-kage.kakao.co.kr/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png")!
                contentBuilder.link = KLKLinkObject.init(builderBlock: { (linkBuilder) in
                    linkBuilder.mobileWebURL = URL.init(string: "https://developers.kakao.com")
                })
            })
            
            // 소셜
            locationTemplateBuilder.social = KLKSocialObject.init(builderBlock: { (socialBuilder) in
                socialBuilder.likeCount = 286
                socialBuilder.commnentCount = 45
                socialBuilder.sharedCount = 845
            })
        }
        // 카카오링크 실행
        KLKTalkLinkCenter.shared().sendDefault(with: template, success: { (warningMsg, argumentMsg) in
            print("warning message: \(warningMsg)")
            print("argument message: \(argumentMsg)")
            
        }, failure: { (error) in
            print("error \(error)")
            
        })
    }

샘플에 들어있던 코드다. KLKLocationTemplate라는 클래스를 이용하여 생성하는 것인데, 안에 사용하는 변수나 기본적인 사용법은 레퍼런스를 참고한다. 그냥 샘플상으로 실행을하게 된다면

이런식의 카카오링크 메시지를 받을 수 있다. 이제 입맛대로 내용이나 이미지, url 등을 변경하면 된다. 참고로 해당 버튼을 눌렀을 때 이동되는 url등의 도메인 주소는 개발자 홈페이지에서 애플리케이션 생성 시 web에서 해당 url등을 미리 입력해야 한다. 그래야 domain pass관련 에러가 출력되지 않는다.