Gemini Canvas로 개발자 포트폴리오 한 번에 완성하기

워크숍 구현 중심 ⏱ 약 120~150분

 

0. 학습 목표

→ 이번 워크숍에서 무엇을 이해하고, 무엇을 만들고, 무엇으로 확인할지 먼저 정리합니다.

0.1 이번 글에서 다룰 내용

이번 글은 도구 활용 실습 중심 워크숍입니다.

 

HTML·CSS·JS를 처음부터 직접 짜지 않아도 됩니다.

Gemini Canvas에 이 강의에서 제공하는 프롬프트를 붙여넣으면 AI가 포트폴리오 코드를 대신 작성해 줍니다.

여러분이 할 일은 딱 두 가지입니다. 내 정보를 채우는 것, 그리고 프롬프트를 순서대로 실행하는 것입니다.

 

이번 워크숍은 "화면에서 실제로 일어나는 일 하나 = 한 단계"로 잘게 나눠 진행합니다.

로그인하는 순간, 버튼을 누르는 순간, 화면이 바뀌는 순간까지 빠짐없이 순서대로 따라가도록 구성했습니다.

그래서 단계 번호가 많아 보이지만, 한 단계에서 하는 일은 아주 작습니다.

막히는 지점이 거의 없도록 설계했으니 번호 순서대로만 진행하세요.

 

마지막 단계가 끝나면 실제 브라우저 주소창에 입력할 수 있는 URL이 생깁니다.

이력서에 "포트폴리오: yourname.netlify.app"으로 바로 쓸 수 있는 링크입니다.

오늘 만든 사이트 자체가 "AI 도구로 결과물을 만들어낸 경험"이 되기도 합니다.

 

구분	내용
이해할 것	Gemini Canvas가 무엇인지, 프롬프트로 포트폴리오를 어떻게 만드는지, 어떤 외부 도구가 왜 필요한지
만들 것	index.html → Netlify 배포 URL (예: yourname.netlify.app)
확인할 것	워크숍 종료 시점에 내 URL이 브라우저에서 열리고, 이력서에 첨부 가능한 상태인지

 

0.2 시작 전 준비물 체크

실습을 시작하기 전에 아래 항목이 준비되어 있는지 확인하세요. 계정은 모두 무료이며, 이번 워크숍에서는 구글 계정 하나만 있으면 대부분 진행됩니다.

준비물	용도	계정 필요 여부
Chrome 브라우저	Gemini Canvas 실행 (권장 브라우저)	불필요
구글 계정	Gemini 로그인, 구글 폼 만들기	필수 (Gmail 주소)
프로필 사진 1장	히어로 섹션에 넣을 사진	불필요 (없으면 생략 가능)
imgbb	사진을 인터넷 주소로 변환	불필요 (로그인 없이 업로드)
Netlify	완성 사이트를 인터넷에 배포	선택 (URL 이름 변경 시 필요)

💡 팁: 구글 계정이 없는 수강생이 있다면 워크숍 시작 전에 미리 만들어 두세요. 계정 생성은 본인 인증(휴대폰 번호)이 필요해 수업 중에 진행하면 시간이 많이 걸립니다. imgbb와 Netlify는 로그인 없이도 핵심 기능을 쓸 수 있으니, 계정은 구글 하나로 충분합니다.

 

0.3 이번 워크숍에서 직접 만드는 구조

이번 워크숍에서 만드는 파일과 결과물은 다음과 같습니다.

여러 파일이 생기지 않습니다. 최종 결과물은 파일 하나와 URL 하나입니다.

[내 컴퓨터]
└── index.html           ← 배포 직전에 저장하는 파일

[인터넷]
└── yourname.netlify.app ← 최종 배포 URL

포트폴리오 사이트 내부 섹션 구성 (기획 단계 후 확정됩니다)

index.html
├── 히어로 섹션         → 이름, 한 줄 소개, GitHub·연락처 버튼
├── 기술 스택 섹션      → 사용할 수 있는 언어·툴·프레임워크
├── 프로젝트 섹션       → 만든 것 2~3개 (제목·설명·사용 기술·링크)
├── 학력·교육 섹션      → 학교, 수강한 강의·부트캠프
├── 목표 섹션           → 어떤 개발자가 되고 싶은지
└── 연락처 섹션         → 이메일, GitHub, 구글 폼 링크

 

1. 구글 로그인하기

→ Gemini를 쓰려면 구글 로그인이 먼저입니다. 로그인 상태를 확인하는 것부터 시작합니다.

1.1 Gemini 사이트 접속하기

Chrome 브라우저를 열고 주소창에 아래 주소를 입력해 접속합니다.

https://gemini.google.com

화면이 열리면 오른쪽 위 모서리를 먼저 보세요. 로그인 상태인지 아닌지가 여기서 갈립니다.

 

