paper-notebook-landing

종이 공책 랜딩 페이지

이 스킬은 제품의 실제 콘텐츠를 따뜻하고 수공예적인 '학교 공책' 시각 언어로 변환하여 단일 파일 랜딩 페이지를 만듭니다. 이 디자인은 차분하고 신뢰감을 줍니다. 참조 빌드는 example/index.html에 있습니다 (Atlasio, 독일 유학 플랫폼 예시, TR/EN/DE). 시작하기 전에 열어 보세요. references/components.md에는 모든 패턴이 복사 가능한 코드로 저장되어 있습니다. screenshots/에는 각 섹션이 어떻게 보여야 하는지가 나와 있습니다.

사용자가 참조 사이트를 가리키면, 스타일만 가져오고 로고, 일러스트레이션, 제품 사진, 문구, 워드마크는 절대 가져오지 마세요. 클라이언트의 자체 브랜드 이름, 콘텐츠 및 사실을 사용하세요.

1. 디자인 전: 실제 사이트 읽기

1. 클라이언트의 현재 사이트 (및 공유한 브로셔/PDF)를 열고 실제 콘텐츠(가치 제안, 프로세스 단계, 서비스, 출처와 날짜가 있는 수치, 사용 후기, FAQ 답변, 연락처 정보)를 추출하세요.
2. 클라이언트의 프로세스를 찾으세요 (예: "계획 → 준비 → 지원 → 도착"). 이것이 페이지의 중추가 됩니다: 공책 라벨, 단계 패널, 만화 스트립, 카피 모두 동일한 단계를 반영합니다. 브로셔가 있다면 그 구조가 웹사이트보다 우선합니다.
3. 절대 만들어내지 말아야 할 것을 기록하세요: 가격, 주장("최고", "가장 저렴한"), 통계, 법률/비자 요구사항. 사용자가 가격을 숨기도록 요청하면, 가짜 숫자 대신 제안 언어("훌륭한 제안 ✦", "제안 받기 →", "패키지 혜택 ✦")로 대체하세요. 공식 금액(예: 비자 요구 잔고)은 사실이지 가격이 아니므로, 출처와 날짜를 유지하세요.

2. 시각적 DNA (모두 유지)

요소	규칙
바탕	크림색 종이 #fdfbf9, 순수 흰색 금지; 보조 띠 #f6efea. 의도적으로 하나의 밝은 테마만 사용.
잉크	카카오 #2b1a07 (텍스트), 차콜 #171717 (외곽선), 뮤트 #8a7b6a (작은 글씨).
강조	마커 오렌지 #ff6f1e (손글씨, 밑줄, 푸터). 클라이언트 자체 강조색이 따뜻하면 사용하고, 그렇지 않으면 오렌지를 "마커"로 유지.
스티커 색상	초록 #22c55e, 파랑 #3b82f6, 분홍 #ff66cf, 노랑 #fadb4b. 각 일러스트 장면은 강조 단어를 위해 이 중 하나를 소유합니다.
디스플레이 서체	굵고, 부드럽고, 약간 삐뚤어진 세리프 (예: Gelica 또는 Recoleta, 유료). 무료 선택: Fraunces (SOFT 100, WONK 1, 굵기 800–900).
본문/UI 서체	Geist (또는 Inter) (목록, 버튼 작은 글씨, 캡션). 세리프 (Fraunces 400) (부제목, 인용문).
손글씨	Caveat (터키어/독일어 글리프 포함). 주석, 포스트잇, 공책 라벨, 만화 대사에만 사용. 절대 단락에는 사용하지 마세요.
버튼	"dibs" 버튼: 크림색 알약 모양, 4px 크림색 외부 링, 1.5px 차콜 내부 테두리, 세리프 라벨, 작은 그림자.
도형	카드 12px 둥근 모서리, 버튼 20px, 푸터 56px 위쪽 모서리. 외곽선은 펜처럼 1.5–2px 차콜.
그림자	부드럽고 낮음: 0 2px 20px rgba(0,0,0,.06). 객체(공책, 포스트잇)는 아래에 더 긴 드롭 섀도우.
내비게이션	내비 바 없음. 왼쪽 상단 고정 원형 로고; 오른쪽 상단 언어 전환, 작은 "로그인" 알약, dibs CTA.
히어로 헤드라인	소문자, 거대 (clamp 60–112px), 두 줄, 오렌지색 손글씨 인사말("사랑하는 학부모님,")이 앞에 옴.

