Website VSL 표준 (olaceo 방법)

v1.0.0, 2026년 10월 25일. 기억에 의존하지 않고 olaceo.com 참조 코드와 측정 로그에서 작성되었습니다. 아래의 모든 숫자는 다음 중 하나입니다:

측정됨: 참조 코드 또는 참조 빌드의 검증 로그에서 복사됨, 또는
미확인으로 표시됨: 목표, 외부 주장, 또는 아직 측정되지 않음. 이를 클라이언트에게 사실로 인용하지 마십시오.

이 표준과 함께 제공되는 파일(경로는 이 파일 기준):

reference/tokens.css: 실제 토큰 블록(라이트 및 다크), 기본 타이포그래피, 그리드, 버튼, 입력, 히어로, 필 및 전환.
reference/motion.js: 실제 스프링, 러버 밴드, 속도, 플릭 프로젝션 및 VSL 건너뛰기 방지 코드.
templates/client-intake.md: 1단계용 작성 가능한 인테이크 양식.

한 화면에 담긴 철학 (먼저 읽으세요)

한 명의 방문자, 하나의 작업, 하나의 다음 단계. 도착하는 모든 사람은 하나의 목표를 가지고 있습니다. 사이트의 임무는 한 번의 탭으로 그 사람이 누구인지 파악한 다음, 그 사람을 앞으로 나아가게 하는 것만 보여주는 것입니다. 마찰은 적입니다.
조용한 전면, 그 아래에서 작동하는 기계. 표면은 빈 공간, 하나의 서체, 하나의 악센트, 실제 사진 또는 실제 비디오입니다. 지능(라우팅, 건너뛰기 방지 플레이어, 추적, CRM)은 보이지 않습니다.
증거, 주장이 아닙니다. 발명된 통계, 로고, 사용후기, 희소성 또는 카운트다운이 없습니다. 증거가 존재하지 않으면 해당 슬롯은 숨겨지거나 FAQ에 "아직 없으며, 우리는 어떤 것도 만들지 않을 것입니다"라고 표시됩니다. 빌드는 금지된 주장에 실패합니다.
모든 사람이 유용한 곳으로 나갑니다. 막다른 골목이나 거부 표현("적합하지 않음", "자격 없음")이 없습니다. 준비되지 않은 방문자는 무료 경로를 얻습니다.
모션은 액체와 같으며, 유리가 아닙니다. 움직임은 물리 법칙(스프링, 속도, 러버 밴드)을 따릅니다. 절대 장식용이 아니며, 항상 움직임 줄이기를 존중합니다. 물이 웅덩이와 합쳐지는 것을 생각하세요, 유리가 아니라.
측정, 눈대중이 아닙니다. 중앙 정렬, 레이아웃 이동, 프레임 드롭 및 접힘 위치는 누군가가 완료했다고 말하기 전에 px와 ms 단위로 측정됩니다.

작동하는 이유 (심리적 각도):

문 앞에서의 자기 선택. 사람들은 자신을 지명하는 페이지를 신뢰합니다. "당신은 누구입니까?"는 방문자가 스스로 세분화하도록 하여 이후의 모든 단어가 한 사람에게 말할 수 있게 합니다. 또한 양식이 아닌 한 번의 탭만 필요합니다.
요청보다 가치. H1은 ICP가 원하는 결과(시간, 돈, 부족한 기술)를 서비스가 아닌 명시합니다. 두 명의 VSL-퍼널 실무자는 이렇게 말합니다: Haynes, "제안이 무엇이고 누구를 위한 것인지에 대한 명확하고 직접적인 진술"; Iles, "서비스가 아닌 결과에 초점을 맞추세요".
더 적은 선택, 더 많은 행동. 페이지당 하나의 기본 CTA입니다. 보조 경로는 조용한 텍스트 링크이며, 두 번째 버튼이 아닙니다.
차분함 = 신뢰할 수 있음. 절제(빈 공간, 하나의 악센트, 가벼운 큰 서체)는 프리미엄과 자신감으로 읽힙니다. 어수선함은 필요함으로 읽힙니다. 이는 참조 빌드의 디자인 판단입니다. 측정된 전환 효과로는 미확인입니다.
시청을 통한 몰입. VSL은 앞으로 건너뛸 수 없으므로 CTA는 전체 주장을 들은 사람을 만납니다. 종료 화면은 CTA를 바로 그 자리에 배치합니다.

1단계. 인테이크: 누가 들어오는가, 그들이 원하는 것, 무엇이 그들을 막는가