1.2 로그인 상태 확인하고 로그인하기

오른쪽 위 모서리의 상태에 따라 다음과 같이 진행합니다.

오른쪽 위 모서리 상태	해야 할 일
내 프로필 사진(동그란 아이콘)이 보임	이미 로그인됨. 바로 2번 섹션으로 진행
"로그인" 버튼이 보임	버튼 클릭 → 구글 계정(Gmail) 선택 → 비밀번호 입력
계정 목록이 떠 있음	사용할 계정 클릭. 학교·회사 계정보다 개인 Gmail 권장

💡 팁: 학교나 회사에서 발급한 구글 계정은 관리자가 Gemini나 외부 서비스 사용을 막아둔 경우가 있습니다. 로그인 후 다음 단계에서 Canvas 버튼이 끝까지 안 보이면, 개인 Gmail 계정으로 다시 로그인해 보세요. 이 차이로 막히는 수강생이 매번 한두 명씩 나옵니다.

✔ 확인 기준: 오른쪽 위 모서리에 내 프로필 사진(동그란 아이콘)이 보이면 로그인 완료. "로그인" 글자가 아직 보이면 다시 클릭해 계정을 선택하세요.

 

2. Canvas 화면 열기

→ 프롬프트 입력창에서 Canvas를 켜고, 화면이 좌우로 나뉘는 것을 확인합니다.

2.1 입력창에서 Canvas 버튼 찾기

로그인이 되면 화면 아래쪽에 메시지를 입력하는 긴 입력창이 보입니다. 이 입력창 안쪽(또는 바로 옆)에 도구 아이콘들이 있고, 그중 [Canvas] 항목이 있습니다. 도구 메뉴가 접혀 있으면 입력창의 도구·더보기 아이콘을 눌러 펼친 뒤 Canvas를 선택합니다.

 

2.2 화면이 좌우로 나뉘는지 확인하기

Canvas를 켜고 다음 단계에서 첫 프롬프트를 보내면, 화면이 좌우 2분할로 바뀝니다. 왼쪽은 AI와 대화하는 채팅 영역, 오른쪽은 결과물(코드와 미리보기)이 나타나는 편집 영역입니다. 이 구조가 이번 워크숍 내내 작업 공간이 됩니다.

💡 팁: Canvas 버튼을 눌렀는데 화면이 안 나뉘는 것은 정상입니다. 버튼은 "이번 대화는 Canvas 모드로 하겠다"는 예약일 뿐, 실제 분할은 첫 메시지를 보낸 직후에 일어납니다. 그러니 지금 화면이 그대로여도 당황하지 말고 다음 단계로 넘어가세요.

✔ 확인 기준: 입력창에서 Canvas를 선택(활성화)했으면 완료. 화면 분할은 다음 3번 섹션에서 첫 프롬프트를 보낸 뒤 확인합니다. Canvas 항목이 끝까지 안 보이면 1번으로 돌아가 개인 Gmail로 로그인했는지 점검하세요.

 

3. 내 포트폴리오 정보 정리하기

→ 코딩을 시작하기 전에, 사이트에 들어갈 내 정보를 메모장에 미리 적어 둡니다.

아래 항목을 메모장이나 종이에 적어 두세요.

5번 코딩 단계에서 그대로 붙여넣게 됩니다.

비어 있는 항목은 일단 "준비 중"으로 채워도 됩니다. 완벽하지 않아도 시작할 수 있습니다.

항목	예시	내 정보
이름	김개발
한 줄 소개	"사용자 경험을 고민하는 프론트엔드 개발자 지망생"
기술 스택	HTML, CSS, JavaScript, Python, Git
프로젝트 1	투두리스트 앱 — HTML/CSS/JS, GitHub 링크
프로젝트 2	날씨 앱 — OpenWeather API 활용, 배포 링크
학력·교육	○○대학교 컴퓨터공학과 / ○○ 부트캠프 수료
목표	사용자 친화적인 UI를 만드는 프론트엔드 개발자
GitHub	https://github.com/username
이메일	email@example.com

💡 팁: 프로젝트 항목이 아직 없어서 막막하다면, 수업 시간에 만든 과제물이나 튜토리얼을 따라 만든 것도 괜찮습니다. 중요한 것은 "있다/없다"가 아니라 "무엇을 만들었고, 어떤 기술을 썼는지"를 한 줄로 설명할 수 있는지입니다. 이 워크숍을 계기로 GitHub에 올려두고 링크를 넣어 보세요.

 

4. 기획 단계 — 페이지 구조 잡기

→ 코딩에 들어가기 전에 어떤 섹션이 필요한지 AI에게 기획을 먼저 받습니다.

4.1 [프롬프트 1] 페이지 기획 요청하기

