본인 명함 한 장이 그대로 펼쳐지는 한 페이지 이력서·포트폴리오 사이트를 1시간 안에 완성합니다. 콘텐츠 정리 → Bolt.new 프롬프트 → 결과 검토 → 디자인 다듬기 → 무료 배포까지 5단계로 끊어 안내해서, 디자인 감각이 없으셔도 보기 좋은 결과가 손에 잡히도록 구성했어요. 면접관이 PDF 이력서 상단의 한 줄짜리 URL을 클릭했을 때 보여줄 첫인상을 만드는 게 목표입니다.
📑 목차
🎯 왜 비전공자에게 이력서 사이트가 의외로 강력한가
이력서 사이트라고 하면 개발자만 만드는 거라고 생각하기 쉬워요. 실제로는 정반대입니다. 비전공 직군일수록 본인을 명함처럼 한 화면에 정리해두면 면접관·헤드헌터·잠재 클라이언트의 첫인상을 본인이 직접 통제할 수 있어요. PDF 이력서는 한 줄 한 줄을 읽혀야 가치가 전달되는 반면, 웹 이력서는 5초 안에 본인 결과물 분위기와 톤을 보여줄 수 있습니다.
그리고 이 5초가 의외로 큽니다. 채용 담당자는 보통 한 사람의 자료를 1~2분 안쪽에 빠르게 훑어요. 이때 PDF만 보낸 지원자와, PDF 상단에 본인 사이트 URL이 한 줄 들어간 지원자는 받는 인상이 달라집니다. 같은 경력이라도 후자 쪽이 “본인 결과물을 정리할 줄 아는 사람”이라는 신호를 한 번 더 줘요.
예전에는 이걸 만들려면 React·Next.js·CSS·배포까지 직접 다뤄야 했지만, 2026년에는 Bolt.new나 Cursor 같은 AI 도구에 한국어로 부탁하면 한 시간 안쪽으로 첫 결과물이 손에 들어옵니다. 이 글에서는 그 1시간을 다섯 단계로 잘라서 안내해드릴게요.
🆚 PDF 이력서 vs 웹 이력서 — 무엇을 언제 쓸까
둘 중 하나를 고르는 게 아니라 둘 다 쓰는 게 정답입니다. 다만 각각 잘 맞는 자리가 다르니, 어디에 뭘 쓸지 미리 잡고 가시는 게 좋아요.
| 항목 | PDF 이력서 | 웹 이력서·포트폴리오 |
|---|---|---|
| 제출 방식 | 이메일 첨부 / 채용 사이트 업로드 | URL 한 줄 공유 |
| 장점 | 인쇄·보관·텍스트 검색 편함 | 이미지·링크·인터랙션 가능, 첫인상 강함 |
| 단점 | 읽혀야 가치 전달, 시각적 한계 | 오프라인 저장 어려움, 만드는 데 시간 필요 |
| 잘 맞는 상황 | 공식 지원, 사내 인사 시스템 업로드 | 네트워킹, SNS·LinkedIn 프로필, 사이드프로젝트 소개 |
| 권장 활용 | 본문 | PDF 상단의 한 줄짜리 링크 + 본인 SNS 바이오 |
가장 효과적인 조합은 PDF 이력서 맨 위에 “Portfolio: your-name.vercel.app” 한 줄을 두는 방식이에요. PDF 본문은 텍스트 위주로 단정하게 두고, 시각적 인상이나 작품 디테일은 사이트로 넘기는 거죠. 이 글에서 만들 건 후자입니다.
👀 완성될 사이트 모습 미리보기
1시간 뒤 손에 들어올 결과물은 이런 모습이에요. 한 페이지 안에 본인 사진·소개·경력·작품·연락처가 깔끔하게 정리된 형태입니다. 다크 모드 단정한 톤이 가장 무난해서 비전공자분들의 첫 작품으로 잘 어울려요.
핵심은 정보 위계예요. 가장 위엔 “이 사람이 누구인지” (사진·이름·한 줄 소개), 그 아래로 “어떤 사람인지” (About), 그 아래로 “뭘 했는지” (경력·작품). 면접관 시선이 위에서 아래로 자연스럽게 흐르는 구조라 5초 만에 본인을 파악할 수 있게 됩니다.
📦 시작 전 준비물 4가지
1시간 공약이 정확히 맞아 떨어지려면, 도구를 켜기 전에 아래 네 가지를 미리 준비해두시는 게 좋아요. 콘텐츠가 머릿속에만 있으면 도구 안에서 정리하는 시간이 폭발적으로 늘어납니다.
📷 프로필 사진 1장
증명사진 같은 정장이 아니어도 됩니다. 표정 자연스럽고 배경 단정한 사진 한 장이면 충분해요. 정사각형으로 크롭해두시면 사이트 안에서 원형으로 보여주기 편합니다. 본인이 부담스러우면 본인 이름 이니셜을 컬러 배경 위에 띄운 아바타로 대체해도 자연스러워요.
📝 한 줄 소개와 About 단락
본인을 한 문장으로 표현하는 카피 한 줄(20자 안쪽)과, 그 아래 펼칠 두세 문장 분량의 자기소개를 미리 텍스트 파일에 적어두세요. 이 부분이 잘 잡혀 있으면 사이트의 첫인상이 거의 다 결정됩니다.
| 덜 좋은 한 줄 소개 | 더 나은 한 줄 소개 |
|---|---|
| “안녕하세요, OOO입니다” | “비전공자에서 시작해 바이브코딩으로 사이드프로젝트를 만드는 사람” |
| “열정 가득한 인재” | “교육 5년, 사용자 입장의 도구를 만드는 사람” |
| “개발에 관심이 많습니다” | “매일 쓰는 작은 도구를 직접 만들어보는 비전공자 메이커” |
왼쪽 열의 공통점은 “누구나 쓸 수 있는 문장”이라는 점이에요. 본인을 한 문장으로 좁혀내려면 약간 어색해도 직군이나 결과물의 단서가 들어가는 편이 면접관 기억에 훨씬 잘 남습니다.
🧭 경력 3개 (연도 · 회사·기관 · 역할)
가장 최근 것부터 위에서 아래로 3개 정도면 충분해요. 각 항목은 한 줄로 압축합니다. “2024–현재 · OOO 회사 · 신입 마케터, 콘텐츠 운영 · SNS 팔로워 +30%” 같은 식이에요. 숫자가 들어가는 성과가 한 가지라도 있으면 면접관 시선이 거기서 멈춥니다.
🛠️ 작품·프로젝트 3개
학교 과제·동아리·사이드프로젝트·바이브코딩 결과물 무엇이든 좋습니다. 각 작품마다 이름·한 줄 설명·사용 기술/도구 정도면 충분해요. 작품이 아직 부족하다 싶으면 이 글의 다음 단계로 별도 정리해둔 바이브코딩 프로젝트 아이디어 10가지 중 한두 개를 먼저 만들고 오시면 됩니다.
🚀 1시간 가이드 — 5단계
준비물이 끝났으면 이제 본격 작업입니다. 다섯 단계가 시간을 어떻게 쪼개 쓰는지 먼저 한 그림으로 보여드릴게요.
🔢 단계 1. 콘텐츠 정리 (10분)
도구를 켜기 전에 메모장 하나만 열어두세요. 위 준비물 4가지(이름·한 줄 소개·About·경력 3개·작품 3개·연락처)를 한 텍스트 파일에 한꺼번에 적습니다. 이 단계의 핵심은 글로 끝낼 수 있는 일을 글로 끝내는 거예요. 사이트 안에서 콘텐츠를 정리하기 시작하면 디자인을 보면서 문장을 고치는 일이 반복돼서 시간이 두세 배로 늘어납니다.
🔢 단계 2. Bolt.new 프롬프트 작성 (5분)
브라우저에 bolt.new를 열고, 입력창에 아래 형식으로 한 번에 적습니다. 1단계에서 정리한 콘텐츠를 그대로 첨부하시면 됩니다.
한 페이지짜리 개인 포트폴리오 사이트를 React + Tailwind로 만들어주세요. 다크 모드, 한국어 본문, 폰트는 Pretendard 우선. 구조는: 상단에 프로필 원형 사진(이니셜로 대체 가능) + 이름 + 한 줄 소개 + 이메일·GitHub·LinkedIn 연락처 버튼 / 가운데에 About 2~3문장 / 그 아래에 Experience 타임라인 3개(연도·회사·역할 한 줄) / 우측 또는 아래에 Projects 카드 3개(이름·한 줄 설명·사용 기술 태그). 모바일에서는 모든 섹션이 세로로 자연스럽게 쌓이고, 하단에 푸터(저작권 한 줄). 본인 콘텐츠는 아래와 같습니다: [여기에 1단계 콘텐츠 텍스트 그대로 첨부]
이 프롬프트가 길어 보여도, 첫 결과물의 품질을 결정짓는 가장 중요한 한 번이에요. 짧게 던지면 그만큼 수정 요청을 더 많이 보내게 됩니다.
🔢 단계 3. 결과 검토와 후속 수정 (15분)
오른쪽 미리보기 패널에 첫 결과가 뜨면 위에서 아래로 한 번 스크롤하며 다음 네 가지를 점검합니다.
- 본인 정보가 정확한가 — 이름·연도·회사·역할 표기에 오타 없는지
- 빠진 섹션이 없나 — About / Experience / Projects 세 섹션이 다 들어왔는지
- 모바일에서 깨지지 않나 — 미리보기 창 너비를 좁혀보면 휴대폰 폭에서 어떻게 보이는지 확인 가능
- 한국어 가독성 — 한글이 □□□로 깨지지 않고 자연스럽게 보이는지
문제가 보이면 채팅 패널에 후속 요청을 한 번에 한 가지씩만 보냅니다. “Experience 타임라인을 좌측 정렬에서 가운데 정렬로 바꿔주세요”, “프로젝트 카드 hover 시 위로 살짝 올라가는 효과 추가해주세요” 같은 식이에요. 한 메시지에 여러 변경을 섞으면 결과 품질이 떨어집니다.
🔢 단계 4. 디자인 다듬기 (15분)
여기서 욕심내면 시간이 폭발해요. 다음 섹션의 4가지 원칙 안에서만 다듬는 걸 권합니다. 그 이상은 두 번째 작업 세션에 넘기시는 게 1시간 공약을 지키는 길입니다.
🔢 단계 5. 무료 배포와 URL 공유 (15분)
마지막 단계는 결과물을 공개 URL로 띄우는 일이에요. Bolt.new 안에서 “Deploy” 버튼으로 Netlify에 1클릭 배포하거나, “Push to GitHub” 후 Vercel로 연결하는 두 가지 길이 있습니다. 둘 다 무료이고 결과는 같아요. 발급된 URL을 본인 PDF 이력서 상단과 LinkedIn 프로필 바이오에 그대로 붙이시면 1시간 작업이 마무리됩니다.
🎨 보기 좋은 디자인 만드는 4가지 원칙
디자인 감각이 없으셔도 아래 4가지만 지키면 결과물의 무게감이 확연히 달라져요. AI 도구가 기본을 잘 잡아주지만, 마지막 다듬는 시점에 이 원칙을 의식하면 평범한 결과가 단정한 결과로 바뀝니다.
1. 포인트 컬러는 하나만
본문은 무채색(검정·흰색·회색) 위주로 두고, 강조하고 싶은 색은 한 가지만 정해서 일관되게 씁니다. 보라·파랑·초록 중 하나를 골라 링크·버튼·구분선·강조 텍스트에 동일한 톤으로 사용해보세요. 색이 두세 개 섞이면 단정한 인상이 빠르게 무너집니다.
2. 여백을 아끼지 않는다
비전공자분들이 가장 자주 어색해지는 지점이 여백이에요. 섹션 사이·문단 사이·요소 사이에 손이 갈 정도로 여백을 충분히 두면, 같은 콘텐츠라도 훨씬 정돈돼 보입니다. AI에게 “각 섹션 사이 여백을 두 배로 늘려주세요” 한 줄만 보내도 효과가 큽니다.
3. 폰트는 1~2개로 제한
본문 폰트 하나, 헤딩 폰트 하나(또는 같은 폰트의 굵기만 다르게) 정도로 제한하시는 게 가장 무난해요. 한국어가 들어가는 사이트는 Pretendard·Noto Sans KR 같은 한글 우선 폰트가 거의 정답에 가깝습니다. 영어와 한국어가 섞인 자리에서 글자 크기·행간이 자연스럽게 잡혀요.
4. 모서리·그림자는 모든 요소에 동일하게
카드의 둥근 모서리 반경(radius)과 그림자(shadow)를 사이트 전체에서 통일하세요. 한쪽 카드는 둥글고 다른 쪽은 각진 식이면 시각적 일관성이 깨집니다. AI에게 “모든 카드와 버튼의 모서리를 12px 라운드로 통일해주세요”처럼 한 줄로 정렬할 수 있어요.
🌐 무료로 공개 URL 발급받기
결과물이 본인 컴퓨터에서만 보이면 의미가 절반밖에 살지 않아요. 누구나 클릭해서 들어올 수 있는 공개 URL이 있어야 이력서·LinkedIn에 한 줄로 붙일 수 있습니다. 비전공자분들에게 가장 무난한 길 세 가지를 소개해드릴게요.
🪐 Bolt.new에서 1클릭 → Netlify
가장 빠른 길입니다. Bolt.new의 “Deploy” 버튼을 누르면 Netlify 연결 안내가 떠요. Netlify 계정 가입까지 같은 흐름으로 자연스럽게 이어지고, 1~2분 뒤 your-name.netlify.app 형태의 URL이 발급됩니다. 별도 도메인 비용 없이 즉시 공유 가능해요.
🚀 GitHub → Vercel
본격적으로 코드를 본인 저장소에 두고 싶으시면 이쪽 길이 좋아요. Bolt.new에서 “Push to GitHub”로 새 저장소를 만든 뒤, Vercel에서 해당 저장소를 가져오면 자동 배포됩니다. 이후 코드를 수정하고 Push할 때마다 자동으로 사이트가 다시 빌드돼요. 자세한 절차는 바이브코딩 Vercel 무료 배포 가이드에서 다룹니다.
📄 GitHub Pages
한 번 만들고 거의 수정하지 않을 단순한 사이트라면 GitHub Pages도 충분합니다. 다만 빌드 도구 설정이 약간 까다로워서 비전공자분 첫 배포로는 위 두 가지가 더 편해요.
처음부터
your-name.com 같은 본인 도메인을 살 필요는 없어요. your-name.vercel.app이나 your-name.netlify.app 같은 무료 서브도메인으로 시작하시고, 사이트가 본격적으로 쓰이는 시점에 도메인을 추가하시는 흐름이 가장 합리적입니다.
✅ 면접관·HR이 보는 체크 포인트
채용 담당자분들이 지원자 사이트에서 무의식 중에 확인하는 지점이 몇 가지 있습니다. 미리 의식해두시면 같은 분량으로도 인상이 좋아져요.
- 로딩 속도 — 모바일에서 3초 안에 떠야 합니다. 이미지 용량을 너무 키우지 마세요.
- 모바일 가독성 — 채용 담당자가 출근길에 휴대폰으로 열어볼 가능성이 높아요.
- 오타·맞춤법 — 사이트의 단정한 인상이 오타 한두 개로 무너집니다. 발행 전 한 번 더 통독.
- 연락처 클릭 가능 여부 — 이메일·GitHub·LinkedIn 모두 클릭하면 즉시 동작해야 합니다.
- 최근 활동 흔적 — 작품이나 글에 최근 날짜가 있으면 “현재 활동 중”이라는 신호가 됩니다.
특히 마지막 항목이 의외로 큽니다. “2026년 4월 업데이트” 같은 작은 날짜 한 줄이 사이트 전체의 활기를 좌우해요.
🧩 자주 막히는 3가지와 해결법
같은 작업을 해보신 분들이 실제로 자주 멈춰 서는 지점만 추려봤습니다.
| 증상 | 가장 흔한 원인 | 해결 |
|---|---|---|
| 한국어 텍스트가 □□□로 깨져요 | 한글 미지원 폰트가 적용됨 | “본문 폰트를 Pretendard 우선, 시스템 한글 폰트 fallback으로 바꿔주세요” |
| 모바일에서 레이아웃이 깨져요 | 모바일 분기점(media query) 누락 | “768px 이하에서 모든 섹션이 세로로 쌓이고, Projects 카드가 한 줄에 1개씩 보이게 해주세요” |
| 배포 후 빈 화면이 떠요 | 빌드 결과물 폴더 경로 설정 오류 | Bolt.new에서 직접 Netlify 연결 시 자동 처리. Vercel 수동 연결 시 Framework Preset이 자동 인식되는지 확인 |
증상이 이 표에 없다면 에러 메시지를 그대로 복사해 채팅창에 붙이는 게 가장 빠른 길이에요. AI가 본인이 만든 코드 컨텍스트를 알고 있어서 외부 검색보다 정답에 빠르게 도달합니다.
🪧 면책 조항
여기까지 따라오셨다면 1시간 뒤 본인 이름이 들어간 URL이 손에 잡힙니다. 그 URL 한 줄을 PDF 이력서 상단과 LinkedIn 프로필 바이오에 붙여두는 것까지가 이 글의 진짜 마무리예요.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
🔰 시작하기 전 궁금한 것들
Q. 코딩을 한 줄도 모르는데 정말 1시간 안에 되나요?
Q. 작품·프로젝트가 아직 없는데도 만들어도 되나요?
Q. 영어로 만들어야 하나요? 한국어로도 괜찮나요?
🛠 작업 중 자주 마주치는 상황
Q. 사진이 없거나 프로필 사진을 올리기 부담스럽습니다
Q. 한 페이지에 너무 많은 정보가 들어가는 건 아닐까요?
Q. Bolt.new가 만든 결과물이 너무 화려한데 단정하게 줄이고 싶어요
Q. SEO 최적화나 메타 태그도 같이 넣어야 하나요?
🚀 그 다음 단계
Q. 사이트를 발행했는데 면접관이 정말 클릭하나요?
Q. 사이트와 별도로 블로그도 있는 게 좋을까요?
Q. 사이트는 한 번 만들면 끝인가요? 계속 관리해야 하나요?
Git·Node.js·VS Code 설치부터 첫 배포까지 — 복사 붙여넣기만으로 끝.
VibeStart에서 무료로 시작하기 →
🔗 관련 글
- 바이브코딩 프로젝트 아이디어 10가지 — 첫 작품 추천
- Bolt.new 완벽 가이드 — 가장 쉬운 바이브코딩 도구
- 바이브코딩 블로그 만들기 — Next.js + MDX로 45분 완성
- 바이브코딩 Vercel 무료 배포 가이드
- GitHub 가입과 첫 저장소 만들기
📑 참고 자료
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
