(긴글주의) 좌충우돌 Mazassumnida 개발기

내 Github 프로필 속 Mazassumnida v1과 mini. 플래티넘 배경색이 정말 마음에 든다

어쩌다?

7주간의 효창공원 스터디가 끝나고, 2학년 여름방학의 마지막을 화려하게 장식하고 싶어 제주코딩베이스캠프의 인스타그램 클론 코딩 캠프에 지원했다. 17:1의 경쟁률을 뚫고 합격했지만... 이게 뭔 일이람? 코로나가 아주 제대로 터져서 캠프도 펑... 겨울로 미뤄진 것이었다. 이왕 이렇게 된 거, 7주 동안 열심히 살았으니 남은 1주는 보람차게(=아무것도 안 하고) 보내자고 결심했다.

정말로 한 이틀 동안은 아무것도 안하고 신촌 연합 스터디 연습문제만 꼬박꼬박 풀다가, 홍익대 HI-ARC 학회장님의 수다용 디스코드 방에서 친해진 @swoon, @strawji와 번뜩이는 아이디어를 하나 생각해냈다. solved.ac 티어와 내가 여태까지 푼 문제들의 유형을 고려해서 BOJ에서 3문제를 추천해주는 서비스다. 개발할 생각에 완전 신이 나서 우리의 스승님인 @malkoring(a.k.a 망고링)님께 가서 방금 우리가 떠올린 개쩌는 아이디어를 말씀드렸다. 워낙 이런 부분에서는 직설적인 분이시라 빠꾸(?)먹을 수도 있겠다고 생각했었는데, 의외로 긍정적인 대답을 받았다. 이렇게 결성된 팀이 20학번 2명, 19학번 1명, 스승님 1명으로 구성된 Team solved.wa(@malkoring, @ccoco(나), @swoon, @strawji)다. 이름에서도 느껴지지만 solved.ac의 이미테이션이다. 하핫👍

그런데, 이게 또 뭐람? 이미 비슷한 기능이 BOJ에서 서비스되고 있었던 것이다. 심지어 우리가 구상한 것보다 더 좋아보였다! 그래서 바로 때려치웠다.

데체외?

 

Mazassumnida의 탄생

갈 곳을 잃어 방황하고 있던 어린양 3마리에게 망고링님이 완전 멋진 아이디어를 던져주셨다. 바로 solved.ac의 티어를 github 프로필에 예쁘게 보여주는 것! 이것이 바로 마자씀니다 프로젝트의 시작이었다.

세상에서 제일 어려운 프로젝트 이름 짓기

프로젝트명을 후딱 짓고, 우리는 바로 개발에 들어갔다. 망고링님이 Django 기본 세팅을 끝내주신 다음 나와 @strawji에게 넘겨주셨다. svg로 구현하는 건 생각보다는 어려웠지만, 막상 해보니 으어엄청 어렵진 않았다. 태그 안에서 text, rect, line 등의 태그로 프로필에 보일 뱃지를 예쁘게 꾸미기만 하면 되었다.

아래는 svg 코드를 작성하기 전 혼자서 포토샵으로 끄적여본 뱃지의 디자인 초안이다. 티어의 숫자 부분을 경험치 바가 원형으로 감싸고 있는 디자인인데, 원형 경험치 바를 구현하는 것이 어려워서 최종적으로 빠지게 되었다. 또 배경의 그라데이션 비율과 색상이 조금 바뀌었다. 그리고 something merong 자리에 획득한 총 경험치량이 들어가게 되었다.

svg를 다루는 건 굉장히 재미있었는데, 사실 svg로 이렇게 예쁜(?) 걸 만들 수 있는 줄 몰랐다. 그런데 생각보다 내가 조정할 수 있는 값들이 많아서 내 입맛대로 디자인하는 재미가 있었다. calcmode, keyTimes, keySplines 등으로 애니메이션 속도까지 조절할 수 있을 줄은 몰랐다.

