IDE: Web App 개발 환경 IDE

WSL2, Docker, VS Code 중심으로 살펴보기

신중히 선택해야 하는 개발환경

Notion (노션)이나 Perplexity (펄플렉시티) 같은 Web App을 직접 만들고 싶다면, 단순히 코드만 짜는 것이 아니라 Web App 개발환경을 어떻게 구성할지도 매우 중요합니다. 특히, 다양한 오픈소스 웹 앱을 설치해 보고, 그것들을 조합하며 실험하려는 경우에는 서버용 프로그램을 쉽게 설치하고 격리된 환경에서 관리할 수 있는 구조가 필요하죠. 바로 이럴 때 핵심 역할을 하는 것이 Docker 프로그램입니다.

Docker 프로그램의 필요성

많은 서버용 오픈소스 프로그램 — 예를 들어 Node.js, Python, MySQL, MongoDB, Redis, 심지어 Notion 클론까지 — 대부분은 Docker image 형태로 배포됩니다. 이 Docker는 Linux kernel (리눅스 커널)의 핵심 기능인 cgroups와 namespaces를 활용해 container (컨테이너)라는 격리된 환경을 만들기 때문에, 어떤 운영체제에서 Docker를 사용하든지 간에 내부적으로는 반드시 리눅스 커널이 필요합니다. 즉, Windows나 macOS에서 Docker를 실행할 때도, 내부적으로는 리눅스 커널이 실행되고 있다는 점이 핵심입니다. 이를 가능하게 해주는 것이 WSL2 (Windows Subsystem for Linux 2) 또는 macOS의 하이퍼바이저입니다.

VS Code 프로그램이 좋은 이유

Visual Studio Code (VS Code)는 가볍고 빠르면서도, 방대한 확장 기능(extension) 생태계를 가지고 있는 최고의 무료 코드 편집기이자 IDE입니다.

특히, Remote 개발 환경을 위한 extension이 굉장히 잘 갖추어져 있어요:

Remote - WSL: WSL2의 리눅스 환경에 직접 접속하여 개발 가능
Remote - Containers: Docker 컨테이너 내부에서 개발 가능
Remote - SSH: 원격 서버에 접속하여 개발 가능
code-server: 브라우저를 통해 사용할 수 있는 VS Code (리눅스 전용)

이런 확장 기능 덕분에, 어떤 운영체제에서든 유연하고 강력한 개발 환경을 만들 수 있습니다.

본격 비교: Web App 개발을 위한 3가지 환경 구성

아래는 Web App을 개발하려는 입장에서 생각해 볼 수 있는 3가지 대표적인 개발환경입니다.

각각의 구조, 장점과 단점, 적합한 사용자 유형을 살펴봅니다.

항목	A 환경	B 환경	C 환경
운영체제	Windows + WSL2 + Ubuntu (GUI)	Windows + WSL2 + Ubuntu Server	Ubuntu Server (물리 머신)
IDE 실행 위치	Windows (VS Code)	리눅스 내부 (code-server)	리눅스 내부 (code-server)
리눅스 GUI 필요	O	X	X
브라우저 접속	X	O (localhost)	O (LAN/도메인)
리소스 효율	낮음	중간	높음
유지 보수 난이도	낮음	중간	높음
원격 개발 가능성	X	제한적	O (완전 가능)
추천 대상	초보자, 학습용	중급자, 실전 실험	고급자, 장기 서버 개발용

🅰️ 환경 — Windows 11 + WSL2 + Ubuntu Desktop + VS Code (Windows용)

구성

Windows 11에 VS Code 설치
WSL2로 Ubuntu LTS (데스크탑 버전) 설치
VS Code의 Remote - WSL 확장으로 Ubuntu에 접속
Docker Desktop은 WSL2 기반으로 동작

장점

설정이 쉬움, 익숙한 Windows 환경 유지
GUI 연동도 편리 (예: 리눅스 앱도 실행 가능)
문서가 많고 입문자에게 친숙함

단점

Windows + WSL2 + Ubuntu GUI까지 중복 리소스 소비
Docker와 VS Code가 모두 Windows에서 실행되며 I/O 병목 발생 가능
개발 성능과 리소스 효율성이 떨어짐

적합 대상

초보자, 리눅스를 처음 배우는 사용자
학습용 환경이나 실험용 개발에 적합

🅱️ 환경 — Windows 11 + WSL2 + Ubuntu Server + Node.js + code-server

구성

Windows 11에 WSL2로 Ubuntu Server 설치 (GUI 없음)
Ubuntu Server 내부에 Docker, Node.js, 기타 도구 설치
VS Code 대신 code-server를 설치하여 브라우저로 코드 편집
로컬 브라우저에서 http://localhost:PORT로 접속

장점

리눅스 GUI 없이 개발 가능 → 리소스 절약
VS Code 설치 없이 브라우저로 IDE 사용 가능
WSL2를 하나의 리눅스 서버처럼 사용할 수 있음

단점

VS Code 데스크탑에 비해 일부 확장 기능 제약
Windows와 리눅스 파일 시스템 연동이 필요 (예: /mnt/c/...)
브라우저 기반 코드 편집에 익숙해야 함

적합 대상

Docker 기반 실전 개발을 하고 싶은 중급 개발자
리눅스를 메인 개발 플랫폼으로 사용하려는 사용자

🆂 환경 — 물리 머신에 Ubuntu Server 설치 + code-server + 원격 개발

구성

오래된 PC나 서버에 Ubuntu Server LTS를 설치
code-server 설치 후 systemd 등록 (자동 실행)
개발용 워크스테이션에서는 브라우저로 접속 (LAN or 도메인)

장점

Windows를 완전히 제거 → 최대한 가벼운 구조
서버는 항상 켜두면 원격에서 접속 가능 → 클라우드 개발 환경
Workstation은 브라우저만 켜두면 됨 → 개발 리소스 제로

단점

네트워크 설정, 방화벽, 도메인 연결 등 복잡한 초기 설정 필요
서버 보안과 관리 책임이 사용자에게 있음
물리적 하드웨어가 필요

적합 대상

장기 프로젝트를 위한 자체 개발 서버를 구축하고 싶은 고급 사용자
클라우드 개발 환경을 로컬에서 구현하고 싶은 사용자