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

 안녕하세요!

오늘은 웹이나 앱 개발을 공부하다 보면 쏟아지는 용어들 정리해보려고 합니다.

처음에 개발 공부 시작하면 진짜 이게 제일 힘들어요. 개념 하나 찾으면 모르는 단어가 또 나오고, 그거 찾으면 또 모르는 게 나오는 그 무한루프... 저도 처음엔 그냥 "일단 외워야지" 했다가 다 날아가는 경험을 했습니다.

그래서 이번엔 단순히 단어 뜻만 나열하는 게 아니라, 각 용어들이 서로 어떤 관계인지, 실제 개발 흐름에서 어디에 위치하는지를 중심으로 정리해봤어요.

이 글 하나로 전체 그림이 잡혔으면 합니다.

[웹개발 기초] 웹·앱 개발할 때 나오는 용어

1. 일단 전체 구조부터 보고 들어가자

용어들을 하나씩 보기 전에, 전체 그림을 먼저 머릿속에 잡아두는 게 훨씬 이해가 빠릅니다.

웹·앱 개발은 크게 이런 흐름으로 이루어져 있어요:

[사용자]

↕ 화면 보고 클릭

[프론트엔드 / 클라이언트]

↕ API 요청 / 응답 (HTTP, JSON)

[백엔드 / 서버]

↕ 데이터 읽기 / 쓰기

[데이터베이스]

이 4개 레이어가 웹·앱의 핵심 구조입니다. 모든 용어들은 결국 이 4가지 중 하나에 속하거나, 이 사이를 연결하는 역할을 해요.

이 그림 기억해두고 아래 내용 읽으면 훨씬 잘 들어옵니다.

2. 프론트엔드 영역 — 사용자가 직접 보는 부분

프론트엔드(Frontend) 는 사용자가 실제로 눈으로 보고 손으로 조작하는 화면을 만드는 영역입니다.

앱을 켰을 때 보이는 버튼, 텍스트, 이미지, 레이아웃 — 이 모든 게 프론트엔드 영역이에요.

여기서 자주 나오는 용어들을 정리해볼게요.

HTML — 웹 페이지의 뼈대를 잡는 언어입니다. "여기에 제목, 여기에 버튼, 여기에 이미지" 같은 구조를 잡아줘요.

CSS — HTML로 잡은 뼈대를 꾸미는 언어입니다. 색상, 폰트, 배치, 크기 같은 시각적인 부분을 담당해요.

JavaScript (JS) — 웹 페이지에 동작을 넣어주는 언어입니다. 버튼 클릭하면 뭔가 일어나고, 데이터 불러와서 화면에 표시하고, 애니메이션 넣는 것들이 전부 JS의 역할이에요.

React / Vue / Next.js — JavaScript를 더 편하게 쓸 수 있도록 도와주는 프레임워크/라이브러리입니다. 혼자 처음부터 다 짜는 것보다 훨씬 빠르고 구조적으로 만들 수 있어요. 요즘 프론트엔드 개발에서 React는 거의 기본처럼 쓰입니다.

Flutter — 구글이 만든 크로스플랫폼 프레임워크예요. 코드 하나로 iOS, Android, 웹 앱을 동시에 만들 수 있어서 초보자한테도 인기가 많습니다. 이 블로그에서도 자주 다루는 그거 맞아요.

UI (User Interface) — 사용자가 직접 조작하는 화면 요소 전체를 말합니다. 버튼, 입력창, 메뉴 같은 것들이에요.

UX (User Experience) — UI를 사용하면서 느끼는 경험을 말해요. "이 앱 쓰기 편하다 / 불편하다"가 UX의 영역입니다. 기능이 다 있어도 흐름이 어색하면 UX가 나쁜 거예요.

컴포넌트(Component) — 화면을 구성하는 재사용 가능한 조각입니다. 예를 들어 버튼 하나, 카드 하나, 헤더 하나가 컴포넌트예요. React나 Flutter 모두 이 컴포넌트 단위로 화면을 조립합니다.

렌더링(Rendering) — 데이터나 코드를 실제 화면에 그려내는 과정이에요. "렌더링이 느리다" 하면 화면이 늦게 표시된다는 뜻입니다.

3. 백엔드 영역 — 눈에 안 보이지만 핵심인 부분

백엔드(Backend) 는 사용자 눈에는 보이지 않지만, 실제 로직이 돌아가는 서버 쪽 영역입니다.

로그인 처리, 데이터 저장, 결제 연동, 이메일 발송 같은 것들이 다 백엔드에서 일어나요.

서버(Server) — 요청을 받아서 처리하고 응답을 돌려주는 컴퓨터(또는 프로그램)입니다. 항상 켜져 있어야 하고, 여러 사람의 요청을 동시에 처리할 수 있어야 해요.

Node.js — JavaScript로 서버를 만들 수 있게 해주는 환경입니다. 프론트엔드에서 JS를 쓰던 사람이 백엔드도 JS로 짤 수 있어서 진입장벽이 낮은 편이에요.

Python (Django / FastAPI / Flask) — 백엔드 개발에 많이 쓰이는 언어예요. 문법이 읽기 쉽고 AI/ML 연동이 강해서 요즘 더 주목받고 있어요.

REST API — 클라이언트와 서버가 데이터를 주고받는 방식 중 가장 널리 쓰이는 규칙입니다. "이 주소로 GET 요청 보내면 데이터 줄게요, 이 주소로 POST 보내면 저장해줄게요" 같은 약속이에요.

엔드포인트(Endpoint) — API에서 특정 기능을 수행하는 URL 주소를 말해요. 예를 들면 /api/users는 유저 목록을 가져오는 엔드포인트, /api/login은 로그인 처리하는 엔드포인트 이런 식이에요.

인증(Authentication) — "이 사람이 누구인지" 확인하는 과정입니다. 로그인이 여기에 해당해요.

인가(Authorization) — "이 사람이 이걸 할 권한이 있는지" 확인하는 과정이에요. 로그인은 됐는데 관리자 페이지에 접근할 수 있는지 체크하는 게 인가입니다. 인증이랑 인가, 이름이 비슷해서 많이 헷갈리는데 완전히 다른 개념이에요.

JWT (JSON Web Token) — 로그인 후 발급되는 토큰의 한 종류입니다. 이 토큰을 요청마다 같이 보내면 서버가 "아, 로그인된 사람이구나" 하고 인식해요. 세션 방식보다 서버 부담이 적어서 요즘 많이 쓰입니다.

