AI로 홈페이지 디자인 변경, 스티키 메뉴 적용하기

지난 게시글에서는 AI를 활용해 홈페이지를 만들었는데요.

https://itadventure.tistory.com/757

AI로 인터넷공간에 홈페이지 바로 만들기

AI가 채워준 내용은 모두 가상이기 때문에 실제 내가 넣어야 될 내용으로 채워주어야 합니다.
제일 먼저 손볼 부분은 전체 디자인입니다.

홈페이지를 의뢰한 고객분께서 '롯데 시네마 영화 페이지' 같은 디자인을 원한다고 칩시다.

https://www.lottecinema.co.kr/NLCHS/Movie

이미 완성된 홈페이지인데 디자인을 바꿔야 한다니 어디서부터 시작해야 할까요?
그냥 간단히 롯데 시네마 홈페이지 화면을 캡쳐해 Windsurf AI에게 요청하면 됩니다.
화면 상단과 하단만 바꾸는 걸로 하고 나눠서 작업하겠습니다.

화면 상단을 캡쳐하고 ( 윈도우10 기준 : Shift + 윈도우키 + S, 캡쳐할 영역 드래그 )

Windsurf의 채팅창에 붙여넣습니다.

그리고 나서 채팅창에 내용을 입력하면 됩니다.

홈페이지 디자인의 상단을 이미지처럼 바꿔줘. 메뉴와 글자 내용은 변경하지 말고.

'메뉴와 글자 내용을 변경하지 말고' 이 부분을 빼먹으면 글자도 롯데시네마와 같이 그대로 바꾸더라구요 ㅎㅎ

아래는 바뀐 디자인인데요.
홈, 서점소개 등의 메뉴 아래 빨간줄이 없는게 좀 아쉽군요.

추가로 요청하겠습니다.

홈, 서점소개 등 현재 페이지 메뉴 아래 빨간밑줄을 넣어줘,

결과는 아래와 같습니다.
각 메뉴를 선택하면 페이지가 바뀔 때마다 빨간 밑줄이 위치가 바뀌는 것을 확인할 수 있습니다.
딱 좋네요.

이제 화면 하단도 바꾸겠습니다.
롯데 시네마 홈페이지 화면 하단을 캡쳐한 다음,

채팅 창에 붙여넣고 요청하겠습니다.

홈페이지 디자인의 하단을 이미지처럼 바꿔줘. 역시 글자 내용은 변경하지 말고.

성공적으로 잘 바뀌었습니다.
이렇게 디자인을 쉽게 변경할 수 있습니다.

상단 고정 메뉴 구현

롯데 시네마 영화 페이지를 보면 상단화면이 처음에는 아래와 같이 나와 있다가,

화면을 아래로 스크롤하면 메뉴줄이 상단에 딱 고정되는걸 보실수 있는데요.
이렇게 화면에 고정되는걸 '스티키 레이어'(sticky layer)라고 합니다.
스티커처럼 메뉴를 위에 딱 붙이겠다는 의미인데요.
다른 메뉴로 이동하기 위해 스크롤을 다시 위로 올릴 필요가 없어 편리하지요.

아래와 같이 요청하겠습니다.

홈, 서점소개와 같은 메뉴 섹션은 화면을 스크롤해 화면을 벗어나도 늘 보이도록 플로팅해줘.

작업을 마쳤는데요. 99% 작동이 안될 겁니다.
왜냐하면 '스티키 레이어'의 사용 조건이 있기 때문입니다.
아직 AI는 이걸 해결하지 못하는 것 같습니다.

이것도 IT지식인데요. 잠깐만 들어 보세요.

현재 홈페이지는 머리말 - 본문 - 꼬리말 로 나뉘어져 있습니다.
여기서 '머리말'이 중요한데요. 캡쳐 화면으로 보면 메뉴를 포함하여 아래와 같습니다.

스티키 레이어를 사용하려면 아래와 같이 구조를 바꿔야 합니다.
머리말 안에 있으면 스티키 레이어가 작동이 안되거든요.

머리말 - 메뉴(스티키 레이어) - 본문 - 꼬리말

이제 다음 요청을 하겠습니다.

스티키 레이어가 헤더 안에 있어서 작동이 안되는 것 같아. 
헤더 다음으로 위치를 옮겨줘.

결과는? 성공입니다!

이 홈페이지는 아래 URL에서 확인해보실 수 있습니다.

https://cray7.mycafe24.com/HappyBooks2/

필요하신 분에게 알찬 정보 되셨을지 모르겠네요.
오늘도 방문해주신 모든 분들 모두 감사드립니다!