WebGL 20

[🎮 웹으로 3D 퍼즐 게임 만들기] 10차시 : 배포와 운영 – 완성된 게임을 세상에 내놓기

게임을 “만드는 것”과 “출시하는 것”은 완전히 다른 문제입니다.로컬에서 잘 돌아가는 게임은 아직 프로젝트일 뿐,다른 사람이 접속해 플레이할 수 있을 때 비로소 제품이 됩니다.특히 웹 게임은설치가 필요 없고링크 하나로 공유되며업데이트가 즉시 반영되는강력한 장점을 갖고 있습니다.이번 10차시에서는완성된 3D 퍼즐 게임을 배포하고, 관리하고, 개선하는 최소한의 운영 구조를 다룹니다.이 차시를 끝내면,“학습용 프로젝트”가 아니라 공개 가능한 게임이 됩니다.🎯 10차시 학습 목표웹 3D 게임 빌드 및 배포 흐름 이해정적 호스팅 기반 배포 전략 습득업데이트·버전 관리·운영 관점 정리📦 이번 차시 산출물배포 가능한 빌드 파일 생성실제 접속 가능한 게임 URL버전 표기 및 업데이트 구조운영을 고려한 프로젝트 상태..

[🎮 웹으로 3D 퍼즐 게임 만들기] 9차시 : 성능 최적화 – 퍼즐 게임을 가볍고 안정적으로 만들기

퍼즐 게임은 겉보기에는 단순해 보입니다.움직이는 오브젝트도 많지 않고, 폭발이나 화려한 이펙트도 거의 없습니다.하지만 실제로 구현해 보면 의외로 이런 문제가 빠르게 나타납니다.레벨이 늘어날수록 프레임 드랍Undo를 반복할수록 점점 느려짐모바일이나 저사양 환경에서 버벅임이는 대부분 설계 단계에서 성능을 고려하지 않았기 때문입니다.이번 9차시에서는3D 퍼즐 게임에 꼭 필요한 만큼만 적용하는 현업형 성능 최적화 전략을 다룹니다.퍼즐 게임의 성능 목표는 “최고 사양”이 아니라어디서나 안정적으로 돌아가는 것입니다.🎯 9차시 학습 목표퍼즐 게임에서 실제로 성능을 잡아먹는 요소 파악Three.js 기반 실전 최적화 포인트 이해과도하지 않은, 유지보수 가능한 최적화 적용📦 이번 차시 산출물불필요한 렌더링 제거드로우..

[🎮 웹으로 3D 퍼즐 게임 만들기] 8차시 : UI · UX 설계 – 레벨 선택, 힌트, 퍼즐 흐름 만들기

퍼즐 게임에서 UI는 단순한 장식이 아닙니다.UI는 플레이어에게 “지금 무엇을 해야 하는지”,그리고 “이 게임이 나에게 무엇을 기대하는지”를 알려주는 안내자입니다.퍼즐 규칙이 아무리 훌륭해도레벨을 어떻게 선택해야 하는지 모르겠고지금 퍼즐이 풀린 상태인지 헷갈리며실수했을 때 무엇을 할 수 있는지 알 수 없다면그 게임은 곧 불친절한 게임이 됩니다.이번 8차시에서는퍼즐 게임의 전체 흐름을 정리하는 UI · UX 구조를 설계합니다.퍼즐 게임의 UI는 정보를 숨기는 것이 아니라생각할 여지를 남기는 방식으로 보여주는 것입니다.🎯 8차시 학습 목표퍼즐 게임에 필요한 UI 요소 식별레벨 선택 → 플레이 → 클리어 흐름 설계힌트, 리셋, Undo 버튼의 UX 기준 확립📦 이번 차시 산출물레벨 선택 화면(UI)플레이 ..

[🎮 웹으로 3D 퍼즐 게임 만들기] 7차시 : Undo / Redo 시스템 – 퍼즐 게임의 신뢰성 설계

퍼즐 게임에서 가장 중요한 감정은 무엇일까요?성취감도 중요하지만, 그 이전에 반드시 지켜져야 할 것이 있습니다.바로 “안전함”입니다.플레이어는 퍼즐을 풀면서 반드시 시행착오를 겪습니다.이때 실수 한 번이 곧바로 실패로 이어진다면,그 게임은 사고하는 게임이 아니라 조심성 테스트가 됩니다.이번 7차시에서는퍼즐 게임의 신뢰도를 결정짓는 핵심 기능인 Undo / Redo 시스템을 설계합니다.퍼즐 게임에서 Undo는 편의 기능이 아니라게임 규칙의 일부입니다.🎯 7차시 학습 목표퍼즐 게임에 적합한 Undo / Redo 개념 이해Action → Command 구조 설계안정적인 상태 복원을 위한 설계 전략 습득📦 이번 차시 산출물퍼즐 조작(회전/이동)에 대한 Undo / Redo 구현무제한 되돌리기 가능 구조퍼즐 ..

