# v3 내부 이용 흐름과 인터랙션 개선

작업 기준: 2026-10-16. 범위는 현재 `v3/index.html`이 불러오는 `src/` 앱이다.
기존 `js/`, 중첩된 `v2/`, 다른 버전은 보존한다. 기능 브랜치에서 구현하고 검증 후
`--no-ff`로 통합한다.

## 요구와 확인한 시작 상태

1. 방문 안내 우측 미리보기의 그림자를 은은하게 줄인다. 현재 40% 그림자를 10%로
   낮추고 번짐·거리를 줄인다. 하나의 공통 프레임, 중앙 sticky, 마지막 이미지 유지는 보존한다.
2. 외부 안내와 정적인 소개에서 끝나는 이용 흐름을 내부에서 완결한다.
   실제 앱의 132개 등록 경로, 400개 경로·쿼리 조합을 조사했으며 외부 웹 이동은
   네이버 지도 한 곳이다. 채용·자료 열람·굿즈·이벤트 결과는 내부 경로가 있지만
   신청 또는 조회 작업을 끝내기 부족하다.
3. lemonade의 모션 절차로 사이트 전체의 상태 변화·조작·탐색 흐름을 검토해 강화한다.
   noslopui-one의 한영 기능군 주석과 hover-lift 금지, sejongpac-renewmakes의
   가독성·아이콘·하트·캐러셀·체험 고지 계약을 함께 적용한다.

## 기능별 결과 계약

| 영역 | 사용자 작업·필수 정보 | 완료 조건 |
| --- | --- | --- |
| 길찾기 | 출발 역/주차장, 목적 공간 선택 | 내부 개략도와 단계별 동선이 같은 선택을 표시, 잘못된 쿼리·모바일·키보드 지원 |
| 채용 | 분야·가능 시간·경험·동기·연락 정보 작성 | 검증 → 내용 확인 → 수정 → 로컬 저장 → 신청내역·철회, 중복 제출 방지 |
| 공개자료 | 주제 검색·분류·자료 선택 | 보유한 시연 데이터의 본문 열람 및 실제 파일 다운로드, 공식 수치로 오인시키지 않음 |
| 굿즈 | 3개 상품 상세·수량·장바구니·주문 | 금액 계산·수정·삭제·확인·저장·취소·재방문 내역, 결제/배송 개인정보 수집 없음 |
| 이벤트 | 내 접수번호·행사 조회 | 저장 내역과 일치하는 참여/철회 상태, 없는 번호와 빈 목록 안내, 가짜 당첨자 생성 없음 |
| 기존 흐름 | 예매·교육·대관·문의·검색·관심 | 기존 작업 완료 가능성 유지, 새 안내와 내역에서 연결 |

## 모션 결정 순서와 적용표

플랫폼은 네이티브 ES module·DOM·CSS다. lemonade의 `motion-and-native.md`에서
기회 탐색 → 기존 모션 검토 → animate → 접근성·성능 검증 순서로 적용한다.
각 동작마다 빈도·목적을 먼저 정하고 도구·속성·시간·중단·퇴장·모션 감소를 정한다.
기존 `--ease-out` 토큰을 재사용하며 추가 라이브러리는 필요하지 않다.

| 표면 | 목적과 빈도 | 선택한 모션·해제 |
| --- | --- | --- |
| 메뉴·검색 모달 | 가끔, 열린 레이어와 복귀 위치 설명 | opacity/작은 이동, 진입 220ms·퇴장 150ms, 반복 입력 취소·Escape·초점 복귀 |
| FAQ·신청내역 | 반복, 공개된 내용과 접힘 경계 확인 | 열린 높이·닫힌 높이를 실측해 180ms 전환, 종료 후 자연 높이 복구, 닫히는 내용은 Tab에서 제외 |
| 홈 분류·프로그램 탭·공유 | 반복, 교체된 결과 확인 | 내용 160ms opacity, 앞선 모션 취소, 선택 상태와 키보드는 즉시 반영 |
| 예매·신청 단계 | 가끔, 입력에서 검토/완료로 이동 | 단계 200ms opacity/8px, 완료 220ms, 좌석·금액·타이핑에는 단계 모션 없음 |
| 관심·알림·버튼 | 반복, 조작 결과 확인 | 내부 아이콘·색상·opacity, 토스트 180ms, 하트 컨테이너 기존 180ms 유지 |
| 편집형 안내 섹션 | 한 번, 읽는 순서 안내 | 화면 밖 섹션의 작은 진입, 사진 fade, 보이는 기본 상태와 focus 즉시 노출 |
| 맨 위로 | 가끔, 새 조작 수단 발견 | 기존 800px 기준 opacity 진입, 숨김 중 Tab 제외 |
| 달력·좌석·표·검색문자·정책 | 고빈도/정확한 위치 필요 | 읽기와 조작 위치 유지, 장식용 이동 없음 |

펼침 영역은 열고 닫히는 범위를 설명하기 위해 실측 높이 전환을 사용한다. 이 경우에만 크기를 전환하며,
달력·좌석·입력값·자료 표의 조작 위치와 크기에 같은 효과를 확장하지 않는다.

모션 감소 설정은 CSS와 WAAPI 모두에 적용하고 실행 중 설정 변경에도 현재 상태를
유지한다. 경로 이동 시 observer·listener·animation을 정리한다. 캐러셀의
2700/800/650ms 및 방문 안내 이미지의 240ms는 기존 사용자 요구를 유지한다.

## 검증 계획

- 실제 v3 모듈의 경로·자료·유틸리티 검사와 브라우저 전체 경로 탐색.
- 새 길찾기·자료 다운로드·이벤트 조회·채용·굿즈의 시작부터 완료/취소까지 실행.
- 메뉴 닫기·재열기·Escape·초점 복귀, 빠른 탭/분류 전환, 단계 전후 이동, 브라우저 뒤로 가기.
- 320/390/768/1024/1440px, 확대 글자, 모션 감소 및 실행 중 설정 변경.
- 홈·목록·상세·신청·자료·굿즈·열린 모달의 실제 캡처와 긴 내용·빈 상태 확인.
- 기존 가독성·카드/캐러셀·방문 미리보기·거래 회귀 검사. 결과와 미검증 항목은
  `design-qa.md`에 실제 실행 근거로 기록한다.