화면 구성 사전

모모샵 모든 페이지 맨 위에 높이 56px 헤더를 만들어 줘. 왼쪽에 로고(누르면 홈), 가운데에 머그컵·텀블러·세트 메뉴, 오른쪽에 검색 아이콘과 장바구니(담은 수 배지) 순서로 놓고, 스크롤을 내려도 위에 붙어 따라오게(sticky) 해 줘. 고정 헤더가 본문 제목을 가리지 않게 앵커 이동에는 scroll-margin-top을 주고, 배경은 불투명하거나 살짝 흐리게 해서 글자가 겹쳐 보이지 않게 해 줘. 390px 폭에서는 메뉴를 햄버거 버튼 뒤로 접고, 로고·검색·장바구니만 남겨 줘. 헤더 안 메뉴는 nav 요소에 aria-label을 달고, 아이콘 버튼에는 aria-label을, 키보드 Tab으로 로고부터 장바구니 순서로 이동되게 해 줘.

모모샵 홈 첫 화면에 히어로를 만들어 줘. 헤더 바로 아래에 넓게 두고, 왼쪽에 큰 제목 '하루가 따뜻해지는 머그컵', 그 아래 한 줄 설명, 대표 버튼 하나('머그컵 보러 가기'), 오른쪽에 대표 상품 이미지를 놓아 줘. 대표 버튼은 화면에서 가장 눈에 띄는 색으로 하고 보조 버튼은 만들지 마. 높이는 화면의 70% 안쪽으로 해서 다음 구역이 살짝 보이게 해 줘. 390px에서는 이미지를 제목 위나 아래로 옮겨 한 줄로 쌓고, 제목은 3줄을 넘지 않게 해 줘. 이미지에는 상품이 보이는 alt 글을, 제목은 페이지의 h1 하나로 쓰고 버튼은 키보드 Tab·Enter로 누를 수 있게 해 줘.

모모샵 상품 목록 왼쪽에 폭 200px 사이드바를 만들어 줘. 위에서부터 '분류(머그컵·텀블러·세트)', '가격대', '용량' 필터를 세로로 두고, 본문 카드 목록은 그 오른쪽에서 남는 폭을 채우게 해 줘. 사이드바는 스크롤해도 본문 옆에 따라오게(sticky) 해 줘. 폭이 768px보다 좁아지면 사이드바를 본문 위로 옮기고 필터를 한 줄 칩으로 접어 줘. 사이드바는 aside 요소에 aria-label='상품 필터'를 달고, 필터 칸은 키보드 Tab으로 차례로 이동하게 해 줘.

모모샵 390px 화면에서 헤더 왼쪽 햄버거 버튼을 누르면 왼쪽에서 폭 75%의 드로어가 0.25초 동안 밀려 나오게 해 줘. 안에는 머그컵·텀블러·세트·주문 조회·고객센터를 세로로 두고, 나머지 오른쪽 25%는 어둡게 덮어 누르면 닫히게 해 줘. 바깥 누르기·닫기 버튼·Esc 키로 닫히고, 열릴 때 초점은 드로어 안 첫 항목으로 가고 닫히면 햄버거 버튼으로 돌아오게 해 줘. 열린 동안 뒤 화면은 스크롤되지 않게 하고, 햄버거 버튼에는 aria-expanded와 aria-controls를, 드로어에는 aria-label='모모샵 메뉴'를 달아 줘. 움직임 줄이기 설정에서는 애니메이션 없이 바로 나타나게 해 줘.

모모샵 모바일 화면 맨 아래에 높이 56px 하단 탭바를 고정해 줘. 홈·검색·장바구니·내 정보 4개를 같은 폭으로 나눠 아이콘과 글자를 함께 두고, 지금 탭은 색과 굵은 글씨로 강조해 줘. 장바구니 탭에는 담은 수 배지를 달고, 탭을 누르면 화면 전체가 해당 화면으로 바뀌게 해 줘. 홈 인디케이터가 있는 폰에서는 safe-area 아래 여백을 더해 줘. 탭은 button이나 링크 요소로 만들고 지금 탭에 aria-current='page'를 달고, 각 탭 누르는 영역은 44px 이상으로 해 줘. 768px보다 넓은 PC 화면에서는 탭바를 숨기고 헤더 메뉴를 쓰게 해 줘.