[🎮 웹으로 3D 퍼즐 게임 만들기] 6차시 : 레벨 데이터 설계 – JSON 기반 퍼즐 구조 만들기

퍼즐 게임이 “게임”이 되는 순간은 언제일까요?대부분의 경우 레벨을 추가할 수 있을 때입니다.코드를 수정해야만 퍼즐 하나를 만들 수 있다면그 프로젝트는 기술 데모를 넘기 어렵습니다.반대로 데이터만 추가해도 레벨이 늘어난다면,그 순간부터 게임은 콘텐츠 중심으로 확장됩니다.이번 6차시에서는3D 퍼즐 게임을 레벨 데이터(JSON) 기반 구조로 전환합니다.이 설계는 이후 레벨 에디터, 사용자 제작 레벨, DLC까지도 자연스럽게 이어집니다.🎯 6차시 학습 목표퍼즐 레벨을 데이터(JSON) 로 표현하는 방법 이해오브젝트 배치/속성을 코드와 분리레벨 추가 시 코드 수정이 필요 없는 구조 완성📦 이번 차시 산출물JSON 파일로 정의된 퍼즐 레벨레벨 로더(Level Loader)레벨 변경 시 자동 초기화 구조여러 레..

[🎮 웹으로 3D 퍼즐 게임 만들기] 5차시 : 퍼즐 오브젝트 설계 – 거울, 프리즘, 필터, 수신기

