VS Code settings

VS Code를 나만의 개발 맞춤 공간으로 만드는 가장 기초적이면서도 중요한 설정들입니다.

코드의 가독성을 높이고 작업 효율을 극대화할 수 있는 세 가지 핵심 세팅 방법을 정리해 드릴게요.

 

---

Live Server: 실시간 화면 확인 세팅

Live Server는 코드를 수정하고 저장할 때마다 브라우저를 수동으로 새로고침하지 않아도 변경 사항을 즉시 반영해 주는 확장 프로그램입니다.

1. 설치 방법: 왼쪽 사이드바의 확장(Extensions) 아이콘(블록 모양)을 클릭한 후 Live Server를 검색하여 설치합니다.
2. 실행 방법: 편집기 오른쪽 하단의 'Go Live' 버튼을 누르거나, HTML 파일 위에서 마우스 오른쪽 버튼을 클릭해 **'Open with Live Server'**를 선택합니다.
3. 장점: 저장(Ctrl + S)과 동시에 화면이 업데이트되므로 디자인 수정 속도가 비약적으로 빨라집니다.
4. vs code 내부에서 프리뷰를 확인하고 싶다면 live preview 를 설치하세요.

---

컬러 테마: 눈의 피로를 더는 스타일 세팅

에디터의 색상은 단순히 취향을 넘어 가독성과 직결됩니다.

1. 테마 변경: 상단 메뉴의 **[File] > [Preferences] > [Theme] > [Color Theme]**를 선택하거나 단축키 Ctrl + K 다음에 Ctrl + T를 누릅니다.
2. 인기 테마 추천:
   • One Dark Pro: 가장 대중적이고 눈이 편안한 다크 테마입니다.
   • GitHub Theme: 깃허브 특유의 깔끔한 색감을 선호할 때 좋습니다.
   • Night Owl: 야간 작업이 많은 개발자에게 최적화된 테마입니다.
3. 설치: 원하는 테마가 없다면 확장 마켓플레이스에서 테마 이름을 검색해 설치하면 목록에 바로 나타납니다.

---

코딩 폰트: 오타를 줄여주는 글꼴 세팅

코딩용 폰트는 일반 폰트와 달리 l(L)과 1(일), O(오)와 0(영) 등을 명확히 구분해 줍니다.

1. 추천 폰트: D2Coding (네이버 제작), Fira Code, JetBrains Mono 등을 주로 사용합니다.
2. 폰트 설치: 폰트를 인터넷에서 다운로드하여 운영체제(Windows/macOS)에 먼저 설치해야 합니다.
3. VS Code 적용:
   • 설정 창(Ctrl + ,)을 열고 font family를 검색합니다.
   • Font Family 입력칸 맨 앞에 설치한 폰트 이름을 적습니다 (예: 'D2Coding', Consolas...).
   • Font Ligatures: Fira Code 같은 폰트를 쓴다면 Editor: Font Ligatures 항목을 체크하여 =>가 화살표 모양으로 합쳐지게 설정할 수 있습니다.

---

실무자의 시선

실무에서 이러한 초기 세팅에 공을 들이는 이유는 '몰입 환경'을 만들기 위해서입니다.

• 일관성 유지: 팀 단위로 작업한다면 폰트 크기나 들여쓰기 설정을 팀원들과 맞추는 것이 코드 리뷰 시 시각적 혼란을 줄이는 매너가 됩니다.
• 설정 동기화: VS Code의 설정 동기화(Settings Sync) 기능을 켜두면, 컴퓨터를 바꾸더라도 깃허브 계정 로그인만으로 내가 쓰던 테마와 폰트 설정을 그대로 불러올 수 있습니다.
• 가독성이 곧 실력: 오타로 인한 버그 중 상당수는 폰트와 테마 설정만 잘 되어 있어도 사전에 눈으로 잡아낼 수 있다는 점을 기억하세요.

---

기본적인 에디터 환경 구축이 끝났습니다.

---