실전 튜토리얼: 프리랜서 포트폴리오와 문의 페이지 만들기

첫 결과물은 '앱'보다 '영업 페이지'가 좋습니다

러버블을 처음 열면 이상하게 마음이 커집니다. 예약 시스템도 넣고 싶고, 로그인도 넣고 싶고, 결제도 넣고 싶고, 관리자 페이지도 넣고 싶어집니다. 그런데 무료 사용자에게 가장 중요한 질문은 이것입니다.

"지금 당장 나에게 돈이 될 가능성이 있는 페이지는 무엇인가?"

대부분의 개인 사업자, 프리랜서, 부업 준비자에게 첫 번째 답은 거창한 웹앱이 아닙니다. 바로 내가 무슨 일을 하는 사람인지 설명하고, 작업 사례를 보여주고, 문의를 받을 수 있는 포트폴리오형 웹페이지입니다.

포트폴리오 웹사이트는 단순히 예쁜 작품 모음이 아닙니다. Lovable 공식 블로그에서도 포트폴리오의 역할을 신뢰 형성, 차별화, 직접 연락, 작업물의 중심 허브로 설명합니다.¹ 쉽게 말해, 포트폴리오는 온라인 명함이자 작은 영업사원입니다. 내가 잠든 사이에도 누군가에게 "이 사람에게 맡겨도 되겠다"는 느낌을 줄 수 있어야 합니다.

이번 장에서는 가장 현실적인 첫 프로젝트를 만듭니다. 이름하여 프리랜서 포트폴리오와 문의 페이지입니다. 이 페이지 하나만 제대로 만들어도 인스타그램 프로필, 링크드인, 블로그, 명함, 제안서, 오픈채팅, 크몽·숨고·탈잉 같은 외부 플랫폼 소개란에 바로 연결할 수 있습니다.

목표는 화려한 웹사이트가 아닙니다. 목표는 분명합니다.

방문자가 30초 안에 내가 무엇을 도와줄 수 있는 사람인지 이해하고, 3분 안에 문의 버튼을 누르게 만드는 것.

이번 장에서 만들 페이지의 완성 모습

이번에 만들 페이지는 한 페이지짜리 포트폴리오 사이트입니다. 메뉴를 누르면 같은 페이지 안의 각 섹션으로 부드럽게 이동하는 구조입니다. 초보자에게는 여러 페이지보다 단일 페이지가 훨씬 안전합니다. 만들기도 쉽고, 수정도 쉽고, 모바일에서 확인하기도 쉽습니다.

완성된 페이지에는 다음 흐름이 들어갑니다.

여기서 중요한 것은 "많이 보여주기"가 아니라 "결정하기 쉽게 만들기"입니다. 방문자는 내 인생 전체가 궁금해서 들어온 것이 아닙니다. 이 사람에게 맡기면 내 문제가 해결될지 알고 싶어서 들어옵니다.

예를 들어 웹디자인 프리랜서라면 "저는 감각적인 디자인을 합니다"보다 "1인 사업자를 위한 판매용 랜딩페이지를 7일 안에 기획부터 디자인까지 정리합니다"가 훨씬 강합니다. 콘텐츠 마케터라면 "글을 씁니다"보다 "전문가의 지식을 블로그·뉴스레터·전자책으로 바꿔 판매 가능한 콘텐츠 자산을 만듭니다"가 더 선명합니다.

러버블에게도 이렇게 선명하게 말해야 합니다. "멋진 포트폴리오 만들어줘"라고 하면 러버블은 그럴듯하지만 흐릿한 페이지를 만듭니다. 반대로 "누구를 위한, 어떤 서비스의, 어떤 목적을 가진 포트폴리오인지"를 알려주면 첫 결과물의 품질이 확 올라갑니다.

예시 주인공을 정하고 따라가 봅시다

실습을 위해 가상의 프리랜서를 한 명 만들겠습니다. 여러분은 자신의 상황에 맞게 이름과 업종만 바꿔도 됩니다.

