KDT 유비온 코딩 강의 9일차 [HTML 웹 명함 만들기]

KDT 유비온 코딩 강의 9일차 | HTML 웹 명함 만들기
KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!

 

📌 도입

이번에는 HTML로 실제 작업물을 만들어보는 학습 과정을 거쳤는데요!
드디어 실제 바이브 코딩 첫 수업이 진행되었습니다! 😊

오늘 다룬 주요 내용은 세 가지였어요.

• 실습용 HTML 프로젝트 생성
• VSCode에서 기본 웹 구조 작성
• ChatGPT를 활용한 HTML 코딩 시작

이번에는 AI도 같이 활용해서 바이브 코딩 작업이 진행됐는데요.
저는 클로드를 활용해서 진행할 예정이라서, 이 글을 보시는 분은 클로드 AI를 활용한 점 참고하시면 좋을 것 같습니다!

 

 

⚙️ STEP 1. 클로드 프로젝트 세팅하기

지침을 지정해서 프로젝트를 만드는 것을 먼저 보여주셨는데요.
강의 내용을 참고해서 제가 사용할 지침으로 살짝 변형해 클로드 프로젝트를 생성해봤습니다!

1. 클로드에 접속해서 새 프로젝트 생성하기

 

작업 중인 것은 바이브 코딩 작업이고, 목표는 코딩 작업물 만들기! 라고 매우 간단하게 작성했습니다.

 

2. 오른쪽 메뉴에서 지침 작성하기

 

지침 내용은 다음과 같습니다.

 

[역할]
- 소프트웨어 프론트와 백엔드 분야에서 코딩, 프로그래밍, 아키텍처 설계 등을 해온 전문가로
답변해야 한다.
- Vibe Coding을 위해 질문하는 내용을 간단하고 명료하게 정리해라.

[동작절차]
(1) 답변 영역
- Vibe Coding 영역을 중심으로 답변해야 한다.

(2) 일반적인 개념 질문에 대한 답변 스타일
- 많은 내용으로 답변 및 설명하지 말고, 핵심만 개조식으로 명료하게 답변해야 한다.
- 맨 처음에 문장식으로 핵심을 1문단 정도로 정리하고, 이후 답변은 소주제를 붙인 후, 소주제
에 해당하는 내용을 개조식 불릿 포인트로 정리한다.
- 답변은 길지 않게 2~3개의 소주제 안에서 해결해야 한다.

(3) Vibe Coding 요청에 대한 질문
- 실제 코딩을 할 때 사용한다.
- 초보자도 이해하기 쉽게 설명해야 한다.
- 변수는 카멜케이스(camelCase)로 작성한다.
- 공식 문서에 있는 내용을 우선 참고하여 답변해야 한다.
- 최신 정보를 중심으로 답변해야 한다.
- 코드의 결과를 제시한 후 너무 길게 설명하지 말고, Vibe Coding 취지에 맞게 꼭 알아야 할
핵심 실행 맥락만 요약한다.

 

 

💬 STEP 2. 클로드에게 첫 질문하기

클로드 AI까지 세팅을 마쳤으니, 본격적으로 HTML 웹 명함 제작을 시작했어요!

우선 AI에 이렇게 질문했습니다.

"나는 1개의 HTML 파일로 구성되어 있는 웹 명함용 프로필 사이트를 만들고 싶다. 어떻게 만들어야 할지 알려줘."

 

 

그리고 아래와 같이 결과물을 받았는데요.

 

 

저는 클로드 유료버전이라 상당히 자세하게 답변을 받은 것 같은데,
혹시 이 글을 읽어보시고 무료 버전도 시도해 보시면서 차이점을 확인해 보시는 것도 좋을 것 같습니다!

 

 

🖥️ STEP 3. VSCode에서 HTML 파일 만들기

그 전에 앞서 VSCode를 활용할 것이기 때문에,
VSCode에서 C드라이브에 생성한 바이브코딩 폴더를 열어서 HTML 파일을 생성했어요.

 

다음 이미지와 같이 만들어지는 것을 볼 수 있습니다.

 

이렇게 하는 동안 클로드한테는 코드를 달라고 해서 받았고, VSCode에 붙여넣기 해봤습니다

 

 

그렇게 새 파일로 만든 webnamecard.html에 VSCode에 붙여넣으면 다음과 같이 조회가 가능합니다.

 

 