왼쪽 채팅 입력창에 아래 프롬프트를 붙여넣고 전송합니다. 이 첫 메시지를 보내는 순간 화면이 좌우로 나뉘며 Canvas가 본격적으로 열립니다.

나는 개발자 지망생이야. 취업·인턴 지원 때 쓸 포트폴리오 사이트를 만들고 싶어.
히어로 섹션, 기술 스택, 프로젝트, 학력·교육, 목표, 연락처가 들어간
원페이지 사이트를 기획해줘

💡 팁: "코딩해줘"가 아니라 "기획해줘"로 시작하는 이유가 있습니다. 기획 단계에서 먼저 섹션 목록을 받아보면, 내가 원하는 섹션이 빠져 있을 때 코딩 전에 추가 요청을 할 수 있습니다. 한 번에 코드를 받으면 섹션을 나중에 추가할 때 구조가 얽혀 수정이 어려워집니다.

 

4.2 빠진 섹션이 있으면 보완 요청하기

Gemini가 섹션 구성안을 제시하면, 원하는 섹션이 다 들어 있는지 확인합니다. 빠진 섹션이 있으면 같은 채팅창에 이어서 요청합니다.

거기에 '자격증' 섹션도 추가해줘

반대로 불필요한 섹션이 있으면 "○○ 섹션은 빼줘"라고 하면 됩니다. 이 기획안이 곧 코드의 뼈대가 되므로, 코딩 전에 섹션 목록을 확정해 두는 것이 좋습니다.

✔ 확인 기준: 화면이 좌우로 나뉘었고, Gemini가 히어로 / 기술 스택 / 프로젝트 / 학력 / 목표 / 연락처 섹션 구성안을 제시했으면 완료. 원하는 섹션이 모두 목록에 들어 있는지 확인하세요.

 

5. 코딩 단계 — 포트폴리오 첫 코드 만들기

→ 3번에서 정리한 내 정보를 넣어 HTML·CSS·JS가 하나로 합쳐진 포트폴리오 파일을 만듭니다.

5.1 [프롬프트 2] 내 정보로 포트폴리오 생성하기

4번 기획에 이어, 같은 채팅창에 아래 프롬프트를 보냅니다. (괄호) 안의 내용을 3번에서 정리한 내 정보로 교체한 뒤 전송하세요.

좋아, 방금 기획한 구조 그대로 코딩해줘.
아래는 내 정보야.
[이름] (본인 이름)
[한 줄 소개] (본인 한 줄 소개)
[기술 스택] (언어, 프레임워크, 툴 목록)
[프로젝트1] 제목: (프로젝트명) / 설명: (한 줄 설명) / 기술: (사용 기술) / 링크: (GitHub 또는 배포 URL)
[프로젝트2] 제목: (프로젝트명) / 설명: (한 줄 설명) / 기술: (사용 기술) / 링크: (GitHub 또는 배포 URL)
[학력·교육] (학교명 전공 / 수료한 강의나 부트캠프)
[목표] (어떤 개발자가 되고 싶은지 1~2문장)
[GitHub] (GitHub 프로필 URL)
[이메일] (이메일 주소)
HTML, CSS, JS를 한 파일에 담아서 만들어줘.
개발자 포트폴리오답게 다크 테마로 만들어줘.

💡 팁: 마지막 줄에 "다크 테마로 만들어줘"를 추가한 이유가 있습니다. 개발자 포트폴리오는 다크 배경이 기술적인 인상을 주고, 기술 스택 태그나 코드 스니펫이 더 잘 어울립니다. 라이트 테마를 원하면 이 줄을 빼거나 "밝고 깔끔한 흰색 테마로 만들어줘"로 바꾸면 됩니다.

 

5.2 미리보기 화면 확인하고 첫 수정하기

잠시 기다리면 오른쪽 Canvas 영역에 포트폴리오 미리보기가 나타납니다. 내 이름과 기술 스택이 화면에 보이는지 확인하세요. 결과가 기대와 다르면 같은 채팅창에 바로 수정 요청을 보냅니다.

상황	이어서 보낼 프롬프트
내용이 영어로 나옴	"모든 텍스트를 한국어로 바꿔줘"
특정 섹션이 빠짐	"○○ 섹션도 넣어줘"
기술 스택이 밋밋한 목록	"기술 스택을 뱃지 또는 태그 형태로 바꿔줘"

✔ 확인 기준: Canvas 우측에 포트폴리오 미리보기가 나타나고 내 이름과 기술 스택이 화면에 표시되면 완료. 한국어로 잘 나오는지, 정리해 둔 섹션이 모두 보이는지 확인하세요.

 

6. 디자인 단계 ① — 폰트 바꾸기

→ Google Fonts에서 폰트를 고르고, 그 이름으로 포트폴리오 폰트를 교체합니다.