미들웨어(Middleware) — 요청이 서버에 도착하고 실제 처리되기 전에 중간에서 먼가를 해주는 코드예요. 로그 남기기, 인증 토큰 검사, 요청 데이터 가공 같은 것들이 미들웨어로 처리됩니다. 경비원 같은 역할이에요 — 들어오기 전에 신분 확인하고 통과시키는.

4. 데이터베이스 영역 — 데이터가 실제로 쌓이는 곳

데이터베이스(Database, DB) 는 데이터를 저장하고 꺼내오는 창고입니다.

회원 정보, 게시물, 주문 내역, 채팅 기록 — 앱에서 생성되는 모든 데이터가 데이터베이스에 저장돼요.

데이터베이스는 크게 두 가지 종류로 나뉩니다.

관계형 데이터베이스 (RDB / SQL) — 표(Table) 형태로 데이터를 저장합니다. 엑셀 시트처럼 행과 열로 데이터를 관리해요. MySQL, PostgreSQL, SQLite가 대표적이에요. 데이터 구조가 명확하고 관계를 정의할 수 있어서 복잡한 데이터 처리에 강합니다.

비관계형 데이터베이스 (NoSQL) — 표 형태가 아닌 유연한 구조로 저장합니다. JSON처럼 생긴 문서(Document) 형태로 저장하는 MongoDB가 대표적이에요. 데이터 구조가 자주 바뀌거나 대용량 처리가 필요할 때 유리합니다.

CRUD — 데이터베이스에서 하는 작업 4가지를 묶어서 부르는 말이에요.

• Create — 데이터 생성
• Read — 데이터 조회
• Update — 데이터 수정
• Delete — 데이터 삭제

앱 기능 대부분이 결국 이 CRUD 중 하나입니다. "게시물 작성" = Create, "피드 보기" = Read, "댓글 수정" = Update, "계정 탈퇴" = Delete 이런 식으로요.

ORM (Object-Relational Mapping) — 데이터베이스를 직접 SQL 언어로 다루지 않고, 내가 쓰는 언어(Python, JS 등)의 코드로 다룰 수 있게 해주는 도구입니다. 예를 들어 Python의 SQLAlchemy, Django ORM 같은 게 있어요. SQL 몰라도 어느 정도 DB를 다룰 수 있게 해줘서 초보자한테 편리하게 느껴질 수 있는데, 복잡한 쿼리는 결국 SQL 알아야 합니다.

스키마(Schema) — 데이터베이스의 구조 설계도예요. "회원 테이블에는 id, 이름, 이메일, 비밀번호 컬럼이 있고, 게시물 테이블에는 id, 제목, 내용, 작성자id가 있다" 같은 걸 정의한 게 스키마입니다.

5. 연결고리 영역 — API와 그 주변 개념들

프론트엔드와 백엔드를 이어주는 영역에서 자주 나오는 용어들도 따로 정리해볼게요.

API (Application Programming Interface) — 서버가 클라이언트한테 열어둔 창구입니다. "이 주소로 요청하면 이 데이터 줄게요" 라는 약속이에요. 이미 이전 글에서 다뤘으니 익숙하죠?

JSON — API로 데이터를 주고받을 때 가장 많이 쓰이는 형식입니다. 키:값 쌍으로 이루어진 텍스트 형태예요. 사람도 읽기 편하고 거의 모든 언어에서 파싱할 수 있어서 사실상 표준이 됐습니다.

fetch / axios — 프론트엔드에서 API 요청을 보낼 때 쓰는 도구입니다. fetch는 브라우저 내장 기능이고, axios는 더 편하게 쓸 수 있게 만들어진 라이브러리예요. 바이브코딩으로 AI가 만들어준 코드에 이게 보이면 "아, 여기서 서버한테 뭔가 요청하고 있구나" 하고 읽으면 됩니다.

CORS (Cross-Origin Resource Sharing) — 다른 도메인 간에 API 요청을 허용하는 설정입니다. 프론트엔드 서버 주소랑 백엔드 서버 주소가 다를 때, 기본적으로는 보안상 요청이 막혀요. 백엔드에서 "이 주소는 허용할게요" 하고 열어줘야 하는데, 이게 CORS 설정이에요. 초보자가 API 연결하다가 가장 많이 만나는 에러 중 하나입니다.

환경변수 (.env) — API 키나 데이터베이스 비밀번호 같은 민감한 정보를 코드 안에 직접 쓰지 않고 별도 파일에 분리해서 관리하는 방식이에요. .env 파일 만들고 거기다 쓰는 게 보통입니다. 이 파일은 절대 깃허브에 올리면 안 돼요.

배포(Deploy) — 내 컴퓨터에서 개발한 코드를 실제 서버에 올려서 다른 사람도 접근할 수 있게 만드는 과정입니다. "배포했다" = "이제 실제로 쓸 수 있다"는 뜻이에요. Vercel, Netlify, AWS, Firebase 같은 서비스들이 배포 플랫폼입니다.

버전 관리 / Git — 코드 변경 이력을 추적하고 관리하는 도구예요. "어제 코드로 돌아가고 싶다", "여러 사람이 같은 코드를 동시에 수정하고 싶다" 같은 상황에서 필수입니다. GitHub는 Git으로 관리하는 코드를 온라인에 올려두는 플랫폼이에요.

6. 전체 관계 한눈에 정리

여기까지 나온 용어들을 전체 흐름에 배치하면 이렇게 됩니다.

[사용자]

   ↕ 화면 조작
   
[프론트엔드]
HTML / CSS / JavaScript
React / Flutter / Vue
UI, UX, 컴포넌트, 렌더링
   ↕ fetch / axios로 API 요청 (JSON 형식)
   ↕ HTTP 메서드 (GET / POST / PUT / DELETE)
   ↕ CORS 설정으로 허용 여부 체크

[백엔드 / 서버]
Node.js / Python / Java
REST API / 엔드포인트
인증(Authentication) / 인가(Authorization)
JWT 토큰 / 미들웨어
   ↕ ORM 또는 SQL 쿼리

[데이터베이스]
MySQL / PostgreSQL (관계형)
MongoDB (비관계형)
CRUD / 스키마

그리고 전체를 감싸는 것들:

• Git / GitHub — 코드 버전 관리
• .env / 환경변수 — 민감한 정보 분리 관리
• 배포 플랫폼 — 실제 서비스 가동

이 구조가 눈에 들어오기 시작하면, AI가 뭔가 만들어줬을 때 "이 코드는 프론트엔드 부분이고, 이 부분은 API 연결이고, 여기가 백엔드 로직이구나" 하고 위치 파악이 됩니다.

