이름 석 자를 전각 낙관 도장으로 새겨 주는 웹앱, '내 이름 낙관'
한글·한자 이름을 전통 전각 규칙대로 새긴 낙관 도장으로 만들어 투명 PNG로 바로 뽑아 주는 웹앱이에요.
자랑 포인트
- 서버도 데이터베이스도 없는 완전 무상태 구조 — 입력한 이름은 어디에도 저장·전송되지 않고, 설정은 localStorage, 공유는 URL 인코딩으로만 처리했어요.
- 글자 수(1~4자)에 따라 자리가 바뀌는 순수 SVG 전각 배치 엔진. 시드 기반 질감이라 같은 이름도 팔 때마다 새김 결이 달라집니다.
- 입력한 글자만 서브셋한 폰트를 SVG에 임베드해, 보는 기기에 폰트가 없어도 어디서나 똑같이 나오는 투명 PNG로 내보내요.
이름 석 자만 넣으면 전통 전각(篆刻) 규칙대로 새긴 낙관 도장이 나오는 웹앱을 만들었어요. 프로필 사진이나 그림·문서 서명에 슬쩍 얹을 나만의 도장이 있으면 재밌겠다 싶어서 시작한 프로젝트입니다.
주요 기능
왼쪽에서 이름을 입력하고 몇 가지만 고르면 오른쪽에 도장이 실시간으로 새겨집니다.
- 전통 전각 배치 — 글자 수에 따라 자리 잡는 규칙이 실제로 달라요. 1자는 크게, 2자는 세로 한 열, 3자는 우2·좌1, 4자는 2×2. 옛 도장처럼 우상단부터 읽는 순서 그대로 배치했습니다.
- 음각·양각, 서체 4종 — 파낸 글자(백문)와 도드라진 글자(주문)를 토글로 바꾸고, 새김명조·붓글씨·굵은고딕·고운바탕 중에서 골라요. 인주는 주홍·먹·남 3색, 프레임은 정사각/원형.
- 한자 이름도 — 한글·한자 1~4자를 섞어 쓸 수 있고, 서체가 실제로 그릴 수 있는 글자인지 미리 검사해서 새길 수 없는 한자는 알려 줍니다.
- 글자를 직접 다듬기 — 도장 위에서 글자를 마우스로 끌어 옮기고 크기·위치를 슬라이더로 조정해요. 진짜 전각처럼 글자끼리 살짝 파고드는 배치를 만들 수 있습니다.
- 투명 PNG로 내보내기 — 1024px 투명 배경(또는 한지톤)으로 저장돼서 어디에든 바로 얹을 수 있어요.
모바일에서도 레이아웃이 자연스럽게 접혀 그대로 동작합니다.
기술 이야기
도장은 이미지가 아니라 순수 SVG로 그렸어요. 전각 배치 엔진이 글자 수에 맞춰 자리를 잡고, 시드 기반 질감 필터(feTurbulence + displacement)를 얹어서 같은 이름이라도 팔 때마다 새김 결이 달라집니다. '다시 파기'를 누르는 재미가 여기서 나와요.
내보내기가 가장 까다로웠는데, 입력한 글자만 골라 서브셋한 폰트를 SVG에 data-URI로 임베드한 뒤 Canvas로 래스터화합니다. 이렇게 하면 보는 기기에 그 폰트가 없어도 똑같은 도장이 나와요.
그리고 서버가 아예 없습니다. 설정은 localStorage에, 공유는 이름·옵션·시드·다듬기 값을 전부 URL에 인코딩해서 링크만 열면 같은 도장이 그대로 재현돼요. 덕분에 입력한 이름이 어디에도 저장되거나 전송되지 않습니다. 스택은 Next.js 16(App Router) + React 19 + TypeScript, 스타일은 Tailwind CSS 4로 짜서 Vercel에 올렸어요.
만들다 보니 이름마다 새김이 다르게 나오는 게 은근히 중독성 있더라고요. 한번 자기 이름으로 파 보세요.