구글 스프레드시트가 canvas를 활용해 만들어졌다니!!

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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



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

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

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

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

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

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

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

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

항상 놀라울 따름이다.

최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/1431
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/1431
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/1431
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/1431
wrote at 2014/12/15 14:19
와 생각치 못했네요 ...ㅋㅋ
그나저나 블로그 잘 구경하고 갑니다.
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *25  *26  *27  *28  *29  *30  *31  *32  *33  ... *1128 
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 11100720 T293 Y1009

6497

1717

google chart api graph

-30 days

today : 293

전체 (1128)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (140)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...