새로운 웹 프로젝트를 시작하는 것은 마치 깨끗한 도화지를 준비하는 것과 같습니다.
VS Code를 활용하여 표준적인 웹 프로젝트 구조를 만드는 과정을 단계별로 안내해 드릴게요.
🏗️ 웹 프로젝트 생성 단계
가장 기초적인 HTML, CSS, JavaScript 프로젝트를 기준으로 설명해 드립니다.
- 프로젝트 폴더 생성
- 컴퓨터의 원하는 위치에 새 폴더를 만듭니다 (예: my-web-project).
- 가급적 폴더명은 영문 소문자와 하이픈(-)을 사용하는 것이 관례입니다.
- VS Code에서 폴더 열기
- VS Code를 실행한 후, 상단 메뉴에서 **[File] > [Open Folder]**를 선택하여 방금 만든 폴더를 불러옵니다.
- 폴더를 VS Code 화면 위로 직접 드래그앤드롭(Drag & Drop) 해도 됩니다.
- 기본 파일 생성
- 왼쪽 Explorer(탐색기) 패널에서 'New File' 아이콘을 클릭하여 다음 파일들을 만듭니다.
- index.html: 웹사이트의 구조를 담당하는 메인 파일입니다.
- style.css: 디자인을 담당하는 스타일시트 파일입니다.
- script.js: 동적 기능을 담당하는 자바스크립트 파일입니다.
- HTML 기본 구조 완성 (Emmet 활용)
- index.html 파일을 열고 느낌표(!)를 입력한 뒤 Enter나 Tab을 누릅니다.
- VS Code의 내장 기능인 Emmet이 표준 HTML5 뼈대 코드를 자동으로 생성해 줍니다.
- CSS와 JS 연결하기
- 생성된 HTML 코드의 <head> 태그 안에 <link rel="stylesheet" href="style.css">를 추가합니다.
- </body> 태그 바로 직전에 <script src="script.js"></script>를 추가하여 파일을 연결합니다.
프로젝트 관리를 위한 구성 요소 리스트
프로젝트가 커질수록 다음과 같은 구조로 정리하는 것이 실무적인 표준입니다.
- index.html: 루트(최상위) 폴더에 위치하며 서비스의 진입점이 됩니다.
- assets/ 폴더: 이미지, 아이콘, 폰트 등 정적 리소스를 모아둡니다.
- css/ 폴더: 스타일 관련 파일이 많아질 경우 별도의 폴더로 관리합니다.
- js/ 폴더: 자바스크립트 소스 코드들을 체계적으로 분류하여 보관합니다.
실무자의 시선
실무에서는 단순히 파일을 만드는 것에 그치지 않고, 미래의 협업과 배포를 고려한 세팅을 병행합니다.
- Git 초기화: 프로젝트를 시작하자마자 터미널(Ctrl + ~)을 열고 git init을 입력하여 버전 관리를 시작하세요.
- README.md 작성: 이 프로젝트가 무엇인지, 어떻게 실행하는지 설명하는 문서를 미리 만들어두는 습관은 매우 훌륭한 태도입니다.
- Live Server 활용: 앞서 설정한 Live Server를 통해 실시간으로 화면을 확인하며 코딩을 시작하세요.
이제 프로젝트를 시작할 준비가 완벽히 끝났습니다.
'IDE' 카테고리의 다른 글
| VS Code settings (0) | 2026.02.19 |
|---|---|
| 이클립스에서 소스 파일 가져오는 방법 (0) | 2026.02.04 |
| Stackbiltz Next.js new project building (0) | 2025.09.21 |
| Eclipse - JAVA new project building step (0) | 2025.08.27 |
| STS 앱 실행하고 첫 화면 띄우기 (0) | 2025.08.24 |