AI로 디렉터리 웹사이트 만드는 방법

빌더를 열기 전에 사이트의 가장 작은 유용한 버전을 적어두세요.

대부분의 디렉터리 웹사이트라면 보통 다음이 필요합니다:

• 니치를 설명하는 홈페이지
• 카드 형태의 목록 페이지
• 검색과 몇 가지 필터
• 각 항목의 상세 페이지
• 사람들이 목록을 제안할 수 있다면 제출 또는 문의 페이지
• 기본 내비게이션과 푸터 페이지

데이터 구조도 함께 정의하세요. 디렉터리는 결국 레코드 모음이므로 필드를 구체적으로 정하는 것이 중요합니다. 예시 필드:

• name
• category
• city or region
• short description
• website URL
• image
• pricing tier
• tags
• contact email

그다음 누가 무엇을 할 수 있는지도 정하세요:

• 방문자는 둘러보고 검색한다
• 편집자는 목록을 추가하거나 수정한다
• 업체는 직접 자신의 목록을 제출한다

첫 버전이 선별형 디렉터리라면 지금 당장 로그인 기능이 필요하지 않을 수도 있습니다. 계정, 저장한 항목, 또는 목록 제출이 필요하다면 빌드 전에 그 흐름을 먼저 계획하세요.

첫 프롬프트는 프로젝트의 구조, 기술 선택, 분위기를 정하는 데 중요합니다. Moremade에서는 사이트를 자연어로 설명하면 AI 에이전트가 소스 코드를 작성하고, 그다음 실시간 미리보기를 보여줍니다.

좋은 첫 프롬프트에는 다음이 포함되어야 합니다:

• 디렉터리의 종류
• 필요한 페이지
• 각 목록의 핵심 필드
• 시각적 스타일
• 콘텐츠가 당장은 정적일지, 나중에 데이터와 연결될지 여부
• 모바일 요구사항

구체적으로 쓰세요. 아직 작업 흐름을 결정하는 중이라면 한 번에 모든 것을 요구하지 마세요.

React + Tailwind로 리스본의 독립 카페를 위한 디렉터리 웹사이트를 만들어 주세요. 홈페이지, 검색 가능한 목록 카드가 있는 브라우즈 페이지, 동네와 가격 필터, 그리고 각 카페의 상세 페이지를 포함해 주세요. 각 목록에는 이름, 사진, 짧은 설명, 주소, 운영 시간, 웹사이트, wifi나 brunch 같은 태그가 보여야 합니다. 깔끔한 에디토리얼 레이아웃에 단순한 내비게이션, 모바일 친화적인 카드 그리드를 사용해 주세요. 샘플 데이터로 시작해 주세요. 제출 폼 레이아웃이 있는 submit-a-shop 페이지를 추가하되, 백엔드는 아직 연결하지 마세요.

첫 빌드 후에는 팀원이 만든 프론트엔드 초안을 검토하듯 실시간 미리보기를 살펴보세요. 페이지 계층, 여백, 필터 동작, 카드 가독성, 그리고 상세 페이지가 적절한 정보를 보여주는지 확인합니다.

Moremade는 대화로 수정할 수 있고, 시각적 인스펙터와 코드 뷰도 제공합니다. 전체 설명을 다시 쓰기보다 짧고 구체적인 요청을 하세요.

유용한 후속 프롬프트 예시 세 가지:

• "목록 카드 이미지를 4:3으로 바꾸고, 태그를 설명 아래로 옮기고, website 링크는 보조 버튼으로 바꿔 주세요."
• "브라우즈 페이지에 search, neighbourhood, price 필터가 있는 sticky filter bar를 추가해 주세요. 모바일에서는 필터를 drawer로 접어 주세요."
• "홈페이지 히어로와 소개 문구를 더 중립적이고 실용적으로 다시 써 주세요. 업체 선정 기준을 설명하는 섹션도 추가해 주세요."

이 단계는 보통 몇 차례 반복하게 됩니다. 한 번에 한 종류의 변경에 집중하세요:

• 레이아웃과 내비게이션
• 필터 로직과 카드 내용
• 문구와 라벨
• 모바일 여백
• 버튼 텍스트와 대비 같은 접근성 세부사항

한 페이지가 잘 작동하면, 같은 패턴을 사이트의 나머지 부분에도 재사용하도록 요청하세요.

많은 디렉터리는 우선 샘플 또는 선별된 콘텐츠로 출시할 수 있습니다. 실제로 필요할 때만 백엔드 요소를 추가하세요.

다음이 필요하다면 Supabase를 사용하세요:

