🌐 GitHub Pages와 AI로 전문 포트폴리오 웹사이트 만들기 배우기

Source: Dev.to

강좌 개요

이 무료 실습형 강좌는 실제 공개 포트폴리오 웹사이트를 구축하면서 웹 개발, 디지털 제작, 그리고 전문적인 워크플로우를 소개합니다. 학생들은 기획, 구축, 테스트, 배포, 반복 과정을 즉시 적용하며 GitHub Pages, 최신 개발 도구, 그리고 학습 지원 AI를 활용해 전문 및 학술 환경에서 사용되는 실무 방식을 체험합니다. 코드를 복사하는 것이 아니라 AI가 생성한 코드를 이해하고 활용하는 것에 중점을 둡니다.

이 강좌는 누구를 위한 것인가?

학생들이 배우게 될 내용은?

기술 역량

• HTML, CSS, JavaScript 기본
• Git 및 GitHub Pages를 이용한 버전 관리
• 로컬 개발, 테스트, 배포 워크플로우

인지·전문가 역량

• 문제 해결 및 비판적 사고
• 웹 프로젝트의 기획 및 아키텍처 설계
• 새로운 도구와 기술에 대한 적응력

사회·협업 역량

• 기술 아이디어를 명확히 전달하기
• AI를 개발 파트너로 활용하기
• 사용자와 동료의 피드백을 반영하기

이러한 역량은 웹 개발을 넘어 모든 현대 기술 분야에 적용될 수 있습니다.

강좌 구성

기본

• 첫 번째 웹사이트 게시
• 코드가 어떻게 실시간 제품이 되는지 이해

코드 이해

• AI가 생성한 HTML, CSS, JavaScript를 읽고 수정

코딩 전 기획

• 코드 생성 전에 웹사이트 구조와 레이아웃 설계

전문 워크플로우

• 로컬 개발 환경 설정
• 배포 전 안전하게 변경 사항 테스트

제작·반복

• AI를 개발 파트너로 삼아 새로운 페이지와 컴포넌트 구축

피드백·개선

• 정적 사이트를 사용자 피드백을 통해 살아있는 프로젝트로 전환

학생들은 항상 왜 해당 개념을 배우는지, 그리고 어떻게 전체 웹사이트에 적용되는지를 파악합니다.

학습 지원으로서 AI의 책임 있는 사용

학습 평가는 어떻게 이루어지는가?

최종 프로젝트

이 강좌가 중요한 이유

기술과 인공지능이 점점 더 세상을 형성해 가는 시대에, 디지털 시스템이 어떻게 작동하는지를 이해하는 것은 필수입니다. 이 강좌는 학생들이 수동적인 사용자에서 자신감 있는 창작자, 문제 해결자, 비판적 사고자로 성장하도록 돕습니다. 이러한 역량은 오늘날과 내일의 디지털 사회에 핵심이 됩니다.