이번 예시의 주인공은 다음과 같습니다.

이 정도만 정해도 러버블에 바로 들어가고 싶어질 수 있습니다. 하지만 잠깐 멈춰야 합니다. 여기서 바로 러버블 안에서 "문구를 어떻게 할까?", "서비스는 뭐라고 쓰지?", "FAQ는 뭐가 필요하지?"를 물어보기 시작하면 크레딧이 빠르게 줄어듭니다.

우리는 앞 장들에서 배운 원칙을 다시 적용합니다.

기획과 문구는 외부 AI에서 끝내고, 러버블은 구현에만 쓴다.

ChatGPT, Gemini, Claude 같은 외부 AI 도구에서 포트폴리오의 내용물을 먼저 완성한 뒤, 러버블에는 "이 내용으로 웹사이트를 만들어줘"라고 요청하는 방식입니다. Lovable 문서에서도 ChatGPT에서 아이디어와 요구사항을 구체화한 뒤 Lovable로 구현하는 흐름을 안내합니다. 대화가 구체적일수록 첫 앱 빌드가 좋아진다는 점도 강조합니다.²

외부 AI에서 포트폴리오 콘텐츠 먼저 만들기

먼저 ChatGPT나 Gemini에 들어갑니다. 여기서 할 일은 디자인이 아닙니다. 팔릴 만한 말을 정리하는 것입니다. 초보자가 포트폴리오를 만들 때 가장 오래 걸리는 부분은 사실 버튼 색상이 아니라 자기소개 문구입니다.

막상 "나를 소개해 보세요"라고 하면 손이 멈춥니다. 내가 잘하는 일을 어떻게 말해야 할지 모르겠고, 너무 자랑처럼 보일까 봐 망설이게 됩니다. 이럴 때 외부 AI를 비서처럼 쓰면 됩니다.

아래 프롬프트를 복사해서 외부 AI에 붙여넣으세요. 대괄호 안은 여러분의 정보로 바꾸면 됩니다.

나는 프리랜서 포트폴리오 웹페이지를 만들려고 한다.
러버블에서는 구현만 할 예정이므로, 지금 너는 웹사이트 기획자이자 카피라이터 역할을 해줘.

내 정보는 다음과 같다.
- 이름 또는 브랜드명: [이름]
- 하는 일: [예: 1인 사업자를 위한 브랜드 디자인]
- 주요 고객: [예: 온라인 강사, 코치, 컨설턴트]
- 고객이 겪는 문제: [예: 서비스는 좋은데 브랜드가 amateur처럼 보여 신뢰를 얻기 어려움]
- 내가 제공하는 결과: [예: 신뢰감 있는 로고, 색상, 인스타그램 템플릿, 랜딩페이지 방향]
- 원하는 말투: [예: 따뜻하고 전문적이지만 과장 없는 톤]
- 피하고 싶은 느낌: [예: 너무 화려함, 개발자스러움, 딱딱한 기업 느낌]

다음 항목을 한국어로 작성해줘.
1. 헤드라인 5개
2. 서브 헤드라인 5개
3. 짧은 자기소개 1개
4. 서비스 패키지 3개
5. 작업 사례 설명 템플릿 3개
6. 고객 후기 예시 문장 3개. 단, 실제 후기가 없다면 허위 후기로 보이지 않게 '이런 후기를 받을 수 있도록 설계' 형태로 써줘.
7. FAQ 6개
8. 문의 버튼 문구 CTA 10개
9. 전체 웹사이트 섹션 순서

이 프롬프트의 핵심은 외부 AI에게 "그냥 예쁘게 써줘"라고 하지 않는다는 점입니다. 고객, 문제, 결과, 말투, 피하고 싶은 느낌을 함께 줍니다. 그러면 AI가 더 구체적인 문구를 만들어냅니다.

예를 들어 김서연이라는 브랜드 디자이너라면 헤드라인은 이런 식으로 나올 수 있습니다.

