개발 환경 준비하기
코딩을 시작하는 데 거창한 준비는 필요 없습니다. 브라우저에서 바로 쓰는 도구부터, 본격적으로 쓸 무료 편집기까지 단계별로 준비합니다.
거창한 준비는 필요 없습니다
코딩이라고 하면 복잡한 프로그램 설치부터 떠올리지만, 처음에는 브라우저 하나면 충분합니다. 이번 글에서는 가장 가벼운 방법부터 시작해, 나중에 본격적으로 쓸 도구까지 차례로 준비합니다.
1단계: 브라우저에서 바로 시작하기
설치 없이 코드를 쓰고 결과를 바로 보는 무료 사이트들이 있습니다.
- CodePen (
codepen.io) — HTML·CSS·자바스크립트를 한 화면에서 실험 - StackBlitz (
stackblitz.com) — 더 본격적인 프로젝트도 브라우저에서
-
codepen.io에 접속해 무료로 가입합니다. -
오른쪽 위 Create → Pen 을 누릅니다.
-
왼쪽 HTML 칸에 아래를 입력하면, 아래쪽 미리보기에 바로 나타납니다.
<h1>안녕하세요, 첫 코드입니다.</h1> -
글자를 바꿔보고 결과가 즉시 바뀌는 걸 확인하세요. 이게 코딩의 기본 흐름입니다.
2단계: 본격 편집기 — VS Code
조금 익숙해지면 컴퓨터에 무료 편집기를 설치해 더 큰 프로젝트를 다룹니다. 가장 널리 쓰이는 건 VS Code입니다.
-
code.visualstudio.com에서 본인 운영체제(Windows·Mac)에 맞는 버전을 내려받아 설치합니다. -
설치 후 실행하면 빈 편집기가 열립니다. 폴더 하나를 만들어 파일 → 폴더 열기로 작업 공간을 지정합니다.
-
새 파일을 만들고
index.html로 저장하면 코딩을 시작할 준비가 끝납니다.
무엇을 설치해야 할지 모르겠다면
다음 단계
도구가 준비됐다면, 이제 AI 코딩 도구들이 각각 어떤 특징이 있는지 살펴봅니다.