arsepladisar08-lab/umkm-landing-page-master

UMKM 랜딩 페이지 마스터 스킬

0. 미션

실제 비즈니스가 방문자를 고객으로 전환하도록 돕는 차별화되고 신뢰할 수 있는 모바일 우선 랜딩 페이지를 만듭니다.

이 스킬은 6가지 전문가 책임을 조정합니다:

1. 프로젝트 오케스트레이션 및 리서치 — 브리프를 이해하고, 기존 프로젝트를 검사하며, 콘텐츠와 자산을 추출하고, 빌드를 계획하며, 명확한 전달 경로를 유지합니다.
2. 전환 전략 — 대상 고객, 제안, 반대 의견, 메시지 계층 구조, 페이지 구조 및 주요 액션을 정의합니다.
3. 크리에이티브 방향 — 브랜드, 제품, 고객 및 실제 참고 자료에 뿌리를 둔 독창적인 시각적 콘셉트를 개발합니다.
4. 프론트엔드 구현 — 검증된 자산을 사용하여 유지 관리 가능하고, 시맨틱하며, 반응형인 HTML/CSS/JavaScript를 구축합니다.
5. 디자인 취향 및 안티-슬롭 리뷰 — 일반적인 AI 시각적 패턴을 방지하고 모든 디자인 결정을 목적에 맞게 만듭니다.
6. 브라우저 QA 및 배포 준비 — 렌더링된 페이지를 검사하고, 상호작용 및 반응형 상태를 테스트하며, 결함을 수정하고, Vercel 배포를 준비합니다.

주요 결과물: Vercel에 바로 배포할 수 있는 HTML/CSS/JavaScript 웹사이트. 기존 프레임워크나 프로젝트 아키텍처가 제공되면 이를 유지하고, 명확한 이유 없이 작동 중인 프로젝트를 마이그레이션하지 않습니다.

1. 불가침 원칙

1.1 사실이 장식보다 우선

• 사용자의 PRD, 비즈니스 문서, 메뉴, 가격표, 배너 및 승인된 웹사이트 콘텐츠를 진실의 원천으로 취급합니다.
• 가격, 재료, 제품 가용성, 영업 시간, 주소, 배송 범위, 인증, 수상, 사용 후기, 평점, 고객 수 또는 비즈니스 주장을 절대 만들어내지 않습니다.
• 정보가 누락된 경우 생략하거나 "NEEDS DATA"로 표시하거나, 빌드에 실질적으로 방해가 되는 경우 하나의 집중된 질문을 합니다.
• 검증된 사실, 합리적인 디자인 가정 및 클라이언트 확인이 필요한 콘텐츠를 구분합니다.

1.2 자산은 콘텐츠입니다

• 디자인하기 전에 제공된 배너, 사진, 로고, PDF, 메뉴 및 브로셔를 검사합니다.
• 브랜드 로고와 제품 사진을 정확하게 보존합니다. 제공된 로고를 AI 해석으로 대체하지 마십시오.
• 자산 인벤토리를 구축합니다: 파일 이름, 크기, 형식, 주제, 예상 배치, 출처 및 확인 상태.
• 실제 비즈니스 사진을 선호합니다. 생성된 이미지나 스톡 이미지는 허용된 경우에만 사용하고 실제 고객/제품 증거와 명확히 구분합니다.
• 가짜 사용 후기를 만들거나 예시용 사람을 실제 고객인 것처럼 사용하지 마십시오.

1.3 하나의 대상, 하나의 제안, 하나의 주요 행동

• 주요 대상과 가장 중요한 비즈니스 결과를 정의합니다.
• 하나의 주요 전환 행동을 선택합니다 (예: WhatsApp으로 주문, 전화, 매장 방문, 견적 요청, 예약 또는 구매).
• 보조 행동은 주요 CTA와 경쟁하지 않아야 합니다.
• CTA 사본을 특정 행동과 목적지에 맞게 작성하고, 일반적인 "더 알아보기"를 사용하지 마십시오.

1.4 템플릿 주도가 아닌 브랜드 주도

• 모든 비즈니스는 의도적인 시각적 방향이 필요합니다.
• 관련 없는 브랜드에 걸쳐 동일한 히어로 구성, 팔레트, 타이포그래피, 카드 레이아웃, 아이콘 스타일 및 섹션 순서를 재활용하지 마십시오.
• 참고 자료는 원칙과 상호작용 아이디어를 추출하기 위한 것이지, 다른 브랜드의 정체성을 복사하기 위한 것이 아닙니다.
• 창의적으로 보이기 위해 비대칭, 대형 타이포그래피, 패럴랙스, 그라디언트, 글래스모피즘 또는 애니메이션을 사용하지 마십시오. 브랜드에 적합하고 커뮤니케이션을 개선하는 경우에만 사용하십시오.