작은 브랜드가 처음부터 신뢰받도록, 로고부터 콘텐츠 톤까지 정리합니다.

이 문장은 예쁩니다. 하지만 조금 더 영업적으로 다듬을 수 있습니다. 외부 AI에게 한 번 더 요청합니다.

좋아. 그런데 헤드라인이 조금 추상적이다.
방문자가 '그래서 나에게 어떤 도움이 되지?'를 바로 이해할 수 있게 더 구체적으로 다듬어줘.
특히 1인 사업자, 온라인 강사, 코치가 관심을 가질 만한 표현으로 바꿔줘.
문장은 짧고 선명해야 한다.

그러면 이런 방향으로 더 좋아집니다.

1인 사업자의 첫인상을 신뢰감 있는 브랜드로 바꿉니다.

이제 방문자는 바로 이해합니다. "아, 나 같은 사람을 위한 페이지구나."

서비스 패키지는 3개면 충분합니다

초보 프리랜서가 자주 하는 실수는 제공 가능한 모든 일을 다 적는 것입니다. 로고도 하고, 카드뉴스도 하고, 상세페이지도 하고, 블로그도 하고, 영상 썸네일도 하고, 발표자료도 한다고 적습니다. 능력이 많아 보일 것 같지만, 방문자 입장에서는 오히려 헷갈립니다.

처음 포트폴리오에서는 서비스 패키지를 3개 정도로 정리하는 것이 좋습니다. 선택지가 너무 많으면 문의 전에 지칩니다. 선택지는 적고, 차이는 분명해야 합니다.

예시는 다음과 같습니다.

여기서 가격을 꼭 적어야 할까요? 처음에는 "가격은 상담 후 안내"로 둘 수도 있습니다. 하지만 문의의 질을 높이고 싶다면 예산 범위를 폼에서 받는 편이 좋습니다. 예산이 전혀 맞지 않는 문의를 줄일 수 있기 때문입니다.

문의 폼에 예산 항목을 넣는 이유는 방문자를 걸러내기 위해서만이 아닙니다. 방문자도 자신의 상황을 정리하게 됩니다. "아직 예산이 없다"는 사람과 "100만 원 안에서 빠르게 만들고 싶다"는 사람은 필요한 안내가 다릅니다.

작업 사례가 부족해도 페이지는 만들 수 있습니다

"저는 아직 작업 사례가 별로 없는데요?"

이 질문이 나올 수 있습니다. 괜찮습니다. 포트폴리오는 완성된 경력자만 만드는 것이 아닙니다. 아직 실제 고객 사례가 부족하다면 다음 방식으로 시작할 수 있습니다.

• 개인 프로젝트를 작업 사례처럼 정리합니다.

• 지인의 브랜드를 가상 리디자인한 과정을 보여줍니다.

• 문제, 접근, 결과의 구조로 샘플 프로젝트를 만듭니다.

• 실제 후기가 없다면 고객 후기 섹션을 빼고 FAQ와 작업 프로세스를 강화합니다.

다만 주의할 점이 있습니다. 가상의 작업을 실제 고객 프로젝트처럼 속이면 안 됩니다. "컨셉 프로젝트", "개인 연습 프로젝트", "샘플 리디자인"이라고 표시하면 됩니다. 오히려 정직하게 과정을 보여주는 포트폴리오가 더 신뢰감을 줄 때도 많습니다.

작업 사례는 다음 세 문장 구조로 정리하면 쉽습니다.

이 구조를 외부 AI에게 주면 작업 사례 설명도 쉽게 만들 수 있습니다.

다음 작업 사례를 포트폴리오에 넣을 수 있도록 짧고 신뢰감 있게 정리해줘.
문장은 과장하지 말고, 문제-해결-결과 흐름으로 써줘.

작업명: [프로젝트 이름]
고객 또는 대상: [예: 온라인 클래스 강사]
문제: [기존 문제]
내가 한 일: [수행한 작업]
결과 또는 기대효과: [성과, 변화, 배운 점]
분량: 카드 하나에 들어갈 정도로 3~4문장

