AI에게 몰라서 못 시킨 홈페이지 기능 20가지
─────────────────────────────────────────────

요청문 전체 21개입니다. 책 순서대로 하나씩 보내세요.


──────────────────────────────────────────
0.  맨 처음 한 번만 (1부 Chapter 02)
──────────────────────────────────────────

앞으로 고칠 때 HTML은 index.html, CSS는 style.css, JavaScript는 script.js에만 넣어. 한 파일에 섞지 마.


──────────────────────────────────────────
1.  2부 Chapter 01 · FAQ를 더 찾기 쉽게 만들기
──────────────────────────────────────────

FAQ 제목 아래에 검색창을 추가해. 검색어가 질문이나 답변에 들어 있는 항목만 보여 줘. 검색어를 지우면 모든 질문이 다시 나타나게 해. 결과가 없으면 ‘검색된 질문이 없습니다. 다른 단어로 찾아 봐.’라고 표시해. 안내 문구는 ‘배송, 보관, 주차 등을 검색해 봐’로 해. 한 번에 하나의 답변만 열리는 기능은 그대로 유지해. CSS는 style.css에, JavaScript는 script.js에 넣어.

──────────────────────────────────────────
2.  2부 Chapter 02 · 확대한 사진을 닫지 않고 넘겨 보기
──────────────────────────────────────────

갤러리에서 사진을 확대했을 때 아래를 모두 넣어 줘. 사진 좌우에 이전·다음 버튼. 닫지 않고 앞뒤 사진으로 바뀌게. 아래에 ‘3 / 6’ 형식의 번호와 사진 설명. 넘길 때마다 같이 바뀌게. 방향키로도 넘기게. 단 확대 화면이 닫혀 있을 때는 방향키가 아무 동작도 하지 않게. 첫 사진에서는 이전 버튼을, 마지막 사진에서는 다음 버튼을 흐리게 하고 눌러도 넘어가지 않게. 지금의 닫기 버튼, 바깥 클릭 닫기, Esc 닫기는 그대로 유지해.

──────────────────────────────────────────
3.  2부 Chapter 03 · 지금 보고 있는 위치를 메뉴에서 알려 주기
──────────────────────────────────────────

화면을 내릴 때 지금 보고 있는 영역의 상단 메뉴를 강조해 줘. 소개, 인기 메뉴, 갤러리, 후기, FAQ, 예약 여섯 개에 모두 적용해. 강조는 글자 아래 밑줄로 하고, 색이 갑자기 바뀌지 않고 짧게 스며들듯 바뀌게 해. 화면 맨 위에 있을 때는 어떤 메뉴도 강조하지 마. 화면 오른쪽 아래에는 맨 위로 이동 버튼을 동그랗게 넣어. 한 화면 정도 내렸을 때 나타나고, 맨 위로 올라가면 사라지게 해. 메뉴를 눌러 이동하는 기능은 그대로 유지해.

──────────────────────────────────────────
4.  2부 Chapter 04 · 카드가 화면에 들어올 때 차례로 나타나게 하기
──────────────────────────────────────────

인기 메뉴 카드와 갤러리 사진이 화면에 들어올 때 하나씩 차례로 나타나게 해. 페이지를 열자마자 전부 나타나는 방식이 아니라, 화면을 내려서 카드가 보이는 순간에 나타나게 해. 16픽셀 아래에서 올라오면서 서서히 진해지게 하고 0.5초 만에 끝나게 해. 동작 줄이기 설정을 켠 사용자에게는 움직이지 않고 바로 보이게 해. 히어로 영역과 예약 폼에는 넣지 마. 카드 내용과 배치는 그대로 유지해.

──────────────────────────────────────────
5.  3부 Chapter 01 · 만들어 둔 검색을 메뉴에도 붙이기
──────────────────────────────────────────

