포트폴리오 사이트 만들기 2026 — 직군별 구성, 노션·깃허브·빌더 비교, 1년 비용

포트폴리오 사이트는 한 줄 소개 · 작업 3~6개(내 역할과 결과) · 연락 방법 세 가지로 시작해요. 개발자·디자이너·기획자 예시를 하나씩 직접 만들어 보니, 직군마다 첫 화면에 둘 것이 달랐어요. 디자이너 예시의 작업 사진 6장은 PNG 그대로 8.8MB 였는데, WebP 로 바꾸니 92KB 가 됐어요. 느린 휴대폰 회선을 흉내 낸 조건에서 다 뜨는 시간도 42.9초에서 1.3초로 줄었어요. 만드는 도구는 노션·깃허브 페이지·포트폴리오 빌더·직접 만들기 네 갈래예요. 내 도메인을 붙인 1년 비용은 2만 6천 원부터 30만 원대까지 벌어져요(2026-11-03 공식 요금).

글 서순명(웹 에이전시·SI 10년 PM, 솔리드그루 이사) · 퓨쳐인프라 — 앱·서버 호스팅과 도메인·DNS 를 직접 운영 · 예시 제작·실측·요금 확인 2026-11-03(노션·깃허브·프레이머·어도비·윅스 공식 페이지 대조) · 운영사 솔리드그루(사업자등록번호 875-44-00335, 서울 구로) · 문의 02-6933-6229 · support@futureinfra.ai · 비교표에 우리(퓨쳐인프라) 요금도 같은 기준으로 넣었어요. 다른 서비스와 제휴·광고 관계는 없어요.

포트폴리오 사이트, PDF 와 뭐가 달라요?

PDF 는 지원서에 붙이는 문서예요. 사이트는 주소 하나로 언제든 열리는 원본이에요. 둘 중 하나만 고를 일은 아니에요. 사이트를 원본으로 두고, PDF 는 2~3장짜리 요약본으로 만들어 두면 편해요. 지원 양식에 따라 PDF 를 따로 받는 곳도 있기 때문이에요.

직군마다 무엇을 넣어요?

먼저 직군과 상관없이 들어가는 다섯 가지예요. 이것만 채워도 포트폴리오로 쓸 수 있어요.

1. 한 줄 소개 — "무엇을 하는 누구"를 한 문장으로. 예: "작은 가게가 오래 기억되도록 이름부터 간판까지 만들어요."
2. 대표 작업 3~6개 — 많이 넣기보다 잘한 것만 골라요. 가장 자신 있는 작업을 맨 앞에 둬요.
3. 작업마다 역할·기간·결과 — 팀 작업이면 "내가 맡은 부분"을 꼭 적어요.
4. 연락 방법 — 메일 주소, 이력서 PDF, 깃허브·링크드인 같은 링크.
5. 마지막 업데이트 날짜 — 오래 방치된 사이트로 보이지 않게 해 줘요.

그다음은 직군마다 달라요. 첫 화면에서 보여 줄 것이 다르기 때문이에요.

직접 만들어 봤어요 — 개발자·디자이너·기획자 예시 3개

가상 인물 세 명으로 예시를 만들었어요. 뼈대(머리글·작업·연락)는 같고, 가운데만 직군에 맞게 바꿨어요. 각각 HTML 파일 하나이고, 외부 글꼴·라이브러리는 쓰지 않았어요. 인터넷에 올리지 않고 내 PC(127.0.0.1)에서만 열어 확인했어요.

잰 방법은 이래요. 크롬(Playwright) 새 창, 캐시 없음, 창 1280×900 에서 끝까지 내려 그림을 모두 불러온 뒤 받은 양을 셌어요. 5번 재서 가운데 값이에요(2026-11-03, 같은 PC 라 인터넷 시간은 빠져 있어요). 같은 파일을 휴대폰 폭(390px)으로도 열었어요.

AI 에게 이런 예시를 시키고 싶다면 "직군 · 작업 3개 · 작업마다 역할과 결과 · 휴대폰에서도 보기 좋게"를 한 번에 주세요. AI 로 HTML 파일을 만들고 고치는 과정은 웹사이트 만들기 글에 단계별로 정리해 두었어요.

작업 사진이 많으면 느려지지 않나요?

느려져요. 디자이너 예시로 직접 쟀어요. 작업 그림 6장(1344×768)을 세 가지로 저장해 같은 페이지에 넣었어요. ① 디자인 프로그램에서 흔히 내보내는 PNG 그대로, ② WebP(품질 80, 크기 그대로), ③ 목록에 쓰는 WebP 가로 800px(품질 78)이에요.