FAQ와 CTA까지 외부 AI에서 미리 뽑아두기

FAQ는 생각보다 강력합니다. 방문자가 문의하지 않는 이유는 관심이 없어서가 아니라, 아직 불안하기 때문일 수 있습니다. 비용이 너무 비싸지 않을까, 수정은 몇 번 되는지, 일정은 얼마나 걸리는지, 내가 준비해야 할 자료는 무엇인지 모르면 문의를 미룹니다.

포트폴리오형 영업 페이지의 FAQ에는 보통 이런 질문이 들어갑니다.

• 작업 기간은 얼마나 걸리나요?

• 비용은 어떻게 책정되나요?

• 첫 상담은 무료인가요?

• 제가 준비해야 할 자료가 있나요?

• 수정은 몇 번까지 가능한가요?

• 로고만, 카드뉴스만, 일부 작업만도 가능한가요?

CTA는 Call To Action의 줄임말입니다. 쉽게 말해 "방문자에게 다음 행동을 요청하는 문구"입니다. 버튼에 들어가는 말이라고 생각하면 됩니다. "문의하기"도 CTA이지만, 조금 더 상황에 맞게 바꾸면 클릭률이 좋아질 수 있습니다.

예를 들어 포트폴리오 페이지에서는 다음 문구를 쓸 수 있습니다.

여기서 너무 영업 냄새가 강하면 부담스럽습니다. 프리랜서 포트폴리오에서는 "지금 결제하세요"보다 "가볍게 문의하세요"가 더 잘 맞는 경우가 많습니다. 특히 아직 가격표나 서비스 범위가 유동적이라면 문의 장벽을 낮추는 것이 우선입니다.

러버블에 넣을 최종 구현 지시서 만들기

이제 외부 AI에서 나온 문구를 하나의 구현 지시서로 합칩니다. 러버블에 여러 번 나눠서 말하면 크레딧을 더 쓰게 됩니다. 첫 프롬프트에서 최대한 완성도 높은 1차 결과물을 얻어야 합니다.

아래는 이번 실습용 최종 프롬프트입니다. 그대로 복사한 뒤, 대괄호 안을 자신의 내용으로 바꾸세요.

Create a one-page Korean freelancer portfolio website.
All visible website copy must be in Korean.

Goal:
This website should help potential clients quickly understand my service, trust my expertise, review my work, and submit an inquiry.

Profile:
- Name or brand: [김서연]
- Profession: [1인 사업자를 위한 브랜드 디자이너]
- Target audience: [온라인 강사, 코치, 컨설턴트, 소규모 쇼핑몰 운영자]
- Main value proposition: [1인 사업자의 첫인상을 신뢰감 있는 브랜드로 바꿉니다]
- Tone: [따뜻하고 전문적이며 과장 없는 톤]

Design direction:
- Style: modern, clean, warm, premium but approachable
- Background color: warm cream
- Primary color: deep green
- Accent color: soft coral for CTA buttons
- Typography: clean sans-serif, highly readable on mobile
- Layout: responsive one-page landing page with smooth scrolling navigation
- Avoid: dark futuristic style, overly flashy animations, complicated dashboard UI

Sections:
1. Hero section
   - Big headline: [1인 사업자의 첫인상을 신뢰감 있는 브랜드로 바꿉니다]
   - Sub headline: [로고, 색상, 인스타그램 템플릿, 랜딩페이지 방향까지 브랜드의 첫인상을 정리합니다]
   - Primary CTA button: [브랜드 상담 문의하기]
   - Secondary CTA button: [작업 사례 보기]

2. About section
   - Short introduction: [여기에 외부 AI에서 만든 자기소개 문구 입력]
   - Include 3 strength cards: [명확한 방향 정리], [일관된 비주얼 시스템], [실행 가능한 디자인 가이드]