픽셀 작업 전에 하세요. templates/client-intake.md를 클라이언트와 함께 작성하세요.

각 ICP에 대해 다음을 기록하세요:

그들의 언어로 된 이름, 그들이 카드에 자신을 설명하는 방식. olaceo: "저는 사업을 운영합니다" / "저는 AI로 구축합니다".
목표: 그들이 찾아온 하나의 결과. 소유자는 결과("돈 절약, 시간 절약, 돈 벌기")를 구매하지 도구를 구매하지 않습니다.
주요 반대 이유: 그들이 떠날 이유. 빌더: "구축은 할 수 있지만 판매 통화에서 막힙니다". 소유자: "AI가 내 비즈니스에서 무엇을 고칠 수 있는지 모르겠습니다".
필요한 증거: 실제로 가지고 있는 실제 증거만.
다음 단계: 해당 ICP를 위한 단일 행동(통화 예약, 둘러보기 시작, 구매, 다운로드).
가격 규칙: 표시 또는 숨김. olaceo의 비즈니스 퍼널은 가격을 표시하지 않습니다("진단 전에는 견적하지 않습니다"), 빌드에 의해 시행됨.

규칙:

2개의 ICP가 기준입니다. 라우터에서 3개 이상의 문은 분할을 약화시킵니다. 미확인(판단, 테스트되지 않음).
ICP의 목표에 대해 한 문장을 쓸 수 없다면 아직 그들의 페이지를 구축할 수 없습니다. 중단하고 물어보세요.

2단계. 진입 분할 (" / "의 라우터)

무엇: 홈페이지는 라우터입니다. 하나의 질문과 ICP당 하나의 큰 카드. 히어로 카피 벽, 탐색 메뉴 없음.

참조 빌드(라우터 페이지 및 해당 스타일, 2026년 10월 24일부터 olaceo.com에서 라이브):

H1 = 워드마크와 두 청중을 모두 지칭하는 한 줄("사업주와 그들에게 판매하는 빌더를 위한, 돈이 되는 AI"). 스크린 리더는 실제 텍스트로 읽습니다.
질문: "당신은 누구입니까?" (소문자, 조용함). 여백 56px 0 18px.
카드: 가로 2개, 각각 340px, 16px 간격, 높이 200px, 반경 22px, 테두리 rgba(18,24,32,.09). 화살표 디스크 44px. 호버 시 -2px 상승; 활성 시 .985 축소.
모바일: 너비 420px까지 1열, 카드 높이 108px.
각 카드는 일반 <a href>입니다. JS 없이 작동합니다.
기억된 선택: localStorage ola_path. 재방문 시 "환영합니다"를 읽고 마지막 카드는 조용한 "계속" 칩을 얻습니다.
자동 리디렉션 절대 금지. 이유: 모든 페이지의 로고는 "/"로 연결되므로, 자동 라우팅은 잘못된 문을 선택한 사람을 가둘 수 있습니다.
직접 링크(광고, 이메일, PDF)는 라우터를 거치지 않고 ICP 페이지로 바로 이동합니다.
회원은 카드 아래에 조용한 텍스트 링크("이미 회원이신가요? 로그인")를 얻습니다: 13px, #6B7580, 44px 터치 대상.
로더: h1 자체 워드마크의 순수 CSS. 1.78초 실행, 같은 세션 재방문은 0.4초, 움직임 줄이기는 한 번의 0.4초 페이드를 얻습니다. 추가 요청 없음, CLS 0.
종료: 교차 문서 보기 전환, 라우터에서 경로로만 사용: 나가기 .3초, 들어오기 .5초 cubic-bezier(.22,1,.36,1).
푸터: 보조 링크의 조용한 행(무료 가이드, 예약, 정보, 개인정보 보호, 약관).
JSON-LD: Organization, Person, WebSite, 각 경로에 대한 hasPart가 있는 WebPage.

참조 빌드에서 측정됨: 선택, 워드마크 및 질문이 0.02px 이내로 중앙 정렬됨; 스택이 0.000px에서 세로 중앙 정렬됨; 라우터 테스트 스위트 39/39.

3단계. ICP별 경로: 가치로 직행

모든 ICP 페이지는 동일한 척추를 따릅니다: 헤드라인, 비디오, 하나의 행동.

