구글시트 - 표를 잔디로 보기 #2
* 이전글 (https://brunch.co.kr/@muyeolhong/9) 에 이어서...
매뉴얼처럼 작성하려면 #10까지 갈 것 같아서, 세부 내용은 모두 생략하고 각 요소별 요약 정도로 정리해서 급 마무리를 지으려고 합니다.
앞에서 해온 작업들의 마무리가 위의 시트 [표만들기]의 왼쪽 영역이 되겠고, 커피 뇌물선물 등으로 확보한 것이 [HTML샘플]이 되겠습니다.
이 두가지가 준비되었다면 구글시트로 예쁘게 만든 표의 내용을 기준으로 html 을 만들어 내는 과정이 [표만들기] 우측에 쭉 이어지는 <HTML 만들기>와 <HTML 결과> 부분이 되겠습니다.
시트에 이미 예시 정답이 있으니 천천히 수식을 따라가보면 될텐데요, 결과적으로 $AN$3 에 표를 html 으로 표현한 값이 담기면 1차 목표 완료입니다.
이후에 해야 할 일은 html 을 이미지로 만드는 것인데요, 여러가지 방법이 있을텐데 제가 선택한 방법의 기준을 설명드리면 참고가 되실 것 같아 간단히 정리해 봅니다.
1. 매일 1회 실행할 방법을 선택한다.
2. html 을 이미지로 만드는 서비스를 찾아본다
1에서 zapier 를 쓰기로 결정했다면 zapeir에 연결된 서비스 중에서 관련 서비스를 찾아본다.
참고로, zapier와 연동이 된 서비스의 경우 1번의 방법이 차후에 변경이 되더라도 계속 활용할 수 있는 API가 제공될 가능성이 많다고 생각할 수 있겠다.
3. 비용을 살펴본다.
free 구간이 있는 서비스로 활용할 수 있다면 좋겠고, 아니라면 적절한 비용과 결제 방법을 제공하는 서비스인지 확인해 보면 되겠다.
저는 이러한 과정을 통해서 https://htmlcsstoimage.com/ 를 선택하여 사용하였습니다.
한달에 50건 무료면 충분~Zapier에서 적용하는 순서도 간단합니다.
1. 하루에 한번 호출하도록 한다.
2. 구글시트에서 html 값을 읽는다.
3. 이미지 변환 서비스를 호출한다.
4. 잔디 메시지를 보낸다.
Zapier 처리 순서
잔디 메시지 포맷 : imageUrl 을 활용한가지 팁이 있는데 hcti.io 의 결과 이미지 경로는 복잡한 문자열로 정의되어 있는데요, 위의 캡처를 보면 이미지 경로 뒤에 .png 를 추가한 것을 볼 수 있습니다. 이 부분은 잔디에서 imageUrl 을 잔디안에서 미리보기 형태로 보여줄 때 확장자를 기준으로 판단하는 부분이 있는 것으로 보여서 적용한 부분이므로 참고하시기 바랍니다. 추가로 "hcti.io" 서비스에서 확장자 처리 방법을 찾기 어려운데요, 위의 내용처럼 확장자를 임의로 부여하여도 잘 동작합니다.
마지막 팁으로, 현재 잔디의 경우 모바일에서는 imageUrl에 대한 썸네일을 보여주지 않기 때문에 정상적으로 동작을 하는지는 PC에서 확인을 하시는 것이 좋습니다. (@토스랩 분들 보고 있으신지 ㅎㅎ)
너무나 엉성하게 정리했지만 이번 주제는 이정도로 마무리를 하려고 합니다.
그럼...
