GitHub은 지난 5월 Satellite 2020 행사에서 GitHub 웹사이트에서 바로 Visual Sutdio Code를 이용해서 개발할 수 있는 Codespaces를 공개했다.

아직 베타 상태라서 GitHub에서 초대를 보내줘야 사용할 수 있고 아직 정확히 언제 퍼블릭으로 열릴지는 공개되지 않았다.

지난달에 베타 초대를 받아서 사용할 수 있게 되었다. 베타라서 지금은 과금이 되지 않지만 문서에 가격이 나와 있다.

• Basic (2 cores, 4GB RAM, 32 GB SSD) - $0.085
• Standard (4 cores, 8 GB RAM, 32 GB SSD) - $0.169
• Premium (8 cores, 16 GB RAM, 32 GB SSD) - $0.339

Premium을 쓴다고 하면 30일 동안 내내 사용하면 244.08 달러가 나오고 Basic이라면 61.2 달러 정도가 나온다. 하지만 과금은 실제로 Codespace를 사용한 시간만 과금하고 사용하지 않는 상태도 30분이 지나면 자동으로 멈추므로 실제 과금은 훨씬 적을 것으로 보인다. Premium으로 하루 8시간 20일 정도를 사용한다고 하면 54.24 달러 정도(Basic이면 13.6달러)를 예상할 수 있다. 싸진 않지만, 업무에 주로 쓴다면 지불할 정도는 된다고 생각한다.

나는 VS Code도 거의 안 쓰고 JetBrains의 개발도구를 주로 쓰는 편이고 코딩을 로컬이 아닌 웹상에서 할 생각은 전혀 없지만, 베타를 받은 김에 좀 살펴봤다. Figma 덕에 디자인 쪽도 웹상에서 작업하는 쪽으로 옮겨가고 있고 개발도 그런 흐름으로 흘러갈 것으로 보인다.

Codespace 열기

저장소에서 "Code" 버튼을 누르면 "Open with Codespaces"라는 메뉴가 나오고 여기서 코드 스페이스로 진입할 수 있다. GitHub 페이지 상단의 "Codespaces" 메뉴에서도 저장소와 브랜치를 선택해서 코드스페이스를 생성할 수 있다.

"Open with Codespaces"를 누르면 이미 만들어 놓은 코드스페이스가 없으므로 새로 만들어야 한다고 나온다.

이미 해당 저장소에서 코드스페이스를 띄워 놨다면 아래처럼 이전에 열어놓은 스페이스 정보가 나와서 바로 띄울 수도 있다.

"New codespace"를 누르면 화면이 바뀌면서 서버를 불러오고 컨테이너를 띄우면서 환경을 준비한다. 1~3분 정도면 뜨는 것 같은데 아직 베타라 그런지 그것보다 더 오래 걸리는 경우도 있다.

주소는 https://outsideris-citizen-6g63.github.dev/ 같은 주소로 연결되고 로딩이 완료되면 다음과 같이 익숙한 VS Code 화면이 나오고 로고에서 알 수 있듯이 실제로도 VS Code임을 알 수 있다. VS Code 공지를 보면 VS Code 녹색 아이콘은 Insiders 버전임을 알 수 있는데 현재 Codespaces에 적용된 버전은 Insiders 버전이다. 설정에 가면 Stable 버전으로 전환할 수 있다.

Codespace 기능

일단 테스트로 파일을 열고 수정할 때는 코딩할 때 무리 없을 정도로 괜찮은 속도를 보여준다. 물론 테스트라 업무로 몇 시간씩 사용하면서 괜찮을지는 다른 이야기일 수 있다. 레퍼런스를 찾아가거나 정보를 보여주는 것도 VS Code와 마찬가지로 잘 돌아가고 이질감은 거의 느껴지지 않는다. 당연히 설정에서 테마도 변경할 수 있다. 설정에 "Settings Sync is On"가 있어서 테마 등 자신에게 맞게 설정한 걸 다른 코드스페이스에 자동으로 적용해 주어서 웹상이지만 프로젝트가 달라도 하나의 IDE로 개발하는 경험을 가질 수 있다.

현재 최신 버전의 VS Code와 비교해 보면 메뉴나 화면 구성이 거의 똑같은 것을 알 수 있다.

이 모든 기능을 다 살펴보는 것은 글도 VS Code를 설명하는 것과 다름없기 때문에 VS Code에는 없는 부분만 설명하려고 한다. 이 추가 기능들도 일부는 이미 VS Code에 있는 익스텐션일 것 같지만 VS COde로 개발을 하지 않아서 정확히는 모르겠다.

Remote Explorer

이 메뉴는 Codespace의 환경 정보를 보여준다.

이미 생성해 놓은 코드스페이스 정보를 볼 수 있고 두 번째 칸에서는 현재 코드스페이스의 상태가 나온다. 이 메뉴에서 코드스페이스의 연결을 끊거나 하는 것도 가능하다.

"Forwarded Ports" 부분은 코드스페이스 개발하면 서버를 띄우거나 하고 접속해 보고해 봐야 하기 때문에 이러한 포트 포워딩 정보가 나오는 부분이다. 위처럼 터미널에서 프로젝트의 서버를 띄우면 로그 메시지를 보고 URL이 있으면 알아서 포워딩해준 화면이다. 포트 포워딩이 추가되면서 "Forwarded Ports" 부분에 포트 정보가 추가된 것을 볼 수 있다.

여기서는 http://localhost:3000를 탐지해서 포트 포워딩을 추가한 것인데 브라우저에서 열기를 누르면 아래와 같이 코드스페이스 내에서 띄운 서버가 https://3ac9ac26-8d0f-4eca-bec9-d07d7073b248-3000.apps.codespaces.githubusercontent.com/ 같은 GitHub 도메인을 통해서 연결된다. 터미널의 로그를 클릭해서도 바로 이러한 포워딩된 주소로 이동할 수 있다.

GitHub

Pull Reqeust 아이콘처럼 생긴 메뉴는 GitHub 메뉴인데 코드 스페이스 내에서 열린 Pull Reqeust나 Issue 목록을 볼 수 있다.

Pull Reqeust의 올라온 파일 변경 내용을 보거나 체크아웃해서 소스를 살펴볼 수 있다.

Issue에서는 이슈 내용을 열어보거나 해당 이슈를 작업하기 위해서 브랜치를 따서 시작하는 것 등을 할 수 있다.

물론 여기서 새로운 이슈나 Pull Request를 만들어서 올릴 수도 있다.

Live Share

Live Share는 온라인으로 다른 사람과 같이 코딩할 수 있는 기능이고 원래 VS Code에서 협업을 위해 지원하는 부분이다.

이 기능은 따로 해보진 않았다.

VS Code가 인기를 끌고 점점 발전에 가면서 VS Code도 결국은 웹 기반이라서 이런 식의 확장을 어느 정도 예상한 부분이었고 Microsoft가 GitHub을 인수하면서 훨씬 자연스럽게(혹은 강력하게) 개발자에게 다가왔다고 생각한다. 제대로 느끼려면 코드스페이스를 메인으로 개발을 좀 해봐야 할 것 같은데 테스트 삼아 만져본 느낌은 상당히 괜찮았다. 이미 Visual Studio Codespaces가 있는 것은 알고 있었지만, GitHub에 통합되니 확실히 느낌이 다르다. 근데 기능 테스트하느라 이것저것 하다 보면 난 Codespace에 열어놓은 파일을 닫을 의도로 Command + w를 눌렀지만, 실수로 Chrome 탭이 닫혀서 자꾸 놀라게 된다.