연말에 쓰고 싶던 '나의 한 해 Wrapped' 카드, 서버 없이 직접 만들었어요

올해도 연말이 가까워지니까 인스타 피드에 Spotify Wrapped 캡처가 하나둘 올라오기 시작하더라고요. 한 해 동안 들은 음악을 결산해서 예쁜 카드로 만들어주는 그거요. 볼 때마다 부러웠는데 동시에 좀 아쉬웠어요. 저는 올해 음악만 들은 게 아니라 영화도 보고 책도 읽고 여행도 다녔는데, 제 한 해 전체를 저렇게 한 장으로 정리해주는 건 왜 없지 싶더라고요. 그래서 그냥 주말에 직접 만들었습니다. 이름은 My Year Wrap, 2026 나의 한 해 결산 카드 생성기예요.

쓰는 방식은 단순해요. 먼저 테마를 하나 고르고, 올해를 한 단어로 표현하면 뭐였는지, 제일 많이 들은 노래, 기억에 남는 영화랑 책, 읽은 책 권수 같은 숫자들, 잊지 못할 순간, 그리고 내년 다짐을 적으면 됩니다. 전부 채울 필요는 없어요. 적은 항목만 카드에 나오고 빈 칸은 알아서 빠지게 해놨어요. 사실 처음엔 항목 하나라도 비면 레이아웃 깨지겠지 하고 대충 넘기려다가, 이 빈 칸 처리가 은근히 손이 많이 가는 걸 뒤늦게 알았네요.

입력을 끝내고 카드 만들기를 누르면 Wrapped처럼 세로 스토리 카드로 넘어갑니다. 표지에서 시작해서 올해의 단어, 컬렉션, 숫자 요약, 순간, 다짐까지 열세 장이 쭉 이어지고, 화살표나 키보드로, 모바일에선 스와이프로 넘겨 봐요. 한 장씩 등장할 때 살짝 애니메이션도 넣었어요.

올해의 단어 카드는 이렇게 나와요. 저는 단단해짐이라고 적었는데, 글자 하나가 화면을 꽉 채우니까 별거 아닌데도 좀 뭉클하더라고요.

제일 공들인 장면은 숫자 요약이에요. 당신은 올해 책 23권, 영화 117편 이런 식으로 숫자가 크게 박히는 그 Wrapped 특유의 느낌을 내고 싶었거든요.

순간이랑 다짐 카드도 좋아하는 장면이에요. 한 줄짜리 문장이 배경 그라데이션 위에 올라가는 게 생각보다 분위기가 나더라고요.

기술적으로는 서버가 아예 없어요. React 19에 Vite, Tailwind 4로만 짰고 입력값과 테마는 전부 localStorage에 저장돼서 다시 들어와도 그대로 남아 있습니다. 백엔드를 안 둔 게 게을러서는 아니고, 이런 가벼운 토이앱은 내 데이터가 어디 서버에 저장되나 하는 걱정 없이 그냥 켜서 쓰고 닫는 게 맞다고 생각했어요.

제일 삽질한 부분은 역시 카드를 이미지로 저장하는 기능이었어요. 화면에 보이는 걸 1080×1920 이미지로 뽑아야 하는데, 처음엔 화면 캡처 라이브러리를 붙였다가 그라데이션이랑 폰트가 미묘하게 어긋나서 전부 걷어내고 Canvas 2D로 직접 그리기로 했어요. 그랬더니 이번엔 웹폰트가 로드되기 전에 그려버려서 글자가 기본 폰트로 나오는 문제가 생기더라고요. 폰트 로드가 끝날 때까지 기다렸다가 그리도록 바꾸고 나서야 잡혔어요. 한글이랑 이모지가 섞인 긴 문장, 예를 들면 첫 10km 완주하고 바다 앞에서 울었던 날 🌊 같은 건 자동으로 줄바꿈하고 글자 크기를 줄여서 안 넘치게 맞췄는데, 이 자동 맞춤 로직 다듬는 데 시간을 제일 많이 썼네요. 두어 번은 글자가 카드 밖으로 삐져나가서 혼자 한숨 쉬었습니다.

테마는 다섯 개 넣었어요. 네온 선셋, 오로라, 라임 팝, 선셋 탠저린, 미드나잇 그레이프. 고르는 즉시 모든 카드에 반영돼서 취향대로 바꿔가며 만들 수 있어요. 저는 오로라가 제일 마음에 들어서 스크린샷도 전부 그걸로 찍었네요.

연말에 가볍게 올해를 돌아보고 싶은 분들이 써보면 딱 좋을 것 같아요. 로그인도 설치도 없으니 부담 없이 링크 눌러서 한 장 만들어 보세요. 저도 제 올해를 적다 보니 생각보다 괜찮은 한 해였구나 싶어서, 만들다 말고 혼자 좀 뭉클했습니다.