6.1 Google Fonts에서 폰트 이름 확인하기

새 탭을 열고 https://fonts.google.com에 접속합니다. 왼쪽 필터에서 Language → Korean을 선택하면 한글을 지원하는 폰트만 보입니다. 마음에 드는 폰트의 영문 이름을 그대로 복사해 둡니다.

어떤 폰트가 좋을지 모르겠다면, 본인이 지향하는 분야를 기준으로 고르세요.

폰트명	분위기	추천 상황
IBM Plex Sans KR	모던하고 기술적	백엔드·풀스택 지향
Noto Sans KR	깔끔하고 전문적	범용, 어디서나 무난
Gowun Dodum	친근하고 읽기 쉬움	프론트엔드·디자인 지향

 

6.2 [프롬프트 3] 폰트 적용하기

Canvas 채팅창으로 돌아와 복사한 폰트 이름을 넣어 보냅니다.

폰트를 (폰트 이름)으로 바꿔줘

💡 강사 팁: 폰트 이름은 반드시 영문으로 입력해야 합니다. "IBM 플렉스 산스"가 아니라 Google Fonts에 표시된 영문 이름 그대로 복사하세요. 코드 영역에는 "코드 영역은 monospace 폰트로 유지해줘"를 추가하면 더 개발자다운 느낌이 납니다.

✔ 확인 기준: Canvas 미리보기의 글자 모양이 선택한 폰트로 바뀌면 완료. 안 바뀌면 폰트 이름을 영문으로 정확히 입력했는지 확인하세요.

 

7. 디자인 단계 ② — 아이콘 바꾸기

→ Google Fonts 아이콘 사이트에서 아이콘 이름을 찾아, 섹션별 아이콘을 교체합니다.

7.1 아이콘 이름 찾기

새 탭에서 https://fonts.google.com/icons에 접속해 원하는 아이콘을 영문으로 검색하고, 아이콘 이름을 복사합니다. 개발자 포트폴리오에 어울리는 추천 아이콘은 다음과 같습니다.

아이콘 이름	의미	추천 섹션
code	코드·개발	기술 스택
terminal	터미널	소개·히어로
folder_open	프로젝트 폴더	프로젝트
school	학력·교육	학력 섹션
rocket_launch	목표·성장	목표 섹션
alternate_email	연락처	연락처 섹션

 

7.2 [프롬프트 4] 아이콘 적용하기

바꾸려는 섹션 이름과 아이콘 이름을 넣어 보냅니다.

'(섹션명)' 아이콘을 이걸로 바꿔줘 (아이콘 이름)

예를 들어 기술 스택 섹션의 아이콘을 바꾸려면 "'기술 스택' 아이콘을 이걸로 바꿔줘 code"처럼 입력합니다.

✔ 확인 기준: 지정한 섹션 제목 옆 아이콘이 선택한 모양으로 바뀌면 완료. 다른 섹션 아이콘도 같은 방식으로 하나씩 교체할 수 있습니다.

 

8. 디자인 단계 ③ — 프로필 사진 넣기

→ 사진을 인터넷 주소로 바꾼 뒤, 그 주소를 히어로 섹션에 프로필 사진으로 넣습니다.

8.1 사진을 인터넷 주소로 바꾸기 (imgbb)

https://imgbb.com 접속
→ 'Start uploading' 또는 화면 가운데 업로드 영역 클릭
→ 내 프로필 사진 선택해서 업로드
→ 업로드 완료 후 'Get share links' 또는 링크 목록 열기
→ 'Direct link' 선택 (i.ibb.co/... 로 시작하는 주소) → 복사

 

Canvas는 내 컴퓨터에 있는 사진 파일을 직접 읽지 못합니다. 그래서 사진을 먼저 인터넷에 올려 "주소(URL)"로 바꿔야 합니다. 이 변환을 imgbb에서 무료로, 로그인 없이 할 수 있습니다.

 

https://imgbb.com

Upload Image — Free Image Hosting

💡 강사 팁: imgbb는 여러 종류의 링크를 보여주는데, 반드시 HTML full linked linked를 골라야 합니다. 'Viewer link'는 imgbb 페이지 주소라 사진이 안 뜨고, 'HTML code'는 코드 전체라 그대로 붙이면 깨집니다. 사진이 X로 나오는 수강생은 거의 다 이 링크를 잘못 고른 경우입니다.

 

8.2 [프롬프트 5] 프로필 사진 삽입하기

복사한 Direct link를 Canvas 채팅창에 넣어 보냅니다.

(이미지 URL) 이 사진을 히어로 섹션에 프로필 사진으로 넣어줘.
원형으로 잘라서 표시해줘.

