웹 게임 배포를 위한 Git, Vercel Cli, Supabase Cli 설치

-

얼마 전 그록3와 Phaser를 이용해 제작한 웹 2D 게임을 Vercel의 호스팅 서비스를 이용해 배포하고 Supabase 클라우드 서버를 통해 리더보드를 구축해보려고 한다.

  1. Vercel 호스팅
  2. Supabase 클라우드 서버 연동

두 서비스 모두 이용하려면 Git이 설치되어 있어야 한다.

 

깃 설치

깃을 설치하려면 아래 깃 공식 사이트에서 설치 파일을 받아서 설치해야한다.

깃 공식 사이트

파일을 받은 후 cmd 에서 'git --version'을 통해 정상 설치 되었는지 확인할 수 있다.


Vercell Cli 설치

cmd에서 다음 명령어를 입력한다.

npm install -g vercel 

vercel --version


Supabase Cli 설치

Window 환경에서 Supabase Cli를 설치하려면 Scoop이 필요하다. Scoop은 Windows에서 패키지(프로그램)를 간편하게 설치하고 관리할 수 있게 도와주는 명령줄 기반 패키지 관리자이다. cmd로는 안 되고 powershell을 통해 scoop을 설치한 다음 cmd에서 Supabase Cli를 설치해야 한다. 

바로 scoop을 설치하려고 하면 PowerShell의 "실행 정책"이 너무 엄격하게 설정되어 있어서 Scoop을 설치할 수 없다는 메시지가 출력되므로 다음의 명령을 먼저 입력한다.

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

그 다음 아래 명령을 입력하면 scoop이 설치된다.

iwr -useb get.scoop.sh | iex

이제 cmd로 넘어와서 아래 명령어를 입력하면 supabase Cli가 설치된다.

scoop install supabase

이제 Git, Vercel Cli, Supabase Cli 설치가 끝났으니 다음 글에서 GitHub 저장소를 만들고 Vercel 프로젝트 설정을 위한 준비를 하도록 하겠다.


댓글

댓글 쓰기

이 블로그의 인기 게시물

전체 화면으로 현재 시간 보여주는 웹 시계 사이트 Bonfire Clock

-
이미지
Bonfire Clock 웹 시계 🔗사이트 링크: bonfire-clock.web.app 현재 시각을 보여주는 시계 사이트를 개설했습니다. 웹 브라우저에서 동작하는 초 단위 실시간 시계입니다. 웹사이트에서 바로 사용할 수 있고 전체 화면을 지원하니 따로 설치 과정이 필요하지 않습니다. 특별한 기능이라 할 것은 없지만, 보기에 깔끔하며 사용하기 편한 UI(User Interface)를 생각하며 제작했습니다. 하지만.. 예쁜 시계 사이트가 있으면 좋겠다는 생각도 있었습니다. 사이트 이름은 'Bonfire Clock(반파이어 클락)'이라고 정했습니다. 🔥 모닥불을 보며 시간의 흐름을 관찰하듯 시간이 흐르는 것에 집중하고 여유롭게 분위기를 즐기기를 바라는 마음으로 지었습니다. Bonfire Clock의 특징은 다음과 같습니다. 미니멀리즘 디자인 다크모드 컬러 배경화면 전체화면 반응형 디자인 미니멀리즘 디자인 Bonfire Clock 사이트 기본 화면 실용성을 위해 실질적으로 필요한 요소인 시간만 보이도록 하고 버튼 GUI(Graphic User Interface)는 감추었습니다. 사이트에 접속하면 지저분한 요소 없이 시계만 볼 수 있습니다. Bonfire Clock 사이트 GUI 구성 화면 마우스를 움직이면 숨겨져 있던 GUI가 나타납니다. 좌측 상단에는 사이트 로고가 있고 시계 옆에는 버튼 그룹이 있습니다. 마우스를 움직이지 않고 몇 초 지나면 GUI 요소가 다시 숨겨집니다. 이 때 마우스 커서도 같이 숨겨지도록 해서 시계 화면에 거슬리지 않도록 만들었습니다. Bonfire Clock 사이트 GUI 버튼 버튼 그룹 안의 요소는 순서대로 다크 모드, 컬러 배경화면, 전체 화면입니다. 투명도가 기본으로 들어가 있고, 마우스 커서를 버튼 위에 가져가면 투명도를 제거해서 현재 어떤 버튼이 선택되고 있는지 잘 보이도록 만들었습니다. 다크 모드 Bonfire Clock 사이트 다크 모드 화면 다크 모드 버튼을 누르면 기본 색상을 반전 시킬 수 있습...
자세한 내용 보기