용어가 많아 보여도 결국 다 연결되어 있어요

처음 볼 땐 용어가 너무 많아서 막막하게 느껴질 수 있어요. 근데 솔직히 이걸 다 처음부터 외울 필요는 없습니다.

"이런 게 있구나, 이 위치에 있구나" 하고 전체 그림을 먼저 잡아두고, 실제로 뭔가 만들면서 하나씩 부딪히는 게 훨씬 빠릅니다.

오늘 정리한 내용 기준으로:

• 프론트엔드 / 백엔드 / 데이터베이스 역할 구분 
• API와 JSON이 이 사이를 어떻게 연결하는지 
• CRUD, JWT, CORS, ORM 같은 실무 용어 맥락 
• 전체 흐름에서 각 용어의 위치 

이 정도만 잡아도 개발 공부할 때 훨씬 덜 헤맵니다.

열공하세요! 🙌

[웹개발 기초] 클라이언트-서버란 무엇인가? — 앱이 데이터를 주고받는 구조, 초보자도 이해되게 정리해봤습니다

 안녕하세요!

오늘은 웹이나 앱 개발을 처음 시작하거나, 바이브코딩으로 뭔가 만들어보려는 분들이 꼭 한 번은 마주치게 되는 개념인 클라이언트-서버 구조에 대해 정리해보려고 합니다.

솔직히 말하면 저도 처음엔 그냥 "어딘가에서 데이터 가져오는 거 아닌가?" 수준으로 넘어갔어요. 근데 막상 앱을 만들다 보면 이 개념이 흐릿하면 계속 막히는 순간이 오더라고요.

"API가 뭔지 모르겠어요", "요청이 왜 안 가는지 모르겠어요" 같은 질문들, 사실 다 여기서 출발합니다.

이 글에서는 어려운 말 없이, 실제 앱이 어떻게 데이터를 주고받는지를 중심으로 풀어볼게요.

[웹개발 기초] 클라이언트-서버란 무엇인가?

1. 클라이언트와 서버, 대체 뭐가 뭔지부터 잡고 가자

가장 먼저 용어 정리부터 해봅시다.

클라이언트(Client) 는 쉽게 말해서 "나" 입니다. 제가 지금 쓰고 있는 스마트폰, 노트북, 거기서 열려 있는 앱이나 브라우저가 클라이언트예요. "뭔가를 요청하는 쪽"이라고 기억하면 됩니다.

서버(Server) 는 "그 요청을 받아서 처리해주는 쪽" 입니다. 어딘가에 있는 컴퓨터인데, 항상 켜져 있고 요청이 오면 응답을 돌려줍니다.

비유를 하나 들어볼게요.

식당에 가면 손님이 직원한테 주문을 하죠. 직원이 주방에 전달하고, 주방에서 음식을 만들어서 가져다주는 구조잖아요.

여기서:

• 손님 = 클라이언트
• 직원 + 주방 = 서버
• 주문서 = 요청(Request)
• 나온 음식 = 응답(Response)

앱도 똑같습니다. 인스타그램 피드를 새로 고침하면, 내 폰(클라이언트)이 서버한테 "최신 게시물 줘" 하고 요청을 보내고, 서버가 게시물 목록을 돌려보내주는 거예요.

그 데이터를 받아서 화면에 뿌리는 게 클라이언트 역할입니다.

2. 요청과 응답, 이게 HTTP입니다 — 웹의 언어

클라이언트와 서버가 데이터를 주고받을 때 사용하는 약속된 방식이 있어요. 그게 바로 HTTP(HyperText Transfer Protocol) 입니다.

이름은 복잡해 보이는데, 그냥 "웹에서 데이터 주고받는 방법에 대한 규칙"이라고 이해하면 됩니다.

HTTP 요청에는 몇 가지 방식(Method)이 있어요. 자주 나오는 것만 보면:

메서드	하는 일	예시
GET	데이터 가져오기	게시물 목록 불러오기
POST	데이터 보내기(생성)	로그인, 글 작성
PUT / PATCH	데이터 수정하기	프로필 정보 변경
DELETE	데이터 삭제하기	계정 삭제

바이브코딩하다 보면 AI가 만들어준 코드 안에 GET, POST 이런 단어들이 보일 거예요. 이제 보이면 "아, 여기서 서버한테 데이터 요청하거나 전송하는 거구나" 하고 바로 읽힐 겁니다.

그리고 서버가 응답을 돌려줄 때는 상태 코드(Status Code) 도 같이 보냅니다.

자주 만나게 되는 것들만 정리하면:

• 200 → 성공, 잘 됐어요
• 201 → 생성 성공 (POST 요청 후 자주 나와요)
• 400 → 요청이 잘못됐어요 (내 쪽 문제)
• 401 → 인증 필요 (로그인 안 된 상태)
• 403 → 권한 없음 (로그인은 됐는데 접근 불가)
• 404 → 없는 주소 요청 (잘못된 URL)
• 500 → 서버 에러 (서버 쪽 문제)

개발하다가 콘솔에 404 뜨면 "내가 주소를 잘못 쳤구나", 500이 뜨면 "서버 쪽에서 뭔가 터졌구나" 이렇게 빠르게 원인 파악을 할 수 있어요.

3. API가 뭔지 드디어 제대로 이해해봅시다

클라이언트-서버 얘기를 하다 보면 반드시 나오는 단어가 API입니다.

API(Application Programming Interface) 는 한 마디로 "서버가 클라이언트한테 열어둔 창구" 예요.

서버 안에는 엄청난 양의 데이터가 있는데, 아무나 막 접근하게 둘 수는 없잖아요. 그래서 "이 주소로 요청하면 이 데이터 줄게요" 하고 정해진 방식으로만 열어둔 통로가 API입니다.

예를 들어 날씨 앱을 만든다고 하면:

• 내 앱(클라이언트)이 기상청 서버 API에 "서울 오늘 날씨 줘" 하고 요청을 보내고
• 서버가 JSON 형태로 날씨 데이터를 응답으로 돌려주고
• 내 앱이 그 데이터를 받아서 화면에 표시하는 구조예요.

클라이언트 (내 앱)
    ↓ 요청 (GET /weather?city=seoul)
서버 (기상청 API)
    ↓ 응답 ({"city": "서울", "temp": 28, "status": "맑음"})
클라이언트 (화면에 표시)