💡 팁: "원형으로 잘라서"를 명시하면 CSS border-radius: 50%가 자동으로 적용됩니다. 사진이 없는 수강생은 이 단계를 건너뛰어도 됩니다. 나중에 사진이 생기면 같은 프롬프트로 언제든 추가할 수 있습니다.

✔ 확인 기준: 히어로 섹션에 원형 프로필 사진이 X 표시 없이 보이면 완료. X로 나오면 URL이 i.ibb.co로 시작하는지(Direct link인지) 다시 확인하세요.

 

9. 시각 효과 단계 — 히어로 섹션 꾸미기

→ 효과를 여러 개 추천받아 비교한 뒤, 마음에 드는 것을 골라 적용합니다.

9.1 [프롬프트 6] 시각 효과 추천받기

바로 적용하지 말고 먼저 여러 옵션을 받아 비교합니다.

히어로섹션이 좀 심심해. 개발자 포트폴리오답게 멋진 효과가 없을까? 5개 정도 추천해줘

💡 강사 팁: 개발자 포트폴리오에 잘 어울리는 효과가 따로 있습니다. 파티클 네트워크(연결된 점들이 움직이는 효과), 타이핑 효과(직함이 한 글자씩 타이핑되는 효과), 코드 빗줄기(매트릭스처럼 코드가 떨어지는 효과)는 개발자 포트폴리오에서 자주 보이는 패턴입니다. "개발자 포트폴리오답게"라는 표현을 프롬프트에 넣으면 이런 방향으로 추천해 줍니다.

 

9.2 [프롬프트 7] 효과 1개 골라서 적용하기

5개 중 무엇을 고를지 막막하다면, 아래 기준으로 하나만 선택하세요.

이런 인상을 원하면	추천 효과
차분하고 세련된 느낌	파티클 네트워크 (은은하게 움직이는 점)
눈길을 끄는 첫인상	타이핑 효과 (직함이 한 글자씩 입력됨)
개발자 느낌 강하게	코드 빗줄기 (매트릭스 스타일)

고른 번호를 채팅창에 입력합니다.

좋아 1번 적용해봐

 

9.3 [프롬프트 8] 효과 조합·교체하기 (선택)

마음에 드는 효과가 2개라면 함께 적용하거나, 적용한 효과가 별로면 다른 번호로 교체할 수 있습니다.

아까 추천해준 효과 중 2번, 3번을 같이 적용해줘
1번은 빼고 4번으로 바꿔줘

💡 강사 팁: 효과를 2~3개 이상 겹치면 오히려 산만해집니다. 포트폴리오는 채용 담당자가 프로젝트와 기술 스택을 빠르게 훑어보는 공간이므로, 히어로 섹션에만 효과를 집중하고 나머지 섹션은 깔끔하게 유지하는 것이 좋습니다.

✔ 확인 기준: 히어로 섹션에 선택한 시각 효과가 적용되고, 이름·소개 텍스트가 읽기 어렵지 않으면 완료. 텍스트가 효과에 묻히면 "이름과 소개 텍스트에 반투명 배경 또는 그림자 넣어줘"로 요청하세요.

 

10. 인터랙션 단계 ① — 디자인용 연락 양식 만들기

→ 먼저 Canvas 안에 연락 양식의 "모양"을 만듭니다. 실제 응답 수집은 다음 단계에서 연결합니다.

10.1 [프롬프트 9] 연락 양식 추가하기

방문자가 채용 제안이나 협업 요청을 남길 수 있게 연락 양식을 만들어줘.
이름, 소속(회사명 또는 학교), 이메일, 문의 유형(채용 제안 / 프로젝트 협업 / 기타),
메시지를 받고 싶어.

여기서 만든 폼은 화면에 보이기만 하는 디자인 모형입니다. 아직 누가 작성해도 내게 전달되지 않습니다. 실제로 응답을 받으려면 11번에서 구글 폼을 만들어 연결해야 합니다.

✔ 확인 기준: 연락처 섹션에 이름·소속·이메일·문의 유형·메시지 입력칸이 화면에 나타나면 완료. 입력 항목이 빠졌으면 "○○ 항목도 추가해줘"로 보완하세요.

 

11. 인터랙션 단계 ② — 구글 폼 만들기

→ Canvas 밖 새 탭에서 실제 응답을 받을 구글 폼을 만들고, 연결할 링크를 복사합니다.

11.1 빈 양식 만들고 항목 추가하기

이 단계는 Canvas가 아닌 브라우저 새 탭에서 진행합니다. 구글 폼은 1번에서 로그인한 구글 계정으로 바로 사용할 수 있습니다.

https://forms.google.com 접속
→ '빈 양식'(+ 아이콘) 선택
→ 10단계 항목 그대로 추가
   (이름 / 소속 / 이메일 / 문의 유형 / 메시지)
   · 문의 유형은 '객관식' 질문으로 만들면 선택형이 됩니다
   · 메시지는 '장문형' 질문으로 만듭니다

 