1.5 모바일 우선 및 빠른 속도

• 좁은 화면을 먼저 디자인한 다음 태블릿과 데스크톱으로 확장합니다.
• 읽기 쉬운 사본, 도달 가능한 CTA, 빠르게 로딩되는 이미지, 명확한 내비게이션 및 낮은 마찰의 주문을 우선시합니다.
• 축소된 모션 환경 설정을 존중하고 읽기나 구매를 방해하는 모션을 피하십시오.

2. 지원되는 비즈니스 컨텍스트

실제 비즈니스에 맞게 구조와 시각적 언어를 조정합니다:

• 식음료: 케밥, 딤섬, 베이커리, 카페, 레스토랑, 케이터링, 스낵 및 음료 브랜드.
• 소매 및 패션: 의류, 액세서리, 화장품, 선물, 현지 제품 브랜드.
• 서비스: 미용실, 뷰티, 수리, 교육, 이벤트 서비스, 전문 서비스 및 기타 현지 서비스.

모든 비즈니스 카테고리를 동일한 페이지 구조에 강제로 맞추지 마십시오. 메뉴 중심 비즈니스는 메뉴 발견 및 주문이 필요하고, 예약 중심 서비스는 신뢰, 서비스 설명, 가용성 및 예약이 필요하며, 패션은 컬렉션, 사이즈 정보, 소재 및 구매 흐름이 필요할 수 있습니다.

3. 워크플로 개요

다음 단계를 순서대로 따르십시오. 프로젝트가 작은 경우 단계를 결합할 수 있지만, 소스 검사, 크리에이티브 방향, 반응형 구현 또는 QA를 건너뛰지 마십시오.

1. 프로젝트 수집 및 저장소 정찰.
2. 진실의 원천, 콘텐츠 및 자산 추출.
3. 대상, 제안, 반대 의견 및 전환 전략.
4. 브랜드별 분위기 발견 및 크리에이티브 방향.
5. 정보 아키텍처, 섹션 계획 및 사본.
6. HTML/CSS/JavaScript 구현.
7. 디자인 취향 및 안티-AI-슬롭 리뷰.
8. 브라우저 QA, 반응형 및 상호작용 테스트.
9. SEO, 접근성, 성능 및 Vercel 준비.
10. 확인된 상태와 알려진 제한 사항이 포함된 전달 보고서.

4. 1단계 — 프로젝트 수집 및 리서치

4.1 변경 전 검사

• 저장소, 기존 프레임워크, 패키지 파일, 라우트, 컴포넌트, CSS 규칙 및 배포 구성을 검사합니다.
• 이것이 새 빌드, 리디자인 또는 개선인지 식별합니다.
• 사용자가 명시적으로 변경을 요청하지 않는 한 작동 중인 아키텍처와 브랜드 승인 요소를 보존합니다.
• 이해하기 전에 기존 작업을 덮어쓰지 마십시오.
• 사용 가능한 브라우저, 스크린샷, 이미지 및 배포 도구를 식별합니다. 실제로 호출되지 않은 도구를 사용했다고 주장하지 마십시오.

4.2 제공된 모든 입력 읽기

관련 파일 및 참고 자료를 검사합니다:

• PRD, 브리프, 브랜드 가이드, 제품 카탈로그, 메뉴, 가격표, 프로모션, 브로셔, PDF, Word 파일, 스프레드시트.
• 배너 디자인, 로고, 제품 사진, 포장, 매장 전면 사진, 소셜 미디어 비주얼.
• 기존 웹사이트 URL, 소셜 프로필, 참고 웹사이트, 스크린샷 참고 자료.
• 사용자 지침, 수정 이력, 승인된 사본, 제약 사항 및 제외 사항.

4.3 프로젝트 팩트 시트 생성

기록:

• 비즈니스 이름 및 카테고리.
• 위치 및 서비스 지역(제공되거나 확인된 경우에만).
• 대상 고객 및 구매 컨텍스트.
• 제품/서비스 및 확인된 가격.
• 증거로 뒷받침되는 독특한 판매 포인트.
• 주문, 예약, 결제, 배송 및 연락 방법.
• 영업 시간, 정책 및 제약 사항.
• 주요 전환 이벤트.
• 기존 브랜드 아이덴티티 및 자산.
• 알 수 없는 사항 및 가정.

출력: 프로젝트 범위가 정당화될 때 간결한 PROJECT-FACTS.md 또는 이에 상응하는 작업 노트.

5. 2단계 — 콘텐츠 및 자산 추출

5.1 텍스트 추출

• 제공된 문서 및 이미지에서 사실적 사본을 추출합니다.
• 최신 명시적으로 승인된 소스를 사용하여 중복되거나 충돌하는 데이터를 조정합니다.
• 사용자가 편집을 요청하지 않는 한 원래 제품 이름과 철자를 유지합니다.
• 가격, 변형, 크기, 재료, 치수 및 조건을 정확히 보존합니다.
• 조용히 하나를 선택하기보다 충돌하는 사실을 표시합니다.

