Framer로 디자이너·개발자 포트폴리오 만들기 2026

이력서 PDF 한 장보다 링크 하나가 더 많은 것을 말해줍니다. Framer 를 쓰면 디자인 툴을 다루듯 드래그·클릭만으로 프로젝트 그리드, 상세 케이스스터디, 이력서 다운로드까지 갖춘 포트폴리오 사이트를 주말 하루 만에 발행할 수 있습니다. 이 글은 SaaS 랜딩페이지가 아니라 나 자신을 보여주는 사이트를 만드는 데 필요한 단계만 짚습니다.

랜딩페이지 제작 흐름이 궁금하다면 Framer로 SaaS 랜딩페이지 만들기 도 함께 참고하세요.

완성 후 얻는 것

이 튜토리얼을 끝까지 따라오면 다음을 갖게 됩니다.

• 프로젝트 그리드/갤러리 — 썸네일 클릭 시 각 작업으로 이동하는 홈 화면.
• 케이스스터디 상세 페이지 — 문제·과정·결과를 보여주는 프로젝트별 전용 페이지.
• 이력서 다운로드 버튼 — 클릭 한 번으로 PDF를 내려받게 하는 CTA.
• About·연락처 섹션 — 채용 담당자가 5초 안에 나를 파악하고 바로 연락할 수 있는 구조.
• 커스텀 도메인 사이트 — 내이름.com 으로 발행된 공개 포트폴리오.

취업·이직·프리랜스 영업 어느 목적이든, 포트폴리오는 "잘 만든 결과물 나열"이 아니라 보는 사람이 5분 안에 실력을 판단할 수 있는 동선이 핵심입니다.

준비물

시작 전에 아래를 챙기면 편집 속도가 확 빨라집니다.

• Framer 계정 — 무료 플랜으로 시작 가능(발행은 .framer.website 서브도메인).
• 프로젝트 이미지·설명 — 프로젝트당 대표 이미지 1장 + 과정 스크린샷 3~5장, 한 줄 요약과 담당 역할 메모.
• 이력서 PDF — 최신 버전으로 미리 내보내기(PDF/A 권장, 5MB 이하).
• 자기소개 문구 — 3~4줄, "무엇을 하는 사람인지 + 어떤 강점인지"가 담기게.
• 연락처 정보 — 이메일, 링크드인/깃허브/드리블 등 프로필 링크.

1단계 — 포트폴리오 템플릿 선택

Framer에 가입 후 대시보드에서 New Project 를 누릅니다. Templates 탭에서 "Portfolio", "Designer", "Developer" 카테고리를 검색하면 그리드형 홈, 상세 페이지, About 섹션이 이미 짜인 템플릿이 여러 개 나옵니다.

• 디자이너라면 이미지 비중이 큰 그리드형 템플릿을, 개발자라면 코드/텍스트 정보가 잘 정리된 카드형 템플릿을 고르는 게 편집이 빠릅니다.
• 원하는 템플릿에서 Insert 를 누르면 내 프로젝트로 복제됩니다.
• 좌측 Pages 패널을 열어 홈, 프로젝트 상세, About 페이지가 이미 나뉘어 있는지 확인하세요. 대부분의 포트폴리오 템플릿은 프로젝트마다 별도 페이지를 복제해서 쓰는 구조입니다.

2단계 — 프로젝트 그리드/갤러리 구성

홈 화면은 방문자가 어떤 작업을 볼지 고르는 곳입니다. Layers에서 Grid 또는 Gallery 프레임을 선택하고 시작합니다.

1. 카드 하나를 먼저 완성하세요 — 썸네일 이미지, 프로젝트명, 한 줄 요약(예: "핀테크 앱 리디자인").
2. 완성된 카드를 복사(⌘/Ctrl+D)해 개수를 늘리고 이미지·텍스트만 교체합니다. 처음부터 새로 만들면 정렬이 흐트러지기 쉽습니다.
3. 카드를 선택하고 우측 Link 필드에 해당 프로젝트 상세 페이지를 연결합니다.
4. 그리드 열 수는 데스크톱 3~4열, 모바일에서는 3단계에서 1열로 줄이는 걸 미리 염두에 두세요.
5. 가장 자신 있는 프로젝트 2~3개는 그리드 상단에, 큰 썸네일로 배치해 우선순위를 눈에 띄게 합니다.

3단계 — 프로젝트 상세(케이스스터디) 페이지

여기가 채용 담당자가 실제로 실력을 판단하는 페이지입니다. 완성된 프로젝트 페이지 하나를 템플릿 페이지로 삼아 복제하는 방식을 추천합니다.

