내 이름을 전각 도장으로 파주는 웹앱을 만들었어요

그림 그리는 분들 작품 구석에 찍혀 있는 빨간 도장 있잖아요. 낙관이요. 어느 날 그게 갖고 싶어졌습니다. 근데 도장 파러 가자니 일이고, 포토샵으로 만들자니 그 전각 특유의 느낌이 안 살고. 그래서 웹앱으로 만들었습니다. 이름 넣으면 전통 전각(篆刻) 규칙대로 새긴 낙관 도장이 나오는 '내 이름 낙관'입니다.

왼쪽에서 이름 입력하고 옵션 몇 개 고르면 오른쪽에 실시간으로 새겨집니다. 재밌는 게, 전각은 글자 수에 따라 배치 규칙이 실제로 달라요. 1자는 크게 한가운데, 2자는 세로 한 열, 3자는 오른쪽에 둘 왼쪽에 하나, 4자는 2×2. 옛 도장처럼 우상단부터 읽는 순서까지 맞췄습니다. 이거 조사하느라 전각 자료를 꽤 찾아봤는데, 파고들수록 규칙이 정교한 세계더라고요.

음각(파낸 글자, 백문)/양각(도드라진 글자, 주문) 토글, 서체 4종(새김명조·붓글씨·굵은고딕·고운바탕), 인주색 3종, 정사각/원형 프레임을 고를 수 있고 한자 이름도 됩니다. 서체가 그 한자를 실제로 그릴 수 있는지 미리 검사해서 안 되는 글자는 알려줘요. 글자를 마우스로 끌어서 위치·크기를 직접 다듬을 수도 있는데, 진짜 전각처럼 글자끼리 살짝 파고드는 배치도 만들 수 있습니다.

기술적으로 제일 마음에 드는 부분은 질감입니다. 도장이 이미지가 아니라 순수 SVG인데, 시드 기반 질감 필터(feTurbulence + displacement)를 얹어서 같은 이름도 팔 때마다 새김 결이 다르게 나옵니다. '다시 파기' 버튼을 계속 누르게 되는 이유예요. 내보내기는 좀 까다로웠는데, 입력한 글자만 골라 서브셋한 폰트를 SVG에 data-URI로 임베드하고 Canvas로 래스터화해서, 그 폰트가 없는 기기에서도 똑같은 도장이 보이게 했습니다. 1024px 투명 PNG(또는 한지톤)로 나와요.

서버는 아예 없습니다. 설정은 localStorage에, 공유는 이름·옵션·시드·다듬기 값까지 전부 URL에 인코딩돼서 링크만 열면 같은 도장이 그대로 재현됩니다. 입력한 이름이 어디에도 저장되거나 전송되지 않는다는 뜻이에요. 스택은 Next.js 16(App Router) + React 19 + TypeScript + Tailwind CSS 4, Vercel 배포입니다.

만들고 나서 제 그림... 은 없으니까 문서 서명이랑 프로필 사진에 찍고 있습니다. 생각보다 어디든 어울려요. 자기 이름 한번 파보세요. 새김 결 뽑기하는 재미가 있습니다.