3. 섹션 패턴 (선택, 정렬, 실제 콘텐츠로 채우기)

이 순서대로 사용하세요. 각각 references/components.md에 준비된 스니펫이 있습니다.

1. 히어로 + 공책 표지 – 인사말, 소문자 헤드라인, 손글씨 한마디가 있는 한 줄 부제목 ("한 곳에. 정말로!"), dibs CTA, 작은 뮤트 노트. 오른쪽: 기울어진 공책. 두 가지 표지 옵션:
   • 가죽 공책, 흰색 이름표 (이름 / 목표 / 기간 / 단계 1/4)로 샘플 사용자를 개인화;
   • 클라이언트의 인쇄 자료에서 가져온 표지. 브로셔, 소책자, 전단지 표지가 있다면 HTML/SVG로 공책 크기(컨테이너 쿼리 단위)로 재구축하여 웹과 인쇄가 일치하도록 함. 예시는 "미래로 가는 여권" 소책자를 사용: 남색, 이중 금색 프레임, 금색 지구본과 비행기, 주황색 "Study in Germany" 띠.
2. 스크롤 기반 공책 – 히어로 공책이 사용자가 스크롤할 때 이동 (펴지고, 커지고, 중앙에 위치), 그런 다음 표지가 열리면서 눈 모양 스티커와 "시작하려면 탭하세요!"가 있는 환영 페이지를 드러냄. 하나의 공책, 하나의 연속적인 동작.
3. 포스트잇 – 중앙 정렬 세리프 라인, 늘어난 단어 ("모든 것을 한 곳에."), 가장 강력한 증거 포인트가 있는 4개의 회전된 노란색 노트.
4. 일러스트 장면 + 로마 숫자 패널 (2–3개) – 전체 너비 CSS/SVG 일러스트 (책상, 비행기와 스카이라인이 있는 하늘, 캠퍼스…), 주요 단어가 색칠된 세리프 제목이 있는 크림색 패널, 오른쪽 가장자리에 I, II, III…로 번호가 매겨진 기능 목록, 항목을 클릭하면 변경되는 장치 목업. 하나의 장면은 클라이언트의 단계 프로세스를 담아야 함 (패널 = 단계, 장치 = 해당 단계의 단계 + 진행률 표시줄).
5. 낙서 그리드 – 3×3 손으로 그린 선 아이콘, 손글씨 캡션; 가운데 셀은 섹션 제목. 서비스/마켓플레이스에 적합. 가격 또는 제안 텍스트는 오렌지색 손글씨.
6. 줄 친 종이 목록 – 기울어진 종이, 빨간색 여백, 파란색 줄, 손글씨 체크리스트 (✓ 또는 ✗), 주변에 작은 스티커 라벨. 요구사항, "포함 사항", "절대 하지 않는 일"에 적합.
7. 색깔 공책 – 3개의 공책 (구름 패턴 파랑, 분홍, 코발트)에 이름표가 가이드/제품 표지로 붙음.
8. 만화 스트립 – 프로세스 단계당 한 프레임, 차콜 외곽선이 있는 평면 SVG 캐릭터, 자동 크기 조절 말풍선, 각 프레임 아래 로마 숫자와 단계 이름이 있는 캡션. 그 다음 짧은 사용 후기와 점선 상단 테두리.
9. FAQ – 점선 복숭아색 선으로 구분된 <details> 행, 주황색 +/– 마커.
10. 거대한 푸터 – 주황색 블록, 56px 위쪽 둥근 모서리, 세리프 크림색 헤드라인, 뉴스레터 입력 필드와 dibs 버튼, 링크 열, 브랜드 이름이 더 어두운 주황색 워드마크로 크게 표시.

4. 핵심 상호작용