이 데이터를 주고받을 때 가장 많이 쓰이는 형식이 JSON(JavaScript Object Notation) 인데요.

생긴 게 이렇게 생겼어요:

{

  "name": "tia",
  "city": "서울",
  "temperature": 28
}

중괄호 안에 키:값 쌍으로 구성되어 있어요. 사람도 읽기 편하고, 컴퓨터도 파싱하기 편한 형식이라서 요즘 API 통신에서는 사실상 표준처럼 쓰입니다.

바이브코딩으로 AI가 코드를 만들어줄 때, fetch() 라든가 axios.get() 이런 코드가 보이면 "아, 여기서 API 요청 날리는 거구나" 하고 이해하면 됩니다.

4. 실제 흐름으로 한 번 더 짚어보기 — 로그인을 예로 들면

이론만 보면 흐릿하니까, 로그인 과정을 예로 들어서 전체 흐름을 한 번 따라가 볼게요.

① 사용자가 아이디/비밀번호 입력 후 로그인 버튼 클릭 → 클라이언트(앱 또는 브라우저)가 서버로 POST 요청을 보냅니다. 요청 안에는 이메일이랑 비밀번호가 담겨 있어요.

② 서버가 요청을 받고 데이터베이스 확인 → "이 아이디 있나? 비밀번호 맞나?" 검증합니다.

③ 맞으면 서버가 토큰(Token)을 응답으로 돌려줌 → 토큰은 "이 사람 인증됐어요"라는 증명서 같은 거예요. 로그인 후 다른 요청을 보낼 때 이 토큰을 같이 보내면 "로그인된 사람이구나" 하고 서버가 인식합니다.

④ 클라이언트가 토큰을 저장하고 메인 화면으로 이동 → 이제부터 요청마다 토큰을 같이 보내면서 인증된 사용자로서 서비스를 이용합니다.

[사용자 입력] 이메일 + 비밀번호

↓

[클라이언트] POST /api/login

↓

[서버] 검증 → 성공 시 토큰 생성

↓

[클라이언트] 토큰 저장 → 메인 화면 이동

↓

이후 모든 요청에 토큰 포함 → 서버가 인증 확인

이 흐름이 머릿속에 그려지면, 코드를 볼 때 "아 지금 어느 단계구나" 하고 위치 파악이 훨씬 쉬워져요.

5. 프론트엔드와 백엔드, 이제 진짜 구분이 됩니다

여기까지 왔으면 이제 자연스럽게 연결되는 개념이 있어요.

프론트엔드(Frontend) 는 클라이언트 쪽 개발입니다. 사용자가 실제로 보고 사용하는 화면을 만드는 영역이에요. HTML, CSS, JavaScript, Flutter, React Native 같은 것들이 여기 해당합니다.

백엔드(Backend) 는 서버 쪽 개발입니다. 요청을 받아서 데이터베이스를 조회하고, 처리하고, 응답을 돌려주는 로직을 담당해요. Python, Node.js, Java, Go 같은 언어들이 주로 쓰입니다.

그리고 둘을 이어주는 게 API예요.

[사용자] ↔ [프론트엔드 / 클라이언트] ↔ API ↔ [백엔드 / 서버] ↔ [데이터베이스]

바이브코딩으로 뭔가 만들 때, AI한테 "로그인 기능 만들어줘" 하고 시키면 프론트엔드 코드랑 백엔드 코드를 구분해서 알려주거나, API 연결 코드를 같이 짜줄 때가 많아요.

이 구조가 머릿속에 잡혀 있으면 AI가 뭘 만들어줬는지 훨씬 빠르게 파악할 수 있습니다.

클라이언트-서버 구조, 처음엔 막막하지만 보이기 시작하면 재밌어요

개발 공부를 하다 보면 유독 이 개념이 흐릿한 채로 넘어가는 경우가 많아요. 그냥 "코드 복붙하면 됐으니까" 하고 지나치다가, 어느 순간 에러가 터지면 이유를 몰라서 멍해지는 경험을 하게 됩니다.

오늘 정리한 내용만 잡아도:

• 클라이언트(요청하는 쪽)와 서버(응답하는 쪽)의 역할 구분
• HTTP 메서드(GET/POST 등)와 상태 코드(200/404/500)
• API가 뭔지, JSON이 뭔지
• 로그인 흐름처럼 실제 요청-응답 사이클
• 프론트엔드와 백엔드의 차이

이 정도는 완성이에요.

열공하세요! 🙌

[웹개발 기초] CSS란 무엇인가? — HTML이랑 뭐가 다른지, 왜 쓰는지 초보자도 이해되게 정리해봤습니다

 

안녕하세요!

오늘은 웹개발을 처음 시작하거나, 요즘 유행하는 바이브코딩으로 뭔가 만들어보려는 분들이 꼭 마주치게 되는 단어, CSS에 대해 정리해보려고 합니다.

솔직히 말하면 저도 처음엔 HTML이랑 CSS가 뭔 차이인지 제대로 몰랐어요. 그냥 "둘 다 쓰면 되는 거 아닌가?" 싶었는데… 막상 직접 써보니까 역할이 완전히 다르더라고요.

이 글에서는 그 차이랑 개념을 최대한 쉽게, 실제로 어떻게 쓰이는지 위주로 정리해봤으니 끝까지 읽어보세요!

[웹개발 기초] CSS란 무엇인가?
— HTML이랑 뭐가 다른지, 왜 쓰는지

 1. CSS가 뭔지, 진짜 쉽게 설명하면

CSS는 Cascading Style Sheets의 약자입니다. 이름만 보면 뭔가 엄청 어려워 보이는데, 핵심만 이야기하면 이렇습니다.

"HTML로 만들어진 요소들을 어떻게 보여줄지 꾸며주는 언어"

예를 들어볼게요.

HTML은 웹페이지를 구성하는 뼈대입니다. 집으로 비유하면, 방이 몇 개고 어디에 있는지 구조를 잡아주는 게 HTML이에요.

그런데 집 구조만 있으면 어떤가요? 벽도 없고, 바닥도 시멘트 그대로고, 조명도 없는 상태잖아요.

그걸 색칠하고, 꾸미고, 배치까지 이쁘게 해주는 게 바로 CSS입니다.

즉, 정리하면:

• HTML → "여기에 제목 있고, 여기에 버튼 있고, 여기에 글 있어요"를 정의
• CSS → "그 제목은 빨간색 글씨에 크기는 24px, 버튼은 파란 배경에 둥근 모서리"를 정의