5.2 이미지 및 자산 카탈로그

제공된 모든 이미지에 대해 기록:

• 자산 경로/이름.
• 크기 및 파일 형식.
• 보이는 주제 및 내용.
• 브랜드/제품 관련성.
• 제안된 섹션 및 자르기.
• 자산이 원본인지, 스톡인지, 생성되었는지 또는 알 수 없는지.
• 확인 상태.

5.3 이미지 사용 규칙

• 가능할 때마다 제품 카드 및 메뉴 항목에 실제 제품 이미지를 사용합니다.
• 실제 로고를 텍스트, 아이콘 또는 발명된 로고로 대체하지 마십시오.
• 중요한 텍스트, 제품 세부 정보, 포장 또는 브랜드 요소를 자르지 마십시오.
• 의도적으로 object-fit 및 object-position을 사용합니다. 다른 소스 이미지는 다른 자르기가 필요할 수 있습니다.
• 도구가 허용하는 경우 큰 파일을 적절한 반응형 형식으로 최적화합니다.
• 의미 있는 대체 텍스트를 추가하고, 순전히 장식적인 이미지에는 빈 대체 텍스트를 사용합니다.
• 브라우저에서 모든 최종 이미지 URL 또는 로컬 경로를 확인합니다.

출력: 자산 맵 및 누락된 자산 목록.

6. 3단계 — 전환 전략

6.1 전환 브리프

정의:

• 대상: 누가 가장 구매하거나 문의할 가능성이 높은가?
• 컨텍스트: 방문자는 어디에서 왔으며 이미 무엇을 알고 있는가?
• 제안: 무엇이 판매되거나 요청되는가?
• 가치: 고객이 받는 실질적인 혜택은 무엇인가?
• 마찰: 어떤 의심이 행동을 방해하는가?
• 증거: 어떤 실제 증거가 그러한 의심을 줄일 수 있는가?
• 행동: 방문자가 정확히 무엇을 해야 하는가?

6.2 반대 의견 발견

관련 반대 의견을 고려합니다:

• 가격 및 가치.
• 제품 품질 및 신선도.
• 양, 크기, 재료 또는 원자재.
• 신뢰, 위생, 신뢰성 및 서비스 품질.
• 위치, 배송 및 가용성.
• 예약, 결제 또는 주문 단계.
• 반품, 취소 또는 보증 정책.

지원되는 정보로만 반대 의견을 다루십시오. 증거를 만들어내지 마십시오.

6.3 메시지 계층 구조

• 히어로 헤드라인: 비즈니스 이름뿐만 아니라 제안이나 결과를 전달합니다.
• 부제목: 무엇이 제공되는지, 누구를 위한 것인지, 왜 중요한지 명확히 설명합니다.
• 주요 CTA: 특정 동사와 명확한 행동.
• 혜택: 기능을 고객 결과에 연결합니다.
• 증거: 실제 뒷받침 증거를 그것이 지원하는 주장 근처에 배치합니다.
• FAQ: 남은 구매 마찰을 해결합니다.
• 최종 CTA: 다음 단계를 명확히 다시 언급합니다.

6.4 CTA 예시

• 음식: "WhatsApp으로 딤섬 주문하기", "메뉴 보기", "행사 주문하기".
• 카페: "커피 메뉴 보기", "픽업 주문하기", "위치 보기".
• 패션: "컬렉션 쇼핑하기", "사이즈 가이드 보기".
• 서비스: "일정 예약하기", "견적 요청하기", "WhatsApp 상담".

배송 전에 대상 URL, 번호, 메시지 템플릿 및 추적 매개변수를 확인합니다.

7. 4단계 — 분위기 발견 및 브랜드별 크리에이티브 방향

7.1 스타일을 선택하기 전에 브랜드 읽기

비즈니스에서 추론:

• 브랜드 성격 및 포지셔닝.
• 제품 질감, 재료, 원산지, 컨텍스트 또는 장인 정신.
• 고객 기대 및 구매 마음가짐.
• 현지/문화적 컨텍스트(지원되는 경우에만).
• 차별화할 가치가 있는 경쟁사 관례.
• 웹사이트가 불러일으켜야 할 느낌.
• 웹사이트가 절대 오해받아서는 안 되는 것.

7.2 독특한 방향 만들기

짧은 시각적 논문을 작성하여 지정:

• 방향 이름 및 콘셉트.
• 분위기 및 의도된 감정적 반응.
• 타이포그래피 역할 및 근거.
• 의미론적 역할이 있는 색상 팔레트.
• 레이아웃/구성 접근 방식.
• 이미지 아트 디렉션 및 자르기 원칙.
• 표면, 테두리 및 깊이 처리.
• 시그니처 디자인 요소.
• 모션 원칙.
• 모바일 적응.

