언제 한 페이지에 모으나
행사 부스, 카페 테이블, 사무실 복도처럼 ‘스캔할 것’이 여러 개인데 QR 스티커를 따로 붙이기 어려울 때가 있습니다. urlu의 문서 발행(/posts/{id}) 기능으로 HTML 페이지 하나에 QR을 그리드로 배치하고, 그 페이지 링크 하나만 인쇄하거나 카톡으로 보낼 수 있습니다.
각 QR은 서버의 /api/qr 엔드포인트가 실시간으로 그려 주므로, QR 이미지 파일을 따로 업로드·관리할 필요가 없습니다. URL이 바뀌면 문서를 수정(PATCH)하면 되고, 링크(id)는 그대로 유지됩니다.
구성 방법
문서 HTML에서 다음 패턴을 따릅니다.
- QR 하나마다 <figure>로 감싸고, <img src="/api/qr?…">에 width·height·alt를 지정합니다.
- 여러 figure를 grid grid-cols-1 sm:grid-cols-2(또는 3) gap-6 클래스 div 안에 넣습니다.
- figcaption에 ‘메뉴’, ‘Wi-Fi’처럼 짧은 라벨을 적습니다.
- URL QR은 data= 값에 encodeURIComponent한 주소를 넣습니다. Wi-Fi는 type=wifi와 ssid, password를 넣습니다.
- 스크롤이 길어지는 게 싫으면 그리드 대신 deck 클래스를 씁니다. 한 화면에 QR 한 장이 꽉 차고, 아래 ‹ 1 / 2 › 페이저나 좌우 스와이프로 넘깁니다. 페이저는 사이트가 그리므로 문서는 패널만 적으면 됩니다 (ai-authoring.md 4.2절).
홈에서 클릭으로 만들기
HTML을 직접 쓰지 않아도 됩니다. 홈의 QR 코드 탭에서 ‘여러 개’를 고르면 QR 항목을 개수 제한 없이 추가하고, 격자 또는 페이지 넘김 배치를 골라 페이지를 바로 발행할 수 있습니다.
항목마다 콘텐츠 타입(URL·Wi-Fi·텍스트 등)과 라벨을 따로 지정할 수 있고, 발행 전에 실제 게시될 모습을 미리 볼 수 있습니다. 발행하면 공유 링크와 수정용 토큰이 함께 나옵니다.
AI·API로 게시하기
에이전트나 스크립트가 페이지를 만들 때는 public/ai-authoring.md 6.5절 레시피를 따르세요. HTML 파일을 POST /api/posts로 보내면 공유 URL과 editToken이 돌아옵니다.
사람이 직접 쓸 때는 홈의 QR ‘여러 개’ 모드나 /write의 HTML 형식을 쓰거나, AI에게 ‘ai-authoring.md 6.5절대로 QR 3개짜리 HTML 만들어서 게시해줘’라고 요청하면 됩니다.
운영 팁
QR이 6개를 넘으면 2열 그리드보다 3열이 한 화면에 더 많이 들어갑니다. 모바일에서는 1열로 자동 줄바꿈됩니다.
한눈에 비교해야 하면 격자, 한 장씩 스캔하게 할 거면 페이지 넘김(deck)이 낫습니다. 덱은 인쇄하면 QR 한 장이 한 페이지씩 찍힙니다.
긴 URL은 먼저 /api/shorten으로 짧게 만든 뒤 QR에 넣으면 패턴이 단순해져 인쇄물에서 스캔이 잘 됩니다.
민감한 Wi-Fi 비밀번호가 포함된 페이지는 만료(expiresIn)를 설정하거나, 행사 종료 후 editToken으로 삭제하는 것을 권장합니다.