Glyph 안내서
온라인 공간 만드는 법
코딩을 몰라도 괜찮아요. 요즘 온라인 공간은 대부분 AI와 대화하며 만들어요. 이 글은 처음 만드는 사람이 따라 할 순서와, 단계마다 AI에게 할 말을 모은 거예요.
먼저, Glyph에 실린 공간 208곳은
- 87%가 3D 도구 Three.js로 만들어졌어요.
- 69%는 다른 사람이 함께 보이는 실시간 연결이 있어요.
- 50%는 Cloudflare에 올려서 무료로 주소를 받았어요.
- 처음 불러오는 양은 가운데 값이 1.2MB예요.
페이지에 드러난 정보를 모은 전체 합계예요. 공간 하나하나의 만드는 법은 만든 사람의 노하우라서 이 글에서 다루지 않아요. 만든 재료 리포트
1. 어떤 곳인지 한 문장으로 정하기
기능보다 장소를 먼저 정해요. 세 가지를 넣으면 한 문장이 돼요.
- 머무는 곳: 걷거나 앉아 있을 수 있는 장소
- 함께 있는 사람: 다른 사람이 보이거나 흔적이 남는 것
- 머물 이유: 이기지 않아도 있고 싶은 이유(경치, 소리, 작은 할 일)
예: "밤바다 위 등대 섬. 다른 사람 캐릭터가 보이고, 등대 불빛을 함께 바라봐요."
2. AI에게 첫 화면 만들어 달라고 하기
ChatGPT, Claude 같은 AI에 아래처럼 말해요. 장소만 내 생각으로 바꾸면 돼요.
Three.js로 HTML 파일 하나짜리 3D 공간을 만들어 줘. - 밤바다 위 작은 바위섬, 섬 끝에 등대가 하나 있어 - 내 캐릭터를 키보드 방향키와 휴대폰 화면 터치로 움직일 수 있게 - 등대 가까이 가면 불빛이 천천히 돌아가게 - 휴대폰에서도 빨리 열리게 가볍게, 라이브러리는 CDN으로 불러와 줘 처음 들어온 사람을 위한 짧은 조작 안내도 화면 아래에 넣어 줘.
받은 코드를 메모장에 붙여 넣고 index.html로 저장한 뒤 더블클릭하면 브라우저에서 열려요. 처음부터 완벽할 필요는 없어요. 움직이는 화면이 하나 생기면 첫 단계는 끝이에요.
3. 하나씩 고치며 키우기
- 한 번에 하나만 부탁해요. 여러 개를 한꺼번에 부탁하면 이미 되던 것이 망가지기 쉬워요.
- 휴대폰으로 자주 열어 봐요. 사람들은 대부분 휴대폰으로 들어와요.
- 망가지면 잘 되던 파일을 따로 저장해 두고 거기서 다시 시작해요.
지금 코드는 그대로 두고, 하나만 고쳐 줘. 휴대폰에서 캐릭터가 너무 빨리 움직여. 속도를 절반으로 줄여 줘. 고친 부분이 어디인지도 짧게 알려 줘.
4. 함께 있게 하기
온라인 공간이 그냥 3D 화면과 다른 점은 다른 사람이 보인다는 거예요. 실린 공간의 69%가 이 단계를 거쳤어요. 서버가 필요해지는 단계라 조금 어렵지만, 무료로 시작할 수 있는 서비스가 많아요.
이 공간에 들어온 사람들이 서로 보이게 하고 싶어. - 다른 사람의 캐릭터가 같은 섬에 보이고, 움직이면 따라 움직이게 - 이름 대신 무작위 별명을 붙여 줘 - 무료로 시작할 수 있는 방법으로, 내가 따라 할 순서를 하나씩 알려 줘 코딩을 잘 몰라서, 계정 만들기부터 어디에 무엇을 붙여 넣는지까지 쉽게 설명해 줘.
채팅을 넣으면 욕설이나 개인정보 문제가 생길 수 있어요. 처음에는 이모지나 정해진 말만 주고받게 하는 것도 방법이에요.
5. 주소 받기 (인터넷에 올리기)
만든 파일을 인터넷에 올려야 다른 사람이 들어올 수 있어요. 파일을 끌어다 놓기만 하면 되는 무료 방법이 있어요.
- Cloudflare Pages: 가입 뒤 대시보드에서 Workers & Pages → 만들기 → 파일 끌어다 놓기. 폴더나 zip을 올리면
이름.pages.dev주소가 생겨요. - Netlify Drop: app.netlify.com/drop 에 폴더를 끌어다 놓으면 바로 올라가요. 오래 쓰려면 가입해서 내 사이트로 가져와요.
버튼 이름은 서비스가 바뀌면 달라질 수 있어요. 막히면 화면을 캡처해서 AI에게 "여기서 뭘 눌러야 해?"라고 물어보세요. 함께 있기(4단계)를 넣었다면 그 서비스의 안내를 따라 같이 올려야 해요.
6. 사람들에게 보여 주기
- Threads나 X에 짧은 영상과 함께 올려요. 들어가서 무엇을 할 수 있는지 한 줄이면 충분해요.
- Glyph에 제보하면 확인한 뒤 소개해요. Glyph에서 몇 명이 들어갔는지도 공간 페이지에서 볼 수 있어요.
- 만들면서 막히면 만든 사람들의 작업실(디스코드)에서 이야기 나눠요.
알아 두면 좋은 것
- 사람이 몰리면 서버비가 나올 수 있어요. 무료 요금에는 한도가 있어요. 쓰는 서비스의 무료 한도를 미리 확인해 두세요.
- 가볍게 만들수록 많이 들어와요. 불러오는 데 오래 걸리면 휴대폰에서 기다리다 나가요.
휴대폰에서 처음 열 때 너무 오래 걸려. 불러오는 양을 줄일 방법을 큰 효과 순서로 알려 주고, 첫 번째 방법부터 적용해 줘.
- 남의 것을 쓸 때는 조심해요. 실제 브랜드 로고, 유명한 음악, 남이 만든 3D 모델은 허락이나 사용 조건을 확인해요.
- 다른 공간을 베끼지 않아요. 다른 사람의 공간은 들어가서 즐기고, 내 공간은 내 장소로 만들어요.