PC 메가메뉴, 모바일 헤더, SVG 로고 전환, 운영 검수 흐름을 한 번에 확인하는 설계도입니다.
홈 진입부터 SHOP 메뉴 탐색, 상품군 이동, 모바일 재탐색까지의 흐름입니다.
글로벌 쇼핑몰 첫 화면
헤더 탐색 시작
상단 드롭다운
메가메뉴 노출
상품군과 배너
빠른 이동
터치 메뉴 확인
작은 화면 대응
원하는 상품군으로
탐색 완료
New Arrivals
Best Sellers
Outerwear
Accessories
3열 구성
hover 상태 강조
브랜드 배너 영역
방문자가 첫 진입 시 보게 되는 공통 헤더입니다. 제안서의 시안 정합성과 브랜드 첫인상 개선 전략을 증명합니다.
Liquid에서 메뉴 데이터를 출력하고 CSS 브레이크포인트로 헤더 간격을 제어합니다.
New Arrivals
Best Sellers
Outerwear
Accessories
3열 구성
hover 상태 강조
브랜드 배너 영역
좌측 사이드 메뉴를 상단 드롭다운 메가메뉴로 전환한 핵심 화면입니다. 데모 Step 2와 연결됩니다.
hover와 click 상태를 분리하고 메뉴 열림 영역을 헤더 아래에 고정해 탐색 흐름을 단축합니다.
작은 화면에서도 메뉴 깊이와 상품군 이동 경로를 명확하게 제공합니다.
모바일 사용자가 터치로 SHOP 하위 메뉴를 여는 화면입니다. 데모 Step 3의 모바일 탐색 체험과 연결됩니다.
터치 영역, 닫힘 버튼, 메뉴 깊이 표현을 분리해 작은 화면에서도 탐색 오류를 줄입니다.
신규 시안 확인부터 개발본 검수, 운영 반영, 유지보수 요청까지의 흐름입니다.
신규 헤더 기준
디자인 확인
테마 영향 범위
파일 단위 정리
PC와 모바일
상태별 확인
검수 후 적용
전후 캡처 확보
월 단위 개선
이력 기반 대응
운영자가 어떤 영역이 바뀌는지 이해하는 화면입니다. 공통 영역 수정의 불안감을 줄입니다.
Header 파일, CSS, 스크립트 변경 범위를 항목화해 적용 전 확인합니다.
상태별 검수를 한눈에 확인하는 화면입니다. 산출물 완성도 우선순위에 직접 대응합니다.
메뉴 열림, 모바일 터치, 스크롤 로고, 브라우저 검수 항목을 체크합니다.
New Arrivals
Best Sellers
Outerwear
Accessories
3열 구성
hover 상태 강조
브랜드 배너 영역
최종 전달 시 운영자가 결과를 빠르게 비교하는 화면입니다.
변경 전 좌측 메뉴와 변경 후 메가메뉴를 나란히 보여 적용 효과를 확인합니다.
테마 백업, Liquid 수정, CSS와 JavaScript 적용, 검수 로그 전달까지의 흐름입니다.
현재 상태 보존
안전한 시작
헤더 구조와
메뉴 데이터 정리
메가메뉴와
반응형 구현
스크롤 로고
메뉴 상태 제어
이력과 캡처
최종 전달
New Arrivals
Best Sellers
Outerwear
Accessories
3열 구성
hover 상태 강조
브랜드 배너 영역
개발자가 수정 파일과 메뉴 출력 구조를 파악하는 화면입니다.
Liquid 섹션, 메뉴 객체, 로고 자산, 스크립트 연결 지점을 분리합니다.
메뉴 열림과 스크롤 로고 전환이 겹치는 상태를 정의합니다.
상태값을 분리해 모바일, PC, 스크롤 조건이 충돌하지 않도록 구현합니다.
최종 전달 전 통과 상태와 남은 이슈를 확인합니다.
해상도, 브라우저, 스크롤, 모바일 터치 검수 결과를 기록합니다.