2026년 4월 30일 목요일

초보자용 Git 설치 가이드|Chocolatey 사용법까지 정리

 

이번 글에서는 윈도우 개발환경 세팅을 위해 Chocolatey와 Git을 설치해봤다.

이번에 배우게 된 내용:

- Chocolatey란 무엇인지

- PowerShell 관리자 권한 실행 방법

- Git 설치 방법

- git --version 확인 방법

- choco install 명령어 사용법




개발을 시작하기 전에 가장 먼저 해야 할 단계가 있다.

바로 개발 환경 세팅 (Development Environment Setup) 이다.

이번 글에서는 윈도우에서 터미널을 이용해 프로그램을 설치하고 관리하는 방법을 정리한다.


1. 패키지 매니저란?

패키지 매니저는 쉽게 말하면

 “명령어로 프로그램을 설치하는 도구”이다.

대표 2가지 (윈도우 기준)

✔ Chocolatey (초콜라티)

  • 윈도우 대표 패키지 매니저
  • 프로그램 설치 / 삭제 / 업데이트 가능
  • 초보자에게 가장 직관적

 특징: 저장소가 많고 사용이 쉬움

✔ Scoop (스쿱)

  • 가볍고 빠른 설치용
  • 개발 환경 구축에 최적화

특징: 최소 구성, 개발자용 느낌

결론

초보자는 Chocolatey 추천👍


2. PowerShell 관리자 권한 실행

설치 전 필수 단계다.

✔ 방법

  • 시작 메뉴 검색
  • “PowerShell” 검색
  • 우클릭 → 관리자 권한 실행

 이 과정이 없으면 설치 안 됨


3. Chocolatey 설치 명령어

PowerShell에 아래 명령어 그대로 입력

--------------------------------------------

Set-ExecutionPolicy Bypass -Scope Process -Force; `

[System.Net.ServicePointManager]::SecurityProtocol = `

