웹 개발을 위한 HTML 가이드 12편 - Visual Studio Code 사용하기

개요

우리는 지금까지 알게 된 태그는 별로 없지만 연습을 하기 위해 메모장으로 코딩을 했습니다. 물론 계속 메모장으로 코딩을 해도 상관 없지만 상당히 불편하다는 것을 느꼈을 겁니다. 이 부분은 취향에 따라 차이가 있지만 보통의 경우 편리한 기능을 제공해주는 텍스트 에디터를 사용합니다.

텍스트 에디터의 종류는 다양합니다. 프로그래밍 언어에 따라서 인기가 있는 에디터가 있기도 합니다. 다양한 에디터들 중에서 오늘 우리가 알아볼 텍스트 에디터는 **비주얼 스튜디오 코드(Visual Studio Code)**라는 녀석입니다. 마이크로소프트에서 만든 텍스트 에디터인데 사용자가 많아서 많은 확장 프로그램들이 만들어지고 있습니다. 이제 이 녀석에 대해서 알아봅시다.

시작하기 전에 메모장을 사용하면서 굳이 불편함을 느끼지 않았다면 메모장을 계속 써도 상관은 없습니다. 본인의 선택입니다.

비주얼 스튜디오 코드

비주얼 스튜디오 코드(Visual Studio Code)는 줄여서 vscode라고도 많이 부릅니다. 사용하는 사람이 많기 때문에 정보를 찾는데에 있어서 어려움이 없습니다. 당연하게도 vscode보다 뛰어난 에디터도 있습니다. 가장 먼저 떠오르는 것은 WebStorm이라는 녀석입니다. 근데 이 녀석은 유료입니다. 그 대신에 진짜 어마어마한 기능을 갖고 있습니다.

이제 막 프로그래밍에 입문한 사람들에게 에디터를 유료로 사용해라! 라고는 할 수가 없기 때문에 vscode를 사용하는 겁니다. 물론 vscode 자체만으로도 어렵지 않게 프로그래밍이 가능합니다. 아무튼, 이제부터 vscode에 대해서 알아볼 겁니다. 설치부터 시작해서 기본적인 사용 방법을 함께 알아보도록 합시다.

제가 윈도우이기 때문에 윈도우를 기준으로 설명합니다!

설치하기

프로그램을 사용하기 위해서는 가장 먼저 설치를 해야합니다. 설치를 위해서 검색을 해봅시다. 구글에다가 vscode라고 검색합니다. 그러면 가장 위에 보이는 사이트가 있습니다. 이 사이트로 들어가줍시다.

크게 보기 (새 창)

사이트에 들어간 다음에 할 것은 간단합니다. 바로 눈 앞에 보이는 파란색 다운로드 버튼을 클릭하는 겁니다. 아마도 운영체제에 맞게끔 다운로드 파일이 다운로드 될 겁니다. 아무튼 다운로드를 하고난 다음에는 설치 프로그램을 실행하면 됩니다.

크게 보기 (새 창)

대충 아무 곳에다가 파일을 다운로드하고, 실행합니다. 설치 자체는 다음 버튼을 계속 누르면 됩니다. 그래도 혹시 모르니까 아래의 이미지들과 같이 체크가 되어있는지 확인하시면 되겠습니다.

크게 보기 (새 창)

크게 보기 (새 창)

크게 보기 (새 창)

크게 보기 (새 창)

설치를 다 하고 실행하면 아래와 같은 모양의 프로그램이 실행됩니다.

크게 보기 (새 창)

제가 쓰던 환경에서 설정을 잠시 없앤 상태에서 찍은 이미지지만 방금 막 프로그램을 설치하고 실행한 여러분들과는 조금 다를 겁니다. 달라도 상관 없습니다. 설정이야 알아서 꾸며서 쓰면 되거든요. 이제 설치는 완료되었습니다. 기본적인 설정을 해보도록 합시다.

한글 설정

vscode는 한글을 지원하지만 처음에 설치하면 한글이 아닙니다. 그래서 한글 설정을 해줘야 합니다. 아주 간단하게 한글 설정을 할 수 있습니다. 좌측의 아이콘들 중에서 사각형 네개가 그려져 있는 아이콘을 클릭하시면 확장 프로그램을 검색할 수 있습니다.

