4강: VS Code 200% 활용하기

설정 메뉴 대신 말로 바꿉니다

오늘 끝나면 이런 걸 갖게 돼요

3강에서 만든 index.html이 내 글과 사진이 들어간 홈페이지로 바뀌어요. 브라우저에서 결과를 보고, 마음에 들지 않으면 이전 모습으로 되돌리는 것까지 해봐요.

VS Code를 아직 설치하지 않았다면 3강부터 보고 오세요. 설치했다면 준비가 끝났어요.

위 그림은 영상의 순서예요. 이 글에서는 홈페이지부터 만들고, 확장과 화면 꾸미기는 맨 아래 부록에서 다뤄요.

1. 홈페이지 내용을 말로 바꿔요

VS Code(Visual Studio Code, 파일을 보고 고치는 프로그램)에서 3강의 test 폴더를 여세요. 왼쪽 파일 목록에서 index.html이 보이면 준비됐어요.

VS Code는 작업대와 같아요. 파일을 일일이 고치지 말고, 작업대에 앉은 클로드에게 원하는 결과를 말해 보세요.

메뉴에서 터미널 → 새 터미널을 누르고 claude를 입력하세요. 코덱스로 시작했다면 codex를 입력하고, 아래 프롬프트를 그대로 써도 돼요.

클로드나 코덱스에게 이렇게 말하세요.

3강에서 만든 index.html을 열어 줘.
화면에 보이는 제목과 소개 글을 먼저 알려 주고,
내가 새 문장을 답하면 그 내용으로 바꿔 줘.
다른 부분은 건드리지 마.

AI(인공지능)가 현재 문장을 알려 주면 홈페이지에 넣고 싶은 글을 답하세요. 코드를 직접 열거나 고칠 필요는 없어요.

2. 브라우저에서 확인해요

바뀐 화면은 코드가 아니라 브라우저에서 봐야 해요. 미리보기 버튼을 찾지 말고 AI에게 그대로 부탁하세요.

지금 만든 index.html을 브라우저에서 열어 줘.
내가 화면을 확인할 수 있게 해 줘.

새 브라우저 창이 열리면 바꾼 글이 보이는지 확인하세요. 예전 내용이 보이면 "방금 수정한 파일이 맞는지 확인하고 다시 열어 줘"라고 말하면 돼요.

영상에서는 아래처럼 VS Code 안을 둘로 나눠 확인했어요. 지금은 미리보기 버튼을 찾지 않아도 돼요.

3. 사진 한 장을 넣어요

사진 선택과 붙여넣기는 사람이 직접 해야 해요. 이것만 직접 하시면 나머지는 클로드가 해요.

사진 파일을 AI 대화창으로 끌어다 놓으세요. 화면을 캡처했다면 맥은 Cmd + V, 윈도우는 Alt + V로 붙여넣으세요.

사진이 들어가면 이렇게 말하세요.

이 사진을 지금 홈페이지 맨 위에 넣어 줘.
사진의 배경과 옷 색을 살펴보고 페이지에 어울리게 배치해 줘.
나머지 내용은 그대로 두고 맨 위 영역만 바꿔 줘.

홈페이지 맨 위에서 방문자가 가장 먼저 보는 큰 영역을 히어로(hero)라고 해요. 영상에서는 이 작업에 5분쯤 걸렸어요.

작업이 끝나면 앞에서 쓴 "브라우저에서 열어 줘" 프롬프트로 다시 확인하세요.

4. 이전 모습으로 돌려 봐요

결과가 마음에 들지 않아도 처음부터 다시 만들 필요는 없어요. 먼저 되돌릴 내용을 보여 달라고 하세요.

방금 사진을 넣으면서 바꾼 부분을 먼저 목록으로 보여 줘.
제목과 소개 글은 그대로 두고, 사진과 함께 바뀐 부분만 이전으로 돌려 줘.
파일을 바꾸기 전에 내가 확인할 때까지 기다려 줘.

목록에 사진과 맨 위 영역만 있는지 확인한 뒤 "진행해 줘"라고 답하세요. 끝나면 브라우저를 다시 열어 사진만 빠졌는지 확인해요.

클로드 코드에는 지시를 보내기 전 상태를 잠시 기록하는 체크포인트가 있어요. 입력창을 비운 채 Esc를 두 번 누른 뒤 되돌릴 지점을 고르세요. 코덱스에서는 위 프롬프트로 변경 목록을 확인한 뒤 승인하세요.

여기서는 방금 한 작업만 되짚어 봤어요. 5강에서는 Git(깃, 변경 기록을 저장하는 도구)으로 저장 지점을 만들고 안전하게 돌아오는 방법을 배워요.

더 해보기: 디자인도 말로 바꿔요

"예쁘게 만들어 줘"보다 원하는 스타일을 구체적으로 알려 주세요. 랩스 디자인 갤러리에서 마음에 드는 사이트를 고르고 프롬프트 복사를 누르세요.

복사한 내용을 클로드 대화창에 붙여넣고 위에 한 줄을 더하세요.

지금 만든 홈페이지의 내용은 유지하고,
아래 프롬프트에 적힌 디자인만 적용해 줘.

영상에서는 디자인을 바꾸는 데 14분쯤 걸렸어요. AI가 파일을 고치고 있다면 기다리고, 한동안 변화가 없으면 "지금 어디까지 했는지 알려 줘"라고 물어보세요.

이번 강에서 기억할 것

1. index.html의 글과 사진은 클로드에게 말해 바꿔요.
2. 결과는 "브라우저에서 열어 줘"라고 부탁해 확인해요.
3. 마음에 들지 않으면 되돌릴 부분을 구체적으로 말하면 돼요.

코드를 읽는 것보다 화면을 보고 한 번씩 바꾸는 흐름을 익히는 게 먼저예요.

이 강의, 영상으로도 있어요

사진을 붙이고 홈페이지를 바꾸는 실제 화면은 영상에서 확인하세요.

영상이 더 편하면 유튜브에서 이어서 보세요.

👉 유튜브 채널 「오토프로그」 바로 가기

이런 분께 추천해요

VS Code를 설치했지만 어디서 시작할지 모르겠는 사장님·직장인·예비창업자에게 맞아요. 말로 글과 사진을 바꾸고 화면에서 확인하고 싶은 분도 따라올 수 있어요.

참고 링크

• VS Code 내려받기
• 랩스 디자인 갤러리
• D2Coding 폰트 (GitHub)
• Claude Code 권한 모드 팁

부록: 작업대 꾸미기

VS Code를 Dark Modern 테마로 바꾸고 편집기 글자 크기를 키워 줘.
현재 값을 먼저 확인하고, 읽기 편한 크기로 한 단계만 올려 줘.

D2Coding 글꼴이 설치되어 있는지 먼저 확인해 줘.
없다면 공식 GitHub에서 설치하는 방법을 안내하고 내 승인을 기다려 줘.
설치가 끝나면 VS Code 편집기와 터미널 글꼴을 D2Coding으로 바꿔 줘.

다음 강

5강: Git에서는 지금 만든 홈페이지를 저장하고, 이전 상태로 되돌리고, 깃허브에 보관해요.

5강으로 넘어가기