https://forms.google.com ☜

 

11.2 응답 이메일 알림 켜기

누군가 폼을 제출하면 메일로 알 수 있게 알림을 켜둡니다. 화면 위쪽의 '응답' 탭을 누른 뒤 점 세 개(︙) 메뉴에서 알림 설정을 켭니다.

상단 '응답' 탭 클릭
→ 오른쪽 점 세 개(︙) 메뉴 클릭
→ '새 응답에 대한 이메일 알림 받기' 체크

 

 

11.3 폼 링크 복사하기

오른쪽 위 '게시' 버튼을 눌러 링크를 복사합니다.

오른쪽 상단 '보내기' 버튼 클릭
→ 링크 아이콘(🔗) 탭 선택
→ 'URL 단축' 체크
→ 'https://forms.gle/...' 주소 복사

💡 강사 팁: 링크를 복사한 뒤 새 탭에서 직접 한 번 제출해 보세요. 응답이 저장되고 알림 메일이 오는지 확인하면 안심입니다. 채용 담당자가 연락을 보냈는데 알림을 못 받으면 기회를 놓칠 수 있습니다.

✔ 확인 기준: https://forms.gle/... 형태의 URL이 복사됐고, 그 URL을 브라우저에서 열었을 때 폼이 정상 표시되면 완료. '링크' 탭을 선택했는지, 'URL 단축'을 체크했는지 확인하세요.

 

12. 인터랙션 단계 ③ — 버튼에 폼 연결하기

→ 11번에서 복사한 구글 폼 링크를 '연락하기' 버튼에 연결합니다.

12.1 [프롬프트 10] 버튼에 링크 걸기

Canvas 채팅창으로 돌아와, 복사한 구글 폼 URL을 아래 프롬프트에 붙여넣습니다.

히어로섹션에 있는 '연락하기' 버튼에 구글 폼 링크를 걸어줘.
링크는 https://forms.gle/(복사한 주소) 이걸로 새 창에서 열리게 해줘.

💡 강사 팁: "새 창에서 열리게"를 꼭 명시하세요. 이 한 마디로 버튼 클릭 시 포트폴리오 사이트에서 벗어나지 않도록(target="_blank") 처리됩니다. 채용 담당자가 폼을 작성하다 뒤로 가기를 눌러도 포트폴리오로 돌아올 수 있어야 합니다.

✔ 확인 기준: Canvas 미리보기에서 '연락하기' 버튼 클릭 시 구글 폼이 새 탭으로 열리면 완료. URL을 정확히 붙여넣었는지, "새 창에서 열리게"를 프롬프트에 포함했는지 확인하세요.

 

13. 배포 단계 ① — index.html 파일로 저장하기

→ Canvas 코드를 복사해 내 컴퓨터에 index.html 파일로 저장합니다.

13.1 Canvas에서 코드 복사하기

Canvas 우측 상단의 '코드 복사' 버튼을 클릭합니다. 코드 전체가 복사됩니다.

 

13.2 메모장에 붙여넣고 index.html로 저장하기

메모장(Windows) 또는 텍스트 편집기(Mac)를 열고 붙여넣은 뒤 저장합니다. 이때 파일 이름이 가장 중요합니다.

파일 이름은 반드시 index.html 이어야 합니다.

[Windows 메모장]
파일 → 다른 이름으로 저장
→ 파일 형식을 '모든 파일(*.*)'로 변경  ← 이걸 안 하면 .txt가 붙습니다
→ 파일 이름에 index.html 입력 → 저장

[주의] index.html.txt 처럼 .txt가 붙으면 배포되지 않습니다.

저장 후 탐색기에서 파일 아이콘이 브라우저(Chrome 등) 모양으로 보이면 올바르게 저장된 것입니다. 더블클릭하면 내 포트폴리오가 브라우저에서 열립니다.

💡 강사 팁: 파일 형식을 '모든 파일'로 바꾸는 단계를 빠뜨리면 메모장이 자동으로 .txt를 붙여 index.html.txt가 됩니다. 이러면 다음 배포 단계에서 빈 화면만 나옵니다. 저장 후 파일 아이콘 모양을 꼭 확인하는 습관을 들이세요.

✔ 확인 기준: 파일 이름이 정확히 index.html이고, 더블클릭했을 때 브라우저에서 포트폴리오가 열리면 완료. 아이콘이 메모장 모양이면 .txt가 붙은 것이니 다시 저장하세요.

 

14. 배포 단계 ② — Netlify에 올려 URL 받기

→ index.html을 Netlify에 드래그해 올리고, 발급된 포트폴리오 URL을 확인합니다.

14.1 Netlify Drop에 파일 올리기

