구글폼 임베드 할 때 잘리는 현상 바로잡기!

안녕하세요 웅블로그 입니다.

이번에는 구글에서 제공하는 구글폼, 한국어로, 구글설문지를 (Google Form) 이용하여 양식을 만들고 웹사이트등에 임베드 할때, 사이즈가 모바일 최적화가 되지 않는 상황을 개선할 수 있는 방법을 알려드리려고 합니다. 

저 같은경우, 구글폼을 이용하여 회사에서 접수 받아야 하거나 질문해야하는 사항들을 고객들에게 입력할 수 있도록 만들어서 웹사이트에 종종 임베드하곤 합니다. 예전에 한동안 구글 설문지를 이용하여 웹사이트에서 문제 없이 임베드 하였는데, 이후에 확인해 보니 휴대폰에서 구글 설문지가 잘려서 보이는 현상을 파악하게 되었습니다. 예전에는 컴퓨터를 이용하여 설문지를 입력해주시는 분들이 많았는데, 요즘은 휴대폰으로도 충분히 설문지를 받을 수 있게 되었기 때문에 구글 설문지를 더욱 다양한 기기에서 입력할 수 있도록 만들어서 사이트에 임베드 해두는 것이 중요한 포인트가 되었습니다. 

구글 양식은 처음에 양식 내용을 원하는데로 만들고 나면, 외부에서 바로 설문지 페이지로 와서 설문을 할 수있는 링크 및 웹사이트에 넣을 수 있는 코드 주소를 제공하여 웹사이트의 원하는 부분에 코드를 넣게되면 바로 웹사이트에서 구글 설문지가 보이게 할 수 있는 기능이 있습니다. 

제가 다니는 회사의 경우 웹사이트에 연락처 양식을 넣기도 하지만, 설문 같은 경우 웹사이트에서 바로 작성할 수 있도록 웹사이트 안에 설문양식을 넣어서 웹사이트에서 설문이 가능하도록 만들었습니다. 

문제점:

구글 양식을 임베드 형태로 코드를 가져오게 될때, 확인해 보면 width 와 height 을 설정할 수 있는 코드가 들어있습니다.  물론, 웹사이트에서 사용하게 하려면 편리하게 원하는 사이즈로 입력하여 코드를 웹사이트에 붙여 넣기만 하면됩니다. 하지만 그런 형태로 사용하게 되면, 문제점은 모바일 버전 최적화 된 구글 설문지로 작용하기 어렵다는 점이 입니다. 웹사이트에서는 600 * 1200 형태로 사이즈를 가로세로 정해서 넣게 되면 모바일에서는 설문지의 일부만 보이고 나머지 부분이 보이지 않게 되는 문제점이 생기게 됩니다.

해결방안:

간단합니다. 임베드 코드를 가져올때, width="숫자사이즈" 의 형태를 width="100%" 로 변경해주면 모든 문제가 해결됩니다. 웹사이트에서도 설문지가 들어가기 원하는 부분의 사이즈를 설정해두고, 설문지 자체 사이즈를 100%로 적용하게 되면 해당 설정된 사이즈 안에서 100 % 사이즈로 설문지가 보이게 되는 것 입니다. 물론, 휴대폰 등에서도 웹사이트의 모바일 최적화가 설정되어져 있다면, 해당 모니터에서 100%로 보이게 됩니다. 간단하쥬?

개인적으로 테스트를 해보았는데, 다른 워드프레스 사이트에서는 100%로 바꾸지 않아도 자동적으로 100%로 적용이되어서 구글 설문지가 잘 나타는 곳들이 있었습니다. 왜, 특정 사이트에서는 모바일 최적화가 되어져서 보이지 않는지 모르겠지만, 만약 그런 현상이 나타난다면 위의 방법으로 수정해보시면 될것 같습니다. 

아마 대부분 코드를 임베드만 하면 모바일에서도 왠만하면 최적화 되어 보이지 않을까 싶습니다.

또 더 재미있는 IT 주제를 가지고 올게요! 

감사합니다