3. Services section
   - Show 3 service package cards:
     a. [스타터 브랜드 정리] - [설명 입력]
     b. [인스타그램 비주얼 세트] - [설명 입력]
     c. [랜딩페이지 디자인 방향] - [설명 입력]
   - Each card should have a small CTA: [이 패키지 문의하기]

4. Work examples section
   - Show 3 project cards.
   - Each card should include project title, client type, problem, solution, result, and image placeholder.
   - Use elegant placeholder blocks if I do not provide images yet.

5. Testimonials section
   - Add 3 testimonial cards.
   - If real testimonials are not available, label them as '협업 후 받을 수 있는 피드백 예시' so they do not look like fake real reviews.

6. FAQ section
   - Add 6 accordion-style FAQ items:
     [FAQ 질문과 답변 입력]

7. Contact section
   - Add an inquiry form with these fields:
     name, email, budget range, inquiry message
   - Budget range should be a dropdown with options:
     아직 예산 미정 / 50만 원 이하 / 50만~100만 원 / 100만~300만 원 / 300만 원 이상
   - Add a required privacy consent checkbox with a short Korean sentence.
   - After submit, show this success message:
     '문의가 접수되었습니다. 보통 24~48시간 안에 이메일로 답변드릴게요. 급한 일정이라면 이메일 또는 SNS DM도 함께 보내주세요.'
   - Add basic validation for required fields and email format.

Navigation:
- Top nav items: 소개, 서비스, 작업사례, 후기, FAQ, 문의
- CTA button in nav: 문의하기

Important:
- Keep this as a simple MVP.
- Do not add login, payment, admin dashboard, blog, AI chatbot, database dashboard, or complex animations.
- Make it polished, mobile-friendly, and easy to edit later.

이 프롬프트에는 중요한 장치가 들어 있습니다. 마지막의 "Important" 부분입니다. 러버블은 똑똑하지만, 때로는 너무 열심히 일합니다. 필요 없는 로그인, 대시보드, 복잡한 애니메이션을 붙일 수 있습니다. 그러면 수정이 늘고 크레딧이 더 들어갑니다.

그래서 우리는 러버블에게 만들 것뿐 아니라 만들지 말 것도 알려줍니다.

러버블에서 첫 결과물 생성하기

이제 Lovable에 접속해 새 프로젝트를 시작합니다. 이전 장에서 이미 프로젝트 시작 흐름을 다뤘으니, 여기서는 실습 순서만 간단히 잡겠습니다.

먼저 새 프로젝트를 만들고, 방금 만든 최종 구현 지시서를 첫 프롬프트로 붙여넣습니다. 이때 중간에 "일단 대충 만들어줘"라고 하지 마세요. 첫 요청이 가장 중요합니다. 첫 요청이 선명하면 뒤의 수정 요청이 줄어듭니다.

러버블이 사이트를 생성하면 바로 마음에 드는지 평가하지 말고, 아래 순서로 확인합니다.

1. 모바일 화면에서 헤드라인이 잘 보이는지 확인합니다.

2. CTA 버튼을 눌렀을 때 문의 섹션으로 이동하는지 확인합니다.

3. 서비스 카드 3개가 한눈에 비교되는지 확인합니다.

4. 작업 사례가 너무 길거나 허전하지 않은지 확인합니다.

5. 문의 폼에 이름, 이메일, 예산, 문의 내용이 들어갔는지 확인합니다.

6. 제출 후 안내 메시지가 나오는지 확인합니다.

초보자는 보통 데스크톱 화면만 보고 만족합니다. 하지만 실제 방문자는 휴대폰으로 볼 가능성이 큽니다. 인스타그램 프로필, 링크드인, 카카오톡, 문자, DM에서 링크를 누르면 대부분 모바일로 열립니다. 그러니 모바일 화면 확인은 선택이 아니라 필수입니다.

브랜드 색상과 톤을 맞추는 수정 프롬프트

첫 결과물이 나왔는데 색감이 마음에 들지 않을 수 있습니다. 이때 "더 고급스럽게 해줘"라고만 말하면 결과가 흔들립니다. 고급스럽다는 말은 사람마다 다릅니다. 누구에게는 검정과 금색이고, 누구에게는 여백 많은 흰색입니다.

