VSCode, Colab, Jupyter, Python 설정 기록

오늘은 VSCode에서 Colab, Jupyter, Python을 어떻게 연결해서 쓰는지 실습했다. 처음에는 Colab 터미널과 내 컴퓨터의 WSL/PowerShell이 헷갈렸고, bs4 설치 경고와 /content 경로도 낯설었다.

이번 글은 오늘 대화하면서 정리한 내용을 기준으로, VSCode에서 Colab 노트북을 만들고 실행하는 방법부터 Python 패키지 설치, 경고 해석, 그리고 어떤 작업을 Colab에서 하고 어떤 작업을 내 컴퓨터에서 해야 하는지까지 정리한 기록이다.

핵심: Colab은 분석과 실험 공간이고, WSL/PowerShell은 내 컴퓨터 브라우저 자동화를 실행하는 공간이다.

1. VSCode에서 설치해야 할 확장

VSCode에서 Colab을 사용하려면 먼저 확장을 설치해야 한다.

필수 확장

• Colab by Google
• Python by Microsoft
• Jupyter by Microsoft

캡처에서 봤던 확장 목록 중 가장 위에 있던 Colab – Connect notebooks to Colab servers가 Google 공식 확장이었다. 이 확장을 설치하면 VSCode 안에서 Colab 서버에 노트북을 연결해서 사용할 수 있다.

1. Colab by Google
2. Python by Microsoft
3. Jupyter by Microsoft

이 설정의 역할

Colab 확장은 Google Colab 서버와 연결하는 역할을 하고, Python/Jupyter 확장은 VSCode에서 .ipynb 노트북을 열고 Python 셀을 실행할 수 있게 해준다.

2. No assigned Colab servers의 의미

Colab 확장을 설치한 뒤 왼쪽 Colab 패널에 아래 문구가 보였다.

No assigned Colab servers.

이 메시지의 의미

이건 오류가 아니다. 아직 VSCode 노트북이 Colab 런타임에 연결되지 않았다는 뜻이다.

즉, Colab 확장은 설치되어 있지만 아직 실행 중인 노트북 서버가 없다는 상태다. 새 .ipynb 파일을 만들고 Colab 커널에 연결하면 된다.

3. Colab 노트북 파일 만들기

오늘 만든 실습 파일 이름은 다음과 같았다.

naver_html_lab.ipynb

VSCode에서 새 파일을 만들 때 확장자를 .ipynb로 저장하면 Jupyter 노트북 화면으로 열린다.

권장 파일 이름

• naver_html_lab.ipynb
• healthcare_post_builder_lab.ipynb
• devtools_selector_lab.ipynb

실습 목적에 따라 이름을 붙이면 나중에 다시 보기 좋다.

4. Colab 런타임 연결하기

.ipynb 파일을 열고 오른쪽 위의 커널 선택 버튼을 누른다.

1. .ipynb 파일 열기
2. 오른쪽 위 Select Kernel 또는 커널 선택 클릭
3. Select Another Kernel 선택
4. Colab 선택
5. New Colab Server 선택
6. Google 계정 로그인
7. 노트북 셀 실행

이 과정의 역할

VSCode에서 작성한 노트북을 Google Colab 서버에 연결한다. 연결이 되면 내 컴퓨터가 아니라 Colab 서버에서 Python 코드가 실행된다.

5. Colab 연결 확인하기

처음 연결 후 아래 코드를 실행했다.

print("Colab 연결 성공")

이 코드의 역할

노트북 셀이 정상 실행되는지 확인한다. 출력이 보이면 Python 커널이 연결된 것이다.

또 다른 확인 방법으로 터미널 명령을 실행했다.

!ls

실행 결과는 다음과 같았다.

sample_data

이 결과의 의미

sample_data는 Colab에 기본으로 들어있는 폴더다. 이 결과가 보이면 현재 셀은 Colab 환경에서 실행되고 있는 것이다.

6. Colab 터미널의 /content 의미

Colab 터미널에서 프롬프트가 이렇게 보였다.

/content#

이 경로의 의미

/content는 Colab 런타임 안의 작업 폴더다. 내 컴퓨터의 WSL 경로와는 전혀 다르다.

그래서 Colab 터미널에서 아래 명령을 실행하면 실패한다.

cd /home/misoh/projects/Beginner-track

실제로 이런 오류가 났다.

No such file or directory
Could not read package.json
open '/content/package.json'

이 오류의 의미

Colab은 클라우드 서버이기 때문에 내 컴퓨터의 /home/misoh/projects/Beginner-track 폴더를 모른다. Playwright로 내 컴퓨터의 Chrome을 조작하는 스크립트는 Colab에서 실행하면 안 된다.

7. Colab과 WSL/PowerShell 역할 구분

오늘 가장 헷갈렸던 지점이 바로 이것이었다. Colab에서 실행할 코드와 내 컴퓨터에서 실행할 코드를 구분해야 한다.

8. BeautifulSoup 설치하기

네이버 에디터 HTML 구조를 분석하기 위해 BeautifulSoup을 사용했다.

처음에는 VSCode에서 아래 경고가 보였다.

가져오기 "bs4"을(를) 확인할 수 없습니다.
Pylance(reportMissingImports)

이 경고의 의미

VSCode의 Python 분석 도구인 Pylance가 현재 환경에서 bs4 패키지를 찾지 못했다는 뜻이다. 실제 Colab 런타임에는 설치되어 있을 수도 있고, 없으면 설치하면 된다.

Jupyter/Colab에서는 !pip install보다 %pip install을 쓰는 것이 권장된다.

%pip install beautifulsoup4

이 코드의 역할

현재 노트북 커널에 beautifulsoup4 패키지를 설치한다. 설치 후에는 from bs4 import BeautifulSoup을 사용할 수 있다.