FAQ에 넣은 검색과 같은 방식으로 인기 메뉴에도 검색창을 넣어. 메뉴 이름과 설명 글에서 찾고 가격은 검색 대상에서 빼. 입력이 0.3초쯤 멈춘 뒤에 한 번만 걸러내되 방문자가 느끼기에는 지금처럼 빨라야 해. FAQ 검색은 그대로 두고 건드리지 마. 카드 디자인과 배치는 유지해.

──────────────────────────────────────────
6.  3부 Chapter 02 · 여러 조건으로 메뉴 걸러 보기  (1번째)
──────────────────────────────────────────

메뉴 카드마다 화면에 보이지 않는 표시를 넣어. 종류는 아메리카노·카페라테·바닐라빈 라테가 커피, 버터 크루아상·소금빵이 빵, 딸기 생크림 케이크가 케이크. 재료는 라테 둘과 케이크에 우유, 크루아상·소금빵·케이크에 밀, 크루아상·소금빵에 버터. 아메리카노에는 아무것도 넣지 마. 화면에 보이는 모습은 지금과 똑같이 유지해.

──────────────────────────────────────────
7.  3부 Chapter 02 · 여러 조건으로 메뉴 걸러 보기  (2번째)
──────────────────────────────────────────

메뉴 검색창 아래에 조건 버튼을 넣어. 종류는 전체·커피·빵·케이크, 재료는 ‘우유 없는 것’·‘밀 없는 것’으로 하고, 고른 조건을 **모두 만족하는** 카드만 남게 해. 같은 버튼을 다시 누르면 그 조건만 풀리고, 선택된 버튼은 다른 색으로 표시해. 오른쪽 끝에 ‘조건 지우기’ 버튼을 두고 누르면 검색어까지 함께 지워 줘. 조건에 맞는 메뉴가 없으면 걸려 있는 조건과 함께 ‘조건을 하나 줄여 보세요’라고 안내해. 앞 장에서 만든 검색과 함께 작동하게 해.

──────────────────────────────────────────
8.  3부 Chapter 03 · 좋아하는 메뉴를 새로고침 후에도 남기기
──────────────────────────────────────────

메뉴 카드마다 오른쪽 위에 하트 버튼을 넣어. 누르면 채워지고 한 번 더 누르면 비워지게 하되, 하트를 눌러도 카드가 열리거나 다른 곳으로 이동하지 않게 해. 누른 메뉴를 브라우저에 저장해서 새로고침하거나 다시 열어도 그대로 남아 있게 해. 저장하는 자리의 이름은 mellow-favorites로 하고 메뉴 이름을 그대로 적어 둬. 조건 버튼 줄에 ‘내가 고른 메뉴’ 버튼을 더하고 고른 개수도 함께 보여 줘. 고른 메뉴가 없으면 ‘아직 고른 메뉴가 없습니다. 하트를 눌러 담아 보세요.’라고 안내해. ‘모두 지우기’ 버튼도 두되 정말 지울지 한 번 물어봐.

──────────────────────────────────────────
9.  3부 Chapter 04 · 화면을 가리지 않는 작은 알림 보여 주기
──────────────────────────────────────────

하트를 눌러 메뉴를 담으면 화면 아래 가운데에 작은 알림을 잠깐 보여 줘. 담았을 때는 ‘즐겨찾기에 담았습니다’, 풀었을 때는 ‘즐겨찾기에서 뺐습니다’라고 하고 2초 뒤 저절로 사라지게 해. 확인 버튼은 만들지 말고, 알림이 뜨는 동안에도 화면을 계속 쓸 수 있게 해. 알림이 떠 있을 때 새 알림이 생기면 앞 알림을 지우고 새 알림으로 바꿔 줘. 2부에서 만든 맨 위로 이동 버튼과 겹치지 않게 해.

──────────────────────────────────────────
10.  4부 Chapter 01 · 입력하는 중에 바로 알려 주는 예약 폼
──────────────────────────────────────────