지금 다루는 확장 프로그램에 대한 내용은 다음 글에서 계속 다룰 것이기 때문에 기억해둡시다. vscode를 강화시키는 아주 중요한 기능입니다.

크게 보기 (새 창)

생긴게 갑자기 달라졌는데 개의치마세요! 저는 사용하던 테마가 있을 뿐입니다.

아무튼 확장 프로그램 아이콘을 클릭했으면 검색을 합시다. korean이라고 검색만 해도 아래와 같은 아이콘을 갖고 있는 확장 프로그램을 발견할 수 있습니다. 저는 이미 설치되어있어서 제거라는 버튼이 있지만 여러분은 되어있지 않을 겁니다. 설치 버튼을 눌러서 과감하게 설치하고나면 한글 설정이 완료됩니다.

크게 보기 (새 창)

기본적인 사용법

한글 설정도 마쳤으니 이제는 vscode의 간단한 사용법에 대해서 알아봅시다. 우리가 당장 프로그래밍을 하기 위해 필요한 것들을 우선 살펴보는 게 좋겠습니다. 간단하게 설정에 들어가서 설정을 하는 방법이나 쉽게 HTML 코딩을 하는 방법에 대해서 알아봅시다.

작업 폴더 설정하기

크게 보기 (새 창)

여러분이 vscode를 설치하고 사용하려고 보면 파일을 건드릴 수가 없습니다. 정확히는 건드릴 파일이 없죠. 왜냐면 작업 폴더 설정을 하지 않았기 때문입니다. 그래서 우리가 사용하던 작업 폴더를 지정해줄 필요가 있습니다.

폴더 설정 방법에는 여러가지가 있습니다. 첫번째 방법은 아래의 이미지처럼 작업 폴더를 vscode의 파일 탐색기에 드래그해서 vscode에서 사용할 수 있게 여는 겁니다.

크게 보기 (새 창)

두번째는 폴더 열기 버튼을 눌러서 직접 작업 폴더를 찾아 적용시키는 겁니다.

세번째 방법은 작업 폴더에서 터미널(cmd나 파워쉘 같은)을 열고 code .를 쳐서 vscode를 작업 폴더에서 여는겁니다. 아래의 이미지 처럼요. code 는 vscode를 의미하는 것이고 그 뒤의 .은 현재 폴더를 의미합니다. 즉 작업 폴더에서 vscode를 열겠다. 라는 의미인 것이죠.

크게 보기 (새 창)

저는 세번째 방법을 더 좋아하고 자주 이용합니다. 굳이 설정이랄 것도 없고 항상 저렇게 열기 때문에 따로 설정해줄 필요가 없거든요. 아무튼 이렇게 설정을 마치고나면 본격적인 코딩이 가능해집니다.

크게 보기 (새 창)

파일 탐색기 다루기

크게 보기 (새 창)

vscode를 켜면 왼쪽에 보이는 아이콘 메뉴들 중에서 파일 모양처럼 생긴게 파일 탐색기 부분입니다. 여러분의 프로젝트 폴더의 내부 파일들이 보이고 이를 직접적으로 조작할 수 있는 부분이죠. 파일 탐색기에서 파일을 만들면 실제로 디스크에도 파일이 생기는 겁니다.

파일을 어떻게 만들고, 폴더를 어떻게 만드는지 알아봅시다. 아주 간단합니다.

프로젝트 폴더 내에 파일이나 폴더가 아무것도 없을 때에는 탐색기에 커서를 대고 있거나 탐색기의 부분이 활성화되어 있을 때에 생기는 아이콘들을 이용해서 파일을 만들 수 있고 그냥 허공에 우클릭을 하면 나타나는 메뉴를 통해서 파일이나 폴더를 만들 수 있습니다.

크게 보기 (새 창)

크게 보기 (새 창)

이렇게 아이콘을 누르거나 메뉴를 이용해서 폴더나 파일을 만든 후에는 이름을 입력해주면 됩니다. 파일 이름을 입력하지 않으면 파일의 생성은 취소됩니다. 파일 이름을 입력해줍시다.

