마라톤 완주기록증 페이지 제작 후기

자체 마라톤 대회준하면서 만든 온라인 기록증 페이지.
https://huiyueun.github.io/dynamicrunners.html

Dynamic Runners 1st Marathon

 보통 대회에에선 달리기가 끝나자마자 문자로 기록을 받고, 모바일 기록증을 받아볼 수 있다. 비록 동호회에서 하는 작은규모의 대회지만 달리고난 뒤에는 바로 기록을 확인해볼 수 있으면 좋겠단 생각이 들어 바로 모바일 기록증 페이지를 만들어봤다.

우선은 바로 웹에 접속해서 확인이 필요하므로 HTML5를 이용한 간단한 웹페이지를 만들면 좋겠다고 생각했다.
기초적인 웹개발은 공부는 해봤지만 실제 이런 페이지만드는 것도 처음이라 조금 삽질과 구글링에 시간을 투자하긴 했다. 결과적으론 크게 어려운 기능없이 손쉽게 제작할 수 있다.

 우선 가장먼저한 일은 기록증에 사용할 백그라운드 이미지 제작, photoshop을 이용해 만들었고 인스타 업로드도 고려해서 정사이즈로 만들었다. 성명/종목/기록 부분도 처음 디자인할 땐 넣었지만 이부분은 웹페이지에서 개인별로 직접 새겨 넣기 위해 비워뒀다.

 

 

다음으론 웹페이지에 그리기.
HTML5의 canvas를 이용했다.
canvas에 준비해둔 백그라운드를 그린 후 그 위에 성명/종목/기록을 위치에 맞게 텍스트 그려 넣기
기초적인 내용이라서 구글링으로 쉽게 나왔다. 아래링크 참고

Canvas에 이미지그리기
http://blog.naver.com/PostView.nhn?blogId=ads226&logNo=220580333545

HTML5 Canvas의 이미지 붙이기

Canvas에 텍스트 그리기
https://m.blog.naver.com/PostView.nhn?blogId=javaking75&logNo=140170296812&proxyReferer=https:%2F%2Fwww.google.com%2F

HTML5 canvas - Canvas에 텍스트 출력하기 (fillText, strokeText, font)

이렇게만 따라하면 바로 그려질거라 생각했는데 이미지 위에 텍스트가 안그려지던 문제가 생겼다. 또 열심히 찾아보니 이미지 로드전에 텍스트를 그리기 때문이라고, 이것역시 단순한 이유였는데 왜 당연히 그려져야 될게 안그려지나 답답했었다.ㅋㅋㅋ. 어쨋든 아래 코드 참고해서 이미지 로드이후로 변경
https://stackoverflow.com/questions/8429011/how-to-write-text-on-top-of-image-in-html5-canvas

How to write text on top of image in HTML5 canvas?

 위의 샘플은 Canvas를 미리 생성해두고 그 아이디 값에 맞는 캔버스를 불러와 그 위에 그리는 형태인데, 나의 경우엔 데이터를 불러와 데이터 갯수만큼 캔버스를 동적으로 생성해야 했다. dynamic한 생성이 필요한건데 그것은 아래 링크 참고. CreateElement()로 원하는 객체 생성후 넣어주면된다.

https://stackoverflow.com/questions/10652513/html5-dynamically-create-canvas 

HTML5 Dynamically create Canvas

 

완성된 코드는 이렇다. 이미지 넣고, 원하는 위치에 텍스트 넣고, 이걸 웹페이지에 붙여주면 된다.

 

 

 이제 두번째 할일은 측정한 기록데이터를 불러오는 일. 사실 서버가 필요한정도의 규모는 아니기 때문에 처음부터 접근을 구글 스프레드시트의 데이터를 불러오면 좋겠다고 생각했다.
 대회 당일 사람들 기록데이터를 준비해놓은 구글 스프레드 시트에 바로 입력, 내가 만들어둔 웹페이지는 이 데이터만 불러와서 위의 canvas를 생성하는 것이다.

마찬가지로 이미 구글 API를 사용해보고 정리해둔 좋은 페이지가 있어 참고.

https://kutar37.tistory.com/entry/%EA%B5%AC%EA%B8%80-%EC%8A%A4%ED%94%84%EB%A0%88%EB%93%9C%EC%8B%9C%ED%8A%B8-API-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-SELECT

구글 스프레드시트 API 활용하기 : SELECT

간략히 동작을 요약하면,
아래와 같이 데이터가 준비된 구글 스프레드시트에 쿼리를 날리면 내가 원하는 데이터를 받아 올 수 있다.

 

 

위 준비된 데이터에 C(기록)->A(이름)으로 내림차순으로 데이터를 가져온다.
query('SELECT * WHERE B > 0 ORDER BY C, A ASC', '시트1', 'my_callback'); 

 이렇게 통으로 가져온 데이터는 파싱해서 내가 원하는 각각의 데이터 값으로 나눈다. 그후 캔버스 하나당 이름/종목/기록을 순서대로, 원하는 위치에 넣어주면 완성!!

최종 완성본에선 데이터 로드를 할 때 지루함을 달래줄 DR logo animation과 로딩창을 추가했다. 
DR logo animation은 SVG를 이용해서 애니메이션 제작했고, 로딩은 css Animation과 timeout으로 구현.

다른것보다 svg, loading animation하는데 삽질로 시간이 오래걸렸다.ㅎㅎ

 만들어보니 다음엔 좀더 공부를 해둬서 더 잘만들어 보고 싶단 생각이 든다. 지금은 시간도 부족하고 처음해보는 거라서 제대로 기능사용을 못했는데 좀더 시각적으로도 잘 만들어보고 싶단 욕심이 든다. 

첨해보는 웹개발인데 간단하지만 재밌게 만들어볼 수 있었다.

 

 

++ 웹페이지 미리보기 기능, 아래 설정이 없을 경우 카카오톡 공유시 '미리보기 표시없음'으로 나와서 설정. 공유시 어떤페이지인지 나와야 더 보기도 좋으니까 설정. 아래 참고

https://huiyu.tistory.com/entry/페이스북카카오톡-등에-링크공유시-보이는-이미지는

페이스북/카카오톡 등에 링크공유시 보이는 이미지 설정방법

++ Canvas -> 이미지로 변경, 완성한 Canvas를 PC에선 마우스 우측으로 이미지 저장할 수 있었는데 모바일에선 그게 안됐다. Canvas를 이미지로 변경해서 그릴 방법이 필요했다. 아래 참고.

https://huiyu.tistory.com/entry/canvas-image-로-바꾸는-방법-크로스도메인-이슈

canvas -> image 로 바꾸는 방법 + 크로스도메인 이슈