첫번째 과제는 VScode 설치입니다. 🚀
VS Code 첫 만남,
바이브 코딩 여정의 첫걸음을 뗀 것을 환영합니다.
첫 과제로 VS Code 실행 환경을 만들어보는 것인데요.
앞으로 여러분의 코딩 놀이터가 될 VS Code의 화면이 어떻게 구성되어 있는지 함께 알아볼까요?
▶ VS Code 화면 구성 살펴보기
여러분이 처음 VS Code를 실행하면 보이는 화면은 크게 5가지 영역으로 나눌 수 있습니다.
① 액티비티 바 (Activity Bar)
- 화면 가장 왼쪽에 아이콘들이 세로로 나열된 부분입니다.
- 파일 탐색기, 검색, 소스 컨트롤(Git), 디버깅, 확장 프로그램 등 VS Code의 핵심 기능들을 빠르게 전환할 수 있는 단축키 모음입니다.
- 가장 위의 파일 아이콘을 누르면 작업 폴더와 파일 목록을 볼 수 있습니다.
② 사이드 바 (Side Bar)
- 액티비티 바에서 선택한 기능의 상세 내용이 표시되는 영역입니다.
- 스크린샷에서는 **탐색기(Explorer)**가 열려있으며, mc_ai라는 작업 폴더가 열려있는 것을 확인할 수 있습니다.
- 코딩할 때 가장 많이 보게 될 곳으로, 여기서 파일을 만들고, 삭제하고, 폴더 구조를 관리합니다.
③ 에디터 (Editor)
- 화면 중앙의 가장 넓은 영역으로, 실제 코드를 작성하는 공간입니다.
- 지금은 아무 파일도 열지 않아 VS Code 로고와 단축키 안내가 보이지만, 파일을 열면 이곳에 코드가 나타납니다.
- 여러 파일을 동시에 열어 탭으로 전환하며 작업할 수 있습니다.
④ 패널 (Panel)
- 에디터 아래쪽에 위치한 정보 창입니다.
- 스크린샷에서는 **터미널(TERMINAL)**이 열려있네요. 터미널은 컴퓨터에 직접 명령을 내릴 때 사용하는 강력한 도구입니다. 앞으로 자주 사용하게 될 거예요!
- 그 외에도 문제(PROBLEMS), 출력(OUTPUT), 디버그 콘솔(DEBUG CONSOLE) 등 코딩과 관련된 다양한 정보를 확인할 수 있는 탭들로 구성되어 있습니다.
⑤ 상태 표시줄 (Status Bar)
- 화면 가장 아래쪽의 파란색(또는 다른 색) 가로 막대입니다.
- 현재 작업 중인 파일의 정보, Git 브랜치, 에러 및 경고 개수, 커서 위치 등 유용한 상태 정보들을 간략하게 보여줍니다.
✨ 보너스: Copilot 채팅
- 오른쪽에 보이는 'Ask Copilot' 창은 GitHub Copilot이라는 AI 코딩 비서와 대화하는 곳입니다. 코딩하다가 궁금한 점이나 막히는 부분을 질문하면 AI가 도와줄 거예요.
첫 과제를 성공적으로 마친 것을 축하합니다! 각 영역의 역할을 익혔으니, 이제 파일을 만들고 본격적으로 코딩을 시작해볼 준비가 되었습니다. 🎉
개발의 시작, VS Code 설치부터!
개발의 세계에 발을 들이는 여러분을 환영합니다! 프로그램을 만들고, 코드를 작성하며 아이디어를 현실로 구현하기 위한 첫걸음은 바로 개발 환경 설정입니다. 그중에서도 많은 개발자들이 사랑하고 사용하는 **Visual Studio Code (VS Code)**는 강력한 기능과 편리한 사용성으로 여러분의 개발 여정을 훨씬 수월하게 만들어 줄 거예요.
이 블로그 글에서는 VS Code를 여러분의 컴퓨터에 설치하는 방법을 아주 쉽고 자세하게 알려드릴게요.
1. VS Code 다운로드하기
가장 먼저 VS Code를 다운로드해야겠죠? 공식 웹사이트에서 여러분의 운영체제에 맞는 설치 파일을 받을 수 있습니다.
- VS Code 공식 웹사이트 접속:
https://code.visualstudio.com/ 에 접속합니다. - 운영체제에 맞는 다운로드 버튼 클릭:
웹사이트에 접속하면 자동으로 여러분의 운영체제(Windows, macOS, Linux)를 감지하여 가장 적합한 다운로드 버튼을 보여줄 거예요. 해당 버튼을 클릭하여 설치 파일을 다운로드합니다. 예를 들어, Windows를 사용한다면 "Download for Windows" 버튼을 클릭하면 됩니다. - (팁: 만약 다른 운영체제용 설치 파일이 필요하다면, 다운로드 버튼 아래의 "Other platforms" 링크를 클릭하여 찾아볼 수 있습니다.)
2. VS Code 설치하기
다운로드한 파일을 실행하여 VS Code를 설치해 봅시다. 과정은 운영체제별로 약간의 차이가 있지만, 대부분 직관적으로 진행됩니다.
Windows 사용자
- 다운로드한 설치 파일 실행:
VSCodeUserSetup-x.x.x.exe(x.x.x는 버전 번호)와 같은 이름의 파일을 더블클릭하여 실행합니다. - 사용자 계약 동의:
"사용자 계약에 동의합니다"를 선택하고 다음(Next) 버튼을 클릭합니다. - 설치 위치 선택 (선택 사항):
기본 설치 경로를 권장하지만, 원한다면 찾아보기(Browse) 버튼을 클릭하여 다른 위치를 선택할 수 있습니다. **다음(Next)**을 클릭합니다. - 시작 메뉴 폴더 선택 (선택 사항):
시작 메뉴에 VS Code 바로 가기를 만들 폴더를 선택합니다. 기본값을 유지하고 **다음(Next)**을 클릭합니다. - 추가 작업 선택 (중요!):
이 단계는 중요합니다. 개발 생산성을 높여주는 몇 가지 유용한 옵션이 있습니다. 다음 옵션들을 체크하는 것을 권장합니다.- 바탕 화면 바로 가기 만들기: 바탕 화면에 VS Code 아이콘을 만듭니다.
- Code를 사용하여 지원되는 파일 형식에 대한 바로 가기 등록: 이 옵션을 선택하면 특정 코드 파일을 더블클릭했을 때 VS Code로 바로 열 수 있습니다.
- PATH 추가 (다시 시작해야 함): 이 옵션은 매우 중요합니다. PATH에 추가하면 명령 프롬프트(CMD)나 터미널에서
code명령어를 통해 VS Code를 실행하거나 특정 폴더를 열 수 있게 됩니다. 반드시 체크해 주세요.
- 설치 준비 완료:
설정 요약을 확인하고 설치(Install) 버튼을 클릭하여 설치를 시작합니다. - 설치 완료:
설치가 완료되면 마침(Finish) 버튼을 클릭합니다. "Visual Studio Code 시작"을 체크하면 설치가 끝나자마자 VS Code가 실행됩니다.
macOS 사용자
- 다운로드한 파일 열기:
다운로드한VSCode-darwin-universal.zip파일을 더블클릭하여 압축을 해제합니다.Visual Studio Code.app파일이 생성됩니다. - 응용 프로그램 폴더로 이동:
생성된Visual Studio Code.app파일을 드래그하여 응용 프로그램(Applications) 폴더로 이동합니다. - VS Code 실행:
응용 프로그램 폴더에서Visual Studio Code.app을 더블클릭하여 실행합니다. 처음 실행할 때 "다운로드된 응용 프로그램입니다. 열겠습니까?"와 같은 메시지가 나타날 수 있습니다. **열기(Open)**를 클릭하여 진행합니다.
3. VS Code 실행 및 기본 설정
설치가 완료되었다면 이제 VS Code를 실행해 보세요!
- Windows: 시작 메뉴에서 "Visual Studio Code"를 검색하거나 바탕 화면의 아이콘을 클릭합니다.
- macOS: 응용 프로그램 폴더에서 "Visual Studio Code"를 클릭합니다.
처음 VS Code를 실행하면 환영 페이지가 나타날 거예요. 여기서 몇 가지 기본적인 설정을 할 수 있습니다.
- 테마 선택: 밝은 테마, 어두운 테마 등 원하는 인터페이스 테마를 선택할 수 있습니다.
- 언어 팩 설치: 한국어 등 원하는 언어 팩을 설치하여 VS Code 인터페이스를 해당 언어로 변경할 수 있습니다. (검색창에 "Korean Language Pack" 검색 후 설치)
- Git 설치 안내: Git이 설치되어 있지 않다면 설치를 권장하는 메시지가 나타날 수 있습니다. Git은 버전 관리에 필수적인 도구이므로 설치하는 것을 추천합니다.
이제 VS Code 설치를 성공적으로 마쳤습니다! 🎉
여러분은 이제 코드를 작성하고, 확장 기능을 설치하여 개발 환경을 더욱 풍부하게 만들 준비가 되었습니다.
'vibe coding' 카테고리의 다른 글
| 바이브 코딩 - "자연어로 개발하라: 바이브 코딩이 바꾸는 미래" (1) | 2025.04.28 |
|---|---|
| 바이브 코딩1 - 커서 ai(cursor ai) 설치하기 (0) | 2025.04.28 |