블렌더 3D 카툰 렌더링으로 웹툰 배경 만들기

-
이미지
블렌더 3D 툰 셰이더로 웹툰 침실 배경 카툰 렌더링 지난 포스팅에서 블렌더의 'Force Field'같은 여러 기능을 사용해보며 간단한 침대를 모델링하고 책상 등의 가구를 부가적으로 만들어 방을 구성해보았다. 이번에는 구성해놓은 방을 툰 셰이딩 방법을 통해 만화와 같은 시각적 표현을 해보려고 한다. (이전 포스팅 :  블렌더 3D 침대 만들기 ) 이번에 배운 툰 셰이딩 방법의 단계는 크게 두 단계이다. 먼저 Shader to RGB, Color Ramp 노드로 명암 단계를 뚜렷하게 나누고, Solidity 특성으로 외곽선을 생성해 보다 만화같은 느낌을 준다. 명암 단계 나누기 Shader Editor를 열어준다. 쉐이더 작업을 할 오브젝트를 선택한다. Ctrl + 스페이스바 누르면 해당 뷰포트만 전체화면으로 전환이 가능하다. Shift A를 눌러 Converter에서 'Shader to RGB'와 ' Color Ramp' 노드를 추가한다. Shader to RGB 노드는 EEVEE엔진을 사용할 때만 활성화된다. Cycle 엔진으로 변경한 뒤 검색하면 나타나지 않는다. 두 노드를 위와 같이 연결해주고 Color Ramp의 Linear를 Constant로 바꾼다. 컬러 램프의 파라미터를 움직이면서 그림자가 지는 부분과 빛을 받는 부분의 비중을 조절할 수 있다. 파라미터의 화살표를 클릭하고 아래 색상 박스를 선택하면 색을 변경할 수 있다. 스포이드로 기존의 Base Color를 찍어준다. 빛을 받는 부분과 그림자 부분에 같은 Base Color 색상을 입히고 그림자부분의 명도를 낮추면 자연스럽게 투톤 채색 효과를 나타낸다. 만약 색상이 변화하는 단계를 늘리고 싶다면 +버튼을 눌러 색상 파라미터를 추가해 명도를 조절하면 된다. 외곽선 생성 머티리얼을 추가해고 Surface 기본값으로 되어있는 Principled BSDF를 Emission으로 변경한다. 'Emission'노드의 컬러를 표현할 선 색상으로 바꾸고...
자세한 내용 보기

3D 디자인 툴의 혁명 spline.design

-
이미지
스플라인(Spline.design)이란? 스플라인(Spline.design)은 누구나 쉽게 3D 디자인을 구현할 수 있는 강력한 툴이다. 3D 모델링, 텍스처, 물리 환경 및 이벤트 구현 등을 이용하여 인터랙티브한 경험을 만들어볼 수 있다. spline.design 홈페이지 스플라인 홈페이지 :  https://spline.design/ 스플라인의 장점 AI 기술 spline.design은 인공지능 기술을 적극 활용한다. 프롬프트에 텍스트를 입력해 chat GPT와 대화할 때처럼 프롬프트에 입력함으로써 3D 디자인이 가능한 기능을 적용했고 AI 스타일 트랜스퍼를 통해 카툰 렌더링을 비롯한 수 많은 렌더링 스타일을 클릭 한 번으로 바꿀 수 있는 기술을 적용했다. 프롬프트를 이용한 3D 디자인 영상 :  Introducing Spline AI - Design in 3d using AI 인공지능 스타일 트랜스퍼 영상 :  Update: Introducing AI Style Transfer for 3d scenes with Spline 인공지능은 이미 디자인 분야의 생산성을 극대화 시키며 시장의 방향을 바꾸어버렸다. '스테이블 디퓨전'이나 Open AI의 'DALL-E 2' 등의 서비스는 프롬프트 입력으로 이미지 생성 및 편집기술의 한계를 뛰어넘을 수 있음을 보여주었고, 포토샵은 제너레이티브 필 기능을 도입하며 발 빠르게 트렌드를 따르고 있다. 포토샵 제너레이티브 필 소개 영상 :  Introduction to Generative Fill | Adobe Photoshop   2D 디자인에서 3D 디자인으로 AI 기술이 도입 되기까지 1년이 채 걸리지 않은 만큼 인공지능 은 생산성 측면에서 거스를 수 없는 트렌드가 되었다. 스플라인은 AI기술을 빠르게 도입함으로써 생산성 향상에 대한 디자이너들의 수요를 충족시키고 일반인들도 쉽게 작품을 만들 수 있도록 진입 장벽을 낮췄다.  웹에서 실시간으로 협업 스플라인은 실시간 협...
자세한 내용 보기