퍼즐 게임은 결국 “규칙의 조합”입니다.레이저 퍼즐 역시 마찬가지로, 레이저 자체보다 중요한 것은레이저를 어떻게 바꾸는 오브젝트들이 존재하느냐입니다.반사하는 오브젝트분기시키는 오브젝트조건부로 통과시키는 오브젝트도달 여부를 판단하는 오브젝트이번 5차시에서는이러한 퍼즐의 핵심 구성 요소인 퍼즐 오브젝트들을 타입별로 설계하고,각 오브젝트가 레이저와 상호작용하는 역할 중심 구조를 만듭니다.이 차시를 기준으로 게임은 “기술 데모”가 아니라진짜 퍼즐 게임의 형태를 갖추기 시작합니다.🎯 5차시 학습 목표퍼즐 오브젝트를 타입(Type) 기반으로 분리 설계레이저 처리 로직을 오브젝트 책임으로 위임퍼즐 클리어 조건의 구조적 정의📦 이번 차시 산출물거울(Mirror): 레이저 반사프리즘(Prism): 레이저 분기필터(F..

[🎮 웹으로 3D 퍼즐 게임 만들기] 10차시 : 배포와 운영 – 완성된 게임을 세상에 내놓기

게임을 “만드는 것”과 “출시하는 것”은 완전히 다른 문제입니다.로컬에서 잘 돌아가는 게임은 아직 프로젝트일 뿐,다른 사람이 접속해 플레이할 수 있을 때 비로소 제품이 됩니다.특히 웹 게임은설치가 필요 없고링크 하나로 공유되며업데이트가 즉시 반영되는강력한 장점을 갖고 있습니다.이번 10차시에서는완성된 3D 퍼즐 게임을 배포하고, 관리하고, 개선하는 최소한의 운영 구조를 다룹니다.이 차시를 끝내면,“학습용 프로젝트”가 아니라 공개 가능한 게임이 됩니다.🎯 10차시 학습 목표웹 3D 게임 빌드 및 배포 흐름 이해정적 호스팅 기반 배포 전략 습득업데이트·버전 관리·운영 관점 정리📦 이번 차시 산출물배포 가능한 빌드 파일 생성실제 접속 가능한 게임 URL버전 표기 및 업데이트 구조운영을 고려한 프로젝트 상태..

[🎮 웹으로 3D 퍼즐 게임 만들기] 9차시 : 성능 최적화 – 퍼즐 게임을 가볍고 안정적으로 만들기

퍼즐 게임은 겉보기에는 단순해 보입니다.움직이는 오브젝트도 많지 않고, 폭발이나 화려한 이펙트도 거의 없습니다.하지만 실제로 구현해 보면 의외로 이런 문제가 빠르게 나타납니다.레벨이 늘어날수록 프레임 드랍Undo를 반복할수록 점점 느려짐모바일이나 저사양 환경에서 버벅임이는 대부분 설계 단계에서 성능을 고려하지 않았기 때문입니다.이번 9차시에서는3D 퍼즐 게임에 꼭 필요한 만큼만 적용하는 현업형 성능 최적화 전략을 다룹니다.퍼즐 게임의 성능 목표는 “최고 사양”이 아니라어디서나 안정적으로 돌아가는 것입니다.🎯 9차시 학습 목표퍼즐 게임에서 실제로 성능을 잡아먹는 요소 파악Three.js 기반 실전 최적화 포인트 이해과도하지 않은, 유지보수 가능한 최적화 적용📦 이번 차시 산출물불필요한 렌더링 제거드로우..

[🎮 웹으로 3D 퍼즐 게임 만들기] 8차시 : UI · UX 설계 – 레벨 선택, 힌트, 퍼즐 흐름 만들기

퍼즐 게임에서 UI는 단순한 장식이 아닙니다.UI는 플레이어에게 “지금 무엇을 해야 하는지”,그리고 “이 게임이 나에게 무엇을 기대하는지”를 알려주는 안내자입니다.퍼즐 규칙이 아무리 훌륭해도레벨을 어떻게 선택해야 하는지 모르겠고지금 퍼즐이 풀린 상태인지 헷갈리며실수했을 때 무엇을 할 수 있는지 알 수 없다면그 게임은 곧 불친절한 게임이 됩니다.이번 8차시에서는퍼즐 게임의 전체 흐름을 정리하는 UI · UX 구조를 설계합니다.퍼즐 게임의 UI는 정보를 숨기는 것이 아니라생각할 여지를 남기는 방식으로 보여주는 것입니다.🎯 8차시 학습 목표퍼즐 게임에 필요한 UI 요소 식별레벨 선택 → 플레이 → 클리어 흐름 설계힌트, 리셋, Undo 버튼의 UX 기준 확립📦 이번 차시 산출물레벨 선택 화면(UI)플레이 ..

[🎮 웹으로 3D 퍼즐 게임 만들기] 7차시 : Undo / Redo 시스템 – 퍼즐 게임의 신뢰성 설계

퍼즐 게임에서 가장 중요한 감정은 무엇일까요?성취감도 중요하지만, 그 이전에 반드시 지켜져야 할 것이 있습니다.바로 “안전함”입니다.플레이어는 퍼즐을 풀면서 반드시 시행착오를 겪습니다.이때 실수 한 번이 곧바로 실패로 이어진다면,그 게임은 사고하는 게임이 아니라 조심성 테스트가 됩니다.이번 7차시에서는퍼즐 게임의 신뢰도를 결정짓는 핵심 기능인 Undo / Redo 시스템을 설계합니다.퍼즐 게임에서 Undo는 편의 기능이 아니라게임 규칙의 일부입니다.🎯 7차시 학습 목표퍼즐 게임에 적합한 Undo / Redo 개념 이해Action → Command 구조 설계안정적인 상태 복원을 위한 설계 전략 습득📦 이번 차시 산출물퍼즐 조작(회전/이동)에 대한 Undo / Redo 구현무제한 되돌리기 가능 구조퍼즐 ..

[🎮 웹으로 3D 퍼즐 게임 만들기] 6차시 : 레벨 데이터 설계 – JSON 기반 퍼즐 구조 만들기

퍼즐 게임이 “게임”이 되는 순간은 언제일까요?대부분의 경우 레벨을 추가할 수 있을 때입니다.코드를 수정해야만 퍼즐 하나를 만들 수 있다면그 프로젝트는 기술 데모를 넘기 어렵습니다.반대로 데이터만 추가해도 레벨이 늘어난다면,그 순간부터 게임은 콘텐츠 중심으로 확장됩니다.이번 6차시에서는3D 퍼즐 게임을 레벨 데이터(JSON) 기반 구조로 전환합니다.이 설계는 이후 레벨 에디터, 사용자 제작 레벨, DLC까지도 자연스럽게 이어집니다.🎯 6차시 학습 목표퍼즐 레벨을 데이터(JSON) 로 표현하는 방법 이해오브젝트 배치/속성을 코드와 분리레벨 추가 시 코드 수정이 필요 없는 구조 완성📦 이번 차시 산출물JSON 파일로 정의된 퍼즐 레벨레벨 로더(Level Loader)레벨 변경 시 자동 초기화 구조여러 레..

[🎮 웹으로 3D 퍼즐 게임 만들기] 5차시 : 퍼즐 오브젝트 설계 – 거울, 프리즘, 필터, 수신기

퍼즐 게임은 결국 “규칙의 조합”입니다.레이저 퍼즐 역시 마찬가지로, 레이저 자체보다 중요한 것은레이저를 어떻게 바꾸는 오브젝트들이 존재하느냐입니다.반사하는 오브젝트분기시키는 오브젝트조건부로 통과시키는 오브젝트도달 여부를 판단하는 오브젝트이번 5차시에서는이러한 퍼즐의 핵심 구성 요소인 퍼즐 오브젝트들을 타입별로 설계하고,각 오브젝트가 레이저와 상호작용하는 역할 중심 구조를 만듭니다.이 차시를 기준으로 게임은 “기술 데모”가 아니라진짜 퍼즐 게임의 형태를 갖추기 시작합니다.🎯 5차시 학습 목표퍼즐 오브젝트를 타입(Type) 기반으로 분리 설계레이저 처리 로직을 오브젝트 책임으로 위임퍼즐 클리어 조건의 구조적 정의📦 이번 차시 산출물거울(Mirror): 레이저 반사프리즘(Prism): 레이저 분기필터(F..

[🎮 웹으로 3D 퍼즐 게임 만들기] 4차시 : 레이저 퍼즐의 핵심 – 광선 경로 계산과 반사 알고리즘

레이저 퍼즐이 재미있는 이유는 단순합니다.“원인을 만들면 결과가 즉시, 정확하게 보이기 때문”입니다.거울을 한 칸 회전했을 뿐인데레이저의 경로가 바뀌고,그 변화가 곧바로 퍼즐의 해답으로 이어집니다.이때 중요한 것은 물리적으로 완벽한 광학 시뮬레이션이 아닙니다.퍼즐 게임에서 필요한 것은 정확함이 아니라 일관성과 예측 가능성입니다.이번 4차시에서는3D 퍼즐 게임에 최적화된 방식으로 레이저 경로를 계산하고 반사시키는 알고리즘을 구현합니다.🎯 4차시 학습 목표퍼즐 게임에 적합한 레이저 시뮬레이션 방식 이해Raycaster를 이용한 광선 충돌 감지반사 벡터 계산을 통한 거울 반사 구현무한 반사/루프를 방지하는 설계 전략 습득📦 이번 차시 산출물레이저 발사기에서 광선 발사벽 또는 오브젝트 충돌 시 경로 계산거울..

[🎮 웹으로 3D 퍼즐 게임 만들기] 3차시 : 퍼즐 인터랙션 설계 – 선택, 회전, 조작의 규칙

퍼즐 게임에서 가장 중요한 것은 그래픽도, 기술도 아닙니다.플레이어가 “내가 무엇을 조작할 수 있는지”를 직관적으로 이해하는가가 핵심입니다.아무리 정교한 퍼즐이라도무엇이 선택되었는지 모르겠고어떻게 조작되는지 예측할 수 없다면그 게임은 곧 불친절한 게임이 됩니다.이번 3차시에서는3D 퍼즐 게임의 인터랙션 규칙을 설계합니다.무엇을 선택할 수 있는가선택되면 어떻게 표현되는가조작은 어떤 단위로 허용되는가이 기준이 잡히면, 이후 레이저 퍼즐·블록 퍼즐·중력 퍼즐 모두가 같은 UX 규칙 위에서 동작하게 됩니다.🎯 3차시 학습 목표Raycaster를 활용한 3D 오브젝트 선택 구조 이해퍼즐에 적합한 조작 단위(회전 스냅) 설계“행동(Action)” 중심의 인터랙션 개념 도입📦 이번 차시 산출물퍼즐 타일/오브젝트 ..

[🎮 웹으로 3D 퍼즐 게임 만들기] 2차시 : 3D 퍼즐을 위한 그리드와 좌표계 설계

퍼즐 게임과 액션 게임의 가장 큰 차이는 “자유도”에 있습니다.액션 게임은 자유로운 이동이 핵심이지만, 퍼즐 게임은 오히려 움직임이 제한될수록 사고가 깊어집니다.그래서 대부분의 퍼즐 게임은 보이지 않게 그리드(Grid) 위에서 동작합니다.3D 퍼즐 게임 역시 마찬가지입니다. 겉보기엔 자유롭게 보이지만, 내부적으로는 정해진 좌표 체계와 규칙 안에서 움직입니다.이번 2차시에서는 3D 퍼즐 게임의 근간이 되는 그리드 기반 좌표계를 설계하고, 이후 레이저 퍼즐·블록 퍼즐·중력 퍼즐까지 모두 재사용 가능한 구조를 만듭니다.🎯 2차시 학습 목표3D 퍼즐 게임에 적합한 그리드 구조 이해월드 좌표(World) ↔ 퍼즐 좌표(Grid) 변환 개념 습득레벨 데이터를 코드 없이 관리할 수 있는 기초 토대 마련📦 이번 차..