Netlify Drop은 로그인 없이도 파일을 드래그하는 것만으로 사이트를 배포해 줍니다.

https://app.netlify.com 접속

→ 1. 구글로 로그인합니다. 

→ 2. 오른쪽 상단의 add new project를 클릭합니다.

→ 3. 하단의 Upload your project files 에 13단계에서 저장한 index.html 파일을 화면 영역으로 드래그해서 놓기

→ 30초 내외 후 ○○○○.netlify.app 주소 자동 발급

 

https://app.netlify.com/

Netlify

 

✔ 확인 기준: 업로드 후 ○○○○.netlify.app 형태의 주소가 화면에 나타나면 완료. 빈 화면이 나오면 13단계로 돌아가 파일 이름이 index.html인지(.txt가 안 붙었는지) 확인하세요.

 

14.2 발급된 URL로 직접 접속해 보기

발급된 주소를 브라우저 주소창에 직접 입력해 접속합니다. Canvas에서 보던 포트폴리오가 그대로 열리면 배포 성공입니다. 화면이 이상하면 강력 새로고침(Ctrl + Shift + R)을 한 번 해보세요.

 

15. 배포 단계 ③ — URL 이름 바꾸기 (선택)

→ 임의의 주소를 이력서에 넣기 좋은 이름으로 바꿉니다. 이 단계에는 Netlify 로그인이 필요합니다.

Netlify가 자동으로 임의의 이름(예: relaxed-curie-abc123.netlify.app)을 붙여줍니다. 아래 순서로 바꿉니다.

Netlify 대시보드 → 내 사이트 클릭
→ Site settings → Change site name
→ yourname-dev 또는 yourname-portfolio 형태로 변경
→ 결과: yourname-dev.netlify.app

💡 강사 팁: 이력서에 넣을 URL은 짧고 기억하기 쉬울수록 좋습니다. relaxed-curie-abc123.netlify.app보다 kimgaebal-dev.netlify.app이 훨씬 전문적으로 보입니다. URL을 바꾼 뒤에는 이전 주소로 접속이 안 되니, 이력서에 넣기 전에 최종 URL을 확정하세요.

✔ 확인 기준: 바꾼 이름의 새 주소(yourname-dev.netlify.app)로 접속했을 때 포트폴리오가 열리면 완료. 이전 주소는 더 이상 동작하지 않으니 새 주소만 사용하세요.

 

16. 수정 후 다시 배포하기

→ 배포 뒤에 내용을 고치는 흐름을 익혀, 포트폴리오를 계속 업데이트할 수 있게 합니다.

배포는 끝이 아닙니다. 새 프로젝트가 생기거나 오타를 발견하면 같은 방법으로 다시 올리면 됩니다. 수정·재배포 흐름은 다음과 같습니다.

Canvas에서 채팅으로 수정 요청
        ↓
'코드 복사' → 메모장에 붙여넣기
        ↓
index.html로 다시 저장 (덮어쓰기)
        ↓
Netlify에 다시 드래그 업로드   ← 같은 주소로 내용만 갱신됨

Netlify에 로그인해 둔 상태라면, 같은 사이트의 'Deploys' 영역에 파일을 다시 드래그하는 것만으로 기존 주소를 유지하며 내용이 갱신됩니다.

💡 강사 팁: Canvas 대화를 닫지 말고 그대로 두면 나중에 같은 대화에서 이어서 수정할 수 있습니다. 대화가 사라졌다면 5번 프롬프트(내 정보 + 다크 테마)부터 다시 만들어야 하니, 완성된 코드는 메모장 파일로 꼭 보관해 두세요.

✔ 확인 기준: 수정한 내용을 다시 올린 뒤, 같은 URL을 강력 새로고침(Ctrl + Shift + R)했을 때 바뀐 내용이 반영되면 완료.

 

17. 흔한 오류와 해결 방법

→ 오류가 나오면 어느 단계에서 막혔는지 먼저 생각합니다.