예약 폼에서 각 칸을 벗어날 때 그 칸만 검사해 줘. 글자를 칠 때마다 검사하지는 말고, 한 번 오류가 난 칸은 고치는 동안 다시 검사해서 맞으면 바로 안내를 지워. 보내기를 누를 때는 모든 칸을 한 번 더 검사해. 오류 안내가 나타나고 사라질 때 아래 칸들이 밀리지 않게 자리를 미리 비워 둬. 안내 문구는 무엇이 틀렸는지가 아니라 무엇을 하면 되는지 알려 주는 말로 바꿔. 연락처는 하이픈이 없어도 빈칸이 섞여 있어도 받아 주고, 02로 시작하는 가게 전화번호도 받아 줘. 휴대전화는 입력이 끝나면 010-1234-5678 형식으로 홈페이지가 정리해 줘. 모든 필수 칸이 채워지기 전에는 보내기 버튼을 흐리게 하고, 버튼 아래에 남은 칸이 몇 개인지 적어 줘.

──────────────────────────────────────────
11.  4부 Chapter 02 · 날짜에 따라 예약 시간을 바꾸기
──────────────────────────────────────────

방문 시간 칸을 직접 입력하는 방식에서 목록으로 바꾸고 11시부터 19시까지 두 시간 간격으로 만들어. 인원 칸과 같은 모양으로 맞춰. 날짜를 고르면 그 요일에 맞는 시간만 고를 수 있게 하되, 평일과 토요일은 19시까지, 일요일은 15시까지로 해. 화요일과 8월 15일, 9월 16일부터 18일은 휴무라 시간을 고를 수 없게 하고, 휴무일 목록은 나중에 쉽게 고칠 수 있도록 한곳에 모아 둬. 오늘 날짜를 고르면 지금 시각 두 시간 뒤부터 고를 수 있게 해. 오늘보다 이전 날짜는 아예 고를 수 없게 하고 달력에서도 흐리게 표시해. 고를 수 없는 시간은 목록에서 지우지 말고 흐리게 표시하고 ‘17:00 (마감)’처럼 뒤에 괄호로 적어. 날짜를 바꿨을 때 이미 고른 시간이 못 쓰게 되면 시간을 다시 골라 달라고 알려 줘. 휴무일 안내는 오류 안내와 다른 자리에 표시해서 서로 지우지 않게 해.

──────────────────────────────────────────
12.  4부 Chapter 03 · 선택한 예약 내용을 바로 요약하기
──────────────────────────────────────────

예약 폼에 예약할 제품과 수량을 고르는 칸을 추가해. 제품은 인기 메뉴 여섯 가지와 ‘제품 예약 없음’ 중에서 고르게 하고, 수량은 1개부터 10개까지로 해. 제품을 고르지 않으면 수량 칸은 흐리게 두고 고를 수 없게 해. 폼 오른쪽에 요약 영역을 만들어 날짜·시간·인원·제품·수량을 보여 주고 칸을 고를 때마다 바로 바뀌게 해. 이름·연락처·문의 내용은 요약에 넣지 마. 날짜는 ‘8월 14일 (금)’처럼, 시간은 ‘오후 3시’처럼 보여 주되 입력칸 표시는 그대로 둬. 아직 고르지 않은 항목은 지우지 말고 ‘아직 고르지 않음’이라고 흐리게 표시해. 요약이 바뀔 때 화면 읽어 주는 프로그램에도 읽던 것을 끊지 않고 알려지게 해. 휴대폰에서는 요약을 화면 아래에 접힌 상태로 붙여 두고, 접힌 상태에서도 고른 항목 개수는 보이게 해.

──────────────────────────────────────────
13.  4부 Chapter 04 · 옵션에 따라 예상 가격 계산하기
──────────────────────────────────────────