실제로 HTML만으로 만든 페이지를 보면 90년대 웹사이트처럼 텍스트 나열이 전부입니다. 거기에 CSS를 입히는 순간 완전히 다른 페이지가 되는 거예요.

바이브코딩 하시는 분들도 AI가 코드를 뚝딱 만들어줄 때, 그 코드 안에 CSS가 같이 들어있는 걸 보셨을 거예요. 그게 바로 모양을 잡아주는 부분입니다.

2. CSS는 어떻게 생겼나요? — 문법 구조 살펴보기

CSS 코드를 처음 보면 이런 생김새입니다:

h1 {
  color: red;
  font-size: 32px;
  text-align: center;
}

겁먹을 필요 없어요. 뜯어보면 구조가 딱 3가지입니다.

선택자 (Selector)

어떤 HTML 요소에 적용할 건지 지정하는 부분입니다. 위 코드에서 h1이 선택자예요. h1 태그 전체에 이 스타일을 적용하겠다는 의미입니다.

• h1 → h1 태그 전체 선택
• .box → class 이름이 "box"인 요소 선택
• #title → id가 "title"인 요소 선택

속성 (Property)

어떤 걸 바꿀 건지 지정합니다. color, font-size, text-align 같은 게 속성이에요.

값 (Value)

어떻게 바꿀 건지 지정합니다. red, 32px, center처럼 속성 뒤에 콜론(:) 쓰고 값을 적는 거예요.

CSS를 HTML에 연결하는 방법도 3가지가 있는데, 실무에서 가장 많이 쓰이는 건 별도 파일로 분리하는 방식입니다.

<!-- HTML 파일 안에 이렇게 연결 -->
<link rel="stylesheet" href="style.css">

style.css 파일 따로 만들고, HTML에서 불러오는 방식이에요. 프로젝트 규모가 커질수록 이렇게 분리하는 게 훨씬 관리하기 편합니다.

3. 자주 쓰는 CSS 속성 TOP 10 — 이것만 알아도 기본은 됩니다

진짜 자주 쓰이는 속성만 골라봤어요. 외우려고 하지 말고, "이런 게 있구나" 정도로 읽어보세요.

1. color — 글자 색상

p {
  color: blue;        /* 색상 이름으로 */
  color: #FF5733;     /* 헥스 코드로 */
  color: rgb(255, 87, 51); /* RGB 값으로 */
}

글자 색을 바꿀 때 씁니다.

2. background-color — 배경 색상

div {
  background-color: #f0f0f0;
}

요소의 배경 색상을 지정합니다.

3. font-size — 글자 크기

h1 {
  font-size: 32px;
}
p {
  font-size: 1rem;  /* rem 단위는 반응형에서 많이 씁니다 */
}

4. font-weight — 글자 두께

strong {
  font-weight: bold;    /* 또는 숫자 700 */
}
span {
  font-weight: 400;     /* 기본 두께 */
}

5. margin — 요소 바깥쪽 여백

div {
  margin: 20px;           /* 상하좌우 모두 20px */
  margin: 10px 20px;      /* 상하 10px, 좌우 20px */
  margin-top: 30px;       /* 위쪽만 30px */
}

6. padding — 요소 안쪽 여백

div {
  padding: 16px;
}

margin은 바깥, padding은 안쪽 여백이에요. 이 두 개 헷갈리는 분들 많은데, 박스 밖에 공간 = margin / 박스 안에 공간 = padding 으로 기억하면 됩니다.

7. width / height — 가로세로 크기

img {
  width: 100%;      /* 부모 요소 기준 100% */
  height: auto;     /* 비율 자동 유지 */
}

div {
  width: 300px;
  height: 200px;
}

8. border — 테두리

input {
  border: 1px solid #cccccc;
  border-radius: 8px;   /* 모서리 둥글게 */
}

9. display — 요소 배치 방식

div {
  display: flex;      /* Flexbox 레이아웃 */
  display: block;     /* 블록 요소 */
  display: none;      /* 화면에서 숨기기 */
}

이 중에서 display: flex는 요소들을 가로/세로로 나란히 배치할 때 정말 많이 씁니다.

10. position — 요소 위치 지정

div {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 10px;
  right: 10px;
}

4. CSS Box Model — 이걸 모르면 레이아웃이 계속 이상해집니다

CSS를 쓰다 보면 "분명히 크기를 맞췄는데 왜 삐져나오지?" 하는 상황이 생겨요.

그게 바로 Box Model을 몰라서 생기는 문제입니다.

CSS에서 모든 HTML 요소는 사각형 박스로 인식됩니다. 그 박스는 4가지 층으로 이루어져 있어요.

┌─────────────────────────────────┐ ← margin 
│  ┌───────────────────────────┐      │  (바깥 여백)
│  │                                 border (테두리)      │      │
│  │  ┌─────────────────────┐      │      │
│  │  │                      padding (안쪽 여백) │      │      │
│  │  │  ┌───────────────┐      │      │      │
│  │  │  │            content           │      │      │      │
│  │  │  │          (실제 내용)         │      │      │      │
│  │  │  └───────────────┘      │      │      │
│  │  └─────────────────────┘      │      │
│  └───────────────────────────┘      │
└─────────────────────────────────┘

content → padding → border → margin 순서로 이해하면 됩니다.

그리고 초보자들이 많이 당하는 함정이 하나 있어요.

기본 CSS에서는 width: 300px을 설정하면 content 영역만 300px이 됩니다. 여기에 padding이랑 border까지 더해지면 실제로 화면에서 차지하는 공간은 300px보다 커지게 되는 거예요.

이걸 해결하는 게 바로:

* {
  box-sizing: border-box;
}

이 한 줄을 맨 위에 써두면 width 안에 padding과 border가 포함되어서 훨씬 직관적으로 작업할 수 있습니다. 거의 모든 CSS 프레임워크나 리셋 파일에 이 코드가 기본으로 들어가 있어요.

5. Flexbox — 레이아웃 잡을 때 가장 많이 쓰는 방식

CSS를 배우면 반드시 만나게 되는 게 Flexbox입니다.

예전에는 요소들을 가로로 나란히 놓거나, 화면 가운데 정렬하는 게 꽤 복잡했어요. 근데 Flexbox가 생기면서 이런 작업들이 엄청 쉬워졌습니다.

기본 사용법은 이렇습니다:

.container {
  display: flex;
  justify-content: center;   /* 가로 방향 정렬 */
  align-items: center;       /* 세로 방향 정렬 */
  gap: 16px;                 /* 요소 간 간격 */
}