• 목록용 데이터베이스
• 관리자 또는 사용자 로그인
• 이미지용 파일 저장소
• 사용자가 제출한 목록

예시 사례:

• 편집자가 데이터베이스에 레코드를 추가하는 지역 비즈니스 디렉터리
• 사용자가 로그인해 자신의 프로필을 관리하는 멤버 디렉터리
• 제출 워크플로가 있는 디렉터리

다음과 같은 기능이 유료라면 Stripe를 사용하세요:

• 유료 목록 제출
• 스폰서 노출
• 프리미엄 데이터 접근을 위한 구독

범위를 좁게 유지하세요. 첫 버전이 단순 공개 브라우징이라면 계정 시스템이나 결제는 아직 넣지 마세요. Moremade에는 Supabase와 Stripe용 커넥터가 포함되어 있어, 제품 모델이 분명해졌을 때 연결할 수 있습니다.

일반적인 순서는 다음과 같습니다:

• 먼저 공개 브라우징 경험을 만든다
• 목록과 관리자 편집을 위해 Supabase를 연결한다
• 유료 제출 흐름이 필요할 때 Stripe를 나중에 추가한다

디렉터리 사이트는 데스크톱에서는 괜찮아 보여도 휴대폰에서는 어색해지기 쉽습니다. 흔한 문제는 긴 카드, 답답한 필터, 너무 많은 섹션이 어색하게 쌓인 상세 페이지입니다.

미리보기에서 다음을 점검하세요:

• 검색창 너비와 터치 타깃
• 필터가 제대로 접히는지 여부
• 카드의 이미지 크롭
• 주소, 태그, 메타데이터의 가독성
• 버튼과 폼 주변 여백
• 상세 페이지에서 가장 유용한 정보가 상단 근처에 유지되는지

필요하다면 다음처럼 정확한 모바일 수정을 요청하세요:

• 카드 텍스트를 두 줄로 줄이기
• 보조 메타데이터를 아래로 보내기
• filter chips를 가로 스크롤 행으로 바꾸기
• 작은 화면에서 CTA 버튼을 전체 너비로 만들기

이 시점은 시각적 인스펙터로 요소를 클릭해 직접 조정하기에도 좋습니다.

구조와 콘텐츠가 충분히 안정되면 공개하세요. Moremade는 한 번의 클릭으로 무료 yourname.moremade.ai 서브도메인에 게시할 수 있습니다. 유료 플랜이라면 커스텀 도메인을 연결할 수 있습니다. 도메인은 Moremade 안에서 직접 구매할 수도 있습니다.

실전적인 출시 방법은 다음과 같습니다:

• 먼저 무료 서브도메인에 공개한다
• 링크, 폼, 페이지 제목을 테스트한다
• 몇 사람에게 공유해 피드백을 받는다
• 사이트가 준비되면 커스텀 도메인을 연결한다

플랫폼 밖에서도 사본을 보관하고 싶다면 전체 소스를 ZIP으로 내보내거나 GitHub로 푸시하세요. 웹사이트는 실제 React + Tailwind 코드로 만들어지므로, 독자적인 형식에 묶이지 않습니다.

대부분의 문제는 빌더 자체보다 불분명한 구조에서 생깁니다.

다음 실수는 피하세요:

• 너무 많은 필터를 너무 일찍 넣는 것. 사람들은 실제로 선택지를 좁힐 때 쓰는 두세 개의 필드만 있으면 되는 경우가 많습니다.
• 데이터 모델이 없는 것. 목록 필드가 모호하면 모든 페이지가 일관성을 잃습니다.
• 큐레이션과 제출을 규칙 없이 섞는 것. 목록이 편집형인지, 사용자 제출형인지, 혹은 둘 다인지 정하세요.
• 필요하기 전에 로그인 기능을 추가하는 것. 공개 디렉터리는 출시 시점에 계정 없이도 충분히 잘 작동할 수 있습니다.
• 모든 기능을 한 번에 넣는 거대한 프롬프트를 쓰는 것. 먼저 핵심 흐름을 만든 뒤, 작은 단계로 다듬으세요.
• 모바일 검토를 무시하는 것. 디렉터리 탐색은 대부분 휴대폰에서 이뤄집니다.
• 소유권 계획 없이 출시하는 것. 나중에 깔끔하게 인계하려면 코드를 내보내거나 GitHub로 푸시하세요.

버전 히스토리는 이 과정에서 도움이 됩니다. 한 번의 변경으로 사이트가 나빠졌다면 되돌리고 더 좁은 지시로 다시 시도하세요.