이럴 때는 구체적으로 말합니다.

현재 페이지의 구조는 유지해줘.
디자인 톤만 다음 방향으로 조정해줘.

- 전체 배경은 따뜻한 크림색 계열로 유지
- 주요 텍스트는 진한 차콜 또는 딥그린 사용
- CTA 버튼은 부드러운 코랄색으로 변경
- 카드 디자인은 그림자보다 얇은 테두리와 넓은 여백을 사용
- 전체 느낌은 여성스럽게 과하지 않고, 1인 사업자가 신뢰할 수 있는 전문적인 분위기
- 섹션 순서와 문의 폼 기능은 변경하지 마

여기서 핵심은 "구조는 유지"입니다. 색상만 바꾸고 싶은데 러버블이 섹션까지 바꾸면 다시 수정해야 합니다. 수정 프롬프트에는 항상 범위를 적어야 합니다.

버튼 문구나 소개 문장처럼 작은 텍스트 수정은 이전 장에서 배운 Visual Editor로 처리하는 편이 좋습니다. 프롬프트를 한 번 더 쓰지 않아도 되기 때문입니다. 예를 들어 "문의하기"를 "브랜드 상담 문의하기"로 바꾸는 정도라면 직접 클릭해서 수정하세요. 크레딧을 아끼는 가장 쉬운 방법입니다.

문의 폼은 '보이는 것'과 '실제로 받는 것'을 구분해야 합니다

여기서 아주 중요한 이야기를 해야 합니다. 초보자가 많이 헷갈리는 부분입니다.

웹페이지에 문의 폼이 보인다고 해서, 그 내용이 자동으로 내 이메일에 도착하는 것은 아닙니다. 이름, 이메일, 문의 내용을 입력하고 버튼을 눌렀을 때 화면에 "접수되었습니다"라고 뜨더라도, 실제로 저장하거나 발송하는 기능이 연결되어 있지 않으면 문의 내용은 사라질 수 있습니다.

이번 장에서는 첫 포트폴리오의 화면과 사용자 경험을 만드는 데 집중합니다. 실제 문의 수신 방식은 세 가지 중 하나로 선택할 수 있습니다.

Lovable의 포트폴리오 튜토리얼에서도 실제 작동하는 연락 폼을 만들 때 Resend API 같은 이메일 전송 도구를 함께 사용하는 예시가 소개됩니다.³ 다만 이것은 초보자에게는 조금 더 복잡할 수 있습니다. Supabase는 뒤 챕터에서 아주 쉽게 다룰 예정이므로, 지금은 욕심내지 않아도 됩니다.

무료 사용자에게 가장 안전한 1차 방식은 이것입니다.

문의 폼 UI는 페이지에 만들고, 동시에 이메일 주소와 SNS DM 링크를 함께 보여준다.

그리고 실제 문의를 놓치고 싶지 않다면 Google Forms나 Tally로 간단한 문의 폼을 만든 뒤, 버튼을 그 링크로 연결해도 됩니다. 처음에는 폼이 내 사이트 안에서 완벽하게 작동하는 것보다, 문의를 실제로 받는 것이 더 중요합니다.

러버블에 다음 수정 요청을 할 수 있습니다.

Contact section을 더 안전한 문의 흐름으로 개선해줘.

- 기존 문의 폼은 유지해줘.
- 폼 아래에 보조 안내 문구를 추가해줘:
  '폼 제출이 어렵다면 이메일 [email protected] 또는 인스타그램 DM @example 로 문의해 주세요.'
- CTA 버튼 하나를 추가해줘:
  '외부 문의 폼으로 작성하기'
- 이 버튼은 임시로 https://example.com 으로 연결해줘. 나중에 내가 Google Forms 또는 Tally 링크로 바꿀 수 있게 해줘.
- 전체 디자인 톤은 기존과 동일하게 유지해줘.

