오빗 포스터 에디토리얼

오빗 포스터 에디토리얼은(는) 무엇을 하나요?

인쇄된 여행 포스터 시리즈가 살아 움직이는 듯한 홈페이지입니다. 잉크처럼 어두운 섹션과 종이처럼 밝은 섹션이 번갈아 나타나며, 타이포그래피는 거대하고 촘촘하게 설정되어 있습니다. 하나의 오렌지색 악센트가 모든 동작을 담당합니다. 히어로는 작은 우주(행성, 궤도, 종이 카드)로, 마우스 방향으로 기울어집니다. 더 아래로 내려가면 실제 사진이 박스 안에 배치되지 않고 포스터에 인쇄됩니다. 즉, 흑백으로 변환되어 종이 색상에 곱하기 혼합 모드로 적용되고, 거대한 글자 아래에 위치하며, 방문자가 마우스를 올리면 색상이 돌아옵니다.

참조 빌드는 example/index.html(가상의 여행 브랜드 Atlasio, 영어)입니다. 자세한 코드는 references/components.md에 있으며, screenshots/ 디렉토리에는 데스크톱 및 모바일의 모든 섹션 스크린샷이 있습니다.

1. 디자인 전 준비

1. 6~8장의 사진을 수집합니다. 역, 게시판, 도로, 창가 등 움직이는 사람이 있는 장면이 좋습니다. 각 사진에 하나의 역할을 할당합니다. 히어로의 작은 인쇄물, 포스터 상태별 하나, 지원 카드별 하나. 같은 사진을 두 번 사용하지 마십시오.
2. 모든 사진에서 타사 로고와 화면(공항 광고, 브랜드 표지판 등)을 확인하고 잘라냅니다.
3. 포스터 전환기(여행 방식, 도시, 프로그램, 계절)를 위한 네 가지 "가능성" 과 라우트 콘솔을 위한 네 가지 단계를 선택합니다. 각각 한 단어로 된 포스터 제목, 두 줄 헤드라인, 한 문장, 하나의 구체적인 예("파리 → 비엔나 야간 열차")가 필요합니다.
4. 사진을 압축합니다(§5 참조). 예제의 7장 사진은 총 약 750KB입니다.

2. 시각적 DNA

요소	규칙
잉크	페이지 배경 #101b22; 텍스트 종이 #edece4; 음영 #9ca6a8; 가는 선 #ffffff20.
종이	밝은 섹션 배경 #edece4에 포스터 색조: 세이지 #cbd4b2, 클레이 #d8c4b5, 미스트 #c0cfce, 라일락 #c9c2d3; 지원 카드 #dbe1cd 및 #e5d5c6.
악센트	하나의 오렌지색 #ff6c3a(행성, 태양 원반, 티커, 활성 탭, 최종 섹션). 연한 라임색 #c6d9ab/#c2d3a3은 헤드라인의 마침표와 라우트 번호에만 사용.
서체	디스플레이용 DM Sans 800–1000(자간 -.065 ~ -.09em, 줄 높이 .8–1); 본문용 400–700. 모든 레이블, 좌표 및 아이브로우에는 IBM Plex Mono 6–9px 대문자 사용.
헤드라인	세 줄로 쌓인 구조: 일반 텍스트, 윤곽선(-webkit-text-stroke:1px), 오렌지색; 각 줄은 마우스에 따라 움직이는 정도가 다릅니다.
사진	포스터와 지원 카드 내부: 색조가 적용된 격리된 카드 위에 grayscale(1) contrast(1.1) + mix-blend-mode:multiply; 마우스 호버 시 색상이 복원되고 1.04배 확대됩니다. 히어로의 작은 인쇄물은 종이 테두리와 함께 컬러를 유지합니다.
형태	행성, 태양 원반, 궤도, 전환기의 알약을 제외하고 모든 곳에서 직각 모서리를 사용합니다.
커서	30px 링과 점, mix-blend-mode:difference; 링크 위에서 커집니다. 마그네틱 버튼은 포인터 방향으로 움직입니다.

3. 섹션 패턴

1. 헤더 – 워드마크, 모노 "에디션" 링크, 세 개의 앵커, 모션 토글(MOTION ON/OFF), 테두리 CTA, 650px 이하에서 버거 메뉴. 페이지 상단에 2px 오렌지색 읽기 진행률 표시줄이 있습니다.
2. 히어로 – 모노 메타 라인, 세 줄 헤드라인, 별표, 두 줄의 카피, 밑줄 링크, 작은 인쇄물. 오른쪽: 궤도 우주(위도/경도 링과 두 글자 단어가 있는 행성, 세 개의 궤도, 위성, 회전하는 모노 레이블)와 세 개의 떠다니는 카드(목적지 티켓(클릭 시 네 가지 가능성 순환), 여권 스탬프 카드, 사진 인쇄물). 하단 바: 스크롤 링크, "마우스를 움직여 보세요" 힌트, 볼륨 번호.
3. 티커 – 전체 너비 오렌지색 밴드가 −1.6° 기울어져 있으며, 별표 문자로 구분된 거대한 단어들이 표시됩니다.
4. 가능성 – 회색 중간 구문이 있는 헤드라인, 알약 전환기, 그 다음 두 열로 된 보드: 포스터(좌표선, 혼합 사진, 태양 원반, 거대한 단어, 하단 레이블)와 세부 정보(큰 숫자, 아이브로우, 헤드라인, 카피, "시작할 경로", 잉크색 버튼, 모노 면책 조항). 포스터는 마우스와 함께 3D로 기울어집니다.
5. 라우트 콘솔 – 어두운 섹션, 오렌지색 구문이 포함된 헤드라인, 테두리 행으로 배열된 네 개의 탭(활성 탭은 오렌지색), 천천히 회전하는 궤도 타원 내부에 거대한 라임색 숫자와 단계 카피가 있는 패널; 아래에 "잠금 해제" 라인.
6. 지원 – 큰 회전 별 + 두 가지 색조 헤드라인; 두 개의 카드(셀프 서비스 및 유료 상담사) 각각 혼합 사진, 커서를 따라가는 조명, 밑줄 링크 포함; 하나의 오렌지색 단어가 있는 "언어 배우기" 라인.
7. 최종 호출 – 전체 오렌지색 섹션, 그리드, 호버 시 움직이는 화살표가 있는 두 줄짜리 거대 링크("그래서, 다음은 어디로?"), 짧은 약속, 잉크색 버튼, 모노 경로 라인.
8. 푸터 – 워드마크, 두 줄 문장, 링크; 브랜드가 가상임을 알리는 정직한 메모가 있는 모노 하단 행.

