Blog

[개발] 서버 세팅 필요 없는 API 구현 #3

By @segyepark•10/22/2017•kr-dev

안녕하세요. 박세계입니다.

본 시리즈의 최종편입니다. 구글시트를 API로 활용하는 방법을 알아보겠습니다.

구글시트를 API로 활용하는 이점은 뭐가 있을까요? 바로 데이터를 JSON 같이 구조화된 형태로 공개하기에 개발자들이 무궁무진한 방법으로 2차 활용 할 수 있다는 것입니다.

그리고, 이 시리즈의 제목이자 핵심사항인 별도의 서버 세팅 없이 API를 공유할 수 있다는 큰 이점 또한 존재합니다.

구글시트가 정적인 데이터만 담고 있어 수동으로 변경해야 할 경우도 장점이 전혀 없진 않습니다. 누군가 수고하여 관리하는 데이터를 자신 포함 모든 사람이 활용할 수 있기 때문입니다. 2편의 내용처럼 데이터의 자동 업데이트까지 적용하는 경우 활용 가능성은 생각보다 무궁무진 합니다.

[목차]

  1. 구글 사이트가 제공하는 방법
  2. 구글 사이트의 지저분한 결과를 정돈해주는 외부 사이트
  3. 자바스크립트 라이브러리

1. 구글 사이트가 제공하는 방법

공식적인 방법을 먼저 알아야겠습니다. 사실 공식적인 방법은 없습니다. 구글 시트 어디를 봐도 API로 변환하는 방법은 찾을 수 없기 때문입니다. 구글링을 통해 얻은 방법을 공유하겠습니다.

  • Share > 'Anyone with the link can view' 옵션을 선택하여 구글 시트 공유시 생성된 주소 복사

google-sheets-share.png

제 문서는 이런 주소가 나왔습니다.

여기서 1rlviOf6_Ht-zD5__QLkYthQwGNGljlAPNHGEs4ZKnqU 부분만 따로 복사 후 아래 주소에 다음과 같이 붙여 넣습니다.

a.png

위와같이 지저분한 JSON 코드가 나옵니다. 그래도 나오긴 나온거니 이걸 활용하면 됩니다. 필요한 부분을 잘 찾아서 사용하면 됩니다. 참 쉽죠?

JSON을 이쁘게 보여주는 다음 사이트를 활용하면 구조를 파악하기 훨씬 쉽습니다.

사실 이게 끝입니다. API 라는게 어떤 데이터를 웹사이트를 통해 접근할 수 있게 해주는건데 여기선 spreadsheets.google.com 사이트가 그 역할을 해줬습니다.

하지만, 이렇게 지저분한 결과를 알아서 거른 후 써야 한다면 진정한 API라고 보긴 힘들겠죠. 그래서 이를 보완해주는 방법을 이어 소개하겠습니다.

2. 구글 사이트의 지저분한 결과를 정돈해주는 외부 사이트

API를 자기 혼자 쓰려고 만들었다 해도 위의 결과를 그대로 사용하긴 힘듭니다. 남에게 공개하기 위한 API로는 더욱 내놓기 부끄럽겠죠.

그 부끄러움을 우리 대신 해결해준 고마운 사이트가 있습니다.

위에서 복사한 1rlviOf...nqU를 다음과 같이 붙여넣으면 됩니다. 몇가지 옵션이 있는데 보통 'columns=false'만 추가하면 충분합니다.

b.png

결과가 훨씬 깔끔해서 바로 사용하기 좋습니다. 이게 가장 편한 방법인거 같습니다.

유일한 단점은 이 사이트도 결국 1번의 결과를 대신 정리해주는 다리 역할을 했을 가능성이 큰데 그러다보니 gsx2json.com라는 추가 사이트를 한 번 더 거쳐야 최종 결과를 사용할 수 있는 것입니다. 어차피 공개하려고 한 데이터니 보안을 걱정할 필요는 없겠지만, 'API 호출 <-> gsx2json.com <-> spreadsheets.google.com' 같이 네트워크 트래픽이 한 번 더 발생하는걸 감안해야 합니다. 그리고, 구글 사이트는 죽을 염려가 훨씬 덜한데, gsx2json.com는 어떻게 될지 모르며 이 사이트가 안되면 API 사용이 불가능하다는 2차 문제가 있습니다.

gsx2json.com가 비교적 잘 작동하며 오래오래 우리곁에 남는다는 전제가 있어야 활용이 가능한 방법입니다. 그래도 여전히 가장 쉽고 괜찮은 방법임엔 확실합니다.

3. 자바스크립트 라이브러리

1번은 사용하기 너무 짜증나고, 2번은 2차 사이트의 개입이 좀 껄끄럽습니다. 마지막으로 그 둘의 단점을 적당히 보완한 방법을 소개합니다.

자세한 사용법과 원리는 Tabletop.js GitHub를 직접 확인 하셔야 합니다. 그래도 실제 작동되는걸 확인한 코드를 추가하겠습니다.

<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>    
	var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1rlviOf6_Ht-zD5__QLkYthQwGNGljlAPNHGEs4ZKnqU/edit';

	function init() {
		Tabletop.init( { key: publicSpreadsheetUrl,
	                 callback: showInfo,
	                 simpleSheet: true } );
	}

	function showInfo(data, tabletop) {
		alert('Successfully processed!');
		console.log(data);
	}

	window.addEventListener('DOMContentLoaded', init);
</script>

 
HTML 파일로 만들어서 실행해보시면 (크롬) 브라우저에서 'F12 > Console'을 통해 다음과 같은 결과를 보실 수 있습니다.

c.png

이 방법의 단점도 있습니다. 이미 제 설명도 자세하지 못하고 독자에게 GitHub를 통해 알아서 확인하라는걸 보면 남이 쉽게 쓸만한 API 제공이 불가능하다는 것입니다. '자바스크립트 라이브러리'라서 서버에서 바로 사용할 수 없다는 단점도 있습니다.

이건 '자기 혼자' 그리고 '브라우저에서 바로 활용'하기 위한 방법입니다. 두가지에 모두 해당된다면 이 방법이 최선입니다.

여기 소개된 세가지 방법 모두 완벽하지 않으며 각자 용도와 상황에 맞게 선택해야 합니다. 꼼꼼히 읽어보고 따라하신 개발자 분들은 눈치 채셨겠지만 'File > Publish to web'에서 나오는 공유 주소를 통한 방법은 소개하지 않았습니다. 이 방법은 안될때도 있으며 확실한 해결책을 아직 찾지 못했기 때문입니다.

이 방법으로 매우 복잡한 API를 완벽하게 구현하는 건 불가능하겠지만 여전히 많은 재미와 가능성을 줄 수 있다 믿습니다. 읽기 전용 API로의 활용만 소개했지만 사실 'Google Apps Script' 까지 혼용하면 구글 문서와 연관된 모든것을 마음대로 구현할 수 있습니다.

생각 확장의 시작을 열기 위한 시리즈를 이제 마칩니다. 관심을 가져주신 모든 분께 감사드립니다.

43

comments