학습 목표
- 실전 1. 개인 포트폴리오 웹사이트의 역할과 적용 조건을 설명할 수 있다.
- 소개 3줄·작업물 3개·연락 링크와 공개 범위를 정하세요.
- 선택한 정적 호스팅에 배포하고 실제 주소에서 점검·복구 방법을 기록하세요.
사전 지식
앞선 서비스 규모에 맞춰 아키텍처 확장하기를 먼저 읽으면 용어를 이해하기 쉽습니다. 이미 아는 내용이면 이 장부터 시작해도 됩니다.
개념 이해
나를 소개하고 작업물을 보여주는 정적 사이트를 만듭니다. 로그인과 데이터베이스 없이 첫 페이지를 완성해 기획→프롬프트→디자인→반응형→배포의 전 과정을 경험합니다.
완성할 결과
소개, 작업물 카드, 연락 링크가 있는 한 페이지입니다. 공개할 수 있는 정보와 이미지 사용 권한을 먼저 확인합니다.
AI 요청과 디자인
대상 독자·주요 행동·글자·여백·모바일 배치를 설명합니다. 큰 장식보다 작업물을 읽기 쉽게 보여줍니다.
정적 사이트와 배포
HTML·CSS·이미지를 정적 호스팅으로 전달합니다. 상대 경로·이미지 크기·HTTPS·도메인과 실제 링크를 확인합니다.
실제 사용 사례
작업물 3개와 GitHub 링크를 준비하고 모바일에서 카드를 한 열로 보여주세요. 처음에는 HTML 파일 하나로 시작한 뒤 반복 컴포넌트가 생길 때 구조를 나눌 수 있습니다.
단계별 실습
실습은 운영 서비스가 아닌 별도 연습 프로젝트에서 진행하세요. 기존 파일이 있다면 변경 전 기록을 남깁니다.
- 소개 3줄·작업물 3개·연락 링크와 공개 범위를 정하세요.
- 아래 HTML을 새 연습 폴더의 index.html로 저장하고 브라우저에서 여세요.
- AI에 정보 우선순위와 모바일·키보드 기준을 전달해 디자인을 개선하세요.
- 화면 폭·확대·링크·이미지 대체텍스트를 확인하세요.
- 선택한 정적 호스팅에 배포하고 실제 주소에서 점검·복구 방법을 기록하세요.
코드와 프롬프트
아래 코드는 외부 라이브러리 없이 브라우저에서 파일을 열 수 있는 환경의 예시입니다. 실제 프로젝트의 버전과 기존 구성을 확인한 뒤 필요한 부분만 적용하세요.
html
<!doctype html>
<html lang="ko"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>나의 포트폴리오</title>
<style>body{font:16px/1.7 system-ui;margin:0;color:#24212c}main{max-width:900px;padding:40px 20px;margin:auto}.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}article{border:1px solid #eee;border-radius:16px;padding:20px}a{color:#7147eb}a:focus-visible{outline:3px solid #7147eb}</style>
<main><h1>만드는 사람, 나의 이름</h1><p>내가 해결하고 싶은 문제와 만드는 것을 소개합니다.</p>
<h2>작업물</h2><section class="works" aria-label="작업물"><article><h3>첫 프로젝트</h3><p>해결한 문제와 내가 맡은 일을 적습니다.</p><a href="https://github.com/">작업 보기</a></article></section></main>
</html>아래 요청에서 대괄호 부분을 내 프로젝트에 맞게 바꾼 뒤 AI 도구에 전달하세요.
AI에게 요청하기
개인 포트폴리오를 만들고 싶어. 대상은 [방문자], 소개는 [내용], 작업물은 [3개], 주 행동은 [연락/작품 보기]야. 정적 HTML/CSS로 시작하고 작은 화면·키보드·오류 링크를 확인해줘. 배포 환경과 실제 게시 전 공개할 정보도 점검해줘.자주 발생하는 문제와 해결
| 문제와 원인 | 해결 방법과 확인 기준 |
|---|---|
| 연락 버튼에 민감한 개인 정보가 노출됨 | 공개할 업무 연락처만 사용합니다. |
| 내 컴퓨터에서만 이미지가 보임 | 대소문자·상대 경로·업로드된 파일을 확인합니다. |
핵심 요약
- 가장 작은 정적 결과로 배포를 경험합니다.
- 완료 조건은 실제 URL에서 작품과 연락 링크를 사용할 수 있는 것입니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 요금·사용 한도·제품 기능·설정 경로는 변경될 수 있으므로 작업 직전 공식 문서와 설치 버전을 확인하세요.