Go back

코딩 1도 모르는 내가 30분 만에 Framer로 포트폴리오 사이트 만든 과정

프롤로그: “포트폴리오 사이트 주소 알려주세요”

2025년 9월, 프리랜서 전환 첫 달.

클라이언트와의 첫 미팅. 분위기 좋았습니다. 프로젝트 설명도 잘했고, 상대방도 관심 있어 보였어요.

클라이언트: “좋네요. 그럼 포트폴리오 사이트 주소 알려주세요.”

나: “아… 그게… PDF로 보내드릴게요.”

클라이언트: “웹사이트는 없으세요?”

나: ”…” (땀 흘림)

그날 저녁, 집에 와서 검색했습니다.

“포트폴리오 사이트 만들기”

검색 결과:

“이거 배우려면 6개월은 걸리겠는데…?”

좌절하던 중, 프리랜서 커뮤니티에서 누군가 말했습니다.

“Framer 쓰면 30분 만에 만든다. 나도 코딩 1도 모르는데 만들었어.”

”…진짜?”

그날 저녁, 반신반의하며 시작했고, 정말로 30분 만에 포트폴리오 사이트를 완성했습니다.

결과:

오늘은 제가 실제로 겪은 Framer 포트폴리오 사이트 제작 과정을 처음부터 끝까지 공개합니다. 시행착오, 막혔던 부분, 해결 방법 전부 다요.

Table of contents

Open Table of contents

Day 1: “Framer가 뭔데?”

오전 10시: 첫 만남

Framer 공식 사이트 접속.

첫인상: “와… 이거 디자인 툴 아니야?”

맞습니다. Framer는 원래 디자인 툴(Figma 같은)인데, 디자인한 걸 그대로 웹사이트로 배포할 수 있는 게 핵심입니다.

왜 Framer를 선택했나:

  1. 템플릿이 세련됨 (해외 디자이너급)
  2. 애니메이션이 부드러움 (스크롤하면 요소가 살아 움직임)
  3. 무료 플랜 있음 (일단 시작 가능)

오전 10시 30분: 계정 생성

단계:

  1. framer.com 접속
  2. “Start for free” 클릭
  3. Google 계정으로 로그인
  4. 2분 완료

대시보드 화면:

템플릿부터 보자!

오전 11시: 템플릿 선택 (첫 번째 난관)

“Templates” 클릭.

충격.

템플릿이 수백 개.

“어떤 걸 골라야 하지…?”

30분 동안 스크롤만 했습니다.

깨달음:

완벽한 템플릿은 없다. 일단 골라서 시작하자.

최종 선택: “Portfolio - Minimal” 템플릿

이유:

“Use this template” 클릭.

오후 12시: 첫 번째 수정 시도

템플릿이 열렸습니다.

화면:

첫 작업: 이름 바꾸기

템플릿 이름이 “John Doe”로 되어 있었습니다.

수정 방법:

  1. 텍스트 더블클릭
  2. 내 이름 입력
  3. 끝

“어? 생각보다 쉬운데?”

오후 1시: 프로젝트 섹션 수정

목표: 내 작업물로 교체

템플릿 구조:

수정 과정:

1. 이미지 교체

2. 제목 수정

3. 설명 수정

걸린 시간: 10분

“이거 진짜 쉽네?”

오후 2시: 색상 테마 변경 (두 번째 난관)

문제: 템플릿 색상이 파란색인데, 나는 보라색 좋아함

시도 1: 텍스트 하나씩 색상 변경

→ 너무 오래 걸림 (텍스트가 20개 이상)

시도 2: 구글 검색

“Framer 색상 한 번에 바꾸기”

발견: Color Variables (색상 변수)

해결 방법:

  1. 우측 패널 → “Colors” 탭
  2. “Primary” 색상 클릭
  3. 보라색으로 변경
  4. 모든 요소가 한 번에 바뀜!

“오… 이게 디자인 시스템이구나!”

오후 3시: 모바일 반응형 확인

상단 메뉴에서 “Desktop” → “Mobile” 전환

충격.

모바일 화면이 깨져 있었습니다.

“아… 모바일도 따로 수정해야 하는구나.”

수정 과정:

1. 텍스트 크기 조정

2. 이미지 크기 조정

3. 레이아웃 변경

걸린 시간: 20분

팁:

Framer는 Desktop과 Mobile을 따로 편집할 수 있습니다. Desktop에서 수정해도 Mobile은 안 바뀌니 꼭 확인하세요!

오후 4시: 미리보기 테스트

상단 “Preview” 버튼 클릭

새 탭에서 사이트 열림.

체크리스트:

“오… 진짜 웹사이트네!”

스크롤 테스트:

놀라운 점:

“이거 템플릿에 기본으로 들어있었구나!”

오후 5시: 배포 시도 (세 번째 난관)

우측 상단 “Publish” 버튼 클릭

팝업:

