KDT 유비온 코딩 강의 10일차 [HTML 웹 명함 구조 변경 및 기능 추가]

KDT 유비온 코딩 강의 10일차 | HTML 웹 명함 구조 변경 및 기능 추가
KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!

 

📌 도입

지난번 웹 명함에 이어서 업그레이드 하는 과정을 담았습니다!
슬슬 난이도가 올라가지만 열심히 따라가 봤어요 😅

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

• HTML, CSS, JS 분리 방식 이해
• 단일 파일로 구현된 구조의 문제와 대안
• 구조 변경을 통한 명확한 역할 분리 실습

지난번에는 하나의 단일 파일로 만들었었는데, 오늘은 파일을 분리해서 진행하는 강의가 진행됐어요.

 

 

 

⚙️ STEP 1. HTML, CSS, JS 파일 분리하기

우선 AI 프로젝트로 들어가서 명령어를 전달했는데요.

 

"내가 작성한 HTML 코드가 있는데 이 코드 데이터를 CSS와 JS로 분리해줘!"

라고 요청했어요. 이 내용만 보내는 것이 아니라 지난번 코드 내용도 밑에 첨부해서 함께 보내줬어요.

이렇게 하니 클로드가 HTML, CSS, JS 세 가지로 분류해 줬습니다.

 

 

🖥️ STEP 2. VSCode에 파일 나눠서 넣기

분리한 뒤에 이 파일들을 VSCode에 추가해줬습니다.
이전에는 HTML 단일 파일이었기 때문에 VSCode 뉴파일 생성하여

index.html, style.css, main.js 코드 데이터를 모두 각각 넣어줬어요.

그렇게 해서 기존 HTML로 다 때려넣었던 코드를 HTML, CSS, JS로 분리했고,
아래 이미지와 같이 VSCode에서 각각 코드 데이터가 분리된 것을 확인할 수 있었어요.

 

 

html만 넣었을 때는 내용만 보이고,
css를 넣으니 기존 웹 명함 디자인이 적용되고,
이후 js 인터랙티브 기능이 반영되는 것을 단계적으로 확인할 수 있었어요.

 

 

🐱 STEP 3. 외부 이미지에서 내 사진 파일로 교체하기

외부 이미지 링크로 넣어뒀던 것을 제가 가지고 있는 사진 파일을 호출하는 방식으로 수정하는 작업을 했어요.

웹 명함 프로필 이미지로 만들 이미지 파일을 하나 준비해뒀는데요.
저는 저희집 야옹이 사진으로 변경할 거예요 🐱

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

"이미지 파일을 내 컴퓨터 index.html이 있는 경로에 'meow' 이름으로 저장했는데 이미지 경로를 수정해줘"

 

 

 

이렇게 요청하니 변경할 코드 위치를 알려줬고,
기존 바이브코딩 폴더에 meow 사진을 넣은 후 html에서 코드 수정을 했어요.

수정을 한 뒤에 새로고침해서 index.html 파일을 웹에서 열어보면

 

 

 

위 이미지처럼 코드가 수정되었고, 제 프로필 이미지는 아래와 같이 업데이트 되었습니다!

 

 

 

🎠 STEP 4. 슬라이드쇼 기능 추가하기

이렇게 단계적으로 수정하고 업그레이드하는 과정을 통해

바이브 코딩을 연습하는 것이 중요하다는 걸 다시 한 번 배웠어요 😊

여기서 기능을 추가하는 것도 배웠는데요.
웹 명함 페이지 하단에 슬라이드쇼가 되는 이미지를 추가하는 작업이었어요.

AI 프로젝트에 들어가서 index, script, style 파일을 첨부하고 이렇게 요청했습니다.

"지금 첨부한 소스를 분석해서, 웹 프로필 카드 아래에 image1, image2, image3 이미지 파일이 슬라이드쇼 형식으로 동작되도록 구현해줘. 슬라이드쇼는 이미지가 왼쪽에서 오른쪽으로 이동하면서 이미지가 교체되어야 하고, 이미지는 3초에 한 번씩 전환되어야 한다."

내가 구현하고 싶은 기능을 상세하고 명확하게 작성해서 요청해야

정확하게 코드를 받을 가능성이 올라간다고 합니다. 이 부분이 핵심 포인트예요!

그렇게 요청을 했고 결과를 받았는데요.

 

 

 

근데 강사님 시연과 다르게 제 클로드는 계속 결과값만 줘서,
변경 혹은 추가되어야 하는 코드 내용을 전달해 달라고 추가로 요청해봤습니다.

 

 

그래서 이 내용을 받았으니 코드 변경되는 내용을 확인하고 반영해보겠습니다.. 제가 잘 따라할 수 있기를 빕니다.. 허허..

 

 

 

😅 STEP 5. 시행착오 과정

그렇게 따라가 봤는데요.

강사님이 만드신 결과물과

 

제가 만든 결과물은

 

 

난리가 났죠? 😂
역시 모르고 만들면 이렇게 된다는 것도 제대로 뼈저리게 배웠습니다.

그래서 클로드를 통해서 추가로 요청을 했고,
한참을 코드 내용을 뒤집어 보면서 수정해서 만들어봤어요.

 

 

진짜 이거 하면서 눈물 흘릴뻔 했어요 😭
그래도 열심히 따라가면서 만들어서 매우 만족스럽습니다!!



💡 오늘의 핵심 포인트

모든 것을 코딩할 수 없지만, 어디를 어떻게 바꿔야 하는지 알아야 바이브 코딩을 더 잘 할 수 있다는 것!
그리고 AI에게 요청할 때는 구현하고 싶은 기능을 최대한 상세하고 명확하게 작성하는 것이 중요해요.



📖 모르는 단어 찾아보기

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

[CSS (Cascading Style Sheets)]
웹페이지의 디자인과 스타일을 담당하는 언어예요. 색상, 폰트, 레이아웃 등 시각적인 요소를 꾸밀 때 사용해요.

[JS (JavaScript)]
웹페이지에 동적인 기능을 추가하는 프로그래밍 언어예요. 슬라이드쇼, 버튼 클릭 반응 등 인터랙티브한 동작을 만들 수 있어요.

[index.html]
웹사이트의 메인 페이지 파일이에요. 브라우저가 웹사이트를 열 때 가장 먼저 불러오는 파일이에요.

[슬라이드쇼 (Slideshow)]
여러 장의 이미지가 일정 시간마다 자동으로 전환되는 기능이에요.

[파일 분리]
하나의 파일에 HTML, CSS, JS를 모두 넣는 방식 대신, 역할에 따라 각각 별도 파일로 나눠서 관리하는 방식이에요. 유지보수가 훨씬 편해져요.



🙌 마무리

다음에는 좀 더 간단하게 만들어 달라고 하면서 수업을 따라가 보려고 합니다!
다음에는 git 실습 예정이니 또 새로운 내용 들고 찾아뵐게요 😊

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


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