특정 폴더의 안에서 파일이나 또 다른 폴더를 만들기 위해서는 탐색기에서 해당 폴더를 클릭한 상태에서 탐색기 상단의 아이콘을 누르거나 폴더를 우클릭해서 새 폴더 혹은 새 파일 메뉴를 클릭하면 되겠습니다.

파일의 이름을 바꾸려면 파일을 클릭한 상태에서 F2를 누르면 됩니다. 윈도우에서 파일 이름 바꿀 때에 사용하는 단축키와 같습니다. 여기까지가 아주 기본적인 파일 탐색기 이용 방법입니다. 하다보면 적응 될 겁니다. 사용해봅시다!

설정 이용하기

vscode는 가볍지만 어떤 설정을 하느냐에 따라서 천차만별의 기능을 갖게 됩니다. 설정을 통해서 여러분의 개성을 표현할 수도 있습니다. 설정창으로 들어가는 방법에는 좌측 하단의 톱니모양 아이콘을 클릭하고 설정을 누르는 방법과 CTRL + ,을 누르는 방법 등등이 있는데 단축키를 이용해서 들어가는 게 가장 빠릅니다.

크게 보기 (새 창)

이 설정창에서 많은 것들을 바꿀 수가 있습니다. 확장 프로그램에 대한 설정도 여기서 바꿀 수 있습니다. 만일 여러분이 코딩에 좀 익숙하다면 직접 JSON파일을 건드려서 설정을 할 수도 있습니다.

크게 보기 (새 창)

설정에서 폰트 정도는 바꿔주는 게 여러분의 정신건강에 좋을 수 있습니다. 폰트 중에서도 모든 글자의 폭이 같은 폰트를 사용하면 더 좋습니다. 현재 제가 사용하는 폰트는 Cascadia Code라는 폰트 입니다.

Emmet 사용하기

HTML 코딩을 할 때에는 Emmet의 기능을 이용하는 게 정말 편리합니다. 하나 하나 태그를 치는 것보다는 태그의 이름을 치고 탭을 눌러 자동으로 완성하는 게 상당한 편의성을 제공해줍니다. Emmet에 대한 디테일한 사용법은 나중에 따로 올려보겠습니다. 이번 글에서는 간단하게만 알아봅시다.

!

비어있는 html 파일에서 느낌표만 치고 탭을 누르면 아래와 같은 기본 골격이 만들어집니다. 여기서 조금만 수정하면 되겠죠.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

div

<div></div>

div를 치고 탭을 누르면 div태그가 완성됩니다. 홀로 닫는 태그의 경우에는 닫는 태그가 없어도 되기 때문에 홀로 닫는 태그가 만들어집니다.

div>p

<div>
  <p></p>
</div>

이런식으로 하면 부모태그와 자식태그 관계의 태그를 완성할 수 있습니다. **>**를 이용해서 상위, 하위 구조를 만들어낼 수 있는 겁니다. 중요한건 탭을 누르는 겁니다.

h2{제목}+p{문단}

<h2>제목</h2>
<p>문단</p>

태그 이름뒤에 중괄호를 붙이고 중괄호의 안에 내용을 입력하고 탭을 누르면 여는 태그와 닫는 태그의 안에 내용이 들어가게 됩니다. **+**를 이용하면 형제 관계에 있는 태그를 완성할 수 있습니다.

이렇게 간단하게만 알아봐도 Emmet의 기능은 짱짱하다는 것을 알 수 있습니다. 이처럼 Emmet을 사용하면 아주 편하게 HTML 코딩이 가능합니다.

이번 글에서는 vscode에 대해서 알아보는 시간을 가져봤습니다. vscode를 설치하고, 실행하고 설정을 건드리는 방법이나 Emmet을 사용하는 방법에 대해서 살펴봤죠. vscode도 지금은 낯설겠지만 계속 만져보다보면 익숙해질 것이라고 생각합니다.

다음 글에서는 설치하면 좋은 확장 프로그램에 대해서 다뤄보도록 하겠습니다. 이번 글은 여기까지입니다. 다음 글에서 봅시다.