구글 스프레드시트가 업데이트 됐다면서 함 써볼래?라는 물음에 ㅇㅇ 하고 별 생각없이 써온지 한달.
헌데 이전부터 구글앱의 못난이 폰트를 바꾸기 위해 써왔던 크롬 확장기능이 업그레이드 이후에는 제대로 동작하지 않았다.

흠… 분명 css로 전체 태그를 잡고 폰트 속성에 !important 까지 줬는데 왜 안변하는 걸까? 하는 궁금증이 생겼다.
평상시처럼 F12 키를 눌러 개발자 도구를 켜고 엘리먼트를 인스팩터로 찍어 잡힌 속성 좀 볼라했는데 헐……

당췌 셀이 잡히지가 않았다.

익스플로어야 Ajax로 갱신된 요소가 잡히지 않는 경우가 있지만 크롬이나 파폭은 그런일 없는디... 아무리 해도 셀이 잡히질 않는다.
익스플로어야 Ajax로 갱신된 요소가 잡히지 않는 경우가 있지만 크롬이나 파폭은 그런일 없는디… 아무리 해도 셀이 잡히질 않는다.

뭘까?
시트위에 투명 레이어라도 놓여져 있는건가?

일단 크롬 개발자 도구에서 시트로 잡힌 저 엘리먼트 근처를 살펴봤다.
하지만….  td 등의 엘리멘트로 빽빽하게 들어차 있어야할 공간에는 거의 아무것도 들어가있지 않았다.

와…
뭐지 내가 모르는 웹기술이 등장한 것인가 하는 순간….

인스펙터로 찍은 엘리먼트 근처에 canvas 태그가 있었다.
그것도 딱 저 시트만한 크기로 말이다.

캔버스 태그다. 근데 왠일로 스프레드시트에 canvas가?
캔버스 태그다. 근데 왠일로 스프레드시트에 canvas가?

결론은 그랬다.
구글 스프레드시트에서 보이는 저 엑셀폼은 table 태그가 아닌 canvas, 즉 비트맵 이미지였다.

이번에 구글 스프래드시트가 업그레이드되면서 여러가지 데이터 입력제한이 많은 부분 완화됐었다.
그 이유가 table 태그를 버리고 canvas로 갈아탄 후의 얻게된 성능향상 및 표현방식의 자유로움에 있을 것이라는 짐작이 든다.

구글 스프레드시트와 비슷한 기능인 네이버 오피스 셀 - 여기는 예전 구글 스프레드시트 버전처럼 table 관련 태그로 구현되어 있다.
구글 스프레드시트와 비슷한 기능인 네이버 오피스 셀 – 여기는 예전 구글 스프레드시트 버전처럼 table 관련 태그로 구현되어 있다.

여담으로 여기 글을 참고하면 구글 스프레드시트가 canvas로 그려지는 과정을 하나하나 살펴볼 수 있다.

물론 canvas로 그려진 시트상에서도 내용을 입력할 땐 딱 그 위치에 div 엘리먼트가 덮어씌워져 입력을 받는다.

값을 입력하면 바로 해당 위치의 canvas가 갱신된다.
값을 입력하면 바로 해당 위치의 canvas가 갱신된다.

이렇게 파고들어 보니 폰트가 변하지 않는게 이해가 갔다.
canvas에 그림으로 그려진 글씨에 css로 폰트를 잡으려하니 어찌 이게 가능하겠는가ㅋ

하지만 결론적으론 가능했다.
구글 앱스 스크립트에 딸린 폰트 관련 함수를 이용해서 말이다.

참고로 이 글 첫번째 스크린샷에서 보이는 챠트는 svg로 구현되어 있다.

후후후..ㅋ
html5를 정말 제대로 활용하고 있는 구글 드라이브.

항상 놀라울 따름이다.

이 글의 관련글

Tags:

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *