플러스프로젝트 배경
1) 문제점 대형 쇼핑몰의 연말 전시와 연계해 약 50일간 운영하는 별자리 테마 이벤트 웹입니다. 현장에 안내 인력이 상주하지 않고 외부 유입도 없어, 방문객은 통로에 붙은 QR을 찍은 뒤 안내 없이 혼자서 쿠폰 발급까지 끝내야 합니다. 발주사가 가장 걱정한 것은 소원 텍스트가 얹힌 결과 이미지였습니다. 사람마다 길이가 제각각인 한글 문장을 카드에 앉히면 줄바꿈이 어긋나거나 글자가 카드 밖으로 넘칩니다.
프로젝트 성과
소원 길이별 조판 전환 지점 71 · 80 · 97 · 115자
브라우저에서 잰 전환 지점을 Node 검증 스크립트가 같은 값으로 재현했습니다. 프리뷰와 서버가 조판 함수 한 파일을 공유하기 때문입니다. 14개 케이스로 행 넘침이 없는 것을 확인했습니다.
결과 카드 PNG 14장 전수 육안 확인
별자리 12종에 가장 짧은 소원과 가장 긴 소원까지 더해 배포본에서 내려받아 열었습니다. 전부 1080×1350이고 한글이 깨진 글자가 없었습니다. 한글 폰트를 이미지 생성기에 직접 실어 처리했습니다.
쿠폰 발급 → 매장 사용 → 중복 차단 배포본 통과
배포본에서 발급, 새로고침 시 같은 코드 재출력, 매장 사용 처리, 같은 코드 재투입 거절, 위조 코드 3종 거절을 차례로 통과시켰습니다. 사용된 코드가 CSV의 사용매장명 칸까지 실려 나오는 것도 확인했습니다.
7개 화면 × 3개 폭, 27조합 가로 오버플로 0
390 · 768 · 1440px과 관리자 탭 3종을 조합해 확인했습니다. 관리자 화면은 좁은 폭에서도 날짜 라벨이 뭉개지지 않도록 카드 안에만 가로 스크롤을 넣었습니다.
핵심 기능
소원 조판 라이브
소원을 쓰는 동안 아래 카드가 실시간으로 다시 짜입니다. 어절 단위로 줄을 끊고, 넘치면 글자 크기를 56px에서 36px까지 네 단계로 낮춥니다. 그래도 넘치면 말줄임으로 줄이고 잘린 글자 수를 함께 표시합니다.
진행 단계
요구 정리와 화면 계약 확정
2026.08.
공고 원문의 필수 과업 9항목과 명시적으로 제외된 4항목을 갈라, 화면 목록과 UI 계약을 먼저 확정했습니다.
프로젝트 상세
1) 소개 대형 쇼핑몰의 연말 전시와 연계해 약 50일간 운영하는 별자리 테마 이벤트 웹입니다. 회원가입이 없는 모바일 웹이고, 진입은 전부 현장에 붙은 QR 스캔으로만 발생합니다. 방문객 화면, 매장용 쿠폰 사용 처리 화면, 관리자 집계 화면을 전부 만들어 배포했습니다. 2) 작업 범위 · 별자리 12종 QR 보드와 진입 분기, 개인정보 동의(필수·선택 분리) · 소원 입력과 결과 카드 조판 엔진
