Business Cards Move. In Form. In Connection. In Spirit.
https://www.youtube.com/watch?v=QJ6yavh5JlA
https://kitscript.com/game/bizcard/
A business card seems like one of the simplest design projects you can make. Put a name, phone number, and company logo in the right places, export an image, and you're done. That's exactly how I started.
I built a small web tool that displayed a business card as soon as you entered a name, title, company, phone number, and email address. It generated a QR code and exported the result as a PNG. No installation, no server, no build process—just a single HTML file that could run anywhere.
Then I actually started using it.
Unexpected problems began to appear one after another. A QR code containing a Korean name would sometimes fail because the encoded data exceeded the library's limits. Some smartphones couldn't import the contact information at all. The emoji icons beside the phone number and email looked different on every operating system, and occasionally turned into broken characters after exporting the image. What looked like a simple business card creator was quietly failing in more places than I had imagined.
So I started fixing things.
I replaced the QR generation engine so it could reliably handle Korean characters and special symbols. Every emoji icon was replaced with handcrafted SVG graphics for consistent rendering. The QR code itself was generated internally at a much higher resolution than its on-screen size, ensuring that it remained perfectly sharp whether exported or embedded elsewhere.
Once those problems were solved, I looked at the application again.
This time, the code wasn't the issue—the interface was.
A light gray background and white input fields worked well enough, but the application felt more like an administration panel than a creative workspace. So I redesigned the entire experience. The interface became a dark stage where the business card sat under a subtle spotlight. Instead of feeling like filling out a form, I wanted the experience to resemble selecting a piece of artwork in a gallery.
The templates evolved as well. Rather than simply changing background colors, each template developed its own personality—Corporate, Minimal, Dark, Aurora, and Luxury. Each one was paired with carefully chosen typography and background patterns. Korean layouts automatically favored Korean typefaces, while English cards combined serif and sans-serif fonts in a way that felt natural. Watching the exact same name and phone number transform completely simply by switching from dots to waves or geometric patterns made me realize something.
This was no longer just a QR code generator.
Then another challenge appeared on mobile devices.
Whenever the preview was pushed below the input form, editing became frustrating. Every small change required scrolling up and down repeatedly. I redesigned the interface so the preview stayed fixed at the top while the editing controls were organized into separate tabs for Information, Design, and QR settings. The business card, once locked to a fixed 500-pixel width, automatically scaled to fit any screen size. Rather than shrinking the desktop version, I built a workspace that actually felt comfortable to use with a thumb.
If I had stopped there, it would have become a polished business card designer.
But another question kept bothering me.
Does a business card really have to be static?
If it's being shared digitally, why shouldn't the logo gently fade in? Why shouldn't the name and contact information appear one after another? Why couldn't a subtle beam of light sweep across its surface?
So I gave the card motion.
Some animations gently lifted elements into view. Others slid them in from the side, added a slight bounce, or created a metallic light sweep across the design. However, replaying those animations every time someone typed a character quickly became distracting, so entrance animations were only triggered when changing templates or pressing the replay button. Motion wasn't there to show off—it was there to strengthen the first impression.
Eventually, the business card became much more than an image.
It could be exported as a WebM video or baked into a completely self-contained HTML file that required no server at all. Open the file, and the card appears on a dark stage. The logo fades in first, followed by the name and contact information. Tap anywhere, and the entire sequence begins again. A single business card had become an image, a video, and an interactive web page all at once.
I also built an automatic demonstration mode for first-time visitors. If the application is left untouched, different people, templates, fonts, patterns, and motion presets cycle automatically to showcase its capabilities. The moment the user interacts with the page, the demo stops instantly and restores their original work exactly as they left it. It's essentially the attract mode from arcade games, reimagined for a business card designer.
What began as a simple attempt to fix a QR code bug gradually transformed into redesigning the interface, rebuilding the mobile experience, and eventually bringing static graphics to life.
Now the next step extends beyond the screen itself.
Support for Korean, credit-card, and U.S. business card dimensions. Front and back layouts. Professional 300 DPI exports with bleed and safe margins. Printable PDFs ready for commercial printing. Korean on one side, English on the other, complete with downloadable contact files.
At that point, this will no longer be just another business card maker.
It will become a compact publishing system capable of producing print-ready business cards from start to finish.
I never planned to build a tool like this.
All I wanted to do was fix a broken QR code.
But every problem I solved revealed the next one waiting behind it. Along the way, a simple image generator became a video creator, then an interactive web page, and now it's evolving into a print production system.
Looking back, I've realized that's how most of my projects have always grown—not from grand plans, but from solving one real problem after another.
명함은 움직이는 거야. 형태도, 연결도, 마음도.
https://www.youtube.com/watch?v=9nsXW0CFsQk
https://kitscript.com/game/bizcard/
명함은 가장 단순한 디자인 작업처럼 보입니다. 이름과 전화번호, 회사 로고를 정해진 위치에 배치하고 이미지를 저장하면 끝나는 작업이라고 생각하기 쉽습니다. 나도 그렇게 시작했습니다. 이름과 직함, 회사, 전화번호와 이메일을 입력하면 화면에 명함이 나타나고, QR 코드를 넣어 PNG로 저장하는 웹 도구였습니다. 설치도 필요 없고, 서버도 없으며, HTML 파일 하나만 열면 바로 사용할 수 있는 작은 프로그램이었습니다.
하지만 실제로 사용하기 시작하자 예상하지 못했던 문제들이 하나씩 모습을 드러냈습니다. 한글 이름이 들어간 연락처를 QR 코드로 만들면 데이터가 넘친다는 오류가 발생했고, 어떤 스마트폰에서는 QR을 스캔해도 연락처가 제대로 등록되지 않았습니다. 전화번호 옆에 붙여 놓은 이모지는 운영체제마다 모양이 달랐고, 이미지를 저장하면 깨진 문자처럼 보이기도 했습니다. 명함 한 장을 만드는 단순한 작업이라고 생각했지만, 생각보다 많은 곳에서 조용히 실패하고 있었습니다.
그래서 하나씩 고치기 시작했습니다. 한글과 특수문자를 안정적으로 처리하도록 QR 생성 방식을 바꾸고, 모든 이모지를 직접 만든 SVG 아이콘으로 교체했습니다. QR은 화면에 보이는 크기와 상관없이 내부적으로는 항상 고해상도로 생성하도록 바꾸어 저장하거나 다른 이미지에 넣어도 선명하게 유지되도록 했습니다.
그렇게 문제를 해결하고 다시 화면을 바라보니, 이번에는 코드보다 화면 자체가 눈에 들어왔습니다. 밝은 회색 배경과 흰색 입력창. 기능은 충분했지만 명함을 만드는 공간이라기보다 관리 도구처럼 보였습니다. 그래서 화면 전체를 어두운 무대로 바꾸고, 중앙의 명함에 시선이 자연스럽게 모이도록 다시 설계했습니다. 명함을 만드는 시간이 입력 작업이 아니라 작은 전시장에서 작품을 고르는 경험처럼 느껴졌으면 했습니다.
템플릿도 단순히 배경색만 바뀌는 수준에서 벗어났습니다. 기업용, 미니멀, 다크, 오로라, 럭셔리처럼 서로 다른 성격을 가진 디자인을 만들고, 각각에 어울리는 글꼴과 패턴을 연결했습니다. 한글 명함에는 한글 서체를, 영문 명함에는 세리프와 산세리프의 조합을 자연스럽게 적용했습니다. 같은 이름과 전화번호라도 도트와 웨이브, 기하학 패턴 위에 놓이는 순간 전혀 다른 분위기를 만들어 냈습니다. 그 모습을 보고 나서야 이 도구가 더 이상 QR 코드 생성기가 아니라는 사실을 인정하게 되었습니다.
모바일에서는 또 다른 문제가 기다리고 있었습니다. 입력창 아래로 명함 미리보기가 밀려나면 글자 하나를 수정할 때마다 화면을 계속 위아래로 움직여야 했습니다. 그래서 명함 미리보기를 화면 상단에 고정하고, 정보와 디자인, QR 설정을 각각 탭으로 분리했습니다. 500픽셀로 고정되어 있던 명함도 화면 폭에 맞춰 자동으로 축소되도록 바꾸었습니다. 데스크톱 화면을 단순히 줄인 것이 아니라, 손가락으로 편집하기에 자연스러운 새로운 작업 공간을 만든 셈이었습니다.
여기서 끝났다면 조금 세련된 명함 제작기 하나가 완성됐을 것입니다. 그런데 도구를 계속 다듬다 보니 새로운 질문이 생겼습니다.
명함은 꼭 정지해 있어야 할까.
온라인에서 전달되는 명함이라면 로고가 천천히 나타나고, 이름과 연락처가 순서대로 등장하며, 빛이 표면을 스쳐 지나가도 이상할 이유는 없었습니다.
그래서 명함에 움직임을 더했습니다. 아래에서 부드럽게 떠오르는 방식, 옆에서 밀려 들어오는 방식, 살짝 튀어 오르는 방식, 금속 표면 위를 빛이 흐르는 방식까지 여러 가지 모션을 만들었습니다. 대신 글자를 입력할 때마다 애니메이션이 다시 시작되면 편집을 방해하기 때문에, 템플릿을 바꾸거나 사용자가 직접 재생 버튼을 눌렀을 때만 모션이 시작되도록 설계했습니다. 움직임은 화려함을 과시하기 위한 효과가 아니라, 명함의 첫인상을 더욱 선명하게 만드는 장치였습니다.
완성된 명함은 더 이상 이미지 하나로 끝나지 않았습니다. WebM 영상으로 저장할 수도 있고, 서버 없이 혼자 실행되는 HTML 파일로 내보낼 수도 있습니다. 상대방이 그 파일을 열면 어두운 무대 위에 명함이 나타나고, 로고와 이름, 연락처가 차례대로 등장합니다. 화면을 한 번 누르면 처음부터 다시 재생됩니다. 명함 한 장이 이미지이면서 영상이고, 동시에 하나의 독립된 웹페이지가 된 것입니다.
처음 사용하는 사람을 위한 자동 시연 모드도 만들었습니다. 아무런 조작이 없으면 서로 다른 인물과 템플릿, 글꼴, 패턴, 모션이 차례대로 바뀌며 도구의 기능을 자연스럽게 보여 줍니다. 하지만 사용자가 화면을 클릭하는 순간 시연은 즉시 종료되고, 원래 입력해 두었던 정보가 그대로 복원됩니다. 게임에서 시작 화면을 장식하는 어트랙트 모드를 명함 제작 도구에 옮겨 놓은 셈입니다.
QR 코드 오류 하나를 고치려던 작업은 어느새 화면 디자인을 바꾸고, 모바일 환경을 다시 설계하고, 정지된 이미지에 움직임을 더하는 과정으로 이어졌습니다. 그리고 이제 다음 단계는 처음으로 화면 밖을 향하고 있습니다. 한국 표준과 신용카드형, 미국식 규격을 실측으로 지원하고, 앞면과 뒷면을 함께 디자인하며, 재단 여백과 안전 영역을 포함한 300DPI 이미지와 PDF를 출력하는 것입니다. 한글 앞면과 영문 뒷면, 연락처 파일까지 함께 만들어 낼 수 있다면, 이 도구는 단순한 명함 제작기를 넘어 인쇄소에 바로 전달할 수 있는 작은 출판 시스템이 될 것입니다.
처음부터 이런 도구를 만들 계획은 없었습니다. QR 코드 하나가 제대로 동작하지 않았고, 그 문제를 해결했을 뿐입니다. 하지만 문제를 하나씩 해결하는 동안 도구는 스스로 다음 모습을 만들어 갔습니다. 이미지를 만들던 프로그램은 영상을 만들게 되었고, 웹페이지가 되었으며, 이제는 인쇄까지 향하고 있습니다. 생각해 보면 지금까지 만들어 온 대부분의 도구들도 모두 그렇게 시작되었습니다.
FROM BUNTGAMES.COM