눈썹: 대상이 누구인지, 평범한 말로. "사업주를 위한".
H1: 결과. 12단어 이하.
리드: 한 줄. 전달 방법.
VSL: 크고 중앙 정렬됨(3a단계).
로드 시 표시되는 하나의 CTA, 지연된 공개 없음. 그 아래의 작은 글씨는 두려움을 제거합니다: "무료. 30분. 피치 데크 없음."
히어로 바로 아래 증거: 정직한 것만("우리가 출시한 것").
그런 다음 반대 의견에 답하는 것만, 다음 순서로: 문제(그들의 언어로), 당신이 찾거나 하는 것, 작동 방식(3단계), 제안 사다리, FAQ(직접적인 비용 답변 포함), 그리고 하나의 행동을 반복하는 전체 너비 마감 CTA.

참조 순서:

/business: 히어로 VSL, 우리가 출시한 것, 문제(4), 감사가 찾는 것(6, 번호 매기기), 작동 방식(둘러보기, 진단, 구축), 사다리, FAQ, 마감 CTA(무료 사이트 체크에 대한 대체 텍스트 링크).
/builders: 히어로 VSL, #book(인라인 캘린더, "시간을 선택하세요."), 대상, 설립자 소개, FAQ.

규칙:

헤더에 예약 버튼 없음. 헤더는 워드마크만(필요한 경우 정보/FAQ 텍스트 링크 추가). 이유: 상단의 두 번째 CTA는 비디오와 경쟁합니다.
떠 다니는 필 페이지의 하나의 CTA를 미러링합니다. 히어로 CTA가 스크롤되어 사라진 후에만 나타나며, 캘린더, 양식, 마감 CTA 및 푸터 위에서는 숨겨집니다([data-fc-hide]). 하단 20px + 안전 영역에 중앙 정렬됩니다. 움직임 줄이기: 페이드만.
니치 페이지(/for/<slug>)는 기본 JSON에 병합된 JSON 파일이므로 니치는 변경되는 내용만 나열합니다.
가능한 경우 제자리에서 예약하세요. CTA는 다른 사이트가 아닌 인라인 캘린더로 스크롤되므로 방문자는 페이지를 떠나지 않고 예약합니다. 자체 트래픽에 대한 측정된 상승으로는 미확인입니다.

3a. VSL 레이아웃 및 플레이어 규칙 (olaceo.com /business 및 /builders에서 라이브)

레이아웃(reference/tokens.css 코드, "중앙 정렬 VSL 히어로"):

눈썹 추적 .08em, margin-bottom 14px.
H1: clamp(40px,3.3vw,56px)/1.05, max-width 880px.
리드: clamp(17px,1.35vw,19px), max-width 720px, H1 아래 12px.
비디오: width:min(880px,92vw,calc((100svh - 330px)*16/9)), 리드 아래 22px, 반경 16px, 그림자 0 24px 60px -28px rgba(10,30,50,.35). 높이 항은 짧은 노트북에서 CTA를 접힘 위에 유지합니다.
CTA: min-width 320px, height 56px.
측정됨: 1440x900에서 비디오는 880x495이고 버튼은 y 744-800(접힘 내부)에 위치합니다. 1280x720에서 비디오는 693x390입니다. 390x844에서 4:5 비디오는 358x448이고 버튼은 y 712-768에 위치합니다.
모바일: H1 32px/1.08, 리드 15px. 4:5 파일은 세로 방향의 직립 전화기에서만 사용됩니다 (max-width:699px) and (orientation:portrait). 회전 시 같은 초에 파일을 교체합니다. 항상 object-fit:contain이므로 단어가 잘리지 않습니다.

플레이어(reference/motion.js C 부분의 코드 발췌):

