개발 배경: 당신의 URL, 누군가 엿보고 있진 않나요?
“PC로 보고 있는 이 긴 URL을 지금 당장 내 스마트폰에서 확인하고 싶다.”
웹 엔지니어라면 하루에도 수십 번씩 마주하는 상황일 것입니다. 실기 디바이스에서의 레이아웃 확인, 모바일 전용 디자인 체크 등… 가장 빠른 방법은 역시 ‘URL을 QR 코드로 만들어 스캔하는 것’입니다.
하지만 인터넷에 널려 있는 흔한 ‘QR 코드 생성 사이트’를 쓸 때, 문득 이런 불안감이 들지 않으신가요?
그 URL에 개발 중인 프로젝트의 인증용 비공개 토큰이 포함되어 있지는 않나요? 혹은 경로(path)에 기밀성이 높은 시스템 이름이 들어 있지는 않나요?
“단순히 URL을 QR로 바꿀 뿐인데, 왜 굳이 서버와 통신해야 하지?”
많은 무료 서비스들이 생성된 URL을 히스토리로 기록하거나, 최악의 경우 외부에서 누구나 볼 수 있는 상태로 노출되기도 합니다. 이런 ‘막연한 불안감’을 해소하고 싶어서 **DevToolKits의 QR 코드 도구**는 탄생했습니다.
기술의 이면: Canvas API가 선사하는 ‘부드러운’ 경험
‘안전성’은 기본입니다. 여기에 우리는 ‘압도적인 사용성’까지 더하고 싶었습니다.
1. 서버를 거치지 않는 초고속 렌더링
일반적인 웹 앱은 서버에 요청을 보내고 생성된 이미지를 받아오는 과정을 거칩니다. 하지만 이는 미세한 딜레이를 유발하죠.
우리는 node-qrcode 라이브러리를 브라우저에서 직접 구동하고, Canvas API를 사용하여 여러분의 PC VRAM에 QR 코드를 직접 그려내는 방식을 채택했습니다.
글자를 입력하는 순간, 1ms의 지연도 없이 즉각적으로 변화하는 QR 코드. 이 ‘부드러운’ 반응성 자체가 우리가 목표로 한 개발 경험이었습니다.
2. 문서를 돋보이게 하는 ‘심미성’
엔지니어는 QR 코드를 단순히 스캔용으로만 쓰지 않습니다. 발표 자료나 사내 문서에 첨부하기도 하죠.
그래서 색상과 크기를 자유롭게 조절할 수 있게 만들었습니다. 브랜드 컬러에 맞춰 QR의 색을 바꾸고, 그 결과를 실시간으로 확인하며 최적의 이미지를 바로 얻을 수 있도록 말이죠.
”데이터 주권은 사용자에게”라는 당연한 가치
이 도구를 사용하는 동안 브라우저의 ‘네트워크’ 탭을 한번 열어보세요.
단 하나의 패킷도 전송되지 않는 것을 확인할 수 있을 겁니다.
스마트폰으로 URL을 보낸다는 지극히 개인적(혹은 기밀인) 행위에 제삼자가 개입할 여지를 아예 삭제했습니다.
마치며
QR 코드 생성 도구는 얼핏 보면 어디에나 있을 법한 흔한 도구입니다.
하지만 그 단순함 뒤에는 “프라이버시를 타인에게 맡기지 않겠다”라는 우리의 강력한 의지가 담겨 있습니다.
PC와 스마트폰 사이의 거리를 더 가깝게, 그리고 당신의 비밀을 더 안전하게.
DevToolKits가 여러분의 개발 환경을 더욱 매끄럽고 ‘안심’할 수 있는 곳으로 바꾸는 데 작은 도움이 되기를 바랍니다.