같은 그림 6장이에요. 모양 차이는 화면에서 거의 보이지 않았어요.

크롬 개발자 도구의 네트워크 속도 제한 기능으로 같은 조건을 만들었어요. 실제 통신망 속도는 장소마다 달라요.

표로 보기 — 회차별 시간

예시	1회	2회	3회	가운데 값
PNG	42.85초	42.86초	42.85초	42.85초
WebP 800px	1.33초	1.32초	1.33초	1.33초
개발자	0.71초	0.71초	0.72초	0.71초

PNG 판은 다 뜨기까지 43초가 넘게 걸렸어요. 면접관이 휴대폰으로 링크를 열었다면 그림이 뜨기 전에 창을 닫았을 수도 있어요. WebP 판은 1.3초였어요.

줄이는 방법은 어렵지 않아요.

• 피그마·포토샵에서 내보낼 때 형식을 WebP(없으면 JPG)로 골라요.
• 이미 만든 PNG 는 구글이 만든 무료 도구 Squoosh 에 끌어다 놓고 WebP 로 바꿀 수 있어요.
• 목록(격자)에 쓰는 그림은 가로 800px, 눌러서 크게 보는 그림은 1600px 정도면 충분해요.
• HTML 이라면 그림마다 width·height 와 loading="lazy"(화면에 가까워질 때 불러오기)를 넣어요.

어디서 만들까요? 노션·깃허브 페이지·빌더·직접 만들기

도구는 크게 네 갈래예요. "얼마나 꾸미고 싶은지"와 "코드를 만질 수 있는지"로 고르면 돼요.

직군으로 보면 이렇게 고르는 경우가 많아요. 개발자는 깃허브 페이지(코드와 사이트를 한곳에), 디자이너는 빌더나 직접 만들기(그림이 크게 보이는 틀), 기획자·마케터는 노션이나 빌더(글과 숫자 위주)예요. 깃허브가 처음이면 깃허브가 뭐예요? 부터 보세요.

무료로 되나요? 내 도메인까지 붙이면 1년에 얼마예요?

연습용은 대부분 무료예요. 다만 무료는 그 회사 주소(notion.site, github.io 같은)를 쓰는 조건이 많아요. 아래는 2026-11-03 각 공식 페이지에서 확인한 값이에요.

"내 도메인을 붙여서 1년 쓰면 얼마인가"로 맞춰 계산해 봤어요. 도메인 값은 .com 1년 26,000원(퓨쳐인프라 판매가)으로 넣었고, 첫해 도메인을 무료로 주는 요금제는 빼고 계산했어요.

달러 요금은 1달러 = 1,342.9원(2026-11-02 기준)으로 바꿨어요. 해외 서비스는 세금이 따로 붙을 수 있고, 퓨쳐인프라는 부가세 포함이에요.

표로 보기 — 계산식

도구	계산	1년
깃허브 페이지	호스팅 0원 + 도메인 26,000원	26,000원
퓨쳐인프라 앱	월 5,500원 × 12 + 도메인 26,000원	92,000원
프레이머 Basic	월 9,958원(연 결제) × 12 · 연 결제 시 도메인 포함	119,496원
어도비 포트폴리오	월 US$9.99 × 12 + 도메인 26,000원	186,987원
윅스 라이트	월 US$14(연 결제) × 12 · 첫해 도메인 무료	225,607원
노션 플러스	월 14,000원(연 결제) × 12 + 맞춤 도메인 월 US$8 × 12 + 도메인 26,000원	322,918원

숫자가 말해 주는 건 두 가지예요. 첫째, HTML 파일이 있다면 1년 2만 원대로 끝나요. 깃허브 페이지에 올리고 도메인만 사면 돼요. 둘째, 비교한 것 중에서는 노션에 내 도메인을 붙이는 쪽이 제일 비싸요. 노션 무료로 notion.site 주소를 쓰거나, 내 도메인이 꼭 필요하면 다른 길이 싸요. 도메인 둘째 해 가격은 업체마다 다르니 도메인 1년 비용도 같이 보세요.

포트폴리오 주소(도메인)는 어떻게 짓고 연결해요?

이름은 이렇게 지어요

• 이름 영문 그대로가 기억하기 쉬워요. 예: 내이름.com
• 이미 누가 쓰고 있으면 이름 + 직군으로 바꿔요. 예: harin-design.com, doyun.dev
• 끝(.com·.dev·.me 등)은 첫해 가격보다 둘째 해 갱신 가격을 보고 골라요. 몇 년 쓸 주소예요.
• 회사·학교 이메일처럼 바뀔 수 있는 이름은 피해요.

