Visual Studio Code를 온라인으로! Visual Studio Codespaces 소개와 시작 방법

Visual Studio Codespaces의 홈페이지 화면

Visual Studio Codespaces는 Microsoft에서 개발한 클라우드 기반의 IDE로 이미 존재하는 대표적인 클라우드 IDE 서비스는 Repl.it, Cloud9, Codesandbox 그리고 구름 IDE가 있다.

 

이처럼 이미 많은 Cloud 기반 IDE가 존재하는 가운데 Visual Studio Codespaces만이 갖는 장점은 뭘까? 바로 많은 개발자들이 사용하는 IDE인 Visual Studio Code가 그대로 온라인으로 이식된 형태의 서비스라는 점인데, 실제로 Visual Studio Code는 2018년과 2019년도 스택오버플로우(StackOverFlow) 개발자 설문조사에서 선호하는 개발 도구 부문에서 1위를 할 정도로 인기 있는 IDE이다.

 

그 Visual Studio Code를 온라인에서 사용할 수 있다는 것이 Visual Studio Spaces의 가장 큰 장점이라 할 수 있겠다

 

자 이제 Visual Studio Codespaces를 시작하는 방법에 대해 알아보자

 

Visual Studio Codespaces 홈페이지에서 시작을 눌러 들어가면 이 화면이 나올 것인데, 계정은 마이크로소프트 계정이 필요하며 로그인을 하면 아래 화면이 나온다

 

이 화면이 앞으로 우리가 사용할 메인 화면이다. 가운데의 Create Codespace를 클릭해 Space를 만들자

 

Space 제작 전에 Billing Plan을 설정해야 하는데, 그것이 의미하는 것은 이 서비스가 유료라는 것이다.

 

먼저 대략적인 가격 정책을 살펴보고 시작하도록 하자

 

오른쪽 상, 하단의 시간당 실행 시 대략적인 비용과 오른쪽 하단의 한 달(730시간) 기준으로 실행 시의 대략적인 비용이 적혀있다.

 

우선 말하고 싶은 것은 이 가격을 보고 뒤로 가기 버튼을 누르지 말아 달라는 것이다.

 

Visual Studio Codespaces로만 개발을 할 것이 아니라면 실제로 저 정도의 가격은 나오지 않으며, 위의 Billing Plan을 위해 만드는 Miscrosoft Azure은 가입 시 약 200$의 크레딧을 지원해준다(기간은 3개월). 달러가 원화로 바뀌어서 크레딧으로 들어오며 본인은 224,930원의 크레딧이 들어왔다.

 

만약 풀타임 개발을 하더라도 대략 2~3개월 정도는 사용할 수 있는 크레딧이기에 Visual Studio Codespaces를 맛보기에는 딱이라고 생각한다.

 

가격에 대해 대략적으로 알아봤으니 다시 Billing Plan으로 돌아와서, 이제 우리는 Azure 계정을 만들어야 한다

이전 Billing Plan 사진에서 Subscription란 밑에 있는 Create a free Azure account를 클릭에 홈페이지에 들어가자

 

가운데의 Start free를 눌러 계정을 생성하자

 

그렇다면 이 화면이 나올 것이다. First name(이름), Last name(성)등을 입력하고 계속 진행하자

Phone을 입력할 때 이상하게 입력되는데 그냥 010으로 시작해서 입력하도록 하고 BRN은 사업자등록번호로 알고 있어 굳이 입력하지 않았다

 

참고로 위 사진에 200$ 지원과 관련 내용들이 나온다

 

이후에는 핸드폰 번호 인증과 카드(신용카드만) 등록 정도기에 그냥 인증하고 등록하면 된다

그렇게 Azure 계정을 생성하고 진행하면

 

Space의 이름과 Git 저장소, 인스턴스 사양, Suspend... 에 대해 설정할 수 있게 된다

 

인스턴스 사양은 기본, Standard, Premium, 자체 호스팅으로 4가지로 나뉘며, 자체 호스팅을 제외하면 사양이 올라갈수록 시간당 비용이 늘어난다

 

• 사양은 이렇게 나뉜다
• 기본(2 코어, 4GB 램, 64GB SSD)= 시간당 비용(대략적): 271.266
• Standard(4 코어, 8GB 램, 64GB SSD)= 시간당 비용(대략적): 506.093
• Premium(8 코어, 16GB 램, 64GB SSD)= 시간당 비용(대략적): 979.796

데스크탑 부럽지 않은 성능을 제공하고 있다

 

그렇게 원하는 이름, 설정 등을 맞추고 Create를 누르면 Space가 생성된다

 

ex-spcae라는 이름의 space가 생성된 모습

이름을 클릭하거나 오른쪽 하단의 버튼을 클릭해 접속할 수 있고 삭제하거나 컴퓨터의 Visual Studio Code를 통해 열 수도 있다

 

Space 내용

Space를 잘 살펴보면 생성된 날짜와 인스턴스 사양, Suspend 시간 등의 정보를 알려준다

 

여기서 Suspend와 Auto-Suspend에 대한 추가 설명을 하자면, 우리는 Space를 사용한 시간만큼의 값을 지불한다. 만약 Space를 킨 상태로 종료 버튼을 누르지 않는다면, 우리가 실제 사용한 시간보다 더 많은 요금을 지불하게 된다. 그리고 그것을 막아주는 것이 바로 Auto-Suspend이다. 우리가 직접 Suspend 버튼을 눌러 종료하는 것이 아닌, 입력이 없거나 Space가 idle(놀고있는) 상태일 때 우리가 설정한 시간 이후에 자동으로 종료되게 하는 것이다

 

Suspend 환경에 대한 MS 공식 문서

본인은 손실을 최대한 막기 위해 5분으로 설정해 두었는 데 사용하다가 너무 타이트하다 싶으면 30분으로 늘릴 것 같다

 

자 이제 접속을 해볼까?

 

접속을 하면 나오는 초기화면

Visual Studio Code를 사용해봤다면 알 수 있겠지만 정말 똑같다. 위의 탭 부분을 삭제해서 더 그래 보이는 듯하다

 

Visual Studio Code 큰 장점 중 하나는 수많은 확장 프로그램이다. 5번째 버튼인 Extension 창에 들어가 보자

 

Extension 창

Space를 만들자마자 확장 프로그램부터 설치해서 이미 깔려있는 것이 조금 있다.

대부분의 확장 프로그램을 지원하지만 몇몇 프로그램은 지원하지 않는데. 내가 좋아하는 확장 프로그램인 Auto Rename Tag는 "Cannot install 'Auto Rename Tag' because this extension has defined that it cannot run on the remote server."라는 말과 함께 지원하지 않는다

 

아무래도 온라인 환경이기 때문에 지원하지 않는 프로그램을 미리 정해둔 것 같다

 

터미널도 잘 지원한다

이제 마음껏 개발하면 되겠다. Hello World!!

 

 

마치며

글이 다소 길어졌는데 긴 글을 읽어주셔서 감사합니다. 중간중간 문체가 아직 어색한데 다음에는 더 나은 글로 찾아뵙도록 하겠습니다. 감사합니다.