예를 들어 버튼 3개를 가로로 나란히, 그리고 가운데 정렬하고 싶으면:

<div class="container">
  <button>버튼 1</button>
  <button>버튼 2</button>
  <button>버튼 3</button>
</div>

.container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

이렇게만 해도 깔끔하게 가운데 정렬됩니다.

바이브코딩으로 AI가 만들어주는 코드에도 display: flex가 굉장히 자주 등장하는데, 이제 보이면 "아, 요소들 배치하려는 거구나" 하고 바로 읽힐 거예요.

CSS, 처음엔 어색하지만 금방 익숙해집니다

CSS는 처음엔 왜 이렇게 속성이 많은지, 어떤 걸 써야 할지 막막하게 느껴질 수 있어요.

근데 솔직히 실무에서 자주 쓰는 속성은 한정적이에요. 처음부터 전부 다 외우려고 하지 말고, 직접 뭔가 만들면서 "이걸 바꾸려면 뭘 쓰지?"를 찾아보는 방식으로 공부하는 게 훨씬 빠릅니다.

오늘 정리한 내용만 이해해도:

• HTML이랑 CSS의 차이
• CSS 문법 구조 (선택자, 속성, 값)
• 자주 쓰는 속성들
• Box Model 개념
• Flexbox 기초

이 정도는 완성된 거예요.

열공하세요!

[파이썬 기초] VSCode로 파이썬 앱 개발 시작하기: 입문자용 환경 세팅부터 유튜브 다운로더 프로그램 만들기 (pip, uv, venv, yt-dlp 완벽 정리)

 안녕하세요! 오늘은 비전공자나 개발 초보자도 막힘없이 따라 할 수 있는 VSCode(Visual Studio Code) 기반의 파이썬(Python) 앱 개발 환경 세팅 가이드를 준비했습니다.

단순히 이론만 공부하는 것이 아니라, 내가 원하는 유튜브 영상을 자동으로 다운로드하고 MP3 음원 파일로 추출하는 실전 '유튜브 다운로더 프로그램'까지 함께 만들어볼 예정입니다.

개발 공부를 하면서 직접 겪은 시행착오와 각종 오류 메시지 해결 방법(Node.js, FFmpeg 설치 등)까지 아주 상세하게 기록해 두었으니, 이 글을 끝까지 보시면서 천천히 따라와 주세요!

[파이썬 기초] VSCode로 파이썬 앱 개발 시작하기:
입문자용 환경 세팅부터 유튜브 다운로더 프로그램 만들기
(pip, uv, venv, yt-dlp 완벽 정리)

1. 파이썬(Python) 설치 및 환경 변수(Path) 설정

가장 먼저 우리 컴퓨터가 파이썬 코드를 이해하고 실행할 수 있도록 파이썬 해석기를 설치해야 합니다.

1) 파이썬 다운로드 및 설치 단계

1. 파이썬 공식 웹사이트(Python.org)에 접속합니다.

2. 상단 메뉴에서 Downloads에 마우스를 올린 뒤, 본인의 운영체제(Windows 등)를 선택합니다.

3. 노란색 다운로드 버튼을 클릭하여 설치 파일을 받습니다.

4. 다운로드된 .exe 설치 파일을 실행합니다.

⚠️ [가장 중요] 설치 시 필수 체크 사항! 설치 창이 뜨면 가장 아래쪽에 있는 "Add python.exe to PATH" (또는 Add Python to environment variables) 체크박스에 반드시 체크를 해주셔야 합니다. 이 설정을 누락하면 나중에 터미널에서 파이썬 명령어를 전혀 인식하지 못해 심각한 문제가 생깁니다. 이후 과정은 모두 "예(Next)" 또는 **"Install Now"**를 눌러 기본값으로 설치를 완료합니다.

2) 정상 설치 확인하기

설치가 완료되었다면 컴퓨터의 터미널(명령 프롬프트 또는 PowerShell)을 열고 아래 명령어를 입력하여 버전이 정상적으로 출력되는지 확인합니다.

python --version 

Python 3.12.x와 같이 버전 숫자가 명확하게 나타난다면 파이썬이 내 컴퓨터에 안전하게 안착한 것입니다. 

2. VSCode 설치 및 파이썬 확장 프로그램 세팅

코드 작성을 편리하게 도와주는 최고의 코드 에디터인 VSCode(Visual Studio Code)를 활용해 보겠습니다.

1) Microsoft 공식 Python 확장 프로그램 설치

VSCode를 실행한 뒤, 파이썬 개발을 원활하게 하려면 전용 도구를 설치해야 합니다.

1. VSCode 왼쪽 세로줄 메뉴에서 블록 모양 아이콘인 Extensions(확장 프로그램, 단축키: Ctrl + Shift + X)을 클릭합니다.

2. 검색창에 "Python"을 입력합니다.

3. Microsoft에서 공식 제공하는 Python 항목을 찾아 [Install(설치)] 버튼을 누릅니다.

💡 이 확장 프로그램이 왜 필요할까요? 코드 작성 시 오타를 잡아주는 린팅(Linting), 코드를 자동으로 완성해 주는 자동완성(IntelliSense), 그리고 코드의 오류를 추적해 주는 디버깅(Debugging) 기능을 제공하므로 초보자에게는 나침반 같은 필수 존재입니다.

3. 작업 폴더 생성 및 VSCode 터미널 진입 방법 (3가지 루트)

이제 내 컴퓨터 안에 파이썬 프로젝트를 진행할 전용 폴더를 하나 만들어야 합니다. 예시로 D:\init\파이썬폴더명 공간을 기준으로 설명해 드릴게요. 폴더를 만든 후 VSCode에서 터미널을 열고 진입하는 방법은 크게 3가지가 있습니다. 편한 방법을 선택해 보세요.

• 방법 1: 왼쪽 폴더 리스트 활용

  • VSCode에서 해당 폴더를 연 상태(File -> Open Folder)라면, 왼쪽 폴더 리스트 빈 공간에 마우스 우클릭을 한 뒤 [Open in Integrated Terminal(통합 터미널에서 열기)]을 선택합니다.

• 방법 2: 빈 화면 우클릭 및 경로 이동

  • VSCode 빈 화면에서 우클릭 후 터미널을 실행합니다. 그 후 직접 cd 파이썬폴더명 명령어를 입력해 해당 폴더 안으로 진입합니다.