이렇게 해두면 기술적인 연동이 완벽하지 않아도 문의 길이 막히지 않습니다. 포트폴리오 페이지의 목적은 "기술적으로 멋진 폼"이 아니라 "연락을 받는 것"입니다.

문의 폼에 꼭 넣을 항목

문의 폼은 짧아야 합니다. 너무 많은 정보를 요구하면 방문자가 중간에 나갑니다. 첫 문의 단계에서는 딱 필요한 것만 받으면 됩니다.

기본 항목은 네 가지입니다.

여기에 개인정보 수집 동의 체크박스를 넣는 것도 좋습니다. 법률적으로 자세한 내용은 상황에 따라 다를 수 있지만, 최소한 "문의 답변을 위해 입력 정보를 수집합니다" 정도의 안내는 넣어두는 편이 안전합니다.

제출 후 메시지도 중요합니다. "성공"이라고만 뜨면 차갑습니다. 방문자는 정말 접수된 것인지, 언제 답장이 오는지 궁금합니다. 그래서 안내 메시지에는 답변 예상 시간을 넣는 것이 좋습니다.

추천 문구는 다음과 같습니다.

문의가 접수되었습니다. 보통 24~48시간 안에 이메일로 답변드릴게요. 급한 일정이라면 이메일 또는 SNS DM도 함께 보내주세요.

이 문구는 방문자를 안심시킵니다. 동시에 여러분에게도 답변 기준을 만들어줍니다.

첫 번째 테스트: 고객처럼 들어가 보기

사이트가 완성되면 제작자 눈이 아니라 고객 눈으로 봐야 합니다. 내 페이지라서 모든 것이 중요해 보이지만, 고객은 그렇게 오래 보지 않습니다.

테스트는 간단합니다. 휴대폰으로 내 사이트를 열고, 처음 보는 사람처럼 아래 질문에 답해보세요.

• 5초 안에 이 사람이 무슨 일을 하는지 알 수 있는가?

• 내가 대상 고객인지 바로 알 수 있는가?

• 서비스가 3개 이내로 이해하기 쉽게 정리되어 있는가?

• 작업 사례가 신뢰를 주는가?

• 문의 버튼을 찾기 쉬운가?

• 문의 폼 작성이 부담스럽지 않은가?

• 제출 후 다음 단계가 명확한가?

가능하면 지인 한 명에게 링크를 보내고 이렇게 물어보세요.

"이 페이지를 보고 내가 무슨 일을 하는 사람인지 한 문장으로 말해줄 수 있어?"

상대가 머뭇거리면 헤드라인이 아직 흐린 것입니다. 이때 디자인부터 고치지 말고 문장부터 고쳐야 합니다. 좋은 포트폴리오는 예쁜 페이지 이전에 이해되는 페이지입니다.

수정은 한 번에 하나씩만 요청합니다

초보자가 크레딧을 많이 쓰는 순간은 보통 "이것저것 한꺼번에 수정해줘"라고 할 때입니다. 예를 들어 색상도 바꾸고, 문구도 바꾸고, 섹션도 추가하고, 문의 폼도 고치고, 애니메이션도 넣어달라고 한 번에 요청하면 결과를 검토하기 어려워집니다. 마음에 안 드는 부분이 생겨도 무엇 때문에 꼬였는지 알기 힘듭니다.

이 장의 프로젝트에서는 다음 순서로 수정하는 것을 추천합니다.

1. 구조 확인: 섹션 순서와 CTA 흐름이 맞는지 본다.

2. 문구 수정: 헤드라인, 서비스 설명, FAQ를 다듬는다.

3. 디자인 수정: 색상, 여백, 카드 스타일을 조정한다.

4. 문의 흐름 수정: 폼 항목, 성공 메시지, 외부 문의 링크를 점검한다.

5. 모바일 확인: 글자 크기, 버튼 크기, 카드 간격을 확인한다.

이 중 문구 수정은 가능한 Visual Editor로 직접 하세요. 프롬프트는 구조와 기능처럼 큰 변경에만 씁니다.