[System.Net.ServicePointManager]::SecurityProtocol -bor 3072; `

iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

--------------------------------------------

✔ 설치 완료 확인

choco -v 



4. Chocolatey 기본 명령어

✔ 버전 확인

choco -v

✔ 업데이트

choco upgrade chocolatey



5. Git 설치 (핵심)

이제 개발 필수 도구 Git 설치

choco install git -y

✔ 옵션 설명

  • -y → 설치 중 질문 자동 YES 처리


6. 설치 확인

git --version  :  버전 나오면 설치 완료



7. 자주 발생하는 문제

❌ Git 인식 안됨

  • 오류 메시지 또는 영어 경고 발생

해결 방법

  • PowerShell 종료
  • 다시 관리자 권한 실행
  • 다시 git --version 실행


8. Git 업데이트

choco upgrade git

✔ 선택 옵션 의미

  • Y → 진행 과정 확인
  • A → 전체 자동 진행 (기본값)
  • N → 중단


9. 핵심 개념 정리

✔ Chocolatey = 윈도우 프로그램 설치 도구
✔ Git = 개발 코드 버전 관리 도구
✔ PowerShell = 명령어 실행 환경



10. 왜 이 과정이 중요한가?

이 단계는 단순 설치가 아니라“개발자 환경 세팅의 시작”이다

이걸 이해하면 이후

  • VSCode
  • GitHub
  • 프로젝트 배포

전부 연결된다.



마무리

이번 과정 핵심은 3가지다:

✔ 터미널 기반 설치 이해
✔ Chocolatey 사용법
✔ Git 설치 및 확인 과정


다음 단계는

VSCode + Git 연결 (진짜 개발 시작 구간) 및 깃에 대한 내용등 정리해서 올리겠습니다.




feat.주저리) 💬

하. 진짜 이거 하다 복장 터지는 줄, vscode가 제대로 되면 세부 체크 내용중 하나가 오류나고

그걸 해결하면 vscode가 문제가 되고.. 파워쉘이 안되고.. 캬아악 진짜..

돌아버리는줄!!!!!😡😡😡


머하나 설치 할때마다 계속 애를 먹은 이유 중 하나가

첨에 설치하면서 설정을 잘못 한거에요, 체크하고 받아야하는데 빼먹고 다운받거나,

풀고 받아야하는데 체크한체로 받거나,

그러면 어느정도 구동은 되요..

다만.

내가 원하는 걸 하려면 오류 미인식 등등등 속을 뒤집습니다... ㅋㅋㅋㅋㅋ


설치도 잘됬고, 구동도 되, 코딩도 할수있는상태래.

근데 먼가 미세한 문제가 있기에 나중에 충돌나거나 오류로 하던 작업이 멈출수 있다는 상황을!!

어떻게 무시하고 그냥 합니까...........휴.....


그래서 결국 지우고 다시하고 지우고 다시하고 이래지우고 저래지우고 다시 하고...

집념하나로 정상 다운로드 정상구동 정상체킹 다 될때까지 해서 완료 한 상태입니다 ㅋ

이러다 ai랑 사귀것어 ㅋㅋ

HTML 하나로 웹명함 만들기|초보자도 가능한 프로필 사이트 제작 정리

웹개발을 처음 공부하면 가장 먼저 해보고 싶은 것 중 하나가 바로 ‘내 소개 페이지’ 만들기입니다.

저 역시 처음에는 복잡한 웹사이트보다 간단하게 내 정보를 보여줄 수 있는 웹명함 형태의 사이트를 만들어보고 싶었습니다.

특히 HTML, CSS, JavaScript를 처음 공부할 때는 이 세 개가 각각 어떤 역할을 하는지 감이 잘 안 잡히는데, 웹명함 프로젝트는 그 구조를 이해하기 정말 좋은 실습이었습니다.

이번 글에서는 실제로 제가 작업했던 흐름 그대로, VSCode로 HTML 파일을 만들고 웹명함을 제작하며 수정했던 과정들을 정리해보려고 합니다.

처음 웹페이지를 만들어보는 분들도 따라할 수 있도록 최대한 쉽게 설명해보겠습니다.



VSCode 여는 방법과 작업 준비

웹명함을 만들기 전에 먼저 VSCode를 열어야 합니다.

처음에는 VSCode 실행 방법도 헷갈렸는데 작업하다 보니 크게 3가지 방식이 가장 많이 사용됐습니다.

1. VSCode 프로그램 직접 실행

가장 기본적인 방법입니다.

  • 시작 메뉴에서 VSCode 검색

  • Visual Studio Code 실행

이후 상단 메뉴에서 폴더를 열어 작업할 폴더를 선택하면 됩니다.

2. 작업 폴더에서 우클릭 → Code로 열기

이 방법이 가장 편했습니다.

  1. 탐색기로 작업할 폴더 이동

  2. 빈 공간 우클릭

  3. “Code로 열기” 선택

그러면 해당 폴더가 바로 VSCode에서 열립니다.

실제로 프로젝트 작업할 때 가장 자주 사용하는 방식이었습니다.

3. 터미널에서 열기

터미널 사용 연습도 같이 할 수 있어서 좋았습니다.

cd 작업폴더경로
code .

code . 명령어를 입력하면 현재 폴더를 기준으로 VSCode가 열립니다.

처음에는 신기했는데 익숙해지면 정말 편합니다.



HTML 파일 생성하기

VSCode를 열었다면 이제 HTML 파일을 만들어야 합니다.

왼쪽 탐색기 영역에서 현재 작업 폴더를 확인한 뒤:

  • 폴더명 옆 New File 클릭

  • index.html 파일 생성

이제 이 파일 안에 HTML 코드를 작성하면 됩니다.

처음에는 HTML이라는 게 엄청 어려워 보였는데 실제로는 문서 구조를 만드는 역할이라고 이해하니 훨씬 쉬웠습니다.



HTML + CSS + JavaScript 역할 이해하기

웹명함 하나를 만들면서 가장 크게 느꼈던 건 웹은 역할이 분리되어 있다는 점이었습니다.


HTML

웹의 구조를 담당합니다.

예:

  • 이름

  • 소개글

  • 버튼

  • 링크

  • 이미지

같은 내용을 배치합니다.


CSS

디자인을 담당합니다.

예:

  • 색상

  • 크기

  • 여백

  • 정렬

  • 그림자

  • 카드 디자인

등을 담당합니다.

쉽게 말하면 스타일을 입히는 역할입니다.


JavaScript

동작을 담당합니다.

예:

  • 버튼 클릭

  • 슬라이드 이동

  • 애니메이션

  • 자동 변경

같은 인터랙션 기능을 구현합니다.

처음에는 HTML만으로 웹명함을 만들었는데 기능성이 부족해서 JavaScript를 추가하니 훨씬 완성도가 올라갔습니다.



HTML 기본 구조 이해하기

웹페이지는 기본적으로 아래 구조를 가집니다.

<html>
<head>
</head>
<body>
</body>
</html>
  • head : 설정 영역

  • body : 실제 화면 영역

웹명함에 들어가는 내용은 대부분 body 안에 작성됩니다.



웹명함 만들 때 사용했던 태그들

웹명함에는 생각보다 다양한 태그들이 사용됐습니다.


개인정보 태그 활용

  • 이름

  • 연락처

  • 이메일

  • 자기소개

등을 HTML 태그로 작성했습니다.


시맨틱 태그 사용

처음에는 div만 사용했는데 나중에는 의미 있는 태그들도 사용하게 됐습니다.

예:

<section>
<article>
<header>

이런 태그들은 구조를 더 명확하게 만들어주고 검색 최적화에도 도움이 된다고 합니다.


링크 삽입 태그

<a href="링크주소">이동하기</a>

이 방식으로:

  • GitHub

  • 블로그

  • 이메일

  • 포트폴리오

등을 연결했습니다.



실제로 많이 했던 수정 작업들

처음에는 단순한 카드 형태였는데 점점 기능을 추가하게 됐습니다.

예:

  • 통버튼 추가

  • 리스트형 메뉴 구성

  • 바로가기 버튼 추가

  • 애니메이션 효과

  • hover 효과

  • 그림자 효과

  • 반응형 수정

이런 식으로 조금씩 수정하다 보니 점점 더 완성도가 올라갔습니다.



VSCode 코드 접기 기능 정말 유용했다

스크립트가 길어지기 시작하면 코드 찾는 게 꽤 힘들어집니다.

그럴 때 줄 번호 옆의 꺽쇠 버튼을 누르면 코드가 접힙니다.

예를 들어:

<style>
...
</style>

구간이 길 경우 접어서 필요한 부분만 보며 작업할 수 있었습니다.

특히 CSS가 길어질 때 정말 편했습니다.



주석 처리 기능 사용하기

코드 실험하다 보면 잠깐 기능을 끄고 싶을 때가 있습니다.

그럴 때:

Ctrl + /

단축키를 사용하면 선택한 코드가 주석 처리됩니다.

예:

<!-- 주석 처리 -->

이렇게 처리된 코드는 화면 결과물에 반영되지 않습니다.

다시 Ctrl + / 를 누르면 해제됩니다.

처음엔 무서워서 코드 삭제했는데 주석 기능을 알고 나서는 훨씬 편하게 수정할 수 있었습니다.



HTML 파일 하나로 웹페이지 만드는 핵심

제가 작업하면서 느낀 핵심은 아래였습니다.

HTML + 내부 CSS + 약간의 JavaScript만 있어도 충분히 웹페이지를 만들 수 있다.

특히 초보 단계에서는 파일 하나로 작업하는 게 구조 이해에 정말 도움이 많이 됐습니다.

중요한 건:

  • 섹션 구조

  • 링크 연결

  • 반응형

  • 카드 배치

이 네 가지였습니다.



HTML / CSS / JS 분리 작업도 해보기

처음에는 모든 코드를 하나의 HTML 파일 안에 넣었지만 나중에는 분리 작업도 해봤습니다.

예:

  • index.html

  • style.css

  • script.js

이렇게 3개 파일로 분리했습니다.

그리고 HTML에서 연결합니다.

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

처음에는 어렵게 느껴졌는데 막상 해보니 훨씬 관리가 편했습니다.



내 컴퓨터 이미지 사용하기

처음에는 인터넷 이미지 링크를 사용했는데 나중에는 내 컴퓨터 이미지를 사용하게 됐습니다.

방법은 간단했습니다.

  1. 이미지 파일을 프로젝트 폴더 안에 넣기

  2. HTML에서 파일명 연결

예:

<img src="profile.jpg">

생각보다 간단했는데 처음엔 경로 개념 때문에 꽤 헷갈렸습니다.



웹명함 아래 이미지 슬라이드쇼 추가하기

여기서부터 재미가 붙기 시작했습니다.

단순 명함만 있는 게 아쉬워서 아래에 이미지 슬라이드를 추가해봤습니다.

원했던 기능:

  • 3초마다 자동 전환

  • 왼쪽 → 오른쪽 이동

  • 카드 안에서 동작

  • 이미지 여러 장 표시

구조는:

  • HTML : 슬라이드 영역 생성

  • CSS : 크기와 애니메이션

  • JS : 자동 변경 기능

으로 구성했습니다.



슬라이드 추가 시 이미지 크기 문제

처음엔 이미지가 엄청 크게 나왔습니다.

그래서 CSS로 크기를 줄였더니 이번에는 이미지 여러 장이 한 화면에 같이 보이는 문제가 생겼습니다.

또 수정하니:

  • 한 장씩은 보이는데

  • 위아래가 잘림

  • 가운데만 길게 보임

이런 문제가 생겼습니다.

결국 해결한 방식은:

  • 명함 카드와 동일한 가로폭 사용

  • overflow hidden 사용

  • object-fit 조절

이었습니다.

이 과정에서 CSS의 중요성을 정말 많이 느꼈습니다.



카드 구조를 하나 더 추가하는 방식도 가능

다른 방식으로는:

  • 위에는 프로필 카드

  • 아래에는 슬라이드 카드

형태로 박스를 2개 만드는 방법도 사용했습니다.

이 방식이 레이아웃 정리가 더 쉬웠습니다.

특히 모바일 반응형에서 훨씬 안정적으로 보였습니다.



슬라이드 기능 업그레이드하기

나중에는 기능도 추가했습니다.

예:

  • 슬라이드 시간 5초 변경

  • 좌우 이동 버튼 추가

  • 수동 이동 기능 추가

이런 기능들을 JavaScript로 구현했습니다.

버튼 클릭 시:

  • 다음 이미지

  • 이전 이미지

로 이동되게 만들었습니다.

이 과정에서 JavaScript가 왜 필요한지 확실히 이해됐습니다.



코드가 꼬였을 때 해결 방법

수정하다 보면 코드가 점점 지저분해집니다.

저도:

  • 어디 수정했는지 모르겠고

  • CSS 충돌나고

  • 기능은 되는데 미묘하게 이상하고

  • 애니메이션이 꼬이고

그런 상황이 꽤 많았습니다.

그럴 때 전체 코드를 다시 정리하면 의외로 문제가 한 번에 해결되는 경우가 많았습니다.

특히:

  • 중복 코드 제거

  • 잘못 닫힌 태그 수정

  • CSS 우선순위 정리

  • JS 이벤트 충돌 수정

같은 부분이 원인인 경우가 많았습니다.

이 과정을 반복하면서 오히려 공부가 많이 됐습니다.



웹명함 만들며 느낀 점

처음에는 HTML 자체도 어려웠는데 직접 웹명함을 만들어보니:

  • HTML 구조

  • CSS 스타일링

  • JavaScript 동작

  • 이미지 경로

  • 반응형

  • 레이아웃 구성

이런 개념들이 자연스럽게 익숙해졌습니다.

특히 단순 강의만 보는 것보다 직접 만들면서 수정하는 방식이 훨씬 기억에 오래 남았습니다.

앞으로는:

  • 다크모드

  • 반응형 개선

  • 프로젝트 섹션 추가

  • GitHub 연동

  • 배포

등도 추가해볼 예정입니다.



같이 보면 좋은 글

참고 블로그:

https://appdev-beginner.blogspot.com/


웹명함 만들기는 단순한 프로필 페이지 제작이 아니라 HTML, CSS, JavaScript 구조를 이해하기 정말 좋은 연습이었습니다.

특히 처음 개발 공부를 시작하는 분들에게는:

  • 직접 화면이 보이고

  • 수정 결과가 바로 반영되고

  • 성취감이 크기 때문에

공부 재미를 느끼기 좋은 프로젝트라고 생각합니다.

처음에는 완벽하게 만들려고 하기보다:

  • 일단 만들기

  • 수정하기

  • 망가뜨려보기

  • 다시 고치기

이 과정을 반복하는 게 정말 중요하다고 느꼈습니다.

저처럼 처음 웹개발을 공부하는 분들에게 조금이라도 도움이 되었으면 좋겠습니다.


HTML 하나로 웹명함 만들기|초보자도 가능한 프로필 사이트 제작 정리






자주 발생했던 문제 정리 (FAQ)

Q. 왜 HTML CSS JS를 분리하나요?

HTML 안에 CSS와 JavaScript를 모두 작성할 수도 있지만, 프로젝트가 커질수록 코드 관리가 어려워진다.

그래서 실제 웹 개발에서는:

  • HTML = 구조
  • CSS = 디자인
  • JavaScript = 기능

이렇게 역할별로 파일을 분리해서 관리한다.

분리하면:

  • 코드 수정이 편해지고
  • 오류 찾기가 쉬워지며
  • 재사용도 가능해진다.

Q. object-fit은 왜 사용하나요?

이미지 크기가 서로 다르면 화면이 찌그러지거나 잘리는 문제가 발생할 수 있다.

object-fit: cover;

를 사용하면 이미지 비율을 유지하면서 영역을 자연스럽게 채울 수 있다.

특히 슬라이드 이미지나 프로필 사진 작업에서 자주 사용된다.


Q. 이미지가 자동으로 안 바뀌는 이유는?

가장 많이 발생하는 원인은 아래 3가지였다.

  1. 이미지 파일 이름 오타
  2. JavaScript 파일 연결 오류
  3. 이미지 경로 문제

예를 들어:

const images = ["image1.jpg", "image2.jpg"];

라고 작성했는데 실제 파일 이름이:

Image1.jpg

이면 작동하지 않는다.

파일 이름의 대소문자도 정확히 맞아야 한다.


Q. JS 파일 연결이 안될 때는?

HTML 파일 아래 부분에:

<script src="script.js"></script>

코드가 제대로 작성되어 있는지 확인해야 한다.

또한:

  • script.js 파일이 실제로 존재하는지
  • 파일 이름이 정확한지
  • 같은 폴더 안에 있는지

도 함께 확인해야 한다.

브라우저 개발자 도구(F12)를 열면 오류 내용을 확인할 수 있어서 문제 해결에 도움이 많이 됐다.




feat.주저리) 💬

기본 레이아웃에 해당하는 코드를 ai한테 물어서 기본세팅 해놓고

수정본에 가이드를 대략 정해놓고 수정하다 막힐때 마다 ai에게 수정잘못된거 체크받고

어떻게 해야하는지 조언얻고, 그러면서 완성한 결과물 입니다.

코드로 무언가 세팅하다 잘못된거같다 싶을때

그부분을 그대로 복사해서 ai에게 조언을 얻어보세요.

그냥 수정본만 띡. 주는게 아니라 머가 어떻게 잘못됬는데 머를 알아야하는지 이런것들을

알려주기때문에 생각보다 훨씬 더 공부하며 작업을 진행 시킬 수 있습니다.







2026년 4월 29일 수요일

VSCode에서 HTML 시작하기|웹개발 입문자를 위한 HTML 기초 강의

 


이 글에서는 VSCode를 이용해 HTML 기초를 배우고,
처음으로 웹페이지를 만드는 방법을 정리합니다.

- HTML이란 무엇인가
- VSCode에서 HTML 파일 만들기
- 기본 HTML 구조 이해하기
- h1, p 같은 기본 태그 배우기
- 브라우저에서 실행하기

웹개발을 처음 시작하는 입문자라면 꼭 익혀야 하는 내용입니다.


1. VSCode 실행 방법

웹 개발은 VSCode 실행부터 시작한다.

✔ 방법 1
VSCode 프로그램 직접 실행

✔ 방법 2
탐색기에서 작업 폴더로 이동 → 빈 화면 우클릭 → “Code로 열기”

✔ 방법 3 (가장 많이 사용)
터미널 실행 → 작업 폴더 이동 → 아래 명령어 입력

code .

현재 폴더를 바로 VSCode로 여는 방법이라 가장 많이 사용된다.


2. 웹명함 프로젝트 파일 만들기

웹명함은 기본적으로 HTML 파일 1개로 시작한다.

✔ 진행 순서

  1. VSCode 왼쪽 탐색기 확인
  2. 작업 폴더 선택
  3. New File 클릭
  4. 파일 생성 -> index.html

 웹 페이지 기본 파일 이름은 index.html이 일반적이다.

HTML은 웹페이지의 구조를 만드는 언어입니다.

웹사이트의 제목, 글자, 이미지, 버튼 같은 요소를 배치하는 역할을 합니다.


3. 웹명함 구조 핵심 개념

웹명함은 크게 3가지로 구성된다.

✔ HTML (구조)
이름, 소개, 연락처 등 내용 구성

✔ CSS (디자인)
색상, 폰트, 배치 등 디자인 담당

✔ JavaScript (동작)
버튼 클릭, 애니메이션, 인터랙션 담당

하나의 파일로 만들 경우
HTML + CSS + JS를 모두 index.html 안에 작성한다.


4. 개발 작업 흐름

웹명함 제작 순서는 다음과 같다.

1단계
HTML 기본 구조 작성

2단계
개인 정보 입력 (이름, 소개, 직업 등)

3단계
CSS로 디자인 적용 (정렬, 색상, 카드 UI)

4단계
JavaScript로 기능 추가 (버튼, 애니메이션 등)


5. HTML 기본 구조 이해

HTML은 웹의 뼈대 역할을 한다.

✔ 주요 구조
html : 전체 문서
head : 설정 정보
body : 화면에 보이는 내용

✔ 자주 사용하는 태그
section : 영역 구분
article : 콘텐츠 블록
div : 일반 박스
a : 링크 연결


6. 링크 기능 활용

웹명함에서는 링크 기능도 중요하다.

✔ 활용 예시
외부 사이트 이동
이메일 연결
SNS 연결

a 태그를 이용해 다양한 링크 연결 가능


7. VSCode 편집 꿀팁

VSCode는 현재 가장 많이 사용되는 무료 코드 에디터 중 하나입니다.
웹개발, 앱개발, React, Flutter 등 다양한 개발 환경에서 사용됩니다.

✔ 코드 접기 기능
왼쪽 줄 번호 옆 화살표 클릭 → 코드 접기 가능

✔ 주석 단축키
Ctrl + /

긴 CSS나 JS를 숨기거나 관리할 때 매우 유용하다.



8. 웹명함 핵심 포인트

웹명함의 완성도는 3가지로 결정된다.

✔ HTML → 정보 구조
✔ CSS → 디자인 퀄리티
✔ JS → 동작과 인터랙션


9. 퀄리티 올리는 방법

단순한 웹명함이 아니라 “포트폴리오 느낌”을 내려면 아래 기능을 추가한다.

  • 버튼 UI 구성
  • 리스트 + 바로가기 버튼
  • hover 애니메이션
  • 카드형 프로필 디자인
  • 반응형 레이아웃

마무리

오늘 핵심 정리

✔ HTML 하나로도 웹명함 제작 가능
✔ CSS로 디자인 완성도 상승
✔ JS로 기능 추가하면 퀄리티 업
✔ VSCode 사용법이 작업 속도를 결정한다


feat.주저리) 💬

아주 어렸을때 (민짜..) 학교에서 과제로 했던게 아닌 스스로 공부해서 코드로 무언가 결과물을 낸 것은 이게 처음이네요.

비록 혼자 명령어를 다 외우고 이해하고 짜임세 있게 넣어서 만든 건 아니지만... 

동영상 강의를 보며 챗ai와 상의해가며 오류나오면 몇시간이고 동영상은 멈춰둔채 상의하고 프로그램 자체도 삭제했다 설치했다 또 삭제했따 설치했따 ㅋ 그러더만 스크립트도 수정하고 수정하다 다시 작성해보기도 하고, 너무 꼬인거같아 ai한테 스크립트가 너무 더러워.. 정리해줘 ㅠㅠ.. 라고 ㅋㅋ 정리도 한번씩 하고..

다음 게시물은 웹 명함 코드와 제가 만든 결과물을 같이 올려보도록 하겠습니다.



웹명함 만들기(구조변경,이미지슬라이스추가)

→ HTML/CSS/JavaScript 차이 쉽게 이해하기

→ CMD와 PowerShell 차이 알아보기

→ HTML로 웹명함 만들기 프로젝트 보기

→ 다음 단계: CSS 기초 배우기

윈도우 터미널(PowerShell) 기본 사용법 정리

 

윈도우 터미널(PowerShell)
개발 입문자가 가장 먼저 배우는 터미널 사용법


개발 공부를 시작하면 생각보다 자주 보게 되는 화면이 있습니다.

바로 검은색 또는 파란색 배경의 터미널 화면입니다.

처음엔 괜히 어려워 보이고 해커들이 쓰는 느낌(?)이 강해서 부담스럽기도 합니다.
그런데 실제로 사용해보면 단순한 명령어 입력으로:

  • 폴더 이동
  • 파일 생성
  • VSCode 실행
  • 네트워크 확인

같은 작업들을 빠르게 처리할 수 있어서 점점 익숙해지게 됩니다.

특히 바이브코딩이나 웹개발을 공부하다 보면 터미널은 거의 필수처럼 사용하게 됩니다.

이번 글은 제가 실제 공부하며 정리했던 기준으로,
초보자가 가장 먼저 익히면 좋은 윈도우 터미널(PowerShell) 기본 명령어들을 정리해봤습니다.


윈도우 터미널이란?

터미널은 쉽게 말하면:

“명령어를 입력해서 컴퓨터를 조작하는 텍스트 기반 인터페이스”

입니다.

보통 우리는 마우스로 폴더를 클릭해서 이동하지만,
터미널에서는 명령어를 입력해서 이동합니다.

Windows에서는 대표적으로:

  • CMD(명령 프롬프트)
  • PowerShell

을 많이 사용합니다.

최근 개발 공부에서는 PowerShell을 많이 사용하는 편입니다.


터미널 실행 방법

Windows 검색창에서:

  • 터미널
  • PowerShell

이라고 검색하면 실행 가능합니다.

Windows PowerShell 실행 화면 예시

Windows PowerShell 실행 화면    Windows PowerShell 실행 화면

폴더와 디렉토리 차이

Windows에서는 보통 “폴더”라고 부르지만
터미널에서는 “디렉토리(directory)”라고 부릅니다.

처음엔 용어가 낯설지만 사실 거의 같은 의미라고 생각하면 됩니다.


가장 많이 사용하는 터미널 명령어 정리

1. cd - 현재 위치 확인 및 이동

cd

현재 위치 경로를 확인할 수 있습니다.

또는:

cd 폴더이름

형태로 특정 폴더로 이동 가능합니다.

예시:

cd documents

디렉토리 이동 개념 예시



2. dir - 현재 폴더 내용 확인

dir

현재 위치한 폴더 안의:

  • 파일
  • 폴더

목록을 보여줍니다.

Windows PowerShell에서 정말 자주 사용하는 기본 명령어입니다.


3. ls - 리스트 확인

ls

현재 위치 내용을 리스트 형태로 보여줍니다.

리눅스/맥 계열에서 자주 사용하는 명령어인데,

PowerShell에서도 사용 가능합니다.


4. cd 폴더이름 - 특정 폴더 이동

cd documents

documents 폴더로 이동합니다.


5. cd.. - 상위 폴더 이동

cd..

현재 위치보다 한 단계 위 폴더로 이동합니다.

폴더를 잘못 들어갔을 때 자주 사용합니다.


6. mkdir - 새 폴더 생성

mkdir 새폴더

현재 위치에 새 폴더를 생성합니다.

예시:

mkdir test

터미널 폴더 생성 예시


터미널 폴더 생성터미널 폴더 생성


7. 방향키 ↑ ↓ - 이전 명령어 불러오기

터미널에서:

  • 방향키 위
  • 방향키 아래

를 누르면 이전에 입력했던 명령어들을 다시 확인할 수 있습니다.

같은 명령어를 반복 입력할 때 굉장히 편합니다.


8. 화면 지우기

clear

또는:

cls

터미널 화면을 깨끗하게 정리합니다.

작업이 길어지면 꽤 자주 사용하게 됩니다.


9. 탭(Tab) 자동완성 기능

예를 들어:

cd v

까지만 입력 후 Tab 키를 누르면
현재 위치에서 v가 포함된 폴더를 자동 검색해줍니다.

동일한 이름이 여러 개면 Tab을 여러 번 눌러 이동 가능합니다.

터미널 작업 속도를 꽤 빠르게 만들어주는 기능입니다.



파일 생성 명령어

CMD 방식

echo. > 파일이름.txt

텍스트 파일 생성 명령어입니다.


PowerShell 방식

New-Item -ItemType File -Name 파일명.txt

PowerShell에서 파일 생성 시 많이 사용합니다.



파일 내용 확인하기

Get-Content 파일명.txt

해당 파일 내부 내용을 출력합니다.

간단한 텍스트 확인 시 유용합니다.



내 컴퓨터 정보 확인

systeminfo

systeminfo

출력되는 정보 예시:

  • OS 버전
  • 프로세서
  • 메모리
  • 시스템 정보

등을 확인 가능합니다.

PowerShell 시스템 정보 확인 화면


PowerShell 시스템 정보 확인

특정 정보만 출력

Get-ComputerInfo | Select-Object WindowsProductName

특정 항목만 골라서 출력 가능합니다.



네트워크 상태 확인

ping

ping google.com

네트워크 연결 상태와 응답속도를 확인합니다.

인터넷 연결 확인 시 자주 사용됩니다.


ipconfig

ipconfig

현재 네트워크 설정 정보를 출력합니다.

더 자세한 정보는:

ipconfig /all

명령어로 확인 가능합니다.


작업 중 강제 종료

터미널 작업 중 멈추거나 종료하고 싶을 때는:

Ctrl + C

를 사용합니다.

생각보다 정말 자주 사용하는 단축키입니다.


VSCode 실행 명령어

터미널에서 현재 위치 폴더를 바로 VSCode로 열 수도 있습니다.

code .

현재 폴더를 기준으로 Visual Studio Code 를 실행합니다.

웹개발 공부하면서 정말 자주 사용하게 되는 명령어입니다.

터미널에서 VSCode 실행 예시





초보자가 처음엔 헷갈렸던 부분

처음 터미널을 배우면:

  • 왜 마우스를 안 쓰지?
  • 왜 굳이 명령어를 외우지?
  • 너무 어려운데?

싶은 생각이 들 수 있습니다.

그런데 실제로 개발 공부를 계속하다 보면:

  • 빠른 폴더 이동
  • 프로젝트 실행
  • Git 사용
  • 서버 실행

등을 터미널로 훨씬 많이 하게 됩니다.

처음엔 몇 개만 익혀도 충분합니다.

개인적으로 초보자 기준 가장 많이 쓰는 건:

  • cd
  • dir
  • mkdir
  • cls
  • code .

정도였습니다.



터미널은 처음엔 어렵게 느껴질 수 있지만,
몇 번 반복해서 사용하다 보면 생각보다 금방 익숙해집니다.

오히려 익숙해지면:

  • 마우스보다 빠르고
  • 작업 흐름이 편해지고
  • 개발자 느낌(?)도 조금 납니다.

특히 바이브코딩 방식으로 공부할 때는
터미널을 자연스럽게 사용하는 일이 점점 많아지는 것 같습니다.

처음부터 모든 명령어를 외우려 하기보다:

  • 이동하기
  • 폴더 만들기
  • VSCode 실행하기

정도만 익혀도 충분히 시작 가능합니다.


[웹개발 기초] 웹·앱 개발할 때 나오는 용어들, 역할이랑 관계까지 한 번에 정리해봤습니다

 안녕하세요! 오늘은 웹이나 앱 개발을 공부하다 보면 쏟아지는 용어들 정리해보려고 합니다. 처음에 개발 공부 시작하면 진짜 이게 제일 힘들어요. 개념 하나 찾으면 모르는 단어가 또 나오고, 그거 찾으면 또 모르는 게 나오는 그 무한루프... 저도 ...