# 웹 배경과 앱 미리보기 배너
2026-09-12. 요청: 배너의 브라우저 창 안에 같은 웹사이트가 반복되는 구성을 없애고, 웹 배너 위에 브랜드의 앱 화면이 놓이도록 한다. 이미 제작한 사이트의 노출도 함께 점검한다.

## 주제와 화면의 역할
허브의 방문자가 사이트의 브랜드와 사용 경험을 빠르게 구분하도록 돕는다. 제품 사진 또는 현장 장면은 배경, 전경은 주소창 없는 모바일 앱 UI다. 실제 출시한 앱처럼 앱스토어 배지를 붙이지 않는다. 앱 화면은 이 배너를 위한 인터랙티브 콘셉트로 표시한다. 외부 이동은 해당 웹사이트로 연결한다.

## 시각 계획
- 공통 바탕: Paper #f6f7f7, Ink #202529, Titanium #44474d, Line #dce0e2.
- 색은 현재 브랜드의 색을 따름: ORA forest #173f33, GEAR fog #dedbe8, NUUM aqua #deefed, GROUP petrol #173f4d. 전 브랜드에 같은 색을 씌우지 않는다.
- 서체: 기존 허브의 Albert Sans / SUIT. 배너 브랜드명 78–120px, 소개 15px, 앱 제목 22–28px, 조작 12–14px. 앱 화면의 본문을 웹 화면 캡처로 축소하지 않는다.
- 데스크톱: 배경에 해당 브랜드의 제품·공간, 왼쪽 브랜드 설명과 사이트 링크, 오른쪽 한 대의 휴대폰. 앱 내부는 제품 선택, 루틴, 전시 감상, 객실 계획, 설비 흐름 등 업종에 맞는 내용을 담는다.
- 모바일: 브랜드 소개 → 휴대폰 앱 → 프로젝트 탐색 순서. 전화기 전체가 가로로 잘리지 않는다. 배너 버튼은 한 줄짜리 17개 목록으로 빽빽하게 넣지 않고 이전/다음 및 선택 목록으로 접근한다.

```
[ 최근 작업                                  앱 UI 미리보기 ]
[ 브랜드명 / 브랜드 설명          ┌── 상태 영역 ──┐         ]
[ 사이트 보기                    │ 로고·앱 내 메뉴 │         ]
[                                │ 브랜드 전용 콘텐츠│       ]
[                                │ 선택·상태·하단 탐색│      ]
[                                └─────────────┘         ]
[ 이전 / 프로젝트 선택 / 다음                  재생·정지     ]
```

## 조작과 모션
첫 진입의 전화기 안착과 장면 전환에만 짧은 이동/투명도 변화를 사용한다. 배경 패럴랙스는 작게, 전화기의 무한 부유는 사용하지 않는다. 자동 넘김은 실제 경과 시간 기준, 정지 버튼/탭 숨김/화면 밖/reduced motion을 지킨다. 앱 버튼을 누르거나 키보드로 앱에 진입하면 자동 넘김을 정지한다. 사용 중인 화면이 갑자기 사라지지 않도록 한다.
앱 조작은 선택 결과가 보이는 로컬 데모다. 실제 구매나 예약·신청 접수 메시지를 만들지 않는다. 주소창·브라우저 동그라미·웹사이트 스크린샷은 전경에 사용하지 않는다.

## 사전 비평과 검수 기준
휴대폰 테두리 안에 기존 웹 화면을 그대로 넣으면 요청을 충족하지 못한다. 앱의 정보 밀도, 상단 탐색과 하단 조작을 새로 설계한다. 같은 제품 이미지와 브랜드 로고를 사용하며, 프로젝트를 바꿀 때 앱의 내용도 같이 바뀐다. 320–1440px, 키보드 포커스, 조작 시 자동 넘김 정지, 이미지 누락, 감소된 모션과 실제 배포 링크를 확인한다.