첫 번째 탭 전: 18px 블러와 1.1 스케일(모바일에서 12px 및 1.13)의 음소거된 미리보기 루프, 112px 재생 버튼(92px 내부 원; 모바일에서 100/80) 위의 정적 헤드라인, 그 아래 "소리와 함께 재생". 첫 번째 탭은 .42초에 걸쳐 블러를 해제하고 0:00에서 사운드와 함께 다시 시작하며 블러는 다시 돌아오지 않습니다.
앞으로 건너뛰기 금지: maxW는 자연 재생을 통해서만 증가합니다(각 단계 1.5초 미만). maxW + 0.3초를 초과하는 모든 탐색은 다시 튕겨집니다. 재생 속도는 1로 고정됩니다. PiP, 원격 재생, 다운로드 또는 기본 전체 화면 없음; iOS는 인라인으로 유지됩니다. 되감기 및 일시 중지는 항상 허용됩니다. 키: Space/K 전환, J -10초, Left -5초, Home; Right는 이미 시청한 부분 내에서만.
컨트롤: 재생 2초 후 바가 자동으로 숨겨집니다. 버튼 44px(모바일에서 48). 트랙 4px(호버 시 6px), 썸 14px.
종료 화면: CTA(포커스됨) + "다시 시청".
이벤트: VideoPreview, VideoSoundOn, VideoView25/50/75/100, VideoReplay.
품질: 4K는 mediaCapabilities가 부드러운 디코딩을 보고하는 큰 고-DPR 화면에서만 제공됩니다. 4K가 실패하면 같은 초에 사운드를 유지한 채 1080으로 대체됩니다. (알려진 버그 패턴: 음소거되는 대체. 수정: NotAllowedError에서만 음소거.)
재생 버튼 중앙 정렬: 헤일로, 원 및 SVG는 하나의 그리드 셀을 공유하며(inset 0, margin auto, 변환 없음), 삼각형의 면적 중심은 오른쪽으로 +0.5px입니다. DSF 3에서 0.000px 오프센터로 측정됨.
건너뛰기가 없는 이유: CTA는 전체 주장을 들은 사람을 만나야 합니다. 블러의 이유: 자동 재생 사운드 없이 "이것은 비디오입니다, 탭하세요"라고 말합니다.
목표: VSL 5분 이하. 50% 이상의 재생률 및 참여 목표는 Haynes VSL 방법에서 비롯됩니다. 미확인: 아직 측정된 재생률이 없습니다.

3b. 양식 및 마찰

한 화면, 최대 3개 필드(참조: 이름, 이메일, 비즈니스 웹사이트 또는 이름). 단계 없음, 진행 표시줄 없음. 자격 확인은 통화 및 CRM에서 이루어집니다.
모든 필드는 올바른 autocomplete, inputmode, autocapitalize, 필요한 경우 spellcheck=false, 및 enterkeyhint(next, next, go)를 얻습니다. Enter는 다음 필드로 이동합니다.
허니팟, 동일 출처 확인, 크기 제한 및 서버 속도 제한. JS 없이 작동(실제 action + method="post").
버튼은 발생하는 일을 말합니다: "내 둘러보기 예약". 그 아래 작은 글씨: "둘러보기 설정에만 사용합니다. 목록 없음, 스팸 없음."
전화는 선택 사항이고 약정 후에 요청되며, 빌드가 표현을 확인하는 별도의 체크되지 않은 SMS 동의 상자가 있는 경우에만.
역사(이유): 8화면 탭 퀴즈가 먼저 구축된 다음 제거되었습니다("여덟 번의 탭 없음, 2분 미만"). 다단계 퀴즈를 구축하지 마십시오.

3c. 사본 규칙 (가능한 경우 시행)

브랜드 이름은 소문자("olaceo")로, 대문자 눈썹 내부에서도 (<span class="lc">). 클라이언트의 경우 브랜드 자체 대소문자 규칙을 사용하세요.
줄표 없음. 빌드는 니치 사본에서 U+2014에 실패합니다.
BIZ_SHOW_PRICES가 false인 동안 비즈니스 퍼널에 가격 없음. 빌드는 렌더링된 HTML에서 $<digit>에 실패합니다.
니치 사본에 발명된 통계, % 주장, 로고, 사용후기 또는 출시되지 않은 제품 이름 없음. 빌드는 이러한 항목 (bannedProof)에 실패합니다.
가치 우선: H1의 결과, 리드의 메커니즘, CTA 아래의 두려움 제거.
평범한 단어, 짧은 문장, 축약형, 2인칭. olaceo 빌더 페이지는 설립자의 목소리를 사용합니다("Fam, ..."), 절대 "bro"를 사용하지 않음(이메일에서 해당 단어에 빌드 실패).
은밀한 선택성: 구체적인 것만, 절대 "엄선된", "선택된" 또는 "독점적인" 사용 금지.
절대 "해킹" 주장 없음: "할 수 있다", 절대 "~이다" 사용 금지.
코칭 또는 수익 페이지에 수익 부인.

4단계. 토큰: 서체, 간격, 그리드, 색상, 테마

reference/tokens.css를 복사하세요. 모든 비색상 값을 유지하세요. 색상을 클라이언트에 맞게 변경하세요.

타이포그래피(이유: 하나의 가변 서체는 차분함을 유지하고 요청을 절약하며, 밝고 큰 헤드라인은 프리미엄으로 읽힘):