1. 좌측 Pages 패널에서 프로젝트 페이지를 우클릭 → Duplicate 로 새 프로젝트마다 복제.
2. 페이지 구조는 커버 이미지 → 개요(역할·기간·툴) → 문제 정의 → 과정(와이어프레임·반복 작업) → 결과 이미지 → 배운 점 순으로 짜면 스토리가 자연스럽게 읽힙니다.
3. 개요 블록에는 Stack을 활용해 "역할", "기간", "사용 툴" 같은 라벨-값 쌍을 나란히 배치하세요.
4. 이미지는 Insert → Image 로 여러 장을 슬라이더나 세로 스크롤로 나열. 캡션에는 왜 그런 결정을 했는지 짧게 설명을 붙이면 단순 결과물 나열보다 훨씬 설득력이 생깁니다.
5. 페이지 하단에는 다음 프로젝트로 넘어가는 Next Project 링크를 달아 이탈을 줄이세요.

4단계 — About·연락처 섹션

About 페이지는 사람을 보여주는 곳입니다. 프로필 사진, 자기소개 3~4줄, 보유 스킬 태그를 배치하세요.

• 프로필 사진: 정면 얼굴이 잘 보이는 사진 1장. Fill → Image로 교체.
• 소개 문구: "무엇을 하는 사람인지 + 대표 성과 1개"를 앞쪽에 배치. 장황한 자서전보다 스캔하기 쉬운 짧은 문단이 낫습니다.
• 스킬/툴 태그: Figma, React, Framer 등을 작은 배지(Chip) 형태로 나열하면 빠르게 훑을 수 있습니다.
• 연락처: 이메일 버튼(mailto: 링크), 링크드인·깃허브·드리블 아이콘을 한 줄로 배치. 버튼 선택 후 우측 Link 필드에 mailto:[email protected] 을 입력하면 클릭 시 메일 앱이 바로 열립니다.

5단계 — 이력서 다운로드 버튼 연결

이력서 PDF는 Framer의 Assets 에 파일로 업로드해 버튼에 연결합니다.

1. 좌측 Assets 패널 → 파일 업로드 아이콘으로 이력서 PDF를 추가합니다.
2. "이력서 다운로드" 버튼을 배치(또는 기존 CTA 버튼 재활용)하고 선택합니다.
3. 우측 Link 필드에서 URL 대신 방금 업로드한 파일(Asset) 을 선택하면 클릭 시 새 탭에서 PDF가 열리거나 다운로드됩니다.
4. About 페이지 상단과 홈 화면 헤더, 두 곳에 동일한 버튼을 배치해 어느 페이지에서든 이력서에 접근할 수 있게 하세요.
5. 이력서를 업데이트할 때마다 Assets에서 파일을 교체하면 링크는 그대로 유지된 채 내용만 바뀝니다.

6단계 — 커스텀 도메인·SEO

발행 전 마지막 점검입니다. 좌측 Pages 패널에서 각 페이지의 Settings(톱니 아이콘) 를 열어 Title·Description을 채우세요. 예) "홍길동 — UX 디자이너 포트폴리오".

1. 우측 상단 Publish 를 누르면 프로젝트명.framer.website 로 즉시 공개됩니다.
2. 커스텀 도메인이 있다면 Publish → Settings → Domains 에서 도메인을 입력하고, 안내되는 A 레코드/CNAME 값을 도메인 등록업체 DNS 설정에 입력합니다.
3. 프로젝트 상세 페이지마다 고유한 Title·OG 이미지를 지정하면 링크드인이나 트위터에 프로젝트 링크를 공유했을 때도 썸네일이 제대로 뜹니다.
4. SSL은 Framer가 자동 발급하므로 별도 설정이 필요 없습니다.

채용 담당자 눈에 띄는 팁

• 프로젝트는 3~5개면 충분 — 많이 나열하기보다 잘 정리된 소수를 보여주는 편이 인상에 남습니다.
• 결과를 숫자로 — "전환율 12% 개선", "로딩 속도 40% 단축"처럼 구체적 성과를 케이스스터디 상단에 배치하세요.
• 모바일에서 먼저 확인 — 채용 담당자는 링크드인 알림을 통해 휴대폰으로 포트폴리오를 여는 경우가 많습니다.
• 로딩 속도 관리 — 이미지가 무거우면 이탈로 이어집니다. 업로드 전 2000px 이하로 리사이즈하세요.
• 연락처를 숨기지 않기 — About 페이지뿐 아니라 홈 화면 상단에도 이메일 버튼을 노출하세요.

마무리

여기까지 왔다면 코드 없이 프로젝트 그리드 + 케이스스터디 상세 페이지 + 이력서 다운로드 + 연락처까지 갖춘 포트폴리오 사이트를 실제로 발행한 것입니다. 이력서에 적힌 한 줄보다, 클릭해서 과정을 직접 보여주는 링크 하나가 채용 담당자의 기억에 훨씬 오래 남습니다.

지금 바로 시작하고 싶다면 Framer 무료로 시작하기 — 오늘 만든 포트폴리오가 다음 면접 기회로 이어질 수 있습니다.