수능이 코앞이라, 응원 카드 만들어주는 웹앱을 만들었습니다

수능이 딱 한 달도 안 남았다. 달력 보다가 문득 조카 생각이 났다. 재수까지 해서 이번이 두 번째 수능인데, 뭐라도 응원을 해주고 싶은데 카톡에 "화이팅" 한 줄 보내자니 너무 성의 없어 보이더라. 그렇다고 손편지는... 요즘 애들이 종이 편지를 받고 좋아할까 싶기도 하고. 그래서 그냥 만들었다. 이름이랑 한마디만 넣으면 감성 카드 한 장이 뚝딱 나오는 웹앱.

첫 화면에 큼지막하게 D-day가 박힌다. 2027학년도 수능이 2026년 11월 19일(목)이라, 오늘 기준으로 D-26이 뜬다. 아래쪽 입력칸에 받는 사람 이름, 보내는 사람, 응원 메시지를 넣으면 오른쪽 카드가 실시간으로 바뀐다.

사실 이 D-day 계산에서 제일 골치 아팠다. 처음엔 그냥 (수능 날짜 − 지금)을 밀리초로 빼서 날짜로 나눴는데, 새벽에 테스트하면 하루가 틀어지더라. 시·분·초가 끼어서 생기는 그 유명한 off-by-one. 수험생 입장에선 D-day 하루가 얼마나 크냐. 하루라도 틀리면 안 된다 싶어서, 결국 시간은 다 버리고 KST 자정 기준으로 "날짜만" 빼도록 다시 짰다. 이 한 군데만 몇 번을 다시 봤는지 모른다.

테마는 다섯 개 넣었다. 받는 사람 분위기 따라 고르라고.

새벽 해돋이는 "이제 곧 밝아온다" 느낌이고, 합격 네이비골드는 좀 묵직하고 진지하게. 별이 빛나는 밤은 늦게까지 책상 앞에 앉아 있는 애들 생각하면서 넣었고, 행운 네잎클로버는 말 그대로 운 비는 거다. 따뜻한 편지지까지 해서 다섯 종.

응원 문구도 직접 쓰기 귀찮을까 봐 템플릿을 열 개 깔아놨다. "떨지 말고 아는 것만 다 쓰고 와!" 같은 거. 뭘 쓸지 모르겠으면 랜덤 버튼 한 번 누르면 하나 골라준다. 물론 직접 타이핑해서 쓰고 싶은 말 넣어도 된다.

진짜 삽질은 카드 그리는 쪽이었다. Canvas 2D로 글자를 직접 그리는데, 한글이 자꾸 깨지거나 엉뚱한 기본 폰트로 나왔다. 알고 보니 Pretendard 웹폰트가 다 로드되기 전에 캔버스를 그려버려서 그런 거였다. document.fonts.ready를 기다렸다가 그리도록 고치니까 그제서야 제대로 나오더라. 이름이 길거나 메시지가 길면 글자가 카드 밖으로 삐져나가는 것도 문제였는데, 자동 줄바꿈이랑 폰트 크기 자동 축소를 넣어서 어지간히 길어도 카드 안에 예쁘게 들어가게 했다. 이모지도 안 깨지고 잘 나온다.

완성된 카드는 인스타에 올리기 좋게 정사각 1080×1080이랑 스토리 1080×1920, 두 사이즈로 뽑을 수 있다. 모바일에선 공유 버튼 누르면 바로 공유 시트가 뜨고, 안 되면 다운로드나 문구 복사로도 넘긴다.

하나 신경 쓴 건, 입력한 이름이나 메시지가 서버로 안 간다는 점이다. 카드는 전부 브라우저 안에서 그려지고, 입력값과 테마는 localStorage에만 저장돼서 다시 들어와도 그대로 남아 있다. 누구한테 뭐라고 써 보냈는지 서버에 남을 일이 없다. 수능 날짜도 직접 바꿀 수 있어서, 마음만 먹으면 다른 시험 D-day 카드로도 쓸 수 있다.

React 19에 Vite, Tailwind 4, 그리고 Canvas 2D만으로 만든 100% 프론트 앱이라 서버도 없고 API 키도 없다. 주말에 붙잡고 만든 토이앱인데, 주변에 수험생 있으면 한 장 만들어 보내주면 딱 좋을 것 같다. 수능 끝난 뒤엔 D+n이랑 "수고했어요" 메시지로 바뀌게도 해놨다. 올해 수험생들, 다들 원하는 결과 있길.