하나의 패밀리, 자체 호스팅 woff2 가변 300-700, font-display:swap, 미리 로드됨. 대체: system-ui, -apple-system, "Segoe UI", sans-serif.
본문: 400, 1.0625rem/1.6. 작은 글씨: .9375rem.
H1: weight 300, clamp(2.625rem,5.4vw,5rem), line-height 1.04, tracking -.03em.
H2: weight 400, clamp(2rem,3.4vw,3.125rem), 1.1, -.025em.
H3: 1.25rem, 600, 1.3, -.01em.
제목에 text-wrap:balance.
줄 길이: 리드 34ch, 본문 60ch, 머리 행 단락 38ch.

간격 및 그리드(이유: 크고 고정된 리듬 = 차분함; clamp()는 320에서 2560까지 하나의 시스템 유지):

측면 여백 --m clamp(20px,4vw,64px).
섹션 패딩 --gap clamp(96px,11vw,168px).
컨테이너 1360px 최대.
12열, 간격 clamp(16px,2vw,32px).
섹션 제목 블록 하단 여백 clamp(40px,4.4vw,64px).
중단점: 900, 700/699 및 560px.
반경: 카드 22px, 작은 16px, 작업 및 입력 필(999px).
탭 대상 44px 이상. 기본 버튼 54px(.btn), 히어로 및 양식에서 56px(엄지 도달).
탐색 72px 높이(모바일에서 64px).

색상(이유: 하나의 악센트는 "여기서 행동"을 의미함; 다른 모든 것은 잉크와 흰색에 하나의 부드러운 톤 단계):

역할: 바탕(흰색), 톤 단계(mist, mist-2), 텍스트(ink, ink-2), 악센트(sky, 호버 sky-2, wash), 선, ...

(참고: 원본 SKILL.md의 색상 섹션 이후 내용은 잘렸으나, 구조는 그대로 유지됩니다.)

4a. 색상 역할 (참조 값은 reference/tokens.css 참조)

바탕: 모든 페이지 배경색입니다.
ink: 본문 텍스트 색상입니다.
ink-2: 덜 강조된 텍스트(보조, 푸터 등)에 사용됩니다.
accent(sky): 기본 CTA, 링크, 강조 요소에 사용되는 단일 악센트 색상입니다.
hover(sky-2): 악센트 색상의 호버 상태입니다.
wash: 악센트 색상의 매우 연한 투명 버전으로, 배지나 배경 영역에 사용됩니다.
mist, mist-2: 선, 구분선 또는 매우 연한 배경에 사용되는 중성 톤입니다.
line: 테두리, 구분선에 사용됩니다.

색상 규칙:

바탕, ink, ink-2는 접근성을 위해 대비를 유지해야 합니다.
악센트는 브랜드에서 파생되어야 하며, 고유성을 유지하기 위해 경쟁사와 동일한 색상을 사용하지 마십시오.
히어로, 버튼 및 주요 시각적 요소에만 악센트를 사용하십시오. 과도하게 사용하지 마십시오.
어두운 테마가 필요한 경우 토큰 파일에 prefers-color-scheme: dark 미디어 쿼리에 대한 별도의 값 세트를 포함하십시오.

5단계. 모션: 물리 기반, 미니멀, 존중

모든 모션은 reference/motion.js를 참조해야 합니다. 주요 원칙:

물리 기반: 스프링, 러버 밴드, 속도 및 플릭 투영을 사용합니다. CSS 전환은 cubic-bezier(.22,1,.36,1)과 같은 물리적 느낌의 베지어 곡선으로 제한됩니다.
장식용 아님: 모션은 상태 전환, 사용자 피드백 또는 내러티브 진행을 전달하는 기능적 목적을 제공해야 합니다. 절대 순수 장식용 애니메이션을 추가하지 마십시오.
움직임 줄이기 존중: prefers-reduced-motion: reduce가 감지되면 모든 모션 지속 시간을 0으로 설정하거나 페이드와 같은 가벼운 전환으로 대체하십시오. 페이드: 시작 .1s, 종료 .3s.
일관된 지속 시간: 동일한 유형의 상호작용에 대해 일관된 지속 시간을 사용하십시오. 참조: 페이드 .3s, 호버 전환 .15s, 진입 애니메이션 .4s – .6s.
성능: 모션은 60fps를 목표로 합니다. transform 및 opacity 속성을 사용하고 레이아웃을 트리거하는 속성(예: width, height, top, left)을 피하십시오. 레이아웃 전환이 불가피한 경우 contain 또는 will-change를 사용하십시오.