4. 시그니처 효과

• 마우스 필드: 히어로 내 pointermove 이벤트에서 :root에 --px/--py (−1…1) 설정; 헤드라인 줄, 떠다니는 카드 및 3D 궤도 시스템은 서로 다른 승수로 translate3d/rotateX/Y에서 이를 읽으며, .6s cubic-bezier(.16,1,.3,1) 전환으로 완화됩니다. 실시간 X 050 / Y 050 좌표 판독값이 함께 업데이트됩니다.
• 입자 네트워크: 65개의 떠다니는 점(휴대폰에서는 25개)으로 구성된 캔버스로, 95px 이내로 가까워지면 연결됩니다. 점은 포인터로부터 120px 이내에서 밀려나고, 180px 이내에서 오렌지색 선이 포인터에 연결됩니다. 히어로가 보이고 모션이 켜져 있는 동안에만 실행됩니다.
• 혼합 사진 포스터: 사진은 isolation:isolate 포스터 내부에 z-index:-2로 절대 배치된 <img>입니다. 흑백 + 곱하기로 사진이 포스터 색상에 인쇄되고, 태양 원반이 그 위에 곱해지며, 거대한 단어가 그 위에 위치합니다. 가능성 전환 시 이전 사진을 페이드 아웃(.swap)하고, src를 교체한 후 load 시 페이드 인하며, data-theme 속성을 통해 포스터 색조와 태양 색상을 변경합니다.
• 기울기 카드 + 커서 조명: 포스터와 지원 카드는 포인터 방향으로 최대 약 7~9° 회전하며, 방사형 하이라이트를 위해 --cx/--cy를 노출합니다.
• 접근 가능한 탭: 라우트 탭은 role="tablist", 로빙 tabindex, 화살표/Home/End 키를 사용합니다.
• 모션 토글: 하나의 버튼으로 모든 애니메이션을 일시 중지하고 마우스 필드를 0으로 설정합니다. prefers-reduced-motion 및 거친 포인터(터치 등)는 동일한 기능을 자동으로 끕니다.

5. 빌드 규칙

• 사진: ffmpeg -i in.jpg -vf scale=1400:-2 -q:v 5 out.jpg (히어로 인쇄물 약 900px 너비). 로고 및 화면 자르기: -vf "crop=w:h:x:y,scale=1100:-2". 각 사진은 약 170KB 미만으로 유지합니다.
• 독립형 HTML 파일: doctype, charset, viewport 포함; Google Fonts에서 글꼴 로드; 화살표 및 별표용 인라인 SVG 심볼; 기타 종속성 없음.
• 모든 사진에는 장면을 설명하는 실제 alt 속성이 있어야 합니다. 단, 포스터 사진은 장식용(alt="", aria-hidden)입니다. 포스터 단어와 세부 정보가 의미를 전달하기 때문입니다.
• 모바일: 히어로가 세로로 쌓이고, 우주 크기가 약 66%로 축소되며, 카드는 자체 변환으로 축소되고, 포스터 단어는 word-break:normal과 함께 22vw로 줄어들며, 탭은 2×2 그리드가 되고, 커서 링과 기울기 효과는 꺼집니다.
• 390px 너비에서 가로 스크롤 없음; 스킵 링크; :focus-visible 아웃라인 표시.

6. 카피 작성

• 세 가지로 구성된 짧은 선언문: "꿈을 가지고 오세요. 계획을 가지고 떠나세요." "장소를 찾으세요. 자신만의 경로를 그리세요."
• 모노 레이블은 인쇄판처럼 말합니다: 01 / 가능성, 모드 02 / 항공 · 내일까지 먼 곳으로.
• 예시는 실제처럼 보여야 하지만 예시임을 명시해야 합니다. 법적 또는 입국 규칙은 항상 공식 출처를 가리켜야 합니다.

7. 완료 체크리스트

• 각 사진은 한 번만 사용되며, 출처가 표시되고, 타사 로고가 잘려나갔으며, 압축되었습니다.
• 히어로가 마우스와 함께 기울어집니다. 목적지 카드와 "또 다른 가능성"은 포스터와 동기화하여 네 가지 상태를 순환합니다.
• 포스터 사진 전환 시 이전 이미지가 번쩍이지 않습니다. 마우스 호버 시 색상이 돌아옵니다.
• 라우트 탭이 키보드로 작동합니다.
• 모션 토글, 축소 모션 및 터치는 마우스 필드, 캔버스, 티커 및 기울기 효과를 모두 중지합니다.
• 390px: 포스터 제목 내 단어 분리 없음, 가로 스크롤 없음, 콘솔 오류 없음.
• 스크린샷 재생성: node scripts/screenshots.mjs example screenshots.