개발자가 많이 쓰는 에디터 ‘VS Code(비주얼 스튜디오 코드)’ 설치 및 한글 설정법

비주얼 스튜디오 코드란 무엇이고 왜 많이 쓸까요

프로그래밍을 시작하려고 할 때 가장 먼저 마주하는 고민 중 하나는 어떤 프로그램을 써서 코드를 작성해야 할까 하는 점입니다.

과거에는 복잡하고 무거운 프로그램이 많았지만, 마이크로소프트가 만든 비주얼 스튜디오 코드(Visual Studio Code)는 무료이면서 가볍게 시작할 수 있어 초보자부터 현업 개발자까지 많이 사용합니다.

윈도우, 맥, 리눅스에서 모두 사용할 수 있다는 점도 장점입니다.

많이 쓰이는 이유는 가볍게 열어서 코드를 확인할 수도 있고, 확장 프로그램을 설치해 필요한 기능을 더해 갈 수도 있기 때문입니다. 메모장처럼 간단한 파일을 열어 볼 수도 있고, 웹사이트 같은 프로젝트를 만드는 작업에도 쓸 수 있습니다.

프로그래밍을 처음 배우는 입문자도 설치한 뒤 바로 코드를 작성해 볼 수 있어서 시작용 에디터로 많이 추천됩니다. 이 글에서는 설치 방법과 한글 설정, 그리고 처음 알아 두면 좋은 내용을 정리했습니다.

내 컴퓨터에 프로그램을 안전하게 설치하는 과정

먼저 공식 사이트에서 내 컴퓨터에 맞는 설치 파일을 내려받아야 합니다. 주소창에 code.visualstudio.com을 직접 입력해서 접속하면 운영체제에 맞는 다운로드 버튼이 표시됩니다. 검색 결과의 광고나 이름이 비슷한 사이트를 누르지 않도록 주소를 직접 입력하는 것이 안전합니다.

맥에서는 내려받은 파일이 압축 파일(zip)로 저장될 수 있습니다. 이 경우 더블 클릭해서 압축을 풀면 Visual Studio Code 앱 아이콘이 생기는데, 이 아이콘을 Applications 폴더로 끌어다 놓으면 설치가 끝납니다. 윈도우에서는 내려받은 설치 파일을 실행한 뒤 화면의 안내에 따라 진행하면 됩니다.

설치가 끝나면 Command + 스페이스바를 눌러 검색창을 열고 Visual Studio Code를 입력해서 실행합니다. 처음 실행할 때 인터넷에서 내려받은 앱이라는 확인 창이 나올 수 있는데, 공식 사이트에서 받은 파일이 맞을 때만 열기를 누릅니다.

운영체제마다 설치 방법과 단축키는 조금씩 다르므로, 이 글에서는 맥 기준으로 설명하고 윈도우는 차이가 있는 부분만 언급합니다.

한글 메뉴 설정으로 친숙한 작업 환경 만들기

비주얼 스튜디오 코드를 처음 설치하고 실행하면 메뉴와 안내 문구가 영어로 표시됩니다. 한국어 언어 팩 확장 프로그램을 설치하면 메뉴를 한국어로 바꿀 수 있습니다.

한글 설정을 진행하는 방법은 다음과 같습니다.

• 왼쪽 줄에서 네모 모양의 확장 아이콘을 클릭하거나 Command + Shift + X를 누릅니다. 확장 아이콘은 왼쪽 줄 위에서 다섯 번째에 있습니다.
• 위쪽 검색칸에 Korean Language Pack을 입력합니다.
• 게시자가 Microsoft로 표시된 Korean Language Pack for Visual Studio Code를 찾아 Install 버튼을 누릅니다. 이름에 Korean이 들어간 확장 프로그램이 여러 개 나오지만 용도가 서로 다릅니다. 아래 화면처럼 맨 위에 있는 항목이 한국어 메뉴로 바꿔 주는 언어 팩입니다.

• 설치가 끝나면 화면 오른쪽 아래에 표시 언어를 한국어로 바꾸고 다시 시작할지 묻는 안내창이 나타납니다. 이때 Change Language and Restart 버튼을 누릅니다.

비주얼 스튜디오 코드가 저절로 닫혔다가 다시 열리면 메뉴가 한국어로 바뀌어 있습니다. 이 과정은 컴퓨터를 다시 켜는 것이 아니라 프로그램만 다시 시작하는 것입니다. 영어 화면이 더 익숙하다면 표시 언어를 설정에서 다시 바꿀 수 있습니다.

