Only ideas worth spreading

더 좋은 웹을 위한
우리의 고민

SNS의 API란?
간단한 카카오 API 사용해보기

WRITE윈드디자인 DATE2017.04.14 CATEGORY웹 / App 개발

안녕하세요!

윈드디자인 이성호입니다.!!


 

 

이번에 다룰 내용은

널리 사용하는 SNS들을 웹 사이트에 활용할 수 있도록 도와주는

 

SNS API 서비스에 대해 다뤄볼까 합니다.

 

 



 

SNS 회사에서는 자신들의 SNS를 널리 사용할 수 있도록 

일명 매뉴얼을 제공하고 있는데요.

이러한 매뉴얼을 통해 웹 개발자는 손쉽게 해당 SNS의 기능들을 적용할 수 있도록 합니다.

(이것도 결국 마케팅!?)


그럼 SNS를 웹 사이트에 보다 쉽게 접할 수 있도록 하는 SNS API에 대해 알아볼까요?

 



 

API란?

 

IT업계에 종사하고 있거나 관련 전공을 학습하고 있는 사람이라면 대부분 현재 잘 알고 있거나 

잘은 모르더라도 한 번쯤은 들어보지 않았나 생각합니다. 

(웹 담당자들도 이 정도는 많이들 알고 계십니다.)

 

 

우선 API의 정의는 다음과 같습니다. 

(*출처는 네이버 지식백과에서 가져왔음을 알려드립니다.) 


 

*API Definition :  

프로그램 또는 애플리케이션이 운영 체제에 어떤 처리를 위해서 호출할 수 있는 서브루틴 또는 함수의 집합이다. 윈도우 API의 경우 C, C++, 파스칼 등과 같은 언어에서 윈도우를 만들고, 파일을 여는 것과 같은 처리를 할 수 있도록 1,000여개 이상의 함수로 구성되어 있다. 명령어의 집합으로 애플리케이션 프로그램에서 오퍼레이팅 시스템의 기본적인 기능을 사용할 필요가 있을 때에 여기에서 명령어를 호출한다. 


 

쉽게 요약해서 풀어쓰자면  

우리가 특정 서비스의 일부 기능을 쓰기 위해 
그 서비스에서 제공하는 일련의 함수들의 모음
이라 할 수 있습니다. 

 

대부분의 검색엔진 및 SNS 서비스는

각종 API 서비스를 제공하고 있으며

서비스를 이용하기 위해 해당 서비스의 계정 및 서비스 앱, 식별코드, 토큰 값 등을 요구합니다. 

(요구하는 사항은 각 서비스마다 조금씩 차이가 있습니다.) 

 

 




 

예를 들면 인스타그램의 API를 이용하여

위와 같이 실시간으로 인스타그램의 해시태그를 검색하여
사이트에 노출하는 App 도  개발할 수 있습니다.
(제가 좋아하는 박보검! 지아코! 도 보이네요!! :D)

물론 위 예시는 단순 API만으로 제작되진 않습니다만,
이렇게 API가 제공된다면 개발자 입장에서는 보다 쉽게 제작이 가능하므로
해당 SNS의 사용률이 올라가겠지요!?

(직접 보시면 이해가 빠릅니다!!!)
http://howau.co.kr/board_social.php 

 

 

사용법은 각 API를 제공하는 서비스 사이트에서 사용법을 안내하기는 하지만 기본적인 웹 코드에 대한 이해도가 없이는 접근이 쉽지만은 않습니다. 

 

 

 

 

 

 

이번 포스팅에서는 대표적으로 SNS 서비스 중 사람들이 많이 이용하는

카카오톡 API 사용법에 대해 알아보겠습니다. 

(카카오톡 API는 사용법이나 코드 등이 비교적 간결하여 사용하기가 쉬운 편입니다.) 


 

사용하기 위해서는 몇 가지 조건이 있습니다. 그 조건은 다음과 같습니다. 


 

*해당 API를 사용하기 위해서는 반드시 자신의 웹 서버 계정이 있어야 합니다. 로컬 PC로 단순히 자신의 PC 안에 html 문서를 만들거나 로컬 PC에서만 동작하는 웹 서버(127.0.0.1, localhost)에서는 사용이 제한됩니다. 


 

*해당 계정은 http://windtest.dotome.co.kr 를 예제로 진행합니다!. 

(dothome은 무료 웹 서버로 간단한 테스트에 적합합니다.!!) 

해당 URL은 예제로 진행하기에 현재 시간 기준으로 접속이 되지 않을 수 있습니다. 


 

*해당 서비스의 아이디가 있어야 합니다. 페이스북이라면 페이스북 계정, 카카오톡이면 카카오톡 아이디, 네이버라면 네이버 아이디 등 각 계정 정보가 있어야 합니다. 


 


 

[1] 앱 생성하기 


 

*URL : https://developers.kakao.com/ 


 

해당 URL로 접속하여 카카오톡 로그인 후, [앱 개발 시작하기]를 클릭합니다. 


 

 

 

 

 


 


 

