브라우저 기반 개발 환경

Code-Server는 Microsoft의 Electron 기반 VS Code를 Chromium 웹 기반 오픈소스로 재구현한 것으로, 개발 환경이 구성된 로컬 PC에서 서버를 실행해 어떤 기기의 브라우저에서든 접속해 개발할 수 있게 한다. 인터넷만 연결되면 스마트폰이나 태블릿에서도 동일한 개발 환경을 사용할 수 있다는 것이 핵심 가치다.

macOS에서는 Homebrew로 `brew install code-server`를 실행해 설치하며, 기본 8080 포트로 로컬 실행된다. 초기 비밀번호는 `~/.config/code-server/config.yaml`에 자동 생성되고, 이 파일에서 `bind-addr`(접속 주소), 비밀번호, 포트를 영구적으로 설정할 수 있다. 외부에서 접속하려면 `bind-addr`를 `127.0.0.1`에서 내부 IP(예: `192.168.0.5`)로 변경하고, 공유기에서 해당 포트의 포트 포워딩을 설정해야 한다.

IP 주소를 매번 기억하는 불편을 피하기 위해 DDNS(ipTIME의 경우 고급 설정 → DDNS)를 설정하면 고정 도메인으로 접속할 수 있다. MacBook이 잠자기 상태로 전환되면 연결이 끊기므로 Amphetamine 앱으로 잠자기를 방지하는 것도 필수다.

VS Code for Web은 별도 서버 설치 없이 브라우저에서 바로 GitHub 또는 로컬 파일을 편집할 수 있어 간편하지만, 터미널을 실행할 수 없는 제약이 있다. 터미널 및 기존 개발 환경 전체가 필요하다면 Code-Server, 코드 편집만 필요하다면 VS Code for Web이 적합하다.

핵심 내용

  • Code-Server: VS Code를 브라우저에서 구동하는 오픈소스, `brew install code-server`로 설치
  • config.yaml 설정 항목: `bind-addr`(내부 IP로 변경), `password`, `cert`
  • 외부 접속을 위해 공유기 포트 포워딩 필수 (ipTIME: 고급 설정 → NAT/라우터 관리 → 포트 포워드)
  • DDNS로 외부 IP 대신 고정 도메인 사용 가능
  • Amphetamine 앱으로 MacBook 잠자기 방지
  • VS Code for Web과의 차이: Code-Server는 터미널 포함 전체 환경, VS Code for Web은 터미널 불가·간편 편집

관련 개념

출처

최종 업데이트: 2026-05-21 | 출처 1개