• 방법 3: 윈도우 탐색기 우클릭 활용

  • 내 컴퓨터 탐색기에서 생성한 파이썬 폴더 안으로 직접 들어갑니다. 빈 곳에 마우스 우클릭을 한 뒤 [가져오기/터미널에서 열기] 또는 [Code로 열기(Open with Code)]를 실행해 줍니다.

4. 파이썬 패키지 매니저 비교 및 가상환경(venv) 세팅

파이썬으로 앱을 개발할 때는 다른 사람들이 미리 만들어 둔 '라이브러리(패키지)'를 가져와서 사용하게 됩니다. 이때 패키지를 관리해 주는 도구를 패키지 매니저라고 합니다.

가장 대중적인 pip 방식과 최근 초보자들 사이에서 간단명료한 스타일로 각광받는 고성능 매니저 uv 방식을 비교 정리해 드릴게요.

1) 차세대 고성능 매니저: uv 사용법

uv는 Rust 언어로 작성되어 기존 매니저들을 압도하는 엄청난 속도를 자랑합니다. 통합 프로젝트 관리 기능이 우수하고 디스크 공간을 효율적으로 아껴줍니다.

• 설치 명령어: pip install uv

• 버전 체크: uv --version

• 가상환경 생성: uv venv

• 프로젝트 초기화: uv init

• 패키지 설치 및 의존성 추가: uv add 패키지명 (실행 시 자동으로 pyproject.toml 파일과 uv.lock 파일이 업데이트되어 관리가 편리해집니다.)

• 패키지 독립 설치: uv pip install 패키지명

• 스크립트 바로 실행: uv run 파일명.py

2) 파이썬 기본 탑재 매니저: pip 사용법

별도의 설치 없이 파이썬을 깔면 자동으로 내장되어 있는 기본 매니저입니다.

• 버전 체크: pip --version

• pip 업그레이드 명령어: python -m pip install --upgrade pip

  *일부 PC나 강의 환경에 따라 그냥 `pip install --upgrade pip`로 실행하면 
  오류가 나는 경우가 있습니다. 그럴 때는 당황하지 말고 
  앞에 `python -m`을 붙여서 실행하면 완벽하게 성공할 수 있습니다.*
  
  

💡 잠깐! 가상환경(venv)은 왜 필수로 만들어야 할까요?

가상환경은 프로젝트별로 방을 따로 나누는 독립된 환경 공간입니다. 우리가 만들 앱마다 필요한 서브 프로그램(라이브러리)의 버전이 다를 수 있습니다. 만약 가상환경을 쓰지 않고 컴퓨터 전체 공간에 설치해 버리면, 다른 프로그램을 만들 때 버전 충돌이 일어나 전체 코드가 망가질 수 있으므로 반드시 프로젝트 폴더마다 독립적인 가상환경을 만들어 주어야 합니다.

[기본 pip 방식] 가상환경 설정 및 활성화 명령어

내가 작업할 폴더 위치로 터미널 경로를 맞춘 뒤 아래 명령어를 차례로 입력합니다.

• 가상환경 생성: python -m venv venv

• 가상환경 활성화 (운영체제별 다름):

• Windows (방법 1): venv\Scripts\activate

• Windows (방법 2): .\.venv\Scripts\activate

• macOS / Linux: source venv/bin/activate

5. [돌발 상황] 가상환경 위치를 잘못 잡았을 때 해결 방법

초보 시절에 가장 자주 하는 실수 중 하나가 터미널 경로를 엉뚱한 곳에 두고 가상환경(venv) 명령어를 입력하는 것입니다. 경로가 꼬였다면 과감하게 지우고 새로 만드는 것이 가장 깔끔합니다.

1) 잘못 생성된 venv 폴더 강제 삭제

터미널에서 아래 명령어를 입력해 잘못 만들어진 폴더를 삭제합니다 (경로는 예시입니다).

rm -r D:\init\venv

2) 올바른 파이썬 프로젝트 폴더로 이동 후 가상환경 재생성

cd D:\init\파이썬폴더명

uv venv

이렇게 차근차근 순서대로 이동 후 생성해 주면, 내가 지정한 파이썬 전용 작업 폴더 내부에 올바르고 깔끔하게 가상환경이 구축됩니다.

6. 실전! 유튜브 다운로더 프로그램 만들기

환경 세팅이 끝났으니 이제 진짜 작동하는 앱을 개발해 볼 차례입니다. 유튜브 다운로드 라이브러리 중 가장 강력하고 업데이트가 활발한 yt-dlp를 이용해 보겠습니다.

1 단계: 가상환경 활성화 상태에서 라이브러리 설치

터미널 앞에 가상환경 이름이 표시되어 있는지 확인한 후, 아래 명령어를 입력해 다운로더 핵심 라이브러리를 설치합니다. (uv 사용자 기준)

uv pip install yt-dlp

2 단계: downloader.py 파일 생성 및 코드 작성

VSCode에서 내가 작업 중인 폴더 안에 downloader.py라는 새 파일을 만들고 아래 코드를 그대로 복사해서 붙여넣은 뒤 저장(Ctrl + S)합니다.

import yt_dlp

def download_video(url) :

    options = {

        'format' :  'best',  # 가장 좋은 화질 선택

        'outtmpl' :  '%(title)s.%(ext)s' ,  # 영상 제목을 파일명으로 설정
    }

    
    with yt_dlp.YoutubeDL(options) as ydl :

        ydl.download([url])

url = input("유튜브 URL을 입력하세요: ")

download_video(url)

3 단계: 프로그램 실행 및 결과 확인

터미널 창에 아래 명령어를 입력하여 프로그램을 가동합니다.

python downloader.py

실행하면 터미널 화면에 유튜브 URL을 입력하세요: 라는 안내 문구가 뜹니다. 

이때 다운로드하고 싶은 유튜브 영상 주소를 복사해서 터미널에 붙여넣고 엔터(Enter)를 누릅니다.

다운로드가 완료되면 VSCode 왼쪽 폴더 리스트에 방금 다운로드한 따끈따끈한 영상 파일(.mp4 등)이 들어온 것을 볼 수 있습니다!

❓ 당황하지 마세요! (음성 미출력 관련 팁)

VSCode 자체 내부 플레이어로 영상을 클릭해 재생하면 간혹 소리(음성)가 안 들려서 당황할 수 있습니다. 이것은 에디터 자체 내장 플레이어의 한계 때문입니다. 윈도우 탐색기로 해당 폴더에 들어가 곰플레이어, 윈도우 미디어 플레이어 등 일반 동영상 재생 프로그램으로 실행해 보시면 소리와 영상 모두 아주 정상적으로 출력되는 것을 확인할 수 있습니다.