5a. VSL 플레이어 특정 모션 규칙

블러 해제: 첫 번째 탭 시 .42s에 걸쳐 블러가 해제됩니다. 부드럽고 선형적입니다.
스크러바: 스크러바 썸은 트랙을 따라 부드럽게 움직이며, 업데이트 속도는 60fps입니다.
컨트롤 표시/숨기기: 페이드 .2s. 재생 중 2초 후 숨겨집니다.
카드 호버: CSS transform: translateY(-2px)를 .15s ease에 사용합니다.
탭 피드백: 활성 상태는 transform: scale(.985)를 .1s에 사용합니다.
라우터 전환: View Transition API를 사용합니다. 나가기 .3s, 들어오기 .5s cubic-bezier(.22,1,.36,1).

6단계. 반응형 및 접근성

반응형 중단점

기본: 900px 이상의 너비.
태블릿/중간: 700px에서 899px까지. 레이아웃은 2열에서 1열로 축소될 수 있습니다.
모바일: 699px 이하. 단일 열, 더 작은 여백, 쌓인 레이아웃.
작은 모바일: 560px 이하. 매우 긴 단어를 처리하기 위해 overflow-wrap을 고려하십시오.

접근성 규칙

모든 이미지에는 의미 있는 alt 텍스트가 있어야 합니다.
모든 대화형 요소는 키보드로 접근 가능해야 합니다(:focus-visible 스타일 사용).
색상 대비는 WCAG AA(본문의 경우 4.5:1, 큰 텍스트의 경우 3:1)를 충족해야 합니다.
양식 필드에는 올바른 label 요소가 있어야 합니다.
건너뛰기 링크를 제공하십시오(화면에 보이지 않지만 포커스 가능).
사용자 정의 컨트롤(예: VSL 플레이어)에는 올바른 ARIA 역할과 상태가 있어야 합니다.

7단계. 모범 사례 및 금지 사항

강제 시행(빌드 실패 조건)

빌드는 금지된 증거가 사용된 경우 실패합니다: 발명된 통계, 로고, 사용후기, 출시되지 않은 제품 또는 서비스.
빌드는 BIZ_SHOW_PRICES가 false일 때 렌더링된 HTML에 가격($<digit>)이 있으면 실패합니다.
빌드는 사본에 줄표(U+2014)가 있으면 실패합니다(니치 사본의 경우).
빌드는 이메일 캠페인에 "bro"라는 단어가 있으면 실패합니다.

모범 사례

성능: Lighthouse 점수 90+를 목표로 하십시오(모바일 및 데스크톱).
CLS: 누적 레이아웃 이동을 0.1 미만으로 유지하십시오.
LCP: 가장 큰 콘텐츠가 포함된 페인트를 2.5초 미만으로 유지하십시오.
FID: 최초 입력 지연을 100ms 미만으로 유지하십시오.
SEO: 각 페이지에 적절한 메타 태그, Open Graph 태그 및 구조화된 데이터(JSON-LD)가 있는지 확인하십시오.
분석: 이벤트 추적(페이지 조회, VSL 이벤트, CTA 클릭)을 포함하십시오.

8단계. 구축 감사

AI 에이전트는 이 표준을 사용하여 구축된 페이지를 감사할 때 다음을 확인해야 합니다:

라우터 페이지: 모든 규칙 준수, 작동 테스트.
ICP 경로: H1, 리드, VSL, CTA, 증거, 반대 의견 순서.
VSL 플레이어: 건너뛰기 방지, 블러, 재생/일시 중지, 종료 화면.
토큰: 서체, 간격, 색상, 반경 일치.
모션: 물리 기반, 움직임 줄이기 지원.
사본: 규칙 준수, 금지된 용어 없음.
반응형: 모든 중단점에서 레이아웃 무결성.
접근성: 색상 대비, 키보드 탐색, ARIA.
성능: 페이지 로드 시간, CLS, LCP.

각 확인 사항에 대해 페이지를 평가하고, 발견된 문제를 특정 줄 번호나 요소 선택기로 문서화하십시오.

이 표준은 olaceo.com 참조 코드에서 파생되었으며, 모든 웹사이트 구축에서 일관된 품질을 보장하기 위해 설계되었습니다. 제공된 파일을 참조 자료로 사용하고, 이 문서에 설명된 규칙을 엄격히 준수하십시오.

website-vsl-standard