AI로 포트폴리오 웹사이트 만드는 방법

빌더를 열기 전에 최소 범위를 먼저 적어두세요. 대부분의 개인 포트폴리오는 많은 페이지가 필요하지 않지만, 명확한 콘텐츠는 꼭 필요합니다.

일반적인 구조는 다음과 같습니다.

• 이름, 역할, 짧은 소개, 대표 프로젝트 몇 개가 있는 홈 페이지
• 스크린샷, 요약, 사용한 도구, 결과가 포함된 프로젝트 페이지 또는 프로젝트 섹션
• 배경, 기술, 작업 방식이 담긴 소개 페이지
• 이메일, 소셜 링크, 필요하면 문의 폼이 포함된 연락처 섹션

또한 사이트가 누구를 위한 것인지 정하세요.

• 빠르게 작업 증거를 확인하려는 채용 담당자
• 자신이 그 프로젝트 유형에 맞는지 확인하려는 클라이언트
• 과정과 취향을 보고 싶은 협업자

그다음 이미 가지고 있는 콘텐츠를 나열하세요.

• 프로젝트 제목
• 프로젝트당 1–3장의 스크린샷
• 짧은 설명
• 실제 작업물 또는 GitHub 링크
• 자기소개와 프로필 사진

이렇게 먼저 해두면, AI가 첫 시도부터 쓸 만한 결과를 만들 수 있어 일반적인 템플릿만 내놓는 일을 줄일 수 있습니다.

Moremade에서는 사이트를 평범한 말로 설명하면 됩니다. AI 에이전트가 소스 코드를 작성하고, 라이브 미리보기를 제공하며, 채팅으로 계속 수정할 수 있습니다.

첫 프롬프트에는 다음을 포함하세요.

• 어떤 종류의 포트폴리오인지
• 어떤 페이지나 섹션이 필요한지
• 어떤 콘텐츠를 넣을지
• 시각적 방향
• 문의 폼이나 링크 같은 기능 세부사항

구체적으로 쓰세요. "포트폴리오 만들어줘"처럼만 말하면 결과를 고치는 데 더 많은 시간이 듭니다.

첫 프롬프트 예시:

프리랜서 제품 디자이너 Maya Chen을 위한 개인 포트폴리오 웹사이트를 만들어 주세요. 깔끔하고 미니멀한 레이아웃에 강한 타이포그래피, 톤다운된 색상, 넉넉한 여백을 사용해 주세요. 짧은 히어로 소개, 대표 프로젝트, 소개 섹션, 후기용 자리표시자, 연락처 섹션이 있는 홈 페이지를 만들어 주세요. 4개의 사례 연구 카드가 있는 프로젝트 페이지도 추가해 주세요. 각 프로젝트에는 제목, 한 줄 요약, 사용한 도구, 더 보기 버튼이 있어야 합니다. 내비게이션, 푸터, 모바일 친화적 레이아웃, 문의 폼을 포함해 주세요. React와 Tailwind 스타일 관례를 사용하고, 사이트가 화려하기보다 전문적으로 느껴지게 해 주세요.

단순한 포트폴리오라면, 먼저 핵심 페이지와 무난한 기본 레이아웃부터 요청하세요. 미리보기를 본 뒤 시각적 세부사항을 다듬어도 됩니다.

첫 버전이 생성되면 라이브 미리보기를 꼼꼼히 살펴보세요. 먼저 콘텐츠 구조를 보고, 그다음 시각적 완성도를 확인하세요.

다음 항목을 점검하세요.

• 첫 화면에서 위계 구조가 명확한가요?
• 프로젝트를 빠르게 훑어보기 쉬운가요?
• 소개 섹션이 충분히 개인적으로 느껴지나요?
• 버튼, 여백, 글자 크기가 일관적인가요?
• 교체해야 할 채우기용 문구처럼 느껴지는 부분은 없나요?

Moremade는 채팅으로 수정할 수 있고, 시각적 인스펙터도 있어서 요소를 직접 지정해 편집할 수 있습니다. 한 번에 한 가지 문제만 겨냥하는 짧은 후속 프롬프트를 사용하세요.

유용한 예시 3개:

• "히어로 섹션 높이를 줄이고, 대표 프로젝트를 더 위로 올리고, 소개 문구를 더 간결하게 만들어 주세요."
• "프로젝트 카드를 위에 썸네일, 도구 태그, 요약 아래 짧은 결과 한 줄이 있는 사례 연구 미리보기로 바꿔 주세요."
• "중립적인 색감을 조금 더 따뜻하게 바꾸고, 본문 텍스트 대비를 높이고, 연락 폼 버튼은 모바일에서만 전체 너비로 만들어 주세요."

첫 구조가 명백히 잘못된 경우가 아니라면, 완전한 재디자인을 요청하지 않는 편이 보통 더 빠릅니다.

많은 포트폴리오는 데이터베이스, 로그인, 결제가 필요하지 않습니다. 첫 버전을 단순하게 유지하면 완성하기 쉬워집니다.