확장 프로그램으로 기능을 더하는 방법

비주얼 스튜디오 코드는 확장 프로그램으로 기능을 더할 수 있습니다. 코드를 자동으로 정렬해 주는 Prettier, 오류를 찾아 주는 ESLint, 저장하면 브라우저를 새로고침해 주는 Live Server 같은 확장 프로그램이 많이 쓰입니다. 각 확장 프로그램의 검색 화면과 설명은 따로 정리한 글 “VS Code 필수 추천 확장 프로그램(Extension) 5가지와 추천 이유“에서 자세히 다루었습니다.

이 외에도 화면 색상을 바꾸는 테마 확장 프로그램이나 파일 아이콘 모양을 바꾸는 아이콘 팩 확장 프로그램이 있어서, 작업 화면을 취향에 맞게 꾸밀 수 있습니다.

무료로 시작할 수 있는 에디터

비주얼 스튜디오 코드는 공식 사이트에서 무료로 내려받아 사용할 수 있습니다. 코딩을 처음 배우는 단계에서 프로그램 구입 비용 때문에 망설일 필요가 없습니다.

다만 확장 프로그램은 만든 사람이 서로 다르고 사용 조건도 제각각입니다. 설치하기 전에 게시자와 설치 수를 확인하고, 사용 조건이 궁금하면 공식 사이트의 라이선스 안내를 읽어 보세요.

초보자들이 흔히 하는 오해와 진실

가장 흔한 오해는 비주얼 스튜디오 코드가 전문 개발자만 쓰는 어려운 도구라는 생각입니다. 하지만 파일을 열고 글자를 입력한 뒤 저장하는 기본 사용법은 메모장과 크게 다르지 않아서, HTML 파일을 열어 수정하는 정도라면 초보자도 바로 해 볼 수 있습니다.

또 다른 오해는 컴퓨터 사양이 아주 좋아야만 쓸 수 있다는 생각입니다. 비교적 가볍게 실행되는 편이라 많이 쓰이지만, 열어 둔 파일이나 설치한 확장 프로그램이 많아지면 느려질 수 있습니다. 쓰지 않는 확장 프로그램은 사용 중지하거나 삭제하면 도움이 됩니다.

현명한 사용을 위한 실용적인 조언

처음에는 단축키를 모두 외우려 하기보다 자주 쓰는 몇 가지부터 익히는 것이 좋습니다. 맥에서는 Command 키, 윈도우에서는 Ctrl 키를 쓰는 경우가 많습니다. 예를 들어 파일 저장은 맥에서 Command + S, 윈도우에서 Ctrl + S입니다. 자주 쓰는 단축키는 메모해 두고 하나씩 익히면 됩니다.

설정과 확장 프로그램을 다른 컴퓨터에서도 쓰고 싶다면 동기화 기능을 사용할 수 있습니다. 설정 화면 위쪽의 “백업 및 동기화 설정” 버튼에서 켤 수 있으며, 계정으로 로그인해서 켜 두면 다른 컴퓨터에서도 같은 설정을 가져올 수 있습니다.

자주 묻는 질문과 명쾌한 답변

설치하고 처음 사용할 때 자주 나오는 질문을 정리했습니다.

• 설치 파일은 어디서 내려받나요?
• 공식 사이트 code.visualstudio.com에 직접 접속해서 내려받으세요. 검색 결과의 광고나 이름이 비슷한 사이트로 들어가지 않도록 주소를 직접 입력하는 것이 안전합니다.
• 한국어로 바꿨는데 일부 글자가 영어로 나와요.
• 확장 프로그램이나 일부 안내 문구는 한국어로 번역되지 않아 영어로 보일 수 있습니다. 먼저 프로그램을 한 번 다시 시작해 보세요. 그래도 영어로 나온다면 번역이 제공되지 않는 부분일 수 있습니다.
• 확장 프로그램을 많이 설치하면 느려지나요?
• 느려질 수 있습니다. 처음에는 꼭 필요한 것만 설치하고, 쓰지 않는 확장 프로그램은 사용 중지하거나 삭제하세요.
• 맥과 윈도우의 단축키가 다른가요?
• 대부분 맥의 Command 키가 윈도우의 Ctrl 키에 해당합니다. 예를 들어 저장은 맥에서 Command + S, 윈도우에서 Ctrl + S입니다. 전체 단축키 목록은 Command + K를 누른 뒤 이어서 Command + S를 누르면 열 수 있습니다. 윈도우에서는 Ctrl + K 다음에 Ctrl + S입니다.