완성된 링크는 어디에 붙여야 할까

포트폴리오 페이지는 만들어놓고 기다리면 효과가 없습니다. 링크를 사람들 앞에 꺼내놓아야 합니다. 웹사이트는 매장입니다. 그런데 간판도 없고 길 안내도 없으면 아무도 찾아오지 않습니다.

완성된 링크는 다음 위치에 연결하세요.

• 인스타그램, 링크드인, X, 브런치, 블로그 프로필

• 카카오톡 오픈프로필 또는 비즈니스 프로필

• 이메일 서명

• PDF 제안서 마지막 페이지

• 명함 또는 오프라인 전단의 QR 코드

• 크몽, 숨고, 탈잉, 클래스 플랫폼 소개란

• 네이버 블로그나 티스토리의 상단 공지 글

특히 제안서에 포트폴리오 링크를 넣으면 좋습니다. PDF 안에 모든 사례를 길게 넣지 않아도, "더 많은 작업 사례는 여기에서 확인하실 수 있습니다"라고 안내할 수 있습니다. 명함에는 긴 주소보다 QR 코드를 넣는 편이 좋습니다. 상대가 휴대폰으로 바로 열어볼 수 있기 때문입니다.

SNS 프로필에는 너무 멋을 부린 문구보다 명확한 설명이 좋습니다.

예를 들어 이렇게 쓸 수 있습니다.

1인 사업자를 위한 브랜드 디자인
작업 사례와 상담 문의는 아래 링크에서 확인하세요.

또는 콘텐츠 마케터라면 이렇게 쓸 수 있습니다.

전문가의 지식을 블로그·뉴스레터·전자책 콘텐츠로 정리합니다.
포트폴리오와 문의는 링크에서 확인하세요.

중요한 것은 링크 앞에 "왜 눌러야 하는지"를 한 줄로 설명하는 것입니다. 링크만 던져두면 사람들은 잘 누르지 않습니다.

이번 장의 완성 기준

이번 장을 마쳤다면 여러분은 러버블로 첫 번째 영업용 웹페이지를 만든 것입니다. 아직 완벽하지 않아도 됩니다. 포트폴리오는 처음부터 완성되는 것이 아니라, 일을 하면서 계속 업데이트되는 자산입니다.

이번 프로젝트의 완성 기준은 다음과 같습니다.

• 내가 누구를 돕는 사람인지 헤드라인에 분명히 드러난다.

• 자기소개가 길지 않고 신뢰를 준다.

• 서비스 패키지가 3개 정도로 정리되어 있다.

• 작업 사례가 문제, 해결, 결과 흐름으로 설명되어 있다.

• 고객 후기 또는 FAQ가 방문자의 불안을 줄여준다.

• 문의 폼에 이름, 이메일, 예산, 문의 내용이 들어 있다.

• 제출 후 안내 메시지 또는 대체 연락 방법이 있다.

• 완성된 링크를 SNS, 프로필, 제안서, 명함에 연결할 수 있다.

여기까지 왔다면 이미 "러버블로 뭔가 만들어봤다"를 넘어섰습니다. 이제는 "러버블로 내 일을 설명하고 문의를 받을 수 있는 페이지를 만들었다"에 가깝습니다.

다음 장에서는 여기서 한 단계 더 실용적인 페이지를 만들어봅니다. 포트폴리오가 "나를 소개하는 페이지"라면, 예약·상담 신청 페이지는 "시간을 정하고 다음 행동으로 연결하는 페이지"입니다. 프리랜서, 코치, 강사, 컨설턴트에게는 문의만큼이나 중요한 흐름입니다.

지금 만든 포트폴리오 링크를 잘 보관해두세요. 다음 실습의 출발점이 될 수 있습니다.

참고

¹Build a Stunning Portfolio Website in Minutes with Lovable

²Lovable ChatGPT App - Lovable Documentation

³Build a STUNNING Portfolio Website From Scratch with AI (No Coding!)