코드편집기 - 비주얼 스튜디오 코드 설치하기

프로그래밍하시는 분들은 다양한 IDE 혹은 텍스트 편집기를 사용하고 있으실 것입니다. 이번에 소개할 에디터 프로그램은 Microsoft에서 무료로 배포하고 있는 Visual Studio Code라는 코드 편집기 프로그램입니다. 이 프로그램은 HTML 편집에 사용하기 좋다는 얘기를 들어서 이번 HTML/CSS 글과 나중에 티스토리 스킨 제작을 위한 프로그램으로도 활용해 보려고 합니다.

 

비주얼 스튜디오 코드는 마이크로소프트가 개발한 코드 편집기로 깃(Git)과 여러 확장프로그램을 지원합니다. 일반 비주얼 스튜디오 프로그램과 가장 큰 차이점은 종합 IDE 프로그램인 비주얼 스튜디오와 달리 컴파일러 기능이 빠져있는 소스 코드 편집을 위한 프로그램입니다. 스킨 제작을 위해 간단히 HTML과 CSS 그리고 Java Script 정도만 편집하려는 이번 프로젝트에 알맞은 프로그램인 것 같습니다.

 

우선 아래 링크를 통해 Visual Studio 사이트에서 다운받아 설치를 진행해 줍니다.

 

다운로드 링크: https://visualstudio.com/

 

Visual Studio Code 설치

 

 

경로 설정 뒤에 나오는 옵션 중 아래와 같이 추가 작업을 선택해 줍니다. 추가 작업을 선택해주면 윈도우 탐색기에서 파일이나 폴더를 비주얼 스튜디오 코드를 통해 여는 메뉴를 사용하실 수 있습니다.

 

 

아래와 같이 설치 진행이 마무리되면 비주얼 스튜디오 코드 설치가 완료됩니다.

 

 

한국어팩 설치

맨 처음 프로그램을 열면 아래 화면과 같이 한국어 언어팩과 깃(Git) 설치를 위한 메시지가 나올 것입니다. 우리는 영어보다 한국어가 편하므로 한국어 언어팩을 설치해 보겠습니다.^^

 

 

 

위의 화면과 같이 설치 및 다시 시작을 누르시면 자동으로 설치하고 프로그램이 다시 시작되어 한국어로 바뀐 모습을 보실 수 있으실 것입니다. 깃(Git) 연동을 위해 설치가 되지 않은 분들은 위의 화면의 언어팩 관련 메시지 밑에 깃 관련 메시지가 하나 더 보이실 것입니다. 깃을 설치하시고 프로그램을 다시 켜면 해당 메시지는 없어질 것인데요. 혹시 아직 깃 설치를 원하시지 않는 분들은 Don't Show Again 버튼을 눌러주시면 됩니다.

 

색 테마 변경 방법

 

추가로 편집기 색 테마를 변경하는 방법을 알아보겠습니다. 아래와 같이 왼쪽 톱니바퀴 모양의 아이콘을 누르시고 색 테마를 눌러줍니다.

 

 

상단에 미리 설치된 테마 리스트가 밝은 계열과 어두운 계열로 분류돼있습니다. 리스트 된 테마를 클릭하시면서 원하시는 색 테마를 선택하시면 바로 적용이 됩니다. 테마 변경을 해서 확인할 때에는 본인이 사용하시는 용도에 맞는 파일을 열고 적용해 보시면 작업 시에 코드 색상도 같이 확인하여 원하시는 테마를 선택하실 수 있으실 것입니다.

 

 

마음에 드는 테마가 없으시거나 더 많은 테마를 확인하시고 싶으신 분들은 아래 화면과 같이 리스트를 아래로 스크롤 하시면 추가 색 테마 설치를 누르셔서 더 많은 종류의 테마를 확인해 보실 수 있습니다.

 

 

추가 색 테마 설치를 위한 페이지나 나타나면 왼쪽의 리스트들을 하나씩 눌러서 미리 보기 화면을 확인해 보시면 됩니다. 하지만 이미 설치  되어 있는 테마와 같이 바로 적용은 안되기 때문에 미리 보기 이미지가 없는 경우에는 설명을 보시고 초록색을 설치 버튼을 눌러 설치 후 적용해서 확인해 보시고 선택하시면 됩니다.

 

 

자 이렇게 티스토리 스킨 제작을 위해서 소스 코드 편집기를 설치해 보았습니다. 다음 글은 HTML에 대한 소개와 간단한 HTML 문서를 만들어 보도록 하겠습니다.