설치 결과가 이렇게 나올 수도 있다.

Requirement already satisfied: beautifulsoup4

이 메시지는 오류가 아니다. 이미 설치되어 있다는 뜻이다.

9. BeautifulSoup import 테스트

설치 후 아래 코드를 실행했다.

from bs4 import BeautifulSoup

print("BeautifulSoup 준비 완료")

이 코드의 역할

bs4 패키지가 정상적으로 설치되어 있고, 현재 노트북에서 import 가능한지 확인한다.

10. 네이버 인용구 HTML 분석 실습

Colab에서는 DevTools에서 복사한 HTML을 붙여넣고 구조를 분석할 수 있다.

from bs4 import BeautifulSoup

html = """
<div class="se-quotation-container">
  <div class="se-module se-module-text se-quote">
    <p class="se-text-paragraph">내용을 입력하세요.</p>
  </div>
  <div class="se-module se-module-text se-cite">
    <p class="se-text-paragraph">출처 입력</p>
  </div>
</div>
"""

soup = BeautifulSoup(html, "html.parser")

for tag in soup.find_all(True):
    print(tag.name, tag.get("class"))

이 코드의 역할

HTML 문자열을 파싱해서 태그 이름과 class 목록을 출력한다. DevTools에서 본 복잡한 HTML을 Colab에서 분석하기 쉽게 바꾸는 과정이다.

실행 결과는 다음과 같았다.

div ['se-quotation-container']
div ['se-module', 'se-module-text', 'se-quote']
p ['se-text-paragraph']
div ['se-module', 'se-module-text', 'se-cite']
p ['se-text-paragraph']

이 결과를 보면 어떤 class가 인용구 전체를 의미하고, 어떤 class가 본문과 출처를 의미하는지 알 수 있다.

11. 선택자 후보 만들기

HTML에서 class를 뽑아 자동화 선택자 후보로 바꿀 수도 있다.

selectors = []

for tag in soup.find_all(True):
    classes = tag.get("class")
    if classes:
        selector = "." + ".".join(classes)
        selectors.append(selector)

for selector in selectors:
    print(selector)

이 코드의 역할

각 태그의 class 목록을 CSS 선택자 형태로 바꾼다.

예를 들어:

.se-quotation-container
.se-module.se-module-text.se-quote
.se-text-paragraph
.se-module.se-module-text.se-cite
.se-text-paragraph

이 선택자들은 다시 Chrome DevTools Console에서 테스트할 수 있다.

document.querySelector(".se-quotation-container")

이 코드의 역할

Colab에서 만든 선택자 후보가 실제 네이버 페이지에서도 작동하는지 확인한다. 이 흐름이 오늘 공부한 핵심 연결이다.

12. Colab에서 하면 좋은 실습

Colab은 브라우저 버튼을 직접 클릭하는 자동화보다는, HTML 분석과 템플릿 생성에 잘 맞는다.

• DevTools에서 복사한 HTML 분석
• class 목록 추출
• 선택자 후보 만들기
• 네이버 카페용 안전 HTML 템플릿 생성
• WordPress용 HTML 템플릿 생성
• 학습 기록 초안 자동 생성

13. Colab에서 하면 안 맞는 작업

반대로 아래 작업은 Colab보다 내 컴퓨터의 WSL/PowerShell에서 해야 한다.

• Playwright로 Windows Chrome 열기
• 네이버 카페 글쓰기 화면 조작
• 파일 업로드 자동화
• 로컬 다운로드 폴더 이미지 사용
• 기존 Chrome 세션과 연결하는 작업

Colab은 클라우드에 있으므로 내 컴퓨터의 Chrome이나 다운로드 폴더를 직접 제어하지 못한다.

14. 오늘 정리한 실행 위치

15. 오늘의 실습 흐름

1. VSCode에서 Colab 확장 설치
2. naver_html_lab.ipynb 생성
3. Colab 커널 연결
4. !ls로 Colab 연결 확인
5. %pip install beautifulsoup4 실행
6. BeautifulSoup import
7. 네이버 에디터 HTML 붙여넣기
8. 태그와 class 분석
9. 선택자 후보 생성
10. Chrome DevTools Console에서 선택자 검증
11. 검증된 선택자를 Playwright 자동화 코드로 연결

16. 오늘 배운 점

• VSCode에서 Colab을 쓰려면 Colab, Python, Jupyter 확장이 필요하다.
• No assigned Colab servers는 오류가 아니라 아직 연결된 Colab 서버가 없다는 뜻이다.
• /content는 Colab 서버 안의 폴더이고, 내 WSL 프로젝트 폴더가 아니다.
• %pip install은 Jupyter/Colab에서 패키지를 설치할 때 권장되는 방식이다.
• Pylance의 bs4 경고는 VSCode 분석기 기준 경고일 수 있고, 실제 실행 여부는 노트북 셀에서 확인해야 한다.
• Colab은 HTML 분석과 템플릿 생성에 좋고, 브라우저 자동화는 내 컴퓨터에서 실행해야 한다.
• DevTools, Colab, Playwright를 연결하면 화면 분석부터 자동화까지 이어갈 수 있다.

이번 실습의 결론: Colab은 분석 실험실, DevTools는 화면 해부 도구, Playwright는 실제 자동화 실행 도구다.

다음 실습 계획

• 네이버 카페 제목 입력 영역 HTML 분석
• 본문 입력 영역 선택자 찾기
• Colab에서 네이버용 HTML 템플릿 생성기 만들기
• 생성된 HTML을 네이버 카페 본문에 붙여넣는 자동화 실습
• WordPress용 템플릿과 네이버용 템플릿 분리하기