단순히 모든 프로젝트를 사전 설정된 스타일에 매핑하지 마십시오. 시각적 영향을 신중하게 결합하되 조합이 일관되고 적절하도록 만드십시오.

7.3 신선도 및 안티-수렴 점검

코딩 전에 질문:

• 이 레이아웃이 관련 없는 브랜드에 속할 수 있는가?
• 히어로 구성이 가장 흔한 AI 기본값인가?
• 색상 및 글꼴 선택이 브랜드에 의해 정당화되는가?
• 인식 가능한 시각적 아이디어가 하나 있는가?
• 이 대상 및 전환 목표에 맞게 섹션이 배열되었는가?
• 모바일 경험이 데스크톱을 단순히 축소하는 것이 아니라 고유한 구성을 가지고 있는가?

콘셉트가 일반적으로 느껴지면 구현 전에 아트 디렉션을 수정하십시오.

7.4 디자인 시스템

컴포넌트 스타일링 전에 토큰 정의:

• 색상: 배경, 표면, 텍스트, 희미한 텍스트, 테두리, 기본, 강조, 의미 상태.
• 타이포그래피: 디스플레이, 제목, 본문, 레이블, 메타데이터.
• 유형 스케일 및 줄 높이.
• 간격 스케일.
• 컨테이너 너비 및 중단점.
• 반경 및 테두리 규칙.
• 입면/깊이.
• 모션 지속 시간 및 이징.

절제되고 브랜드별 시스템을 사용하십시오. 글꼴, 색상, 레이아웃 또는 효과를 보편적으로 금지하지 마십시오. 정당화되지 않은 기본값일 때 피하십시오.

출력: DESIGN.md 또는 이에 상응하는 문서화된 디자인 사양.

8. 5단계 — 정보 아키텍처 및 섹션 구성

8.1 비즈니스 요구 사항에서 섹션 선택

가능한 섹션:

• 알림 표시줄.
• 헤더/내비게이션.
• 히어로.
• 제품 또는 서비스 개요.
• 메뉴/카탈로그/컬렉션.
• 혜택 및 차별점.
• 재료/소재/과정.
• 주문 또는 예약 방법.
• 갤러리.
• 사용 후기/리뷰(실제만).
• 위치 및 영업 시간(확인된 것만).
• 가격/패키지(확인된 것만).
• FAQ.
• 연락처 및 최종 CTA.
• 바닥글.

이는 의무적인 순서가 아닌 컴포넌트 라이브러리입니다. 브리프와 방문자 여정에 따라 섹션을 선택하고, 이름을 바꾸고, 결합하고, 제거하고, 재정렬하십시오.

8.2 섹션 목적 테스트

모든 섹션은 최소한 하나의 질문에 답해야 합니다:

• 고객이 이해해야 할 것은 무엇인가?
• 어떤 결정이나 반대 의견에 도움이 되는가?
• 어떤 증거를 제공하는가?
• 어떤 행동을 더 쉽게 만드는가?

의미 있는 가치를 추가하지 않는 섹션을 제거하십시오.

8.3 히어로 요구 사항

첫 화면은 다음을 명확히 해야 합니다:

• 이것이 어떤 비즈니스/제품/서비스인지.
• 누구를 위한 것 또는 무엇을 제공하는지.
• 방문자가 왜 관심을 가져야 하는지.
• 다음 행동이 무엇인지.

최상의 사용 가능한 브랜드/제품 자산을 사용하십시오. 2열 히어로, 중앙 정렬 헤드라인, 떠 있는 대시보드 목업 또는 장식적인 그라디언트를 강제하지 마십시오.

9. 6단계 — HTML/CSS/JavaScript 구현

9.1 스택 선택

• 기존 프로젝트가 제공되면 마이그레이션이 명시적으로 요청되지 않는 한 스택을 유지합니다.
• 새 정적 랜딩 페이지의 경우 시맨틱 HTML5, 외부 CSS 및 최소한의 바닐라 JavaScript를 기본값으로 사용합니다.
• React/Vite/Next.js는 요청되거나 프로젝트에 의해 정당화되는 경우에만 사용합니다.
• 작은 요소를 애니메이션화하기 위해 프레임워크나 종속성을 추가하지 마십시오.
• 종속성을 고정하거나 문서화하고 불필요한 스크립트 및 원격 라이브러리를 피하십시오.

9.2 제안된 정적 구조

project/
├── index.html
├── styles.css
├── script.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
├── README.md
└── vercel.json        # 필요한 경우에만

9.3 HTML 요구 사항

• 의미론적 랜드마크 사용: header, nav, main, section, article, `fo…