Cubestow
____ _ _
/ ___| _| |__ ___ ___| |_ _____ __
| | | | | | '_ \ / _ \/ __| __/ _ \ \ /\ / /
| |__| |_| | |_) | __/\__ \ || (_) \ V V /
\____\__,_|_.__/ \___||___/\__\___/ \_/\_/
Cubestow — Load wisely. Ship safely.
이전 이름: LoadWise
제품 규격, 중량, 수량과 적재 제약을 입력하면 컨테이너별 배치·적재 순서·고정재 위치를 계산하고 3D로 보여주는 브라우저 기반 컨테이너 로딩 시뮬레이터입니다.
주요 기능
- 직접 입력 및 Excel/CSV 업로드
- 박스형·원통형 제품 지원
- 등록 제품 수량 직접 입력 및 화살표 조절
- 눕힘 허용·상부 적재 금지 수정
- 20ft, 40ft, 40ft High Cube, 45ft High Cube 지원
- 안전 수준 슬라이더(적재량 우선·기본·CTU 기준 적용), 배치 방식(추천·붙여 싣기·무게중심), 운송 경로(육상·복합·해상), 고정재(에어백·충전재·바닥 못·래싱) 선택
- Extreme Point 후보 + 아래·안쪽·좌측 밀착, 항목별 순서(사전식) 비교
- 배치 규칙 6종(CTU 기준은 벽 쌓기·전폭 벽 추가) × 투입 순서 4종 결정론적 포트폴리오, 화물이 남으면 고정 시드로 섞은 추가 순서 24종, Web Worker 백그라운드 계산
- 빈틈은 문쪽으로(화물 묶음을 안쪽 벽으로 밀착), 가벼운 마지막 컨테이너가 무게배분 위험이면 앞 컨테이너와 다시 나눔
- 부피·중량 기반 컨테이너 대수 하한 표시
- 생성 엔진과 분리된 안전 validator 및 benchmark 회귀 게이트
- 지지율과 중심 지지 검사
- 해상·복합·육상 운송모드별 높은 적층·측면 간극·문측 노출·원통 구름 위험 선별
- 단일 컨테이너 부족 시 복수 컨테이너 자동 분할
- 안쪽부터 진행되는 단계별 적재 재생
- Three.js 기반 3D·상면·문 기준·좌측면·우측면 보기
- 전후·좌우 중량 배분, 무게중심 위치와 편차 판정
- 도로 축하중 추정: 도로·복합 운송이면 결과 요약에 트랙터 앞축·뒤축, 샤시 축, 차량 총중량을 일반 20ft·40ft 샤시 제원으로 추정해 도로법 한도(축 10t·총 40t, 단속 11t·44t)와 비교(load-insights.js axleLoads, CTU 정보자료 IM6 방법)
- 샘플 결과 미리보기(상단 메뉴 샘플 결과, /samples): 샘플 20개를 적재량 우선·기본·CTU 기준 적용으로 계산한 3D 캡처와 요약을 나란히 비교. 그림을 누르거나 전체 반대쪽 보기를 누르면 정반대 대각선에서 찍은 캡처로 바뀐다. 알고리즘이 바뀌면
npm run samples:capture로 캡처와 manifest를 다시 만든다(tools/capture-sample-results.mjs)
- 규칙 기반 자동 평가(양호·주의·재검토 필요, 항목별 지적·고칠 방법)와 알고리즘 의심 결과의 관리자 점검 기록(Supabase algorithm_flags, 관리자만 열람·삭제)
- CTU 중량배분 사전검사: 중심 편차, 수직 무게중심, 60-in-50 질량 집중도
- 제품별 상부 허용하중과 접촉면 기반 누적 압축하중 검증
- 문쪽 각재 펜스·바닥 각재(못 수 계산)·도어 스트랩, 벽면·화물 간 에어백과 충전재, 윗단 되잡기 래싱 권고
- CTU 기준에서 화물로 막히지 않은 면은 "CTU 열린 면 보강"으로 화물·면·방법을 표시
- 고정재 표시 토글
- 계산 진행률과 완료 시간
- 전체 계획 Excel 내보내기(첫 시트 안전고지)
- 새 창 미리보기와 인쇄·PDF 저장을 지원하는 작업지시서(맨 위 검토용 경고 띠)
- 내보내기 전 현장 확인 팝업, CTU 기준을 처음 고를 때 계산 시간·보증 범위 안내 팝업
- 실제 적재 수량·컨테이너 수·추가 고정재·특이사항 수기 기록란
- Supabase 기반 일일·누적 방문자 표시(브라우저당 하루 1회 기준)
- 이메일 기반 관리자 권한과 사용자별 저장·시뮬레이션·접속 통계
- 제품 목록과 컨테이너 설정을 프로젝트로 저장·불러오기
- 저장 프로젝트를 불러오면 3D 시뮬레이션 자동 실행
- Google OAuth·8자리 이메일 OTP 로그인과 계정별 클라우드 저장
- 저장 스키마·알고리즘 버전과 마지막 계산 결과 요약 기록
프로젝트 저장
첫 저장에서 이름을 확인하고, 이후 저장은 확인 후 현재 프로젝트를 갱신합니다. 신규 저장은 현재 작업을 다른 이름의 새 프로젝트로 보존합니다. Excel/CSV 파일명이나 처음 등록한 제품명이 저장 이름으로 자동 제안되며, 저장 목록에서 기존 프로젝트를 불러오거나 삭제할 수 있습니다. 저장 프로젝트를 불러오면 저장된 제품과 컨테이너 조건으로 시뮬레이션이 즉시 실행됩니다.
- 비로그인: 현재 브라우저 프로필의
localStorage에 저장
- Google OAuth와 8자리 이메일 OTP 로그인: Supabase의 사용자 계정별 클라우드 저장
Microsoft 로그인 보류
- 운영 계정:
[email protected]
- 2026-08-13 기준 Microsoft 개인 계정만으로는 Entra 앱 신규 등록이 비활성화되어 있다.
- Azure 디렉터리 생성을 위해 무료 Azure 가입, 전화번호 및 결제카드 본인 확인이 필요해 설정을 중단했다.
- Entra 앱 등록과 Supabase Azure 공급자 연결이 완료될 때까지 Microsoft 로그인 버튼은 숨긴다.
- 상단 계정 버튼은 로그인 상태에 따라
로그인과 로그아웃으로 전환
- 로그인 상태에서는 이메일과
클라우드 저장 위치를 상단에 표시
새 프로젝트는 제품·설정·시뮬레이션 결과를 초기 상태로 되돌림- 저장하지 않은 변경사항이 있으면 프로젝트 교체 전에 확인
- 손상된 로컬 데이터는 자동으로 덮어쓰지 않음
로컬 저장은 다른 브라우저나 기기로 동기화되지 않으며 같은 브라우저 프로필을 사용하는 사람과 분리되지 않습니다. 개인별 보안과 여러 기기 연동이 필요하면 로그인해야 합니다. 클라우드 프로젝트는 PostgreSQL RLS 정책으로 로그인 사용자별 접근을 제한합니다.
최초 관리자는 데이터베이스 시드로 등록합니다. 관리자는 로그인 사용자별 현재 저장 프로젝트 수, 완료된 시뮬레이션 누계, 최초·최근 접속과 접속 횟수를 확인하고 다른 이메일에 관리자 권한을 부여할 수 있습니다. 비로그인 방문자는 이메일을 수집하지 않고 기존 오늘·누적 방문 수에만 포함됩니다.
입력 항목
| 항목 | 설명 |
|---|
| 제품명·제품군 | 제품 식별 정보 |
| 제품 형상 | 박스형 또는 원통형 |
| 길이·너비·높이 | mm 단위 외형 치수 |
| 개당 중량 | kg 단위 중량 |
| 수량 | 동일 규격 제품 수량 |
| 눕힘 허용 | 높이 축을 바꾸는 회전 허용 여부, 기본값은 미선택 |
| 상부 적재 금지 | 해당 제품 위에 다른 화물을 놓지 않음 |
바닥면에서 길이와 너비를 바꾸는 회전은 항상 평가합니다. 눕힘 허용은 제품을 옆으로 눕혀 높이 축까지 바꿔도 되는지를 뜻합니다.
적재 기준
결과는 안전 수준, 배치 방식, 운송 경로, 고정재 네 가지 선택으로 정합니다. 안전 수준은 반드시 지킬 규칙, 배치 방식은 미배치·대수가 같은 결과 중 무엇을 고를지, 운송 경로는 견뎌야 할 가속도, 고정재는 쓸 수 있는 고정 방법입니다. 배치 방식을 바꿔도 컨테이너가 늘어나지 않습니다.
안전 수준
| 수준 | 상부 지지율 | 추가 조건 |
|---|
| 적재량 우선 | 바닥면 70% 이상 | 충돌·중량·상부하중·상부 적재 금지 같은 물리 조건만 지킴 |
| 기본 (권장) | 바닥면 100% | 가느다란 화물 위 적재 금지(높이 ÷ 바닥 최소 치수 1.15 이하, 같은 규격 원통 위 원통은 1.6 이하), 원통은 바닥이나 같은 규격 원통 위에만, 높은 적층 전도 방지 |
| CTU 기준 적용 | 바닥면 100% | 기본 + 모든 화물의 안쪽·좌·우를 화물이나 고정재로 막음 + 다른 크기 화물 위 얹힘 금지. 래싱을 끄면 CTU 전도 기준을 모든 화물에 적용 |
모든 수준에서 중심 지지, 상부 적재 금지, 상부 허용하중, 누적 높이가 바닥 최소 치수의 1.5배를 넘을 때 2방향 측면 지지를 요구하고, 첫 화물은 예외 없이 안쪽 벽에 붙입니다.
CTU 기준 적용은 먼저 화물끼리 서로 막히는 배치를 찾습니다. 그 때문에 컨테이너가 늘면 기본 배치를 쓰고, 화물로 막히지 않은 면은 고정재 권고에 "CTU 열린 면 보강"으로 화물별로 적습니다(CTU Code는 에어백·충전재·각재·래싱으로 막는 것도 인정). 얹힘은 고정재로 해결되지 않아 계속 금지하며, 그 때문에 기본보다 대수가 많으면 결과 설명에 이유를 표시합니다. 이 모드는 CTU Code의 배치 규칙을 적용한 검토용 결과이며 준수를 보증하지 않습니다.
배치 방식
| 방식 | 대수가 같을 때 먼저 비교하는 항목 |
|---|
| 추천 (기본) | CTU 사전검사 등급 → 좌우 편차 등급 → 앞뒤 편차 → 운송 안정성 검토 건수 → 질량 집중·수직 무게중심 초과량 → 큰 화물이 안쪽에 있는 정도 → 중심 편차 → 사용 길이 |
| 붙여 싣기 | 사용 길이 → CTU 등급 → 좌우 편차 등급 → 검토 건수 → 중심 편차 |
| 무게중심 | CTU 등급 → 좌우 편차 등급 → 앞뒤 편차 → 중심 편차 → 검토 건수 → 사용 길이 |
예전의 폭 균형은 추천에 합쳤습니다(저장된 프로젝트의 폭 균형은 추천으로 엽니다).
계산 방식
- 배치 규칙 6종(같은 규격 기둥 쌓기, 균형 기둥 쌓기, 바닥 우선 DBLF, 공간 집약, 폭 채움, 무게중심)과 투입 순서 4종(부피·최장변·바닥면·중량)을 계산합니다. CTU 기준은 벽 쌓기·전폭 벽(스트립)을 더합니다.
- 화물이 남거나 무게배분이 위험하면 제품 규격 순서를 고정 시드로 섞은 추가 투입 순서 24종을 예산 안에서 더 계산합니다. 시드가 고정이라 같은 입력이면 결과가 같습니다.
- 컨테이너마다 적재 부피 → 적재 수량 → 배치 방식 순으로 고르고, 서로 걸치지 않는 구간의 순서·좌우·앞뒤를 바꾼 안도 비교합니다. 고른 안은 화물 묶음을 안쪽 벽으로 밀어 빈틈을 문쪽에 모읍니다.
- 가벼운 마지막 컨테이너(앞 컨테이너 중량의 60% 미만)가 무게배분 위험이면 두 대의 화물을 규격마다 반씩 나눠 다시 싣고, 나아질 때만 씁니다.
- 무거운 화물(개당 1t 이상, 원통 500kg 이상 — 케이블 드럼 등)은 무게중심이 가운데에 오도록 컨테이너 가운데에 싣고 양 끝을 못 박은 각재로 막습니다(안쪽 벽 밀착의 유일한 예외).
- 컨테이너 목록의 "한국 도로 한도" 항목은 최대 중량을 20ft 21t, 40ft 25t로 두어 도로 운송 중량 기준으로 대수를 나눕니다.
- 결과 요약에 부피·중량 하한 대수를 함께 표시해, 하한과 같으면 더 줄일 수 없다는 것을 알려 줍니다.
- 계산은 Web Worker에서 실행되어 화면이 멈추지 않습니다. 배치안 수는 예산(기본 8초)과 화물 수로 미리 정하므로 기기 속도와 관계없이 같은 결과가 나옵니다. 예산의 3배와 45초 중 큰 값을 넘으면 비상으로 남은 후보를 생략합니다. CTU 기준은 20~40초 걸릴 수 있습니다.
고정재 추천 기준
모든 기준값의 출처(CTU Code, 제조사, Cubestow 설정)는 ALGORITHM-POLICY.md 5장에 표로 정리했습니다.
- 문쪽: 문에서 150mm 넘게 떨어진 문쪽 화물은 바닥에 가로 각재를 대고 못으로 고정하고(못 1개 1kN으로 못 수 계산), 윗단은 되잡기 래싱·도어 스트랩으로 묶습니다. 문쪽 펜스와 충전재는 바닥 못이나 래싱을 끈 경우에만 씁니다.
- 안쪽 벽과 화물 사이에는 충전재를 쓰지 않습니다. 화물 양옆이 모두 비어 있으면 한쪽은 목재 스페이서, 반대쪽은 에어백으로 맞버팁니다.
- 추천 배치는 위험이 아니면 꽉 찬 줄을 안쪽에, 모자란 줄을 문쪽에 둡니다(빈 곳과 고정재가 문쪽에 모임).
- 에어백: 화물 사이나 벽과의 간극에 제조사 최대 간극(500mm) 안에서 규격을 골라 권고합니다. 같은 벽을 따라 붙은 화물 줄은 이음매마다 하나를 걸쳐 두 화물을 함께 누릅니다. 바닥에서 100mm 띄우고, 서로·화물·각재와 겹치지 않으며, 컨테이너 끝(안쪽 벽·문쪽)에는 두지 않습니다. 넘는 간극은 충전재로 줄입니다.
- 남은 틈: 한 방향 빈 공간 합이 15cm를 넘을 때만(CTU 부속서 7 §2.3.6) 큰 틈부터 스페이서·에어백·충전재로 채웁니다.
- 바닥 선하중: 길이 1m당 화물 중량이 20ft 4.5t, 40ft 3.0t를 넘으면 종방향 받침목을 검토 항목으로 안내합니다(TIS-GDV).
- 래싱: 윗단이 쏟아지지 않게 윗단 높이의 2/3 지점에 되잡기 래싱을 권고하고, 수량은 스트랩 1줄 6.1t(측면 쌍 4.3t) 기준으로 어림합니다. 3D 경로·각도·STF와 앵커 허용하중은 계산하지 않습니다.
- 고정재 칩으로 끈 방법은 다른 방법으로 대신하고, 대신할 수 없으면 검토 항목으로 남깁니다.
- 측면 지지는 각 방향에서 화물 폭 또는 높이의 50% 이상 맞닿을 때 인정합니다.
- 해상은 피칭·롤링·히빙에 불리한 높은 적층과 측면 지지를 가장 보수적으로 평가하고, 복합운송은 중간, 육상은 일부 완화한 기준을 사용합니다. 이 위험도는 결과 경고뿐 아니라 실제 후보 위치 선택에도 우선 반영됩니다.
- 실제 작업 전 컨테이너 바닥 고정 허용 여부와 고정재 제조사 지침을 확인해야 합니다.
좌표 체계
- X: 컨테이너 문에서 안쪽
- Y: 컨테이너 좌측에서 우측
- Z: 컨테이너 바닥에서 위
적재 순서는 기본적으로 가장 안쪽부터 문쪽으로, 같은 위치에서는 아래층부터 생성됩니다.
실행
정적 웹 애플리케이션이며 로컬 개발 서버와 배포용 빌드를 제공합니다.
npm test # 전체 단위 테스트(약 3분, 배포 전 필수. 오래 걸리는 테스트는 test/slow-*.test.mjs로 나눠 동시에 돈다)
npm run test:quick # 오래 걸리는 @slow 테스트 9개를 뺀 빠른 확인(약 30초)
npm run format # 코드 서식 정리(Prettier, .prettierrc.json). 커밋 전에 실행
npm run lint # 정적 검사(ESLint, eslint.config.mjs). 경고도 0개여야 통과하며 CI에서도 돈다
npm run benchmark # 회귀 게이트, 결과 파일은 바꾸지 않음
npm run benchmark:write # 기준 결과(benchmarks/*.json) 갱신
npm run build
npm run test:e2e
npm run samples:capture # 샘플 결과 미리보기 캡처·요약 다시 만들기
CSS를 고칠 때
스타일은 styles.css(기본), sample-results.css(샘플 결과 화면), v3-projects.css(현재 화면) 세 파일이며 이 순서로 불러온다. 고치기 전에 node tools/visual-snapshots.mjs before, 고친 뒤 node tools/visual-snapshots.mjs after로 4개 폭 × 10여 개 상태의 전체 화면을 찍고 node tools/visual-snapshots.mjs --compare before after로 비교한다. 의도한 곳만 달라져야 한다. node tools/css-tidy.cjs는 쓰이지 않는 선택자와 뒤에서 덮어쓴 선언을 찾아 주고, --apply를 붙이면 지운다(주석은 남김).
CTU Code 메뉴(/library/ctu-code) 해설 추가
상단 메뉴 CTU Code(/library/ctu-code, 해설은 /library/ctu-code/<id>)는 CTU Code 등 공식 원문을 배포처 링크로 걸고, Cubestow가 직접 쓴 한국어 해설을 보여 준다. CTU Code와 정보자료는 IMO 저작권(사전 서면 허가 없이 복제 금지)이라 파일을 올리지 않는다. 해설을 추가할 때는 library.js의 DOCS에 항목을 넣고 PLAN의 상태를 done으로 바꾼다. 해설은 원문 번역이 아니라 요약이며, 표 숫자는 원문과 대조한다.
샘플 결과 갱신
상단 메뉴 샘플 결과(주소 /samples)는 샘플 20개를 적재량 우선·기본·CTU 기준 적용으로 계산한 3D 캡처와 요약을 나란히 보여 준다. 화면은 sample-results/manifest.json을 읽어 그리므로, 알고리즘을 바꾼 뒤에는 npm run samples:capture를 실행하고(로컬 서버를 직접 띄워 몇 분 걸림) sample-results/를 함께 커밋·배포하면 된다. 컨테이너마다 정면과 정반대 대각선(카메라 180°) 두 장을 찍는다. 캡처 머리에 앱 버전·엔진·날짜가 기록된다.
주요 파일:
index.html 화면 구조
styles.css 기본 스타일(예전 layout-fixes.css·v2.css 포함)
app.js 입력, 화면 상태, 결과 표시
view-3d.js 3D·평면 적재 화면 그리기(three.js)
import-export.js Excel·CSV 가져오기, PDF·Excel 내보내기
securing-plan.js 고정재 계획(에어백·스페이서·충전재·각재·래싱·검토 항목, CTU 기준)
packing-engine.js DOM과 분리된 적재 엔진
engine/ 엔진 소스 조각(00-header·10-rules·20-geometry·30-placement·40-evaluation·50-shipment·90-exports). 엔진은 여기서 고치고 npm run engine:build로 packing-engine.js를 다시 만든다(테스트가 둘이 같은지 확인)
engine-worker.js 엔진을 백그라운드에서 실행하는 Web Worker
project-model.js 저장 데이터 정규화
project-store.js 로컬·Supabase 저장과 로그인
supabase-schema.sql 사용자별 저장 테이블과 RLS 정책(전체 스키마. 새 변경은 supabase/migrations/에 날짜순 파일로 두고 Supabase 대시보드 SQL Editor에서 순서대로 실행한다)
vendor/three.min.js 로컬 3D 엔진
LOADING-SIMULATOR-PRD.md 제품 요구사항 문서
ALGORITHM-POLICY.md 알고리즘 원칙·판정 기준·한계 문서
ALGORITHM-LEARNING.md 전략 경쟁·현장 피드백·학습 승격 정책
SIMULATION-FEEDBACK.md 시뮬레이션 질문·판정·개선 이력
test-projects/ 반복 검토용 CSV 화물 10종
solution-validator.js 독립 결과 검증기
result-review.js 규칙 기반 자동 평가와 알고리즘 점검 기록 판단
sample-results.js 샘플 결과 미리보기 화면(/samples)과 주소별 화면 전환(경로 주소, 옛 # 주소 이전)
library.js CTU Code 메뉴(/library/ctu-code, 옛 자료실): 공식 원문 링크, 한국어 해설, 참고 자료
sample-results/ 샘플 결과 캡처(img)와 요약(manifest.json)
tools/capture-sample-results.mjs 샘플 결과 캡처 도구(npm run samples:capture)
tools/css-tidy.cjs 쓰이지 않는 CSS 선택자와 덮어써진 선언 정리
tools/visual-snapshots.mjs 화면 회귀 확인(여러 폭·상태 전체 화면 캡처와 비교)
benchmark.mjs 안전 기준 × 우선 기준별 품질·안전·시간 회귀 게이트
scenario-benchmark.mjs 10개 CSV 회귀 검사
기술 구성
- HTML, CSS, Vanilla JavaScript
- Three.js WebGL 렌더링
- SheetJS Excel 입출력
- Supabase Auth·Postgres(계정별 저장)
- Vercel 자동 배포
한계
현재 엔진은 휴리스틱으로 좋은 배치를 빠르게 찾지만 전역 최적해를 보장하지 않습니다. 상부 허용하중이 입력된 제품만 누적 압축하중을 검사하며, 실제 출하 전에는 미입력 제품의 압축강도와 면압, 바닥 허용 하중, 축하중, 운송 진동, 고정재 사양과 관련 안전 규정을 별도로 검토해야 합니다.