모모샵 모든 페이지 맨 아래에 푸터를 만들어 줘. 위에서 아래로 로고·한 줄 소개, 링크 3열(회사 정보·고객센터·약관 및 사이트맵), 맨 끝에 사업자 정보와 저작권 줄을 놓고, 어두운 배경에 밝은 글자로 대비를 충분히 줘. 768px보다 좁은 화면에서는 3열을 세로로 쌓고 각 열 제목을 누르면 펼쳐지는 접기 목록으로 바꿔 줘(처음에는 접힘). 접는 제목은 button에 aria-expanded를 달고, 푸터는 footer 요소 안에 nav aria-label='푸터 링크'로 묶어 줘. 링크는 키보드 Tab으로 차례로 이동되고 초점이 눈에 보이게 해 줘.

모모샵 상품 목록을 카드 그리드로 만들어 줘. 카드는 위에 정사각형 상품 이미지, 아래에 상품명과 가격을 두고 모두 같은 크기로 하며 카드 사이 간격은 16px로 해 줘. 열 수는 1200px 이상 4열, 768px 이상 3열, 480px 이상 2열, 그보다 좁으면 1열로 자동으로 바뀌게(auto-fill, minmax) 해 줘. 카드 전체를 누르면 상세 페이지로 가게 하고 이미지에는 상품이 보이는 alt 글을 달아 줘. 카드 순서는 읽는 순서와 같게 하고 키보드 Tab으로 카드 한 장씩 초점이 가게 해 줘.

모모샵 주문 내역을 리스트로 만들어 줘. 한 줄은 왼쪽에 상품 이미지 40px, 가운데에 상품명(굵게)과 '350ml · 주문 3개' 보조 글, 오른쪽에 가격과 화살표를 놓고, 줄 사이에는 얇은 구분선을 줘. 줄을 누르면 선택 색이 켜지고 상세 화면으로 가게 해 줘. 보기 설정으로 '촘촘'(줄 높이 44px)과 '여유'(줄 높이 64px)를 바꿀 수 있게 해 줘. 목록은 ul·li로 만들고 줄 전체를 누르는 영역으로 하며, 선택된 줄에는 aria-current나 aria-pressed를 달고 키보드 방향키나 Tab으로 줄 사이를 이동하게 해 줘.

모모샵 상품 비교를 테이블로 만들어 줘. 열은 상품명·용량(ml)·가격·재고 4개이고, 머리글은 한 줄로 고정하고 숫자 열은 오른쪽 정렬해 줘. 상품명과 가격 머리글을 누르면 오름차순, 한 번 더 누르면 내림차순, 또 누르면 처음 순서로 돌아오게 하고, 정렬된 열에는 ▲▼ 표시를 해 줘. 정렬 중인 머리글에는 aria-sort를 달고, 표는 table·th scope='col'로 만들어 caption으로 '모모샵 상품 비교'를 적어 줘. 390px에서는 표가 가로로 넘치지 않게 열 수를 줄이거나 표 안에서만 가로 스크롤되게 해 줘.

모모샵 주문 상세에 배송 타임라인을 만들어 줘. 세로 선을 따라 '주문 접수 → 결제 완료 → 상품 준비 → 배송 중 → 배송 완료' 5단계 점을 놓고, 지난 단계는 채운 점과 진한 선으로, 지금 단계는 큰 점과 굵은 글씨로, 앞으로의 단계는 속이 빈 점으로 보여 줘. 단계마다 글 아래에 처리 시각을 적고 아직 안 온 단계는 '예정'으로 적어 줘. 목록은 ol로 만들고 지금 단계에 aria-current='step'을 달아, 색만으로 구분하지 않고 '완료·진행 중·예정' 글자도 함께 읽히게 해 줘. 390px에서도 세로 한 줄로 유지해 줘.

