[Cocos] 생소해도 OK! 설치부터 에디터까지 친절 가이드 🧸

 

 

안녕하세요 게임 개발자 GamJia 입니다

 

오늘은 Cocos로 게임 개발을 시작하시는 분들을 위해
설치부터 프로젝트 생성, 인터페이스 핵심 기능까지 쉽게 설명해드리려고 합니다!

✍️ 이 글에서 다룰 내용
✅ Cocos Creator 설치 방법 (2025 최신 버전 기준)
✅ 첫 Project 생성 시 꼭 체크해야 할 설정
✅ Scene View, Hieararchy, Inspector 창 완벽 정복
✅ Cocos Store에서 Package Import 해보기

 

" Unity보다 생소하다고요? 그럴 수 있어요!
그래서 더더욱 쉽게,
처음부터 같이 시작해볼게요 :) "

 

---

 

Cocos Creator는 2D 게임 개발에 최적화된 가볍고 직관적인 엔진이에요.
주로 TypeScript나 JavaScript를 사용하고,
모바일·웹·PC 등 다양한 플랫폼을 지원합니다.

가장 큰 장점은 모든 기능이 무료라는 점! 🎉
처음 시작하는 사람도 부담 없이 써볼 수 있어요.

 

---

 

Cocos에 접속해서 Cocos Dashboard부터 다운로드 받겠습니다

 

Cocos Dashboard는 Cocos 엔진과 프로젝트를

효율적으로 관리할 수 있는 프로그램이에요.

 

여러 버전의 Cocos 설치 및 전환, 새 Project 생성,

Template 선택, Module 추가 등이 가능합니다.

Cocos - The world's top 2D&3D engine, game / smart cockpit /AR/VR/ virtual character / education

 

---

 

Cocos Dashboard 설치를 완료하면 이런 화면이 나타납니다.

 

여기서 ‘Installs’ 버튼을 눌러 최신 버전의

Cocos Creator Editor를 다운로드할 수 있어요.

 

최신버전부터 옛날버전까지 한번에 볼 수 있답니다

 

---

 

Cocos는 기본적으로 Module들이 대부분 포함 되어있고

License도 따로 없어서 Editor 설치가 완료 되면

곧바로 게임을 만들 수 있어요.

 

---

 

프로젝트가 생성되면 이런저런 UI 창들이 보이실 거예요.
이제 예시 프로젝트를 함께 만들어보면서,

각각의 UI가 어떤 역할을 하는지 하나씩 알아보겠습니다!

 

공식캐릭터는 아니지만 귀엽잖아 한잔해~

 

---

 

Cocos Store에 접속해서 Asset을 다운 받으면

이런식으로 Cocos Editor에서 바로 import할 수 있도록 도와줍니다

 

---

Package를 Import 했더니 Project에

방금 다운로드 받은 Asset들이 보이죠?

 

Assets 창은 프로젝트에 필요한 Asset을 관리하는 곳입니다.

 

Texture, Model, Script 등 다양한 파일들이 이곳에 보관돼 있어요.

프로젝트 작업을 하면서 필요한 파일을 쉽게 찾고,

새로운 파일을 만들거나 기존 파일을 수정할 수 있는 공간이에요

그리고 오른쪽에는 Assets Preview 창이 따로 있어서
선택한 에셋의 모습을 바로 확인할 수 있어요.

 

---

 

Asset 폴더 내에 있는 Object 중에

Prefab 객체를 Hierarchy에 드래그 해볼게요

 

Prefab은 Object를 저장해두는 Template입니다.

 

Scene에서 만든 Object를 Prefab으로 만들어두면,
필요할 때마다 쉽게 복사해서 쓸 수 있고,
원본을 수정하면 연결된 Object들도 함께 바뀐답니다.

---

Hieararchy창은 Scene의 모든 Object들이 나열되는 곳입니다.

 

이 창에서는 Object들을 계층적으로 볼 수 있어서,

부모와 자식 관계를 쉽게 확인할 수 있어요.

 

---

Scene 창을 보면, 방금 넣은 캐릭터가

잘 배치되어 있는 걸 확인할 수 있어요

 

Scene창은 Game World를 직접 편집하는 곳입니다.

 

Object를 배치하거나 이동시킬 수 있고,

게임 내에서 어떻게 보일지 미리 조정할 수 있어요.

마치 게임의 배경을 꾸미는 작업을 하는 공간처럼 생각하면 된답니다

 

---

 

Game을 실행해봤는데 뭔가 캐릭터가

조금 위에 있는 것 같죠?

캐릭터의 Transform을 수정해보겠습니다

 

---

캐릭터 Prefab을 클릭해, Inspector창에서

Rotation과 Position 값을 일부 수정해주었습니다

 

Inspector 창은 선택한 Object의

속성을 확인하고 편집할 수 있는 곳입니다.

 

3D 모델의 크기나 색상, 물리 속성 등을 여기서 조정할 수 있어요.

이 창을 통해 오브젝트의 세부 설정을 쉽게 변경할 수 있답니다.

---

Before & After

Transform 값을 수정해주었더니

아까보다 캐릭터가 잘 보이고 있는 모습입니다!

아주 좋아

 

---

 

Script 폴더에 들어가서 Script를 하나 생성 해볼게요!

마우스 우클릭 / Create / TypeScript / NewComponent 로 생성 가능합니다

 

import { _decorator, Component } from 'cc';
const { ccclass } = _decorator;

@ccclass('Test')
export class Test extends Component {
    start() {
        console.log("지아야밥목쟈");
        console.warn("오류 발생!");
    }
}

 

 

---

 

작성한 Test Script를 저장 후 Object에

Component를 연결 해주겠습니다

그리고 게임을 실행해보면?

 

---

짜잔! 이런식으로 방금 Script에 작성한

Log들이 출력되는 모습을 볼 수 있습니다!

 

Console 창은 게임 내 에러나 경고 메시지를 확인할 수 있는 곳입니다.

 

게임을 만들다 보면 코드나 설정에서 실수가 있을 수 있는데,

이 창을 통해 어떤 부분에서 문제가 발생했는지 빠르게 파악할 수 있어요.

게임이 정상적으로 실행되는지 체크할 수 있는 중요한 도구랍니다.

 

---

오늘은 Cocos 설치부터 첫 프로젝트 생성, 기본 UI 사용법까지 쭉 살펴봤습니다.

Unity나 다른 엔진을 써본 경험이 있다면 더 쉽게 적응할 수 있을 거예요 :)

 

앞으로도 Cocos를 처음 시작하는 분들을 위해
실전 팁과 초보자용 가이드를 계속 공유할 예정이니,
다음 글도 기대해주세요!

 

 

감사합니다!