Visual Studio Code 언어설정 'Language = ko' 디폴트 세팅 하기
코딩을 할 때 저는 Visual Studio Code를 자주 사용하고 있습니다. VSC는 무료로 제공되며, 다양한 플러그인과 확장 기능이 있어 매우 편리한 코드 편집기입니다. 물론 사용하는 목적에 따라 AI 지원이 강점인 Cursor나 Windsurf를 사용할 때도 있습니다. 이 두 프로그램도 훌륭한 선택이지만, 요즘은 VSC의 다양한 기능 덕분에 자주 사용하고 있습니다.
VSC를 사용하면서 Emmet을 이용해 HTML 문서를 생성하다 보면, 자동 생성된 <html lang="en"> 부분을 <html lang="ko">로 변경하곤 합니다. Emmet은 매우 유용한 도구로, HTML, CSS, XML 등의 코드를 빠르게 작성할 수 있게 도와줍니다. 하지만 매번 lang 속성을 수정하는 것이 번거로운 면이 있습니다. 그래서 아예 디폴트로 세팅을 해서 사용중인데, 그 방법을 공유하도록 하겠습니다.
문서를 시작할 때 공식 : 느낌표(!) + Tab
이제 새 파일을 하나 만들고 ! (느낌표) 찍고 Tab 키를 누르면 Emmet에 의해 아래처럼 HTML 템플릿 코드가 자동 생성됩니다. 이 기능은 정말 편리합니다. 웹 개발을 하다 보면 반복적인 작업이 많은데, Emmet을 사용하면 시간을 크게 절약할 수 있습니다.
그런데, 문제는 lang="en" 으로 템플릿이 작성된다는 점
하지만 자동 생성된 템플릿에서 lang="en"으로 표시됩니다. 'en'은 당연히 영어(english)의 약자입니다. 비영어권 사용자들에게는 조금 불편할 수도 있습니다. 기본 설정이 영어로 되어 있어서 매번 언어 설정을 바꿔줘야 합니다.
Visual Studio의 설정변경을 통해 "lang=ko" 세팅이 가능
물론 그냥 사용해도 크게 문제는 없지만, 저는 습관적으로 언어를 'ko'로 타이핑해서 변경해왔습니다. 같은 일을 사람이 반복한다면, 분명히 그걸 하지 않도록 도와주는 장치들이 이미 다 준비되어 있기 마련입니다. 그래서 VSC에서 Emmet의 기본 설정을 변경하는 방법을 알려드리겠습니다
먼저, VSC의 상단 메뉴에서 File > Preferences > Settings로 들어갑니다. 단축키로는 Ctrl + , (콤마), 즉 Ctrl + 콤마를 이용해도 편리하게 설정 메뉴로 진입할 수 있습니다. 이 방법은 설정 메뉴에 빠르게 접근할 수 있는 좋은 방법입니다.
설정 메뉴에 들어가면 상단 검색창에 'emmet'이라고 쳐주세요. 그러면 Emmet과 관련된 다양한 설정 항목이 나타납니다.
그 중에 'Emmet: Variables'라는 항목을 확인하고 [Add Item] 버튼을 클릭합니다. 이 항목에서 Emmet의 기본 변수를 설정할 수 있습니다.
설정 중이라는 의미로, 왼쪽에 톱니바퀴 아이콘이 표시되고 Value란에 'en'이라고 표시되어 있는 것을 'ko'로 타이핑해서 변경해줍니다. 이렇게 하면 기본 언어 설정이 변경됩니다.
의미론적으로 설정 파일에서는 다음과 같은 객체로 되어 있을 것입니다.
{
...: ....,
Item: "lang",
Value: "ko",
...: ....
}
다시 편집 중이던 HTML 파일로 돌아가서 Emmet을 실행해봅니다. 전체 삭제 후, ! 느낌표 하나 찍고 Tab 키를 누르면 lang = "ko"로 표시된 HTML 템플릿 코드가 한 번에 뿌려줍니다. 이 방법을 사용하면 매번 lang 속성을 수정할 필요가 없습니다. 정말 간단하죠?
마치며
Visual Studio Code를 사용하면서 늘 반복되는 세팅은 쉽게 변경할 수 있습니다. 처음에 조금 귀찮더라도, 반복적으로 자주 손이 가는 곳들이 미리 세팅을 해 두는 것이 좋겠죠.
한편으로 Emmet은 매우 강력한 도구이니, 잘 활용하면 코드 작성 시간을 크게 줄일 수 있고 생산성이 매우 향상될 수 있을 것입니다. 이제는 뭐 Emmet는 그냥 당연히 써야하는 기능이 되어버린 지 오래이고, HTML을 핸들링 하는 모든 IDE들이 기본적으로 제공하고 있는 기능이라고 말해도 무방할 듯 싶습니다.