AI로 포트폴리오 웹사이트 만들고 공유하기

준비물

• 컴퓨터
• Claude 무료 계정 (claude.ai), 또는 ChatGPT 무료 계정
• 이력서 PDF 또는 경력과 프로젝트를 정리한 글
• 프로필 사진을 넣으려면 사진 파일 한 장 (선택)
• 사진을 넣는 경우 링크용 Netlify 무료 계정 (구글 계정으로 가입 가능)

이런 결과가 나옵니다

소개, 경력, 프로젝트, 기술, 연락처가 들어간 한 페이지 사이트. 링크 하나로 면접관이나 고객에게 보냅니다. 아래 예시는 가상 인물 김하늘입니다.

따라 하기

1. 1

   공개해도 되는 내용만 남기기

   이력서 PDF를 그대로 올리기 전에 확인하세요. 전화번호, 집 주소, 생년월일, 주민번호 같은 개인정보는 지우거나 가려서 올립니다. 포트폴리오는 링크를 받은 누구나, 나중에는 검색으로도 볼 수 있는 페이지가 될 수 있습니다.

   이렇게 되면 성공올릴 파일에 이메일 말고 개인 연락처가 없는지 눈으로 한 번 훑으면 됩니다.

   팁이전 회사의 비공개 자료, 고객 이름, 매출 수치도 공개해도 되는지 확인하세요. 불확실하면 빼는 쪽이 안전합니다.

2. 2

   claude.ai에 들어가 이력서 첨부하기

   claude.ai 에 로그인합니다. 대화창 왼쪽의 클립(첨부) 모양 버튼을 눌러 이력서 PDF를 고릅니다. ChatGPT는 chatgpt.com 에서 같은 방법으로 첨부합니다.

   이렇게 되면 성공대화창 위에 파일 이름이 작은 칩으로 붙어 있으면 됩니다.

3. 3

   프롬프트 붙여넣고 보내기

   파일이 붙은 상태에서 아래 프롬프트를 붙여넣고 보냅니다.

   붙여넣을 프롬프트프롬프트 복사

   첨부한 이력서를 바탕으로 나를 소개하는 한 페이지짜리 웹사이트를 만들어줘. 파일 하나로 만들어줘.
   
   - 순서: 한 줄 소개, 경력, 프로젝트 3개, 쓸 수 있는 기술, 연락처
   - 프로젝트는 카드로 꾸미지 말고 "제목, 한 줄 설명, 결과 숫자" 순서로 담백하게 정리해줘
   - 색은 두 가지만, 글꼴은 하나만. 움직이는 효과는 넣지 마
   - 휴대폰에서 먼저 보기 좋게
   - 연락처는 이메일 주소만 넣어줘. 전화번호, 집 주소, 생년월일은 절대 넣지 마
   - 이력서에 없는 내용은 지어내지 말고, 모자라면 "여기에 ○○을 적어주세요"라고 비워둬

   내 것으로 바꿀 곳

   • "프로젝트 3개"를 내 상황에 맞게 바꿉니다. 경력이 짧으면 "수업 과제나 개인 작업 2개"도 좋습니다.
   • "색은 두 가지만"에 "남색과 흰색"처럼 원하는 색을 적을 수 있습니다.
   • 영어 버전이 필요하면 마지막에 "영어로도 보여주는 버튼을 넣어줘"를 추가합니다.

   이렇게 되면 성공Claude는 오른쪽 결과물 창에 내 이력서 내용으로 채워진 소개 페이지가 나타납니다.

   팁ChatGPT에서 코드만 길게 나오면 "바로 볼 수 있게 Canvas로 보여줘"라고 말해보세요.

4. 4

   내용이 사실과 맞는지 읽어보기

   결과물 창을 위에서 아래로 읽으며 날짜, 회사 이름, 숫자가 이력서와 같은지 확인합니다. AI가 비슷하게 지어낸 내용이 있을 수 있습니다.

   이렇게 되면 성공모든 숫자와 이름이 이력서와 같으면 통과입니다.

   팁"여기에 ○○을 적어주세요"라고 비워진 곳은 직접 정보를 알려주면 채워줍니다.

5. 5

   말로 고치기

   문구와 모양을 한 번에 하나씩 말로 고칩니다.

   팁이렇게 말하면 됩니다. "경력 설명을 두 줄로 줄여줘", "프로젝트를 최신순으로 바꿔줘", "소개 문장을 좀 더 담백하게", "포인트 색을 진한 초록으로"

6. 6

   사진을 넣을지 정하기

   프로필 사진 없이도 충분합니다. 사진 없이 가려면 바로 다음 단계로 갑니다. 사진을 넣으려면 "맨 위에 profile.jpg 사진을 동그랗게 넣어줘"라고 말한 뒤, 완성 코드를 index.html로 저장하고 사진과 같은 폴더에 두어야 합니다.

   팁사진을 넣으면 Claude Publish가 아니라 Netlify Drop으로 올려야 합니다. 폴더 만들기, 저장, 끌어다 놓기 순서는 아래 "링크로 공유하기"에 있습니다.

7. 7

   링크로 만들어 보내기

   사진이 없다면 결과물 창 오른쪽 위 Publish(게시) 버튼으로 링크를 만듭니다. 사진이 있다면 폴더째 Netlify Drop에 올립니다. 자세한 순서는 아래 "링크로 공유하기"를 보세요.

   이렇게 되면 성공휴대폰 데이터로(와이파이 끄고) 링크를 열었을 때 페이지가 나오면 성공입니다.

8. 8

   지원서와 이메일에 링크 넣기

   링크를 이메일 서명, 자기소개서 끝, 링크드인 프로필에 붙입니다. 길면 Claude나 Netlify에서 이름을 바꿔 짧게 줄일 수 있습니다.

막히면

다음에 해볼 것

• 직접 구입한 도메인(예: kimhaneul.com)을 연결하면 명함에 넣기 좋습니다. Netlify 사이트 설정의 Domain 메뉴에서 연결합니다.
• 개발자라면 Claude Code로 Next.js 같은 틀에 만들어 여러 페이지로 키우는 방법도 있습니다. 처음에는 한 페이지로 충분합니다.

여기 쓰인 기능

다른 레시피