다음과 같은 기능이 필요할 때만 Supabase를 사용하세요.

• 제출 내용을 저장하는 문의 폼
• 로그인 뒤에 보호되는 콘텐츠
• 데이터에서 프로젝트 항목을 업데이트하는 작은 CMS 같은 설정

포트폴리오가 무엇인가를 판매할 때만 Stripe를 사용하세요. 예를 들면:

• 유료 디자인 템플릿
• 상담 세션
• 디지털 다운로드

Moremade는 Resend와 SendGrid 같은 이메일 제공업체와 함께 Supabase, Stripe용 기본 커넥터를 제공합니다. 이런 기능을 추가한다면 요구사항을 분명하게 적으세요.

예시:

• "문의 폼을 Supabase에 연결해서 name, email, message가 저장되도록 해 주세요."
• "내가 설정한 가격으로 60-minute 포트폴리오 리뷰 세션용 Stripe 결제 페이지를 추가해 주세요."

목표가 전문적인 개인 사이트를 빠르게 공개하는 것이라면, 실제 필요를 해결하지 않는 한 이런 연동은 건너뛰세요.

포트폴리오는 이메일이나 소셜 프로필의 링크를 통해 먼저 휴대폰에서 검토되는 경우가 많습니다. 모바일 문제는 좋은 작업물도 부주의해 보이게 만드는 가장 쉬운 방법 중 하나입니다.

미리보기에서 다음을 확인하세요.

• 내비게이션 메뉴 동작
• 히어로 텍스트 줄바꿈
• 프로젝트 카드 간격
• 이미지 크롭
• 버튼 크기와 터치 대상
• 문의 폼 필드 간격
• 푸터 링크의 가독성

"모바일을 더 좋게 해 주세요"처럼 말하기보다 정확한 수정 사항을 요청하세요.

예시:

• "모바일 폭보다 작은 화면에서는 히어로 콘텐츠를 세로로 쌓고, 헤드라인 크기를 한 단계 줄여 주세요."
• "모든 프로젝트 썸네일의 가로세로 비율을 동일하게 하고, 휴대폰에서 캡션이 3줄로 넘어가지 않게 해 주세요."
• "연락처 섹션의 좌우 패딩을 늘리고, 작은 화면에서 제출 버튼을 더 쉽게 누를 수 있게 해 주세요."

Moremade는 코드 뷰도 제공하므로, React와 Tailwind 코드에서 정확히 무엇이 바뀌었는지 확인하고 싶을 때 유용합니다.

사이트가 만족스럽게 보이면 배포하세요. Moremade는 무료 yourname.moremade.ai 서브도메인으로 한 번에 배포할 수 있습니다. 유료 플랜에서는 커스텀 도메인을 연결할 수 있고, 도메인도 Moremade 안에서 구매할 수 있습니다.

실전 배포 순서는 다음과 같습니다.

• 먼저 무료 서브도메인에 배포하기
• 데스크톱과 휴대폰에서 라이브 사이트 열어보기
• 남은 콘텐츠나 간격 문제 수정하기
• 유료 플랜이라면 커스텀 도메인 연결하기

Moremade는 웹사이트용 실제 React + Tailwind 코드를 생성합니다. 언제든 전체 소스를 ZIP으로 내보내거나 GitHub로 푸시할 수 있습니다. 포트폴리오에서는 나중에 다른 곳에 호스팅하거나, 개발자에게 넘기거나, 플랫폼 밖에서 계속 수정하고 싶을 수 있으므로 이 점이 중요합니다.

사이트를 자주 바꿀 가능성이 있다면, 유료 플랜의 버전 히스토리는 변경 전후를 비교하고 되돌리는 데 유용합니다.

가장 큰 실패 요인은 기술이 아닙니다. 완성된 것처럼 보이지만 실제로는 거의 아무 말도 하지 않는 포트폴리오를 내보내는 것입니다.

다음과 같은 흔한 문제를 조심하세요.

• 홈 페이지에 섹션이 너무 많고 우선순위가 없는 경우
• 내가 무엇을 했는지 설명하지 못하는 모호한 프로젝트 요약
• 템플릿 같은 결과를 만드는 지나치게 일반적인 시각적 프롬프트
• 실제 사용 사례 없이 Stripe, 로그인, 데이터베이스 기능을 추가하는 경우
• 모바일 검토를 생략하는 경우
• 자리표시자 텍스트, 스톡 이미지, 비어 있는 사례 연구 페이지를 그대로 공개하는 경우

좋은 포트폴리오는 보통 몇 가지를 단순하지만 잘 해냅니다.

• 자신이 누구이고 어떤 작업을 하는지 말해 줌
• 모든 것이 아니라 선별된 프로젝트를 보여 줌
• 자신의 사고 과정을 판단할 수 있을 만큼 충분한 디테일을 제공함
• 연락하기 쉽게 만듦

AI를 사용해 빠르게 탄탄한 초안을 만든 다음, 나머지 시간은 콘텐츠의 실질을 개선하는 데 쓰세요.