모모샵 소개 페이지에 벤토 그리드를 만들어 줘. 4열 격자에 큰 칸 1개(2×2, '내 이름 새기기'), 가로로 긴 칸 3개('보온 12시간', '무료 배송', '식기세척기 OK'), 작은 칸 2개('리뷰 4.8', '당일 출고')를 빈틈없이 맞춰 넣고 칸 사이 간격은 12px, 모서리는 16px로 둥글게 해 줘. 칸을 누르거나 키보드 Enter를 누르면 테두리가 짙어지고 살짝 커지며 자세한 설명으로 이어지게 해 줘. 768px보다 좁은 화면에서는 2열로 줄이고 큰 칸은 가로 전체를 쓰게 해 줘. 칸은 button이나 링크로 만들고 읽는 순서가 시각 순서와 같게 해 줘.

모모샵 홈 히어로 바로 아래에 로고 바를 만들어 줘. 맨 위에 '모모샵 머그를 쓰는 곳'이라는 작은 안내 글을 두고, 그 아래 로고 5개를 회색 한 색으로 통일해 한 줄에 같은 높이로 놓아 줘. 로고는 실제로 사용을 허락받은 고객사와 실제 보도만 넣고, 지어낸 로고나 과장된 숫자는 쓰지 마. 로고가 화면 폭보다 많으면 천천히 오른쪽에서 왼쪽으로 끊김 없이 흐르게 하고, 마우스를 올리거나 키보드 초점이 가면 멈추게 하며, '멈추기' 버튼도 따로 둬 줘. 움직임 줄이기 설정에서는 흐르지 않고 한 줄로 줄바꿈해 모두 보이게 해 줘. 각 로고에는 회사 이름 alt 글을 달고, 반복되는 흐름용 복제본에는 aria-hidden을 달아 줘.

모모샵 랜딩 페이지에 후기 카드 구역을 만들어 줘. 카드 한 장에는 동그란 프로필 이미지, 이름(예: 김*영), 별점 5점 만점, 후기 한 문장(80자 이내), 구매한 상품명을 넣고, 한 번에 한 장을 보여 주며 좌우 화살표 버튼과 아래 점으로 넘기게 해 줘. 자동으로 넘기지 말고 사람이 직접 넘기게 하며, 넘길 때 현재 몇 번째인지 '2 / 3'으로 알려 줘. 후기는 실제 구매자가 쓴 글만 쓰고 이름은 일부 가려 줘. 390px에서는 카드가 화면 폭을 꽉 채우게 하고, 버튼에는 aria-label('이전 후기', '다음 후기')을, 카드 영역에는 aria-live='polite'를 달아 줘.

모모샵 정기배송 구독 가격표를 만들어 줘. 라이트(월 4,900원)·클럽(월 9,900원)·패밀리(월 14,900원) 3개를 카드로 나란히 놓고, 가운데 클럽에는 '추천' 표시와 진한 테두리를 줘. 위에 월간/연간 결제 전환을 두고 연간을 고르면 가격을 월 환산 3,900·7,900·11,900원으로 바꾸며 '월간 대비 얼마 아낌'을 실제 계산한 금액으로 보여 줘. 가격은 실제로 청구하는 금액만 쓰고, 없는 정가를 지어내 취소선을 긋지 마. 카드를 누르면 선택 표시를 하고 각 카드 아래에 선택 버튼을 둬 줘. 390px에서는 카드를 세로로 쌓고 추천 카드를 맨 위에 두며, 전환은 라디오 그룹으로 만들어 키보드 방향키로 바꾸고 선택된 요금제는 aria-pressed로 알려 줘.

모모샵 랜딩 페이지 푸터 바로 위에 CTA 띠를 만들어 줘. 가로 전체를 채우는 짙은 색 띠 가운데에 한 문장 '오늘 주문하면 내일 아침 식탁에서 만나요'를 큰 글씨로, 그 아래에 버튼 하나 '머그컵 고르러 가기'만 놓아 줘(보조 버튼은 만들지 마). 버튼은 띠 색과 대비되는 밝은 색으로 하고, 누르면 상품 목록으로 이동하게 해 줘. 위아래 여백을 넉넉히 주고 390px에서는 문장이 두 줄까지 줄바꿈되며 버튼은 폭 전체를 쓰게 해 줘. 문장과 버튼 글자는 배경과 대비 4.5:1 이상으로 하고, 버튼은 키보드 Tab·Enter로 누를 수 있으며 초점 표시가 보이게 해 줘.