전혀.. 모르겠지만, 어쨌든 해야 하기 때문에 Ctrl + S 를 하면 저장이 되고,
다음과 같이 폴더에서 파일을 확인할 수 있어요!

 

 

 

이제 이 파일을 웹 페이지에 드래그하면 웹페이지를 확인할 수 있습니다.

 

 

🔄 STEP 4. 수정 작업 반복하기

수정이 필요한 부분은 질문해 가면서 바이브 코딩을 통해 코드를 수정할 수 있는데요.

강의 내용과는 너무 먼 수준의 프로필 링크를 만들어줘서 다시 명령하고 코드를 받았습니다.

 

 

다시 저장해서 파일을 실행하면 다음과 같이 결과물이 나왔어요.
더욱 작업하기 수월한 웹 프로필이 만들어졌습니다!

 

 

🐱 STEP 5. 프로필 이미지 수정하기

이제 여기서 이미지를 수정하기 위해 클로드한테 이미지 주소를 알려주고 프로필 이미지를 수정해봤어요.

저작권 무료 이미지 사이트로 픽사베이를 추천드려요!
👉 https://pixabay.com/

6.1 million+ Stunning Free Images to Use Anywhere - Pixabay

 

바이브 코딩을 할 때 무작정 처음부터 끝까지 만들어 달라고 하는 것이 아니라,
단순한 작업부터 하나씩 시도해 보면서 배워가는 것이 핵심이라는 것!!!

그래서 픽사베이에서 고양이 키워드를 검색해서 이미지 프로필 수정 작업을 진행해봤어요.

질문 : "이미지 주소를 적용해서 프로필 이미지를 수정하고 싶어, 웹 프로필에 어느 부분을 수정하면 되는지 알려줘."

 

 

이렇게 해서 154번 줄을 수정했는데요.

 

그렇게 새로 저장을 하고 열어보면...

짜잔~ 귀여운 고양이가 프로필 이미지로 변경되었습니다! 캬핳 😄

 

✨ STEP 6. 인터랙티브 동작 추가하기

여기서 인터랙티브한 동작을 추가해 달라고 작업해봤어요.

질문 : "내 프로필 사이트에 js를 사용해서 인터랙티브한 동작을 넣어줘"

 

(참고로 js는 자바스크립트의 약자입니다!)

어찌저찌 과정을 거쳐서 이미지 코드도 날리지 않고 적용해서 웹 프로필 완성본이 만들어졌습니다!!

중간에 고양이 이미지 주소 프로필을 날려서 바꿨습니다만.. ㅠ

 

 

연락처와 메일 주소가 가운데 정렬이 아닌 이유는 커서가 가까이 가면 오른쪽에 복사하기 기능이 보여지게 되기 때문이에요!

 

 

📖 모르는 단어 찾아보기

오늘도 새로운 단어들이 나왔어요. 찾아보고 정리해봤습니다!

[HTML (HyperText Markup Language)]
웹페이지의 구조를 만드는 언어예요. 제목, 단락, 이미지, 링크 등 웹페이지의 뼈대를 구성해요.

[JS (JavaScript)]
웹페이지에 동적인 기능을 추가하는 프로그래밍 언어예요. 버튼 클릭, 애니메이션, 복사하기 같은 인터랙티브한 동작을 만들 수 있어요.

[카멜케이스 (camelCase)]
변수 이름을 작성할 때 첫 단어는 소문자, 이후 단어의 첫 글자는 대문자로 쓰는 방식이에요. 예) userName, myProfile

[인터랙티브 (Interactive)]
사용자의 행동에 반응하는 동작을 뜻해요. 마우스를 올리면 버튼 색이 바뀌거나, 클릭하면 내용이 나타나는 것들이 해당돼요.


🙌 마무리

시간이 꽤 걸렸지만 결과물을 보니 매우 감동적인 오늘 강의였습니다 🥹

사진도 많고 내용도 많았는데, 다른 분들도 참고해서 따라해 보시면 좋을 것 같아요!

앞으로도 강의 내용을 꾸준히 기록할 예정이니, 관심과 응원 부탁드립니다! 🙏


#KDT #바이브코딩 #비개발자코딩 #국비지원 #AI코딩 #생성형AI #코딩입문