오류 상황	원인 및 해결 방법
로그인 버튼만 보이고 진행이 안 됨	구글 로그인 미완료. 오른쪽 위 모서리에 프로필 사진이 뜰 때까지 로그인
Canvas 버튼이 안 보임	학교·회사 계정 제한일 수 있음. 개인 Gmail로 다시 로그인 후 새로고침
화면이 좌우로 안 나뉨	첫 프롬프트를 보내야 분할됨. 4번 기획 프롬프트를 전송했는지 확인
기획 단계에서 섹션이 빠짐	코딩 전에 "○○ 섹션도 추가해줘" 요청으로 보완
포트폴리오 내용이 영어로 나옴	"모든 텍스트를 한국어로 바꿔줘" 요청
프로필 사진이 X 표시로 나옴	imgbb의 Direct link(i.ibb.co로 시작하는 URL) 사용 여부 확인
폰트가 안 바뀜	폰트 이름을 영문으로 정확히 입력했는지 확인 (예: "IBM Plex Sans KR")
기술 스택이 텍스트 목록으로만 나옴	"기술 스택을 뱃지 또는 태그 형태로 바꿔줘" 요청
시각 효과 때문에 텍스트가 안 보임	"이름과 소개 텍스트에 반투명 배경 또는 그림자 추가해줘" 요청
구글 폼 응답 알림이 안 옴	'응답' 탭 → 점 세 개(︙) → '이메일 알림 받기' 체크 여부 확인
버튼 클릭 시 구글 폼이 안 열림	구글 폼 URL을 정확히 붙여넣었는지, "새 창에서 열리게"를 명시했는지 확인
Netlify 업로드 후 빈 화면	파일명이 index.html인지, .txt가 붙지 않았는지 확인
URL 이름을 못 바꿈	이름 변경은 Netlify 로그인 후에만 가능. 15번 순서로 로그인 먼저
URL 이름 변경 후 이전 URL 접속 안 됨	변경 즉시 이전 URL은 만료됨. 새 URL로 이력서 업데이트 필요
수정 후 변경 내용이 안 보임	강력 새로고침(Ctrl+Shift+R)으로 캐시를 비우고 다시 확인

 

18. 워크숍 마무리 — URL 완성 및 이력서 연결

→ 완성된 포트폴리오 URL을 이력서와 GitHub에 연결하는 것까지 마무리합니다.

배포가 완료되면 아래 세 곳에 URL을 추가해 두세요.

위치	추가 방법
이력서	"포트폴리오: yourname-dev.netlify.app" 형태로 상단에 추가
GitHub 프로필	github.com/(username) → Edit profile → Website 항목에 URL 입력
LinkedIn (있다면)	프로필 → Contact info → Website 추가

지금 옆 사람의 포트폴리오 URL을 서로 열어보고, 프로젝트 섹션에서 "이 사람은 어떤 기술을 쓰는지"를 한눈에 파악할 수 있는지 확인해 보세요. 채용 담당자가 포트폴리오를 보는 방식을 직접 경험해보는 것입니다.

 

18.1 이번 워크숍 핵심 정리

- Gemini Canvas는 프롬프트만으로 HTML·CSS·JS 포트폴리오를 만들 수 있는 AI 도구다
- "로그인 → 기획 → 코딩 → 디자인 → 시각효과 → 인터랙션 → 배포" 순서로 진행했다
- 프롬프트는 "한 번에 다" 요청하기보다 단계별로 나눌수록 수정이 쉬워진다
- imgbb(이미지 URL), Google Forms(문의 폼), Netlify Drop(무료 배포)은 코딩 없이 쓰는 핵심 외부 도구다
- 완성된 코드는 메모장 파일로 보관하고, 같은 주소에 다시 드래그하면 언제든 갱신된다
- 이 워크숍에서 만든 포트폴리오는 이력서에 바로 첨부 가능한 실제 URL이다

→ 워크숍 이후 응용: 아래 19번 섹션의 고도화 프롬프트 패턴으로 포트폴리오를 더 다듬을 수 있습니다. 기술 스택 시각화, 프로젝트 카드 강화, 모바일 최적화, GitHub 잔디 위젯 추가 등을 순서 없이 원하는 것부터 적용해 보세요.

 

19. 한 단계 더 — 포트폴리오 고도화 프롬프트 패턴

→ 워크숍 이후 포트폴리오를 더 다듬고 싶을 때 바로 쓸 수 있는 프롬프트입니다.

19.1 기술 스택 시각화

기술 스택을 뱃지 형태로 바꿔줘. 숙련도에 따라 색을 다르게 표시해줘
기술 스택에 각 언어·툴의 공식 색상을 적용해줘

 

19.2 프로젝트 섹션 강화

프로젝트 카드에 GitHub 링크와 배포 링크를 버튼으로 추가해줘
프로젝트 카드에 마우스를 올리면 설명이 나타나는 효과를 넣어줘

 

19.3 모바일 최적화

모바일에서도 포트폴리오가 잘 보이게 반응형으로 조정해줘
모바일에서는 메뉴를 햄버거 버튼으로 바꿔줘

 

19.4 검색 노출 최적화

페이지 제목을 '(이름) | 프론트엔드 개발자 포트폴리오'로 바꿔줘
검색 결과에 나올 설명문(메타 디스크립션)을 "○○를 잘하는 개발자 지망생 (이름)의 포트폴리오"로 추가해줘

 

19.5 GitHub 잔디 위젯 추가

히어로 섹션 아래에 내 GitHub 활동 현황을 보여주는 GitHub stats 위젯을 추가해줘.
GitHub 사용자명은 (username)이야.