음... svg를 열심히 깎은 얘기를 멋지게 풀고 싶은데, 장인정신으로 한 땀 한 땀 요소들 배치한 것밖에 없어서 풀 썰이 없다..

어찌어찌해서 나온 첫 번째 디자인은 바로 이것이다. 티어의 숫자 부분을 원형 경험치 바 대신 solved.ac의 휘장 모양으로 변경하고, 원형 경험치 바는 선형 바로 바꿨다. 뱃지에 들어갈 정보는 url의 쿼리를 통해 백준 핸들을 전달받은 후 solved.ac의 api를 통해 유저 정보를 json으로 가져왔다. 생각보다 다양한 정보들을 api를 통해 받을 수 있었는데, 본인의 현재 티어까지의 경험치 요구량과 다음 티어를 달성하기 위한 경험치 요구량이 그 예이다. 덕분에 현재 티어에서의 획득 경험치량과 다음 티어를 달성하기 위해서 필요한 경험치량을 쉽게 구할 수 있었어서, 경험치 바 밑에 현재 경험치량 / 필요한 경험치량을 표시해주었다. 소속 정보도 얻을 수 있는데, 대부분의 대학교와 회사들은 이름이 영문으로 등록되어 있고, 유저가 개인적으로 요청해서 등록된 중, 고등학교들은 아예 이름 정보가 없어서 뱃지에 표시하기엔 무리가 있었다.

mazassumnida v.0

하지만 예쁘게 완성된 이 뱃지는 세상 빛을 보기도 전에 폐기되었다. 테스트로 뱃지를 임시로 만든 github 계정의 프로필 readme에 올려보니, 바로 아래 이미지처럼 손글씨 폰트가 완전 와장창 하고 깨지는 것이다. 진짜... 이거 실화냐?

와장창..

 

부러진 폰트는 다시 붙이면 돼... 아마도

폰트를 살리기 위한 발악. 위에서 4번째 커밋은 훼이크다

서버에서 직접 접속하면 렌더링이 잘 되었는데, Github에 올리기만 하면 폰트가 깨지는 것이다. 아예 안 되는 것도 아니고, 반만 되는(?) 이런 상황에서 뭘 어떻게 고쳐야 할지 감이 오질 않았다. 망고링님께서는 외부 리소스에서 svg를 요청할 때의 폰트 로딩은 웹 브라우저가 처리를 하기 때문에 github에서 캐싱하는 과정에서 문제가 발생한 것 같다고 하셨다. 어떻게든 저 예쁜 폰트를 집어넣기 위해 https를 http로 고쳐보고, display 값을 swap에서 block으로 고쳐봐도 github은 나에게 저 구리구리한 폰트만 보여줄 뿐이었다. 친구, 친구의 친구, 혈육, 구글님 등 도움을 청할 수 있는 거의 모든 곳에 도움을 요청해서 해결 방법을 찾아보려고 했지만... 먹히는 것은 없었다. 그래서, 최후의 방법으로 폰트를 base64로 인코딩해서 직접 때려 박기로 했다!

base64로 인코딩한 폰트(음~~~청 김)

결과는 응~ 실패였다. 😱

거의 6시간을 쉬지 않고 붙잡고 있었던 터라, 더 붙잡고 있으면 정신이 탈주할 것 같아서 과감하게 때려치웠다. 대신, 문제가 되는 폰트를 안 쓰는 방향으로 디자인을 수정하기로 했다. 이렇게 나온 디자인이 제일 첫 번째에 나온 가칭 v1인데, 요 버전으로 수정하는 데는 5분도 채 안 걸렸던 것 같다. 마자씀니다의 3가지 버전 중에서 내가 제일 좋아하는 버전이기도 하다.

휘장을 과감하게 포기하고, 티어 이름과 숫자를 투명도를 약간 낮춰 오른쪽에 배치했다. 마자씀니다 팀 내에서 휘장이 없어져서 아쉽다는 말이 많이 나왔지만, 휘장과 같이 포인트가 되는 폰트가 없는 이상 휘장을 계속 들고 가기는 힘들다고 생각했다. 그래서 장식 없이 담백하게 디자인된 v1이 세상 빛을 보게 되었다.