제품 칸 아래에 크기와 추가 옵션을 넣어. 크기는 조각·1호·2호·3호 중 하나만 고르게 하고 각각 +0원·+8,000원·+18,000원·+26,000원이야. 추가 옵션은 레터링 +3,000원, 초 +1,000원, 포장 +2,000원을 여러 개 함께 고를 수 있게 해. 케이크가 아닌 제품이나 ‘제품 예약 없음’을 고르면 크기와 추가 옵션은 흐리게 두고 고를 수 없게 해. 제품을 바꾸면 크기와 추가 옵션을 처음 상태로 되돌려. 요약 영역에 예상 금액을 보여 주되 제품 기본 가격에 크기와 옵션 금액을 먼저 더한 뒤 수량을 곱해. 무엇이 얼마인지 항목별로도 보여 주고, 세 자리마다 쉼표를 넣는 데는 Intl.NumberFormat을 써. 금액만 글자를 크고 진하게 하고, 옆에 ‘예상’이라고 표시한 뒤 아래에 ‘확정 금액은 매장 확인 후 안내드립니다’를 항상 보이게 적어. 마지막으로 예약 폼 전체를 두 묶음으로 나눠. 제품·크기·추가 옵션·수량을 ‘케이크 예약’, 나머지 칸을 ‘방문 정보’로 fieldset과 legend를 써서 묶고 묶음 이름이 화면에도 보이게 해.

──────────────────────────────────────────
14.  4부 Chapter 05 · 보내기 전에 예약 내용 확인하기  (1번째)
──────────────────────────────────────────

예약 문의 보내기를 누르면 바로 보내지 말고 고른 내용을 보여 주는 확인 창을 먼저 띄워. 갤러리 확대 창과 같은 방식으로 만들고 날짜·시간·인원·제품·수량·예상 금액을 보여 줘. 버튼은 왼쪽에 테두리만 있는 ‘고치기’, 오른쪽에 색이 채워진 ‘예약 보내기’ 두 개로 하고 크기는 같게 해. ‘고치기’나 Esc를 누르면 창만 닫히고 입력한 내용은 그대로 남아 있어야 해. 창이 열리면 ‘고치기’ 버튼에 먼저 커서가 가고, 탭 키로 창 밖으로 나가지 않게 해. 창이 닫히면 원래 눌렀던 보내기 버튼으로 커서를 되돌려 줘. 확인 창이 상단 메뉴보다 위에 오게 하고, 휴대폰에서는 두 버튼을 위아래로 놓되 ‘예약 보내기’를 위에 ‘고치기’를 아래에 둬.

──────────────────────────────────────────
15.  4부 Chapter 05 · 보내기 전에 예약 내용 확인하기  (2번째)
──────────────────────────────────────────

예약을 보낸 뒤에는 폼 자리에 접수 안내를 남기고 보낸 내용도 함께 보여 줘. ‘새 예약 문의하기’ 버튼을 하나 두고 누르면 빈 폼으로 돌아가게 해. 토스트로 알리지 마.

──────────────────────────────────────────
16.  4부 Chapter 06 · 작성 중인 예약 내용을 자동 저장하기
──────────────────────────────────────────

예약 폼에 입력한 내용을 브라우저에 자동으로 저장해. 3부에서 즐겨찾기를 저장한 것과 같은 방식으로 하되, 글자를 칠 때마다가 아니라 입력이 1초쯤 멈춘 뒤에 한 번만 저장해. 이름과 연락처는 저장하지 말고 날짜·시간·인원·제품·수량·문의 내용만 저장해. 저장한 지 사흘이 지난 내용은 불러오지 말고 지워. 다시 열었을 때 저장해 둔 내용을 칸에 채우고 폼 위에 ‘이전에 작성하던 내용을 불러왔습니다’라고 알려 줘. 그 옆에 ‘새로 작성하기’ 버튼을 두고 누르면 저장된 내용을 지우고 빈 폼으로 만들어. 저장될 때마다 폼 오른쪽 위에 ‘작성 중인 내용이 저장되었습니다’라고 작게 표시하되 토스트로 띄우지 말고 몇 초 뒤 흐려지게만 해. 예약을 보내고 나면 저장해 둔 내용을 바로 지워.

