팁 및 모범 사례
이 팁과 모범 사례로 Website2AI를 최대한 활용하세요.
효과적인 프롬프트 작성
구체적으로
더 많은 세부 사항을 제공할수록 더 나은 결과를 얻습니다.
덜 효과적:
웹사이트 만들어줘
더 효과적:
UX 디자이너를 위한 모던 포트폴리오 웹사이트를 만들어주세요. 포함:
- 제 이름과 태그라인이 있는 히어로 섹션
- 프로젝트 썸네일을 보여주는 6개의 카드가 있는 프로젝트 갤러리
- 사진과 소개가 있는 소개 섹션
- 전문 분야를 보여주는 스킬 섹션
- 문의 양식
미니멀한 디자인에 다크 테마와 보라색 악센트를 사용해주세요.
구조 설명
원하는 섹션과 레이아웃을 명시적으로 언급:
다음 섹션이 순서대로 있는 랜딩 페이지를 만들어주세요:
1. 헤드라인, 부제목, CTA 버튼이 있는 히어로
2. 3개의 카드가 있는 기능 섹션
3. 3단계 프로세스를 보여주는 작동 방식
4. 후기 캐러셀
5. 3개 티어가 있는 가격표
6. FAQ 아코디언
7. 링크와 뉴스레터 가입이 있는 푸터
시각적 스타일 지정
더 나은 결과를 위해 디자인 선호도 포함:
스타일 선호도:
- 깔끔하고 모던한 미학
- 충분한 여백
- 카드와 버튼에 둥근 모서리
- 깊이감을 위한 은은한 그림자
- 산세리프 글꼴
- 기본 색상: #3B82F6 (파란색)
- 보조 색상: #10B981 (녹색)
예시 제공
기존 웹사이트나 스타일 참조:
Stripe의 가격 페이지와 비슷한 가격 페이지를 만들어주세요 - 깔끔하고
전문적이며 비교 테이블과 아래에 FAQ 섹션이 있는.
반복적 개선
단순하게 시작하고 추가하기
기본 구조로 시작한 다음 기능 추가:
- 첫 번째 프롬프트: 기본 레이아웃과 섹션
- 두 번째 프롬프트: 특정 콘텐츠와 스타일링 추가
- 세 번째 프롬프트: 인터랙션과 세부 사항 다듬기
집중된 요청하기
한 번에 많은 변경을 요청하는 대신:
덜 효과적:
색상 변경하고, 애니메이션 추가하고, 모바일 레이아웃 수정하고,
새 섹션 추가하고, 글꼴 업데이트해줘
더 효과적:
기본 색상을 파란색에서 보라색(#8B5CF6)으로 변경해줘
그런 다음 추가 요청으로 후속 조치.
점진적 변경 사용
더 나은 결과를 위해 작고 집중된 변경을 하세요:
- 변경하기
- 결과 미리보기
- 마음에 들지 않으면 다른 접근 방식 요청
곧 제공 예정
버전 기록 및 복원 기능이 개발 중입니다. 곧 모든 이전 버전을 탐색하고 복원할 수 있게 됩니다.
콘텐츠 가이드라인
실제 콘텐츠 제공
가능하면 플레이스홀더 대신 실제 콘텐츠 사용:
소개 섹션 콘텐츠:
"안녕하세요, 저는 Sarah Chen입니다. 8년 경력의 제품 디자이너로
직관적인 디지털 경험을 만들어왔습니다. 스타트업과
Fortune 500 기업들과 함께 그들의 비전을 실현시켜왔습니다."
이미지 요구 사항 명시
이미지 필요에 대해 명확하게:
히어로 이미지: 모던한 사무실 공간의 전문적인 사진,
식물이 있는 밝고 통풍이 잘 되는 공간
Call-to-Action 포함
CTA를 명시하는 것을 잊지 마세요:
기본 CTA 버튼: "무료 체험 시작"
보조 CTA: "데모 보기"
성능 팁
집중 유지
명확한 목적을 가진 웹사이트가 더 잘 수행됩니다:
- 단일 랜딩 페이지 > 복잡한 다중 페이지 사이트
- 집중된 콘텐츠 > 한 페이지에 모든 것
- 특정 기능 > 일반적인 모든 것 포함
모바일 우선 사고
모바일 요구 사항을 명시적으로 언급:
디자인이 모바일에서 잘 작동하도록 해주세요:
- 작은 화면에서 햄버거 메뉴
- 모바일에서 카드 세로로 쌓기
- 터치 친화적인 버튼 (최소 44px)
속도 최적화
필요할 때 최적화 요청:
페이지를 가볍게 유지해주세요 - 무거운 애니메이션과
큰 이미지 피하기. 빠른 로드 시간 우선.
일반적인 패턴
랜딩 페이지
다음을 포함한 SaaS 랜딩 페이지를 만들어주세요:
- 히어로: 헤드라인, 설명, 이메일 가입, 제품 스크린샷
- 소셜 프루프: 고객 회사 로고 바
- 기능: 아이콘이 있는 3-4개의 주요 기능
- 작동 방식: 단계별 프로세스
- 후기: 사진이 있는 2-3개의 고객 리뷰
- 가격: 3단계 가격표
- CTA: 최종 call-to-action 섹션
- 푸터: 링크, 소셜 아이콘, 뉴스레터
포트폴리오 사이트
[직업]을 위한 포트폴리오를 만들어주세요:
- 히어로: 이름, 직함, 간단한 소개
- 작업: 썸네일이 있는 프로젝트 그리드
- 소개: 사진, 소개글, 배경
- 스킬/서비스: 제공하는 것
- 연락처: 양식 또는 연락처 정보
비즈니스 웹사이트
[비즈니스 유형]을 위한 웹사이트를 만들어주세요:
- 히어로: 하는 일, 핵심 가치 제안
- 서비스: 제공하는 것
- 소개: 회사 이야기, 팀
- 후기: 고객 리뷰
- 연락처: 양식, 위치, 영업시간
문제 해결
생성이 너무 오래 걸림
- 요청을 단순화하세요
- 더 작은 부분으로 나누세요
- 인터넷 연결 확인
결과가 기대와 맞지 않음
- 더 구체적인 세부 사항 추가
- 시각적 참조 제공
- 명시적인 구조 설명 사용
빌드 오류
AI가 자동으로 빌드 오류 수정을 시도합니다. 문제가 지속되면:
- 더 단순한 버전 요청
- 더 적은 커스텀 기능 지정
- 새로운 생성으로 다시 시작
모범 사례 요약
- 구체적으로 - 세부 사항이 더 나은 결과로 이어짐
- 요청 구조화 - 섹션과 컴포넌트 나열
- 스타일 선호도 포함 - 색상, 글꼴, 간격
- 점진적으로 반복 - 한 번에 하나씩 변경
- 실제 콘텐츠 제공 - 일반적인 플레이스홀더 피하기
- 모바일 고려 - 반응형 요구 사항 지정
- 단순하게 시작 - 점진적으로 복잡성 추가
- 자유롭게 실험 - 다양한 접근 방식을 시도해 최적의 결과 찾기