Choose a site name:
[yourname].framer.website

입력: minsu.framer.website

에러:

❌ This name is already taken

“아… 누가 먼저 썼구나.”

재시도: minsu-portfolio.framer.website

성공!

✅ Your site is live!
https://minsu-portfolio.framer.website

링크 클릭.

내 사이트가 인터넷에 떠 있었습니다.

전율.

Day 2: “커스텀 도메인 연결하기”

오전 10시: 무료 도메인의 한계

문제: framer.website 도메인이 아쉬움

클라이언트에게 보내기엔:

결정: 커스텀 도메인 구매

오전 11시: 도메인 구매

1. 도메인 등록 사이트 선택

옵션:

선택: Cloudflare

2. 도메인 검색

minsu.com → $12.99/년 (비쌈) minsukim.com → $9.99/년 (적당) minsu.me → $4.99/년 (저렴!)

구매: minsu.me

3. 결제

오후 12시: 도메인 연결 (네 번째 난관)

Framer 대시보드:

  1. Settings → Custom Domain
  2. “Add custom domain” 클릭
  3. minsu.me 입력

안내 메시지:

Add these DNS records to your domain:

Type: CNAME
Name: @
Value: sites.framer.com

“DNS가 뭔데…?”

구글 검색:

“DNS란 초보자 설명”

이해:

DNS = 도메인 주소록. “minsu.me”를 입력하면 “Framer 서버”로 연결해주는 것.

Cloudflare 설정:

  1. Cloudflare 대시보드 → DNS
  2. “Add record” 클릭
  3. Type: CNAME
  4. Name: @ (루트 도메인)
  5. Target: sites.framer.com
  6. Save

Framer로 돌아와서 “Verify” 클릭

에러:

❌ DNS records not found. Please wait up to 48 hours.

“48시간…?!”

패닉.

오후 1시: 문제 해결

Framer 커뮤니티 검색:

발견: Cloudflare Proxy 문제

해결 방법:

  1. Cloudflare DNS 설정
  2. CNAME 레코드 옆 “Proxy” 아이콘 (주황색 구름)
  3. 클릭해서 “DNS only”로 변경 (회색 구름)
  4. Save

Framer에서 다시 “Verify” 클릭

5분 후:

✅ Domain verified!
Your site is now live at minsu.me

성공!

브라우저에서 minsu.me 접속

내 사이트가 떴습니다!

배운 점:

Cloudflare Proxy를 끄지 않으면 DNS 인증이 안 됩니다. 꼭 “DNS only” 모드로 설정하세요!

Day 3: “SEO 최적화와 마무리”

오전 10시: SEO 설정

Framer Settings → SEO

설정 항목:

1. Site Title

민수의 포트폴리오 | UX 디자이너

2. Meta Description

10년 차 UX 디자이너 민수의 포트폴리오. 200개 이상의 모바일 앱 디자인 경험.

3. Open Graph Image

4. Favicon

걸린 시간: 10분

오전 11시: Google Analytics 연동

목표: 방문자 수 추적

1. Google Analytics 계정 생성

2. Framer 설정

완료!

오후 12시: 최종 체크리스트

Desktop 확인:

Mobile 확인:

SEO 확인:

모든 테스트 통과!

오후 1시: 첫 공유

친구에게 카톡:

“야, 내 포트폴리오 사이트 만들었어! minsu.me”

친구 답장 (30초 후):

“오 ㄹㅇ? 개쩐다. 디자이너세요?”

나:

“ㅋㅋㅋ 템플릿임”

친구:

“템플릿이 이렇게 퀄 좋아?”

성공!

실전 활용 팁: 내가 겪은 시행착오

Tip 1: 템플릿 선택은 빠르게

실수:

교훈:

Tip 2: 모바일 반응형 필수 확인

실수:

교훈:

Tip 3: 색상은 변수로 관리

실수:

교훈:

Tip 4: 도메인 연결 시 Cloudflare Proxy 주의

실수:

교훈:

Tip 5: 프로젝트는 3~5개만

실수:

교훈:

비용 정리: 실제로 얼마 들었나?

항목비용비고
Framer 무료 플랜$0framer.website 도메인
Framer Pro 플랜$5/월커스텀 도메인 필요 시
도메인 (minsu.me)$4.99/년Cloudflare 기준
총 비용$5/월 + $5/년약 6,500원/월

외주 비용과 비교:

결과: 3개월 후

사이트 오픈 3개월 후 변화:

방문자 수:

프로젝트 수주:

클라이언트 반응:

가장 큰 변화:

PDF 보내는 게 아니라 링크 하나로 끝. 클라이언트가 즉시 확인 가능.

요약: Framer로 포트폴리오 만들기

핵심 정리:

✅ 제작 시간: 30분~1시간 ✅ 비용: 월 $5 (약 6,500원) ✅ 코딩 지식: 불필요 ✅ 템플릿: 수백 개 무료 제공 ✅ 모바일 반응형: 자동 지원