7. [오류 해결] WARNING: No supported JavaScript runtime found 메시지 조치법

유튜브 영상을 다운로드하다 보면 터미널 창에 아래와 같은 길고 무시무시한 경고(WARNING) 메시지가 뜰 때가 있습니다.

WARNING: [youtube] No supported JavaScript runtime could be found. Only deno is enabled by default; to use another runtime add --js-runtimes RUNTIME[:PATH] to your command/config. YouTube extraction without a JS runtime has been deprecated, and some formats may be missing.

🧐 원인 분석

이 오류는 내 컴퓨터에 유튜브 자바스크립트 코드를 해석해 줄 Node.js 가 설치되어 있지 않아서 발생합니다. 이 상태로 그냥 두면 일부 유튜브 영상의 경우 화질 옵션이 누락되거나 추출 과정에서 튕기는 오류가 발생할 수 있습니다.

🛠️ 해결 방법: Node.js 설치하기

1. Node.js 공식 사이트(https://nodejs.org)에 접속합니다.

2. 왼쪽 버튼에 있는 안정적인 LTS 버전을 클릭하여 설치 프로그램을 다운로드한 뒤 실행합니다. (모두 Next를 눌러 설치 완료)

3. 설치가 끝났다면 VSCode 터미널을 완전히 종료했다가 다시 새로 켜 줍니다. (매우 중요!)

4. 새 터미널 창에서 아래 명령어를 입력해 정상 설치되었는지 검증합니다.

5. node --version

6. 터미널에 v20.x.x 같은 버전 숫자가 정상적으로 찍힌다면 경고 메시지 해결 완료입니다! 이제 다시 실행해 보면 경고 없이 깔끔하게 작동합니다.

8. 가상환경 경로 확인 꿀팁 및 최종 업그레이드 코드 (영상 vs MP3 음원 선택 기능)

1) 터미널 켤 때마다 체크해야 하는 필수 꿀팁

영상을 다운로드 받거나 코드를 수정할 때, 터미널 맨 앞에 붙어 있는 가상환경 접두사를 꼭 체크하는 습관을 가져야 합니다.

• 터미널 맨 앞에 (python) 이라고 뜨는 경우 -> 내 프로젝트 전용 공간이 아닌 엉뚱한 기본 가상환경이 켜진 것이므로 비정상 상태입니다.

• 터미널 맨 앞에 (py-youtube-D) 또는 (venv) 라고 정확한 폴더/환경 이름이 뜨는 경우 -> 정상 상태입니다.

• 만약 다운로드 받을 폴더 위치나 경로가 변경되었다면 반드시 가상환경(venv) 상태를 다시 재확인하고, 필요시 라이브러리를 재설치해 주어야 꼬이지 않습니다.

2) 최종 완성본: 영상 또는 MP3 음원만 쏙 골라 다운로드하는 확장 코드

유튜브에서 영상 말고 배경음악이나 교양 오디오만 MP3 파일로 저장하고 싶을 때가 많죠? 기능을 업그레이드한 최종 코드를 공유합니다. 기존 downloader.py 내용을 싹 지우고 아래 코드를 덮어씌워 보세요.

import yt_dlp

def download_video(url):
    print("\n[안내] 고화질 영상 다운로드를 시작합니다...")
    options = {
        'format': 'best',
        'outtmpl': '%(title)s.%(ext)s',
    }
    with yt_dlp.YoutubeDL(options) as ydl:
        ydl.download([url])

def download_audio(url):
    print("\n[안내] MP3 음원 추출을 시작합니다...")
    options = {
        'format': 'bestaudio/best',
        'outtmpl': '%(title)s.%(ext)s',
        'postprocessors': [{
            'key': 'FFmpegExtractAudio',
            'preferredcodec': 'mp3',      # mp3 확장자로 지정
            'preferredquality': '192',    # 음질 192kbps 설정
        }],
    }
    with yt_dlp.YoutubeDL(options) as ydl:
        ydl.download([url])

# 프로그램 실행부
url = input("유튜브 URL을 입력하세요: ")
print("\n--- 모드 선택 ---")
print("1. 영상 다운로드 (.mp4)")
print("2. 음원 다운로드 (.mp3)")
choice = input("\n선택하세요 (1 또는 2 입력): ")

if choice == '1':
    download_video(url)
elif choice == '2':
    download_audio(url)
else:
    print("잘못된 입력이에요! 1번이나 2번을 입력해 주세요.")

🚨 필수 주의사항: 음원(MP3) 추출을 위해서는 FFmpeg이 필수입니다!

위 코드에서 2번(음원 다운로드) 기능을 온전하게 사용하려면 컴퓨터가 미디어 파일을 상호 변환할 수 있도록 돕는 FFmpeg이라는 프로그램이 설치되어 있어야 합니다. 이게 없으면 변환 단계에서 에러가 납니다.

Windows 사용자라면 터미널 창에 아래 명령어를 입력해 초간단 패키지 매니저(Chocolatey 등) 혹은 수동 설치를 통해 구성해 주어야 합니다.

# Chocolatey 매니저가 설치되어 있는 경우의 초간단 명령어
choco install ffmpeg

# 설치 완료 후 검증 명령어
ffmpeg -version

버전 정보가 정상적으로 노출된다면 이제 영상은 물론, 고음질의 MP3 파일까지 내 손으로 직접 만든 파이썬 프로그램을 통해 자유롭게 추출할 수 있게 됩니다!

9. 마치며 & 요약

오늘 공부한 내용을 요약해 보겠습니다.

단계	핵심 작업 내용	주의 사항 및 팁
1단계	파이썬 설치	설치 창에서 Add python.exe to PATH 무조건 체크하기
2단계	VSCode 세팅	Microsoft 공식 Python 확장 프로그램 설치로 자동완성 활성화
3단계	가상환경 구축	uv venv 또는 python -m venv venv로 독립된 방 만들기
4단계	기능 구현	yt-dlp 라이브러리로 유튜브 링크 분석 및 파일 저장
5단계	트러블 슈팅	JavaScript 경고 메시지는 Node.js 설치로 깔끔하게 해결!

처음에는 터미널 창에 영어 명령어들을 입력하는 게 어색하고 어렵게 느껴질 수 있지만, 직접 손으로 타이핑하고 에러 메시지를 하나씩 정복해 나가다 보면 나만의 멋진 앱 개발에 금방 익숙해질 것입니다.

열공하세요!