AI와 함께 첫 웹페이지 만들기
지금까지 배운 HTML, CSS, 프롬프트를 모아 AI와 함께 자기소개 페이지를 완성합니다. 만들고, 고치고, 다듬는 전체 흐름을 경험합니다.
직접 하나를 완성해봅시다
이번에는 배운 것을 모아 자기소개 페이지를 만듭니다. 이름, 한 줄 소개, 관심사 목록, 연락 링크가 들어간 한 페이지입니다. AI와 함께 만들고 다듬는 전체 흐름을 경험하는 것이 목표입니다.
1단계: 뼈대 요청하기
-
AI(Claude 등)에게 다음과 같이 요청합니다.
AI에게 이렇게 입력하세요자기소개 페이지를 만들고 싶어. 이름, 한 줄 소개, 관심사 3개 목록, 이메일 링크가 들어간 HTML 한 파일을 만들어줘. CSS는 같은 파일
<style>안에 넣고, 상아색(#F8F7F0) 배경에 검정(#1a1a1a) 글씨, 가운데 정렬로 해줘. 외부 라이브러리는 쓰지 마. -
받은 코드 전체를 복사해 CodePen 또는
index.html파일에 붙여넣습니다. -
미리보기로 결과를 확인합니다.
2단계: 내 내용으로 바꾸기
코드 안의 예시 텍스트를 직접 본인 정보로 바꿉니다. <h1> 의 이름, <p> 의 소개, <li> 의 관심사, <a href> 의 이메일 주소를 수정하세요.
3단계: 다듬기
마음에 들지 않는 부분을 하나씩 개선합니다.
-
여백 : “전체적으로 여백을 더 넓혀서 시원하게 보이게 해줘.”
-
글꼴 크기 : “이름은 더 크게, 소개 글은 조금 작게 해줘.”
-
강조 : “관심사 목록 앞에 작은 점 대신 짧은 줄을 넣어줘.”
하나 바꿀 때마다 결과를 확인하며 진행합니다.
4단계: 스스로 점검
- 모든 글자가 내 정보로 바뀌었나요?
- 이메일 링크를 눌렀을 때 메일 작성 화면이 뜨나요?
- 모바일 화면에서도 깨지지 않나요? (브라우저 창을 좁혀 확인)
다음 단계
정적인 페이지를 만들었으니, 이제 자바스크립트로 버튼이 동작하게 만들어 페이지에 생명을 불어넣습니다.