[+앱 만들기]를 클릭하여 자신이 만들 앱 이름을 지정합니다. 

예제에서는 windtest로 사용하겠습니다. 

아이콘 업로드는 선택사항이지만 자신만의 앱 표현을 위해 적절한 이미지를 선택하는 것이 좋겠습니다. 

(본 예제에서는 생략합니다.) 

 

 

 

 

 

 

이후 애플리케이션 생성 및 각 앱 사용을 위한 키가 할당된 것을 볼 수 있습니다. 

개발 방식은 웹을 베이스로 설명하고 있기에 웹사이트, Java script 개발 가이드 기준으로 진행하겠습니다. 


 


 

[2] 웹사이트 URL 등록 


 

우측 상단의 자신의 계정-> 내 애플리케이션 - > 생성한 앱 이름을 클릭 후 좌측 메뉴의 설정-일반에 들어갑니다. 


 

 

 

 

 


 

플랫폼을 추가하여 웹->자신의 웹사이트 URL을 추가합니다. 추가하지 않거나 잘못 입력한 경우, API 코드를 정확히 입력했다 하더라도 동작하지 않습니다. 

 


 


 


 

[3] 개발 가이드 


 

현재 페이지의 상단의 개발 가이드를 클릭한 후 좌측의 Java script 개발 가이드를 클릭합니다. 

 


 

 

 

각각의 카카오톡 기능의 Java script 소스가 나와있습니다. 

이 소스를 자신이 등록한 웹페이지에 활용하면 됩니다. 

몇 가지의 예를 보도록 하겠습니다. 


 


 

1) 카카오 스토리 공유 


 

[카카오스토리 공유하기] 란의 해당 메뉴의 소스를 모두 복사합니다. 

 

 

 

 

자신의 웹 문서에 붙여 넣습니다. 

주의할 점은 코드 안의 App Key를 반드시 자기가 발급받은 Java script Key를 입력해야 합니다. 


 

정상적으로 소스와 Java script Key를 입력하였다면 자신의 웹 사이트에서 

작은 카카오톡 전용 아이콘이 활성화됩니다.  

클릭 후 다음과 같은 창이 열리면 정상적으로 작동하는 것입니다. 


 

 

 

2) 카카오 링크
 


 

개발 페이지의 Java script 개발 가이드 하위 메뉴 중 카카오링크를 사용하겠습니다.
 

 

 

 

 

사용법은 이전과 동일하게 자신의 웹 문서에 코드를 복사-> 붙여넣기, 그리고 발급받은 Java script Key를 입력합니다. 

참고로 일부 카카오 API는 PC에서 지원하지 않습니다.  

카카오 링크의 경우, 모바일에서만 작동하므로 모바일 카카오톡 앱으로 확인해야 합니다. 


 

카카오 링크의 경우 연결한 링크의 페이지가 반드시 자신의 웹 사이트 도메인에 포함된 URL이어야 가능합니다. 

예제 페이지의 경우 windtest.dothome.co.kr(자신의 웹사이트 URL) 이므로 예를 들어  

(자신의 이트 URL)/img 

(자신의 웹사이트 URL)/test/view.php
 

(자신의 웹사이트 URL)/admin/api.html 

등의 URL만 가능합니다. 





 

Java script 키값과 연결 링크 값 조건이 일치한다면 다음과 같이 전송이 된 것을 확인할 수 있습니다. 

모바일 카카오톡 앱 전용 API는 PC에서는 작동하지 않는 소스이기에 실제 상용하는 서비스에 개발을 하게 된다면 본 페이지는 모바일에 접속 시에만 보일 수 있게 하면 더욱 좋겠습니다. 


 

 

이상으로 웹에서 쓰는 카카오톡 API 사용법에 대해 간단히 알아보았습니다. 

 


여러 다양한 API가 존재하며 그 소스 사용법은 각 서비스마다 사용법이 조금씩 다르지만 

대체로 자신의 계정에 할당된 고유 키, 아이디, 토큰 값 등을 제대로 입력한다면


원하시는 SNS API를 정상적으로 구현하실 수 있습니다.!!


 

해당 예제는 Java script 기준으로만 설명하였지만 Android , IOS 기반도 존재하며, 다른 웹 서비스 API 중에는 PHP나 JSP와 같은 서버 사이드 언어 기반으로도 제공하고 있습니다. 


 


 

조금 더 해당 서비스 API에 대해 심도 있게 학습하다 보면

API 관련 개발 소스 사용에 보다 쉽게 익숙해짐은 물론

 


자신의 웹 서비스에 맞게 Java script나 서버 스크립팅 언어를 가미해 보다

효율적인 서비스를 개발할 수 있을 겁니다.

(인스타그램!!! 짱짱!)

그럼 트렌드 한 SNS를 가미한 다채로운 웹 구축이 되도록!!

 


 

 

사용자의 바람에 고민합니다.
다채로운 속 집중을 통해
더 좋은 웹을 꿈꿉니다.

디자인과 기술이 융화된 디지털 서비스를 만듭니다.

 

 

 

WIND DESIGN Co., Ltd