외국 개발자 딜룸 산자야 씨가 'AI 클로드로 만들었다'며 X(옛 트위터)에 올린 창고 화면, 조회 230만
창고 관리 화면을 게임처럼, 클로드에 부탁 문장 하나 넣어 받은 3D 창고 화면
2026년 10월 27일 올림 · 10월 26일 확인
1단계: 클로드 대화창에 이 부탁 문장 붙여 넣기
그대로 넣어도 되고, '창고 관리 화면'과 '지게차 3대와 트럭 2대' 자리를 내 업무(예: '카페 재고 화면'과 '배달 오토바이 2대')로 바꿔도 돼요. 바꾼 버전은 저희가 돌려 보지 않았어요. 유료라면 입력 칸 아래 모델 이름을 눌러 'Opus 5.5'를 고르고(메뉴 위치는 저희가 직접 확인 못 했어요), 무료라면 기본값 그대로 두면 돼요.
HTML 파일 하나로, 브라우저에서 바로 열리는 '창고 관리 화면'을 만들어 줘. 지루한 표 대신, 전략 게임처럼 위에서 비스듬히 내려다보는 3D 화면으로. 지게차 3대와 트럭 2대가 상자를 나르고, 누르면 오른쪽에 정보 카드가 뜨게. 화면 글자는 한국어로.
순서: 주소창에 claude.ai → 로그인 → 왼쪽 위 '새 채팅' → 아래 부탁 문장 붙여 넣기 → Enter. 답에 <!DOCTYPE html>로 시작해 </html>로 끝나는 긴 영어 글(코드)이 나오면 성공이에요(저희 답은 코드 1,230줄, 약 6만 4천 자). 코드가 대화 대신 오른쪽 미리보기 창(아티팩트)에만 뜨면, 창 위쪽 메뉴의 내려받기로 .html 파일을 저장하고 2단계 셋째 칸으로 건너뛰세요(버튼 이름은 저희가 직접 확인 못 했어요). 저희는 대화창이 아니라 claude -p(클로드 코드의 '한 번 묻고 답 받기' 명령)로 돌려서 대화창 화면과 미리보기 창은 직접 확인 못 했어요.
이렇게 나와요
부탁 문장은 위 그대로(바꾼 곳 없음), claude.ai 대화창이 아니라 claude -p로 돌렸어요. 모델 클로드 오퍼스 5.5, 빈 폴더에서 파일·명령·웹 검색 도구와 저희 설정을 모두 껐고, 생각 수준(effort)은 중간(medium)이에요. 대화창에서는 답 모양이 조금 다를 수 있어요.
2026-10-26 21:08~21:25, 답 쓰는 데 약 17분(한 번에 나옴). 답 끝 설명 원문 첫머리: "warehouse.html 파일 하나로 만들었습니다. 브라우저로 열면 바로 실행되고, 외부 라이브러리를 쓰지 않아 인터넷 연결 없이도 동작합니다." 이어서 화면 구성(A·B·C열 3단 선반, 입고·출고 구역, 충전소, 도크 2곳), 지게차(경로를 찾아 이동, 배터리 30% 아래면 충전소로), 트럭(트럭-1 입고, 트럭-2 출고), 정보 카드 내용, 조작법(드래그로 화면 이동, 휠로 확대·축소, Q/E로 90도 회전, Space로 일시정지, Esc로 선택 해제)이 나왔어요. 주의: 답에 '문법 검사를 통과했다, 17분 분량을 돌려 봤다, 크롬으로 캡처해 확인했다'는 말도 있었지만, 저희가 도구를 꺼 둬서 클로드는 실제로 아무것도 실행하지 못했어요. 그 말은 믿지 마세요. 코드는 답 속 글로 들어 있어서, 저희가 그 부분만 그대로 꺼내 저장했어요. 그 파일을 화면에 창이 뜨지 않는 시험용 크롬에서 열었더니 '한빛 물류센터 실시간 창고 관제' 화면, 위쪽에 재고 108/180·입고·출고 상자 수와 시계, 지게차 3대가 선반과 트럭 사이를 오가는 3D 창고가 떴어요. 속도 4×로 올려 가상 시계 18분(09:00→09:18)을 돌리는 동안 입고 6상자·출고 4상자가 올라갔고, 페이지 오류는 없었어요.
왼쪽 목록의 '트럭-1'을 누른 화면이에요. 운전기사 이름·출발지·화물 이름은 클로드가 지어낸 연습용 예시예요(실행할 때마다 바뀜). 저희는 정보 카드를 왼쪽 목록으로 눌러 확인했고, 3D 화면 속 지게차를 직접 눌러 카드를 띄우는 건 확인 못 했어요. 휴대폰에서 되는지, claude.ai 미리보기 창 안에서 되는지도 확인 못 했어요. 같은 부탁 문장이어도 돌릴 때마다 모양·색이 달라질 수 있어요.
- 이런 분께
- 매일 보는 업무 화면(재고표·일정표)을 게임처럼 보기 좋게 바꿔 보고 싶은 사람. 코딩을 몰라도 claude.ai 채팅창에 복사·붙여 넣기만 하면 되고, 따로 설치할 프로그램은 없어요. 결과는 내 컴퓨터에서 여는 파일 하나이고, 화면 속 숫자는 진짜 회사 자료가 아니라 연습용으로 지어낸 숫자예요
- 끝나면 손에 남는 것
- 클로드에 넣을 창고 3D 화면 부탁 문장 + 저희가 돌려 본 결과 화면 + 딜룸 산자야 씨의 원래 X 글 주소
- 걸리는 시간
- 저희 실험에서 AI가 긴 답(코드)을 끝까지 다 쓰는 데 약 17분(오퍼스 5.5). 그동안 다른 일을 하셔도 되지만 claude.ai 창은 닫지 마세요 · 메모장에 저장하고 열기 3분
Claude · 읽는 데 25분어떻게 했는지, 짧게
준비물: 컴퓨터(윈도우나 맥)의 크롬, claude.ai 계정(무료로도 가입 가능). 설치·서버는 필요 없어요. 저희가 받은 코드는 다른 프로그램을 인터넷에서 불러오지 않아서 인터넷이 꺼져 있어도 열려요(저희 파일 기준). 저희 결과는 유료 모델(클로드 오퍼스 5.5) 기준이고, 무료 모델 결과는 직접 확인 못 했어요. 무료 요금제는 소넷·하이쿠를 써요(claude.com/pricing, 2026-10-19 확인). 계정이 없으면 claude.ai에서 구글 계정이나 이메일로 가입하면 돼요(가입 화면은 저희가 이번에 다시 확인하진 않았어요).
원래 사례: 딜룸 산자야(X @DilumSanjaya, 소프트웨어 개발자)는 2026년 10월 4일(한국 시각) X에 72초 영상과 함께 세 줄을 올렸어요. 'Industrial software doesn't have to feel like industrial software(공장·물류 프로그램이라고 꼭 딱딱할 필요는 없다) / Manage warehouses like you're playing a strategy game(전략 게임 하듯 창고를 관리하자) / Built with Opus 5.5(오퍼스 5.5로 만들었다)'. 무엇을 몇 번 부탁했는지, 걸린 시간은 본인 글에 없어서 저희도 몰라요. 아래 부탁 문장은 저희가 영상을 보고 쓴 것이에요.
12단계: 답의 코드를 '.html' 파일로 저장해 크롬으로 열기(마지막 단계)
클로드가 만든 건 설치하는 앱이 아니라 크롬에서 열리는 웹 페이지 파일 하나예요. 이름 끝의 .html은 '인터넷 창으로 여는 파일'이라는 표시예요.
- 코드 칸 없이 오른쪽 미리보기 창만 떴다면 → 창 위쪽 메뉴의 내려받기로 .html 파일을 저장하고 셋째 칸으로 건너뛰어요(버튼 이름은 저희가 직접 확인 못 했어요). 코드 칸이 있으면 → <!DOCTYPE html>로 시작해 </html>로 끝나는 코드 칸 전체를 복사해요(코드 칸 오른쪽 위 복사 단추가 있으면 그걸로). 코드 위아래의 한국어 설명은 넣지 않아요.
- 윈도우: 메모장 열기 → 붙여 넣기 → 파일 → 다른 이름으로 저장 → 파일 형식 '모든 파일(*.*)', 인코딩 'UTF-8', 파일 이름 끝에 .html(예: '창고.html') → 저장. 맥: 텍스트 편집기 → 새로운 문서 → 메뉴 '포맷 → 일반 텍스트로 만들기' → 붙여 넣기 → '창고.html'로 저장, '.html을 사용할까요?'라고 물으면 '.html 사용'. 메모장·텍스트 편집기로 저장하는 과정은 이번 파일로 직접 해 보지 않았어요(같은 방법을 다른 가이드에서 확인했어요).
- 저장한 파일을 두 번 누르거나 크롬 창에 끌어다 놓아요. 위쪽에 창고 이름과 재고 숫자, 가운데에 선반과 지게차가 있는 3D 창고가 보이면 성공이에요. 왼쪽 목록에서 지게차나 트럭을 누르면 오른쪽에 정보 카드가 떠요. 오른쪽 위 '4×'를 누르면 빨리 돌아가요.
- 인터넷 주소로 올려 남에게 보여 주는 방법(배포)은 이 가이드에 없어요. 저희가 이 파일로 해 보지 않았어요. 진짜 회사 재고 숫자를 연결하는 방법도 없어요(화면 속 숫자는 연습용이에요).
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