도구별로 넣는 값

연결은 결국 도메인 업체의 DNS 화면에 한두 줄을 적는 일이에요. 루트 주소(내이름.com)와 www 주소에 넣는 값이 달라요.

값을 넣은 뒤에는 조금 기다려야 해요. 새 값이 퍼지는 데 시간이 걸리고, 그다음 HTTPS 인증서가 붙어요. 확인하는 명령과 자주 막히는 곳은 웹사이트 만들기의 "도메인 연결로 마무리하기"에, 업체별 DNS 화면은 Vercel 도메인 연결 글의 가비아 예시에 있어요.

올린 뒤에는 무엇을 하면 돼요?

검색 결과에 나오는 원리는 검색엔진 최적화(SEO) 글에 쉽게 정리해 두었어요.

상황별로 어떻게 하면 돼요?

직접 만든 포트폴리오를 퓨쳐인프라에 올리면

퓨쳐인프라는 이 글을 쓴 회사의 서비스예요. 아래 값은 2026-11-03 공식 페이지에서 확인했어요.

앞에서 본 "직접 만들기" 길을 고른 경우예요. HTML 한 장만 올리고 끝이라면 깃허브 페이지도 좋은 길이에요. 문의 폼·예약처럼 저장할 데이터가 생길 것 같다면, 처음부터 앱으로 올려 두세요.

퓨처인프라로 [내 포트폴리오 사이트]를 만들어서 인터넷에 올려 줘. 필요한 건 알아서 골라 만들고, 다 되면 접속 주소와 한 달 예상 요금을 쉬운 말로 알려 줘.

퓨쳐인프라 llms.txt에 있는 예시 문장에서 [ ] 안만 바꿨어요. DB 가 필요하면 "예약 정보는 데이터베이스에 저장해 줘"를 덧붙여요(앱 + DB 월 7,700원). 도메인 구매처럼 사람이 승인해야 하는 일은 AI 가 승인을 기다려요.

자주 묻는 질문

포트폴리오 사이트를 무료로 계속 써도 되나요?

네. 노션 무료 요금제(notion.site 주소)와 깃허브 페이지(github.io 주소)는 체험판이 아니라 무료로 주는 기능이에요(2026-11-03 공식 페이지 기준). 내 도메인을 붙일 때부터 돈이 들어요. 깃허브 페이지는 도메인 값만 내면 돼요.

깃허브 페이지에 프리랜서 포트폴리오를 올려도 되나요?

깃허브 문서가 막는 건 온라인 사업·쇼핑몰·결제를 주로 받는 사이트, 서비스형 소프트웨어(SaaS)를 무료 호스팅으로 돌리는 일이에요. 작업을 보여 주는 포트폴리오는 보통 여기에 들지 않아요. 결제나 주문을 받을 거라면 다른 호스팅을 쓰세요.

PDF 포트폴리오도 따로 만들어야 하나요?

만들어 두면 좋아요. 사이트를 원본으로 두고, PDF 는 대표 작업 3개만 담은 2~3장 요약본으로요. 지원 양식에 파일 첨부만 있는 곳도 있어요.

작업이 3개도 안 되면 어떡해요?

개인 프로젝트·수업 과제·다시 만든 작업(리디자인)도 괜찮아요. 대신 "개인 작업"이라고 밝히고, 왜 만들었고 무엇을 배웠는지 적어요.

회사에서 한 프로젝트를 올려도 되나요?

회사와 고객의 허락이 먼저예요. 허락이 없다면 고객 이름·내부 숫자·화면을 가리고, 내 역할과 과정 중심으로 써요. 비밀 유지 계약을 맺었다면 그 내용을 먼저 확인하세요.

노션 포트폴리오를 검색에 나오게 하려면요?

노션 요금표에 따르면 무료 요금제의 검색 엔진 노출 설정은 '기본', 유료는 '고급'이에요. 내 이름으로 검색될 사이트가 중요하다면 내 도메인을 붙일 수 있는 길이 유리해요.

템플릿은 어디서 구해요?

빌더는 포트폴리오 템플릿을 기본으로 줘요. 직접 만든다면 마음에 드는 포트폴리오의 구성(순서·칸)만 참고하고, 글과 그림은 내 것으로 채우세요. 남의 디자인을 그대로 베끼면 저작권 문제가 생길 수 있어요.