제작 과정:

  1. Framer 계정 생성 (2분)
  2. 템플릿 선택 (10분)
  3. 텍스트/이미지 교체 (10분)
  4. 색상 테마 변경 (5분)
  5. 모바일 확인 및 수정 (20분)
  6. 배포 (1분)
  7. 총 48분

추가 작업 (선택):

가장 중요한 교훈:

완벽한 사이트를 만들려고 고민하지 마세요. 일단 만들고, 공유하고, 피드백 받으세요.

사이트 만드는 데 1달 걸리는 것보다, 30분 만들고 클라이언트 10명에게 보내는 게 낫습니다.

자주 묻는 질문 (FAQ)

Q1. 정말 코딩 몰라도 되나요?

A. 네, 100% 가능합니다. 저도 HTML이 뭔지 모릅니다. Framer는 드래그 앤 드롭으로 모든 게 가능합니다. 텍스트 더블클릭해서 수정하고, 이미지 업로드하고, 색상 선택하면 끝입니다.

Q2. 무료로만 써도 충분한가요?

A. 시작은 무료로 충분합니다. 무료 플랜은 yourname.framer.website 도메인을 제공합니다. 클라이언트 반응 보고 괜찮으면 그때 Pro 플랜($5/월)으로 업그레이드해서 커스텀 도메인을 연결하세요.

Q3. 템플릿 쓰면 다른 사람이랑 똑같지 않나요?

A. 걱정 마세요. 템플릿은 뼈대일 뿐입니다. 색상, 폰트, 이미지, 텍스트를 바꾸면 완전히 다른 사이트가 됩니다. 같은 템플릿 써도 100명이 만들면 100개 다 다릅니다.

Q4. 모바일에서도 잘 보이나요?

A. 네, Framer는 모바일 반응형을 자동으로 지원합니다. 다만 반드시 Mobile 모드에서 확인하세요. Desktop에서 완벽해도 Mobile에서 깨질 수 있습니다. Preview 기능으로 양쪽 다 테스트하세요.

Q5. 나중에 수정할 수 있나요?

A. 당연합니다. 언제든 Framer 대시보드에서 수정 가능합니다. 수정 후 “Publish” 버튼만 누르면 즉시 반영됩니다. 별도 업로드 필요 없습니다.

Q6. SEO 최적화는 어떻게 하나요?

A. Framer Settings → SEO에서 Site Title, Meta Description, Open Graph Image를 설정하세요. Google Analytics 연동도 가능합니다. 기본적인 SEO는 Framer가 자동으로 처리합니다.

Q7. 도메인 연결이 어렵지 않나요?

A. 처음엔 어려워 보이지만 단계별로 따라하면 됩니다. 가장 흔한 실수는 Cloudflare Proxy 설정입니다. DNS 레코드 추가 후 “DNS only” 모드로 바꾸세요. 그러면 5분 안에 인증됩니다.

Q8. 다른 노코드 툴(Notion, Wix)과 비교하면?

A.

제 선택: 첫 포트폴리오는 Notion (5분), 본격 사이트는 Framer (30분)

Q9. 어떤 내용을 넣어야 하나요?

A. 필수 섹션 3가지:

  1. About (소개): 간단한 자기소개, 전문 분야
  2. Projects (프로젝트): 작업물 3~5개 (최고의 것만)
  3. Contact (연락처): 이메일, 링크드인, SNS

선택 섹션: 경력, 블로그, 후기

Q10. 지금 바로 시작해도 될까요?

A. 네, 지금 바로 시작하세요. framer.com 접속해서 “Start for free” 클릭하면 됩니다. 30분 후면 여러분의 포트폴리오 사이트가 인터넷에 떠 있을 겁니다.

마지막 한마디:

3개월 전만 해도 “코딩 모르는데 포트폴리오 사이트 어떻게 만들어?”라고 좌절했던 제가, 이제는 30분 만에 전문가급 사이트를 만듭니다.

Framer는 코딩 모르는 우리를 위한 선물입니다.

완벽한 사이트를 만들려고 고민하지 마세요. 일단 만들고, 공유하고, 개선하세요.

오늘 소개한 방법대로만 해도, 여러분의 프로젝트 수주율이 최소 2배는 올라갈 겁니다.

지금 바로 시작해보세요. 포트폴리오 사이트 만드는 건 생각보다 쉽습니다. 🚀

Share this post on:
Share this post via WhatsAppShare this post on FacebookShare this post on XShare this post via TelegramShare this post on PinterestShare this post via email
Previous Post
Bolt.new보다 좋을까? 코딩 모르는 마케터가 Lovable로 하루 만에 SaaS 만든 후기
Next Post
코딩 1도 모르는 마케터가 AI로 첫 앱 배포하기까지 - 처절했던 72시간의 기록