• 공책 이동 + 열기 – 하나의 요소. 1단계 (페이지 상단부터 시작 섹션이 고정될 때까지): 변환(translate), 회전(-14° → 0), 스케일을 히어로 플레이스홀더의 rect에서 무대 중앙으로 보간. 2단계 (무대가 고정되어 있는 동안): --p 0→1이 표지를 왼쪽 가장자리를 기준으로 rotateY(-178deg * p) 회전. JS가 실행되고 prefers-reduced-motion이 꺼져 있을 때만 히어로 플레이스홀더를 숨김; 축소된 모션은 이미 열려 있고 정적인 책을 표시.
• 패널 → 장치 – 각 로마 숫자 항목은 <button aria-current>; data-t (및 선택적 data-sub, 파이프로 구분된 단계 목록)가 장치 화면에 렌더링.
• 자동 크기 조절 말풍선 – 절대 텍스트 주위에 수동으로 버블 경로를 그리지 마세요. <g class="sb" data-cx data-y data-tx">에 <text>만 배치; JS는 document.fonts.ready 이후 getBBox()를 측정하고, 프레임보다 넓으면 글꼴 크기를 줄이고, 둥근 직사각형과 화자를 가리키는 꼬리(data-tx)를 그리며, 버블을 300px 프레임 안에 고정. 각 언어 변경 후 다시 실행.
• 언어 전환 – HTML에 소스 언어를 유지. 사전(dictionary)은 각 정리된 소스 텍스트 노드를 [en, de, …]에 매핑; 텍스트 노드를 한 번만 순회하며 원본 + 선행/후행 공백을 저장하고, 클릭 시 교체; 또한 placeholder, data-t, data-sub도 변환. <html lang> 설정, 선택을 localStorage에 저장 (try/catch로 래핑).

5. 빌드 규칙

• 단일 자체 포함 HTML 파일: 인라인 CSS/JS, Google Fonts만, 모든 일러스트레이션에 인라인 SVG. 외부 이미지 불필요.
• 독립 실행형 파일에는 <!doctype html>, <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">가 필요합니다. 그렇지 않으면 휴대폰에서 데스크톱 레이아웃이 렌더링됩니다.
• main{overflow-x:clip} (hidden 아님)을 사용하여 이동하는 공책이 가로 스크롤을 유발하지 않도록 하고 동시에 position:sticky가 작동하도록 합니다.
• 모든 색상은 :root 토큰으로; 페이지는 의도적으로 밝은 모드 전용이므로 color-scheme: light를 설정하고 명시적인 body 배경색을 설정합니다.
• 버튼은 실제 <button>/<a>이며 :focus-visible이 표시되어야 함; 장식용 SVG는 aria-hidden="true"; 만화 프레임은 role="img" + 장면을 설명하는 aria-label을 가짐.
• prefers-reduced-motion 존중: 이동 없음, 책 열림 없음, 호버 떨림 없음.
• 중단점: ≤980px는 장면을 세로로 쌓고 장식용 소품(.hide-sm)을 숨김; ≤600px는 모서리에 로고 + 언어 전환만 유지하고 만화는 한 행에 한 프레임씩 표시.

6. 카피 작성

• 화면 반대편의 사람에게 말하듯이, 짧은 문장, 따뜻하지만 사실적으로.
• 헤드라인 소문자; 나머지는 문장 첫 글자 대문자.
• 손글씨 한마디는 농담이나 강조, 1–3단어, 섹션당 최대 하나.
• 색칠된 단어를 감싸는 제목은 모든 언어에서 자연스럽게 읽히도록 조각으로 나누세요 (어순이 바뀝니다!). "하나의 계획. 네 단계, 열네 단계"와 같이 각 조각이 독립적으로 번역될 수 있는 구조 선호.
• 샘플 사용자는 예시로 표시 ("Elif의 이야기는 예시 여정입니다").

7. 완료 체크리스트

• 모든 콘텐츠는 클라이언트의 실제 콘텐츠; 아무것도 만들어내지 않음; 출처 및 "마지막 확인" 날짜 유지.
• 히어로 공책이 부드럽게 이동하고 열림; 축소된 모션에서는 정적으로 열린 책 표시.
• 모든 말풍선이 모든 언어로 텍스트를 포함 (getBBox 또는 육안으로 확인).
• 모든 언어 전환에서 소스 언어 텍스트가 남지 않음 (소스 언어 특정 문자(ğ ş ı 등)에 대해 텍스트 노드 스캔).
• 390px에서 가로 스크롤 없음; 휴대폰에서 모서리에 로고 + 언어 전환만 표시.
• 각 섹션의 스크린샷 (1440×900 및 390×844, scripts/screenshots.mjs 참조).