──────────────────────────────────────────
17.  5부 Chapter 01 · 모바일에서 카드를 한 장씩 넘겨 보기
──────────────────────────────────────────

화면 너비 560px 이하에서만 인기 메뉴 카드를 가로로 밀어 볼 수 있게 해. 카드 한 장이 화면 너비의 80% 정도 되게 하고 오른쪽에 다음 카드가 살짝 보이게 해. 밀다가 손을 떼면 반드시 가장 가까운 카드의 왼쪽 끝에 딱 맞춰 부드럽게 멈추게 해. 어중간한 자리에 걸쳐 서는 일이 없어야 해. 카드 아래에 점을 여섯 개 놓고 지금 보고 있는 카드의 점만 진하게 표시하되 넘길 때 점도 따라 움직이게 해. 그보다 넓은 화면에서는 지금의 격자 배치를 그대로 둬.

──────────────────────────────────────────
18.  5부 Chapter 02 · 주소를 복사하고 휴대폰으로 공유하기
──────────────────────────────────────────

매장 주소와 전화번호 옆에 각각 복사 버튼을 넣어. 주소는 화면에 보이는 그대로, 전화번호는 하이픈을 빼고 숫자만 복사되게 하되 화면 표시는 그대로 둬. 복사하면 3부에서 만든 토스트와 같은 방식으로 ‘주소를 복사했습니다’, ‘전화번호를 복사했습니다’라고 알려 줘. 공유 기능이 되는 기기에서만 공유 버튼을 보여 주고, 안 되는 기기에서는 버튼을 아예 감춰. 공유할 때는 매장 이름·주소·전화번호를 함께 보내. 매장 정보 영역의 다른 부분은 수정하지 마.

──────────────────────────────────────────
19.  5부 Chapter 03 · 사진 때문에 느려지지 않게 하기
──────────────────────────────────────────

사진 때문에 페이지가 무거워. 세 가지를 한 번에 해 줘. 첫째, 메뉴와 갤러리 사진을 800·1200·1600 세 가지 크기로 만들고 화질은 80%로 저장해서 화면 크기에 맞는 것을 골라 불러오게 해. 메뉴 카드는 화면의 3분의 1, 갤러리도 3분의 1, 휴대폰에서는 화면 전체를 차지해. 둘째, 메뉴와 갤러리 사진은 그 자리에 가까워졌을 때 불러오게 하고 첫 화면 큰 사진과 카페 소개 사진에는 넣지 마. 셋째, 사진이 뜰 때 아래 내용이 밀리지 않게 사진마다 원래 가로세로 비율을 알려 줘. 사진이 오기 전에는 그 자리를 옅은 회색으로 채워 둬. 화면에 보이는 모습은 지금과 똑같아야 해. 지금 HTML의 들여쓰기와 줄 나눔은 그대로 두고 사진 태그만 고쳐.

──────────────────────────────────────────
20.  6부 Chapter 01 · 기능을 다 넣은 뒤 겹침 순서 정리하기
──────────────────────────────────────────

지금 홈페이지에서 화면에 떠 있는 것들의 겹침 순서를 정리해 줘. 토스트가 가장 위, 그다음이 확인 창, 갤러리 확대 창, 상단 메뉴, 맨 위로 버튼 순서가 되게 해. 같은 자리에 두 가지 안내가 함께 쓰이는 곳이 있는지 확인하고 있으면 자리를 나눠. 조건으로 걸러낸 카드가 투명하게 남지 않는지도 확인해 줘.


─────────────────────────────────────────────
한 번에 하나씩 보내세요. 보낸 뒤 책의 「직접 해 보기」로 확인하고 다음으로 갑니다.
결과가 어긋나면 책의 「이럴 때는」 상자에 있는 한 줄을 이어서 보내면 됩니다.
같은 요청문을 보내도 AI가 만드는 코드는 조금씩 다르게 나옵니다. 정상입니다.