mazassumnida v.1!

 

(나름) 폭발적인 반응

마자씀니다가 배포되고, 나와 망고링님은 트위터에 우리가 만든 프로젝트를 홍보했다. 처음엔 하트가 하나둘씩 박히기 시작하더니, 갑자기 리트윗을 타고 여기저기에 퍼지기 시작했다. 맨날 트위터에 재미없고 이상한 얘기만 해서 사람들이 내 트윗을 많이 봐주실까 걱정했는데, 정말 의외였다. 처음 뵙는 분들께 디자인이 멋지다고 칭찬도 받고, 또 마자씀니다를 자기의 블로그에 소개해주시는 분도 계셨다.

마자씀니다의 github 링크도 같이 올렸는데, 순식간에 스타 8개를 받았다. 내 개인 계정에서 받은 스타를 다 합쳐도 4개인데 마자씀니다는 세상에 나온 지 1시간도 안돼서 스타 8개라니, 사람들이 마음속 어딘가에서 원했던 것을 우리가 구현해주었다는 것이 너무 뿌듯했다. 자고 일어나서 확인해보니 받은 스타는 17개로 늘어나 있었다. 이것이 개발 인싸의 삶인가... 생각했다. 올해 들어 제일 행복했던 순간이었다.

 

부러진 폰트는 PNG로 넣으면 돼(부제: Mazassumnida v2의 탄생)

휘장이 들어간 원래 디자인을 포기하지 못했던 우리 팀원들은 결국 폰트를 png로 저장해서 때려 넣는 방식을 선택했다. 다행히 웹폰트와는 다르게 이미지는 멀쩡하게 잘 불러와줘서 다행이었다. 이렇게 나온 게 마자씀니다 v2이다.

추가로, v1, v2 모두에게 텍스트 애니메이션을 추가했다. svg도 @keyframes으로 애니메이션의 과정을 설정할 수 있었다. 경험치를 표시하는 선도 dashoffset과 dasharray를 적절히 조정하여 자연스럽게 증가하는 애니메이션을 만들었다. 여기에 또 추가로, 내가 피곤에 절어 자고 있는 사이 @strawji가 v2에 완전 핵 멋진 그라데이션 애니메이션과 휘장 애니메이션을 추가했다. 

Mazassumnida v.2!

 

마무리

svg에 대한 배경지식이 전무했던 터라 잘 해낼 수 있을까 걱정했었는데, 너무 잘 해내서 굉장히 뿌듯하다. 게다가 이번 프로젝트를 계기로 좋은 사람들을 많이 만나서 내겐 굉장히 소중한 기억으로 남을 것 같다.

방학 동안 효창공원 스터디를 진행하면서 내가 가는 이 길이 맞는 길인지 의구심이 들어 개인적으로 굉장히 힘들었었다. 대전에서 서울을 왔다 갔다 하며 스터디를 진행했다 보니 신체적으로 힘들기도 정말 힘들었었는데, 이 스터디를 통해 내가 얼만큼 성장했는지 눈에 보이는 성과가 나지를 않아 괴로웠다. 그래서 제코베의 인스타그램 클론 코딩 캠프를 신청한 것이었기도 하다. 인스타그램 클론 코딩 캠프까지 취소되고 나서 참 허탈했었는데, 이렇게 좋은 분들과 의미 있는 프로젝트를 성공적으로 수행해내서 정말 기쁘다. 많은 분들께 관심도 받고, 개인적으로 동경하는 분께도 디자인 쪽으로 칭찬도 받아서 곧 죽는다 해도 별 여한이 없을 것 같다(사실 좀 있다). 

마지막으로, 좋은 아이디어를 주신 망고링님과 이 프로젝트를 통해 프론트엔드에 재능을 찾은 준혁이에게 감사의 말을 전합니다. 짱!