6편에서 파이썬과 SQLite를 활용해 우리 팀만의 맞춤형 사내 ERP 프로토타입을 완성했다면, 이제는 이 결과물들을 세상에 보여줄 차례입니다. 아무리 훌륭한 프로그램을 만들었어도, 내 컴퓨터 안에서만 돌아간다면 타인에게 내 역량을 증명하기 어렵습니다. 특히 취업이나 이직을 준비하는 기획자, 마케터, 디자이너, QA 직군에게는 "내가 AI를 활용해 이런 프로그램을 만들었습니다"라고 주소(URL) 하나로 보여줄 수 있는 웹 포트폴리오가 강력한 무기가 됩니다.
비개발자가 웹사이트를 만든다고 하면 HTML, CSS, 자바스크립트(JavaScript) 같은 복잡한 프론트엔드 기술부터 배워야 할 것 같아 지레 겁을 먹습니다. 하지만 우리에게는 강력한 AI 비서가 있습니다. 복잡한 코딩 언어를 깊게 파고들지 않고도, AI와 협업하여 단 하루 만에 깔끔하고 전문적인 포트폴리오 웹페이지를 세상에 배포하는 단계별 프로세스를 살펴보겠습니다.
1단계: 웹페이지의 구조와 UI 컴포넌트 기획하기
웹사이트를 만들 때 AI에게 무작정 "이쁜 포트폴리오 사이트 만들어줘"라고 하면 정체 모를 템플릿 코드만 뱉어냅니다. 우리가 원하는 결과물을 얻으려면 페이지에 들어갈 요소를 논리적으로 쪼개어 기획서를 전달해야 합니다. 면접관이나 협업 담당자가 방문했을 때 가장 매력적으로 느낄 수 있는 표준적인 포트폴리오 구조는 다음과 같습니다.
헤더(Header): 내 이름, 직무 타이틀, 그리고 깔끔한 프로필 이미지나 아이콘이 들어가는 상단 영역
자기소개 섹션: 내가 AI 바이브 코딩을 시작하게 된 계기와 이를 통해 해결하고자 하는 핵심 가치 서술
프로젝트 그리드(Grid): 내가 만든 프로그램(예: PDF 편집기, 사내 ERP 등)을 카드 형태로 나열하는 영역
프로젝트 상세 모달(Modal) 또는 팝업: 카드를 클릭했을 때 해당 프로그램의 개발 기간, 사용한 AI 도구, 직면했던 에러와 해결 과정(EEAT)을 상세히 보여주는 창
푸터(Footer): 이메일, 깃허브, 또는 링크드인 등 연락 가능한 정보 배치
이 구조를 메모장에 먼저 정리한 뒤, AI에게 "나는 HTML/CSS를 모르는 비개발자야. 위의 구조를 가진 싱글 페이지 포트폴리오 웹사이트를 만들고 싶어. 디자인은 모던하고 깔끔한 다크 모드 스타일로 원해. 복잡한 설정 없이 파일 하나로 실행할 수 있게 HTML 코드 안에 CSS 스타일시트와 자바스크립트를 모두 포함해서 통합 코드로 작성해줘"라고 지시합니다. 이 방식을 사용하면 파일 하나만 더블클릭해도 내 브라우저에서 바로 작동하는 웹페이지가 완성됩니다.
2단계: 깃허브 페이지스(GitHub Pages)를 통한 무료 호스팅 배포
내 컴퓨터 브라우저에서 웹페이지가 잘 뜨는 것을 확인했다면, 이제 인터넷이 연결된 누구나 내 사이트에 접속할 수 있도록 전 세계에 배포해야 합니다. 과거에는 서버를 빌리고 도메인을 사느라 비용과 시간을 들여야 했지만, 지금은 '깃허브 페이지스'라는 서비스를 이용하면 완벽하게 무료로 5분 만에 배포가 가능합니다.
처음 깃허브(GitHub)라는 단어를 들으면 개발자들의 전유물 같아서 거부감이 들 수 있습니다. 하지만 코드 관리 용도가 아니라 단순 배포용으로만 쓸 것이기 때문에 겁먹을 필요가 전혀 없습니다.
깃허브 회원가입 후 [New repository](새 저장소) 버튼을 누릅니다.
저장소 이름(Repository Name)을 설정하고 반드시 'Public(전체 공개)'으로 체크한 뒤 생성합니다.
AI가 만들어준 HTML 파일의 이름을 반드시
index.html로 변경합니다. (웹 서버가 가장 먼저 읽는 파일의 약속된 이름입니다.)깃허브 화면에 내
index.html파일을 마우스로 드래그 앤 드롭하여 업로드하고 하단의 'Commit changes' 버튼을 누릅니다.저장소 메뉴의 [Settings] - [Pages]로 이동하여 Source 항목을 'Deploy from a branch'로 두고 Branch를 'main'으로 설정한 뒤 저장(Save)합니다.
이렇게 설정하면 단 1~2분 만에 [https://본인아이디.github.io/저장소이름](https://본인아이디.github.io/저장소이름) 형태의 고유한 웹사이트 주소가 생성됩니다. 이 주소가 바로 이력서와 자기소개서에 당당히 적어 넣을 나만의 AI 포트폴리오 링크가 됩니다.
3단계: 면접관을 사로잡는 스토리텔링 콘텐츠 채우기
웹페이지의 뼈대와 주소가 완성되었다면, 이제 가장 중요한 '내용물'을 채워야 합니다. 단순히 "이 프로그램을 만들었습니다"라고 결과물만 덜렁 올려두는 것은 좋은 점수를 받기 어렵습니다. AI 시대의 면접관들은 결과물 자체보다 'AI를 활용해 문제를 해결해 나간 과정'을 더 중요하게 보기 때문입니다.
각 프로젝트 카드 안에는 반드시 다음과 같은 3가지 스토리라인이 녹아들어 가야 합니다.
기획 의도와 비효율 발견: "기존 업무에서 어떤 단순 반복 작업이 수십 분씩 걸리는 비효율을 발견했고, 이를 자동화하기 위해 기획했다."
AI와의 협업 과정 및 프롬프트 전략: "처음에는 에러가 발생했으나, 클로드 프로젝트에 전체 소스코드를 고정하고 컨텍스트를 유지하며 프롬프트를 수정해 나갔다."
에러 디버깅 경험: "개발 과정 중 라이브러리 충돌 에러가 발생했을 때, AI에게 에러 로그를 분석 시켜 특정 버전을 지정하는 방식으로 문제를 해결했다."
이처럼 내가 직접 부딪히고 해결한 전후 변화를 웹페이지에 상세히 기록해 두면, 링크를 클릭한 면접관은 당신을 '단순히 챗GPT에게 질문 좀 해본 사람'이 아니라 'AI를 도구로 삼아 실무 문제를 주도적으로 해결할 줄 아는 핵심 인재'로 인식하게 됩니다. 기술적 한계를 뛰어넘어 나만의 결과물을 온전히 시각화하는 순간, 당신의 포트폴리오 경쟁력은 압도적으로 높아집니다.
핵심 요약
비개발자도 HTML/CSS 문법에 매몰되지 않고, 구조적 UI 기획을 AI에게 명확히 전달함으로써 완성도 높은 싱글 페이지 웹 포트폴리오를 빌드할 수 있습니다.
빌드된
index.html파일을 무료 호스팅 서비스인 '깃허브 페이지스'에 업로드하는 것만으로 이력서에 기재 가능한 고유의 웹 주소를 확보할 수 있습니다.웹사이트 내부 콘텐츠에는 결과물 나열을 넘어, 비효율 발견부터 AI를 통한 디버깅 과정까지의 문제 해결 스토리를 녹여내야 EEAT 관점에서 신뢰성을 얻습니다.
다음 편 예고
다음 편에서는 기업 공채 및 수시 전형에서 가장 핵심이 되는 '면접관이 매료되는 AI 활용 경험 자소서 작성법 및 필수 항목 분석'을 통해, 실제 서류 합격률을 끌어올리는 문장 설계법을 다루겠습니다.
댓글 유도 질문
나만의 포트폴리오 웹사이트를 만든다면, 첫 화면 메인 타이틀에 나를 표현하는 어떤 문구(예: AI와 협업하는 탑티어 기획자)를 넣고 싶으신가요?