BD 33일차
About 페이지는 어떻게 제작하나요?
안녕하세요! 오늘은 About 페이지를 어떻게 제작하는지 알아볼게요. About 페이지는 고정된 배경 위에 텍스트 위젯으로 구성되며, 양쪽과 하단에 여백을 두고 설계합니다. 페이지 하단의 섹션들은 섹션 반복 설정을 통해 모든 페이지에서 동일하게 표시되도록 하죠.
텍스트 위젯을 추가할 때는 여백을 적절히 설정하고, 배경 이미지를 고정하여 스크롤 시에도 배경이 움직이지 않게 합니다. 텍스트는 제목, 부제목, 본문 등 다양한 크기와 스타일로 구성하며, 가독성을 위해 배경색을 흰색으로 설정합니다. 텍스트 위젯의 여백을 조절하여 전체적인 레이아웃을 완성하고, 이를 통해 About 페이지의 기본 구조를 완성합니다.
쇼핑 위젯으로 상품 페이지 만드는 방법
상품 구매 페이지는 상단 여백, 상품 카테고리, 쇼핑 위젯, 그리고 반복 섹션으로 구성됩니다. 여백 위젯(100px)과 탭 형식의 메뉴 리스트 위젯을 추가하여 카테고리를 나열합니다.
쇼핑 위젯 설정에서는 모바일용 디자인, '샵' 카테고리 선택, 상품명과 가격 표시, 이미지 비율(3:4) 등을 지정하죠. 상품 배치는 한 줄에 2개씩, 호버 시 두 번째 이미지 표시, 텍스트 오른쪽 정렬 등으로 설정하여 사용자 경험을 개선합니다. 설정 완료 후 미리보기로 확인하고 게시하여 상품 구매 페이지를 완성합니다.
리뷰 페이지 어떻게 구성하나요?
리뷰 페이지는 상단 바 아래 여백, 3열 구조의 리뷰 목록, 하단 여백으로 구성됩니다. 최신글 위젯을 추가하고 그리드 게시판 스타일로 설정하여 리뷰 목록을 구현합니다.
리뷰 항목에는 제목, 작성자, 작성일자, 제품 이름, 별점 등의 정보가 포함되며, 이미지 비율은 3:4로 설정합니다. 데스크톱에서는 한 줄에 3개, 모바일에서는 1개의 리뷰가 표시되도록 설정하여 반응형 디자인을 구현해요. 여백 위젯을 활용해 상하 100픽셀의 여백을 추가하여 페이지의 가독성을 높입니다.
뉴스레터 페이지 제작 단계
뉴스레터 페이지는 텍스트 위젯과 입력 폼 위젯을 활용하여 구성합니다. 페이지 상단에 100픽셀 높이의 여백을 추가하고, 그 아래에 텍스트 위젯과 입력 폼을 배치합니다.
텍스트 위젯의 제목을 '반응형 제목 4'로 설정하고, 상하좌우에 50픽셀의 여백을 적용합니다. 배경 이미지를 추가하고, 입력 폼의 너비를 텍스트 위젯과 동일하게 조정하죠. 입력 폼 설정에서 이름을 '뉴스레터'로 지정하고, 메인 페이지와 동일한 설정을 적용하여 일관성을 유지합니다.
웹 페이지 디자인 개선을 위한 방법
IMAP의 기본 제공 페이지(쇼핑, 예약, 검색 등)에서 불필요한 푸터를 제거할 수 있는 방법을 설명할게요. 메뉴 관리에서 각 페이지의 하단 숨김 옵션을 체크하여 푸터를 삭제할 수 있습니다.
아이맵에서 제공하는 8가지 애니메이션 효과를 활용하여 웹사이트에 동적인 요소를 추가할 수 있어요. 애니메이션 효과의 방향, 지속시간, 지연시간을 조절하여 다양한 시각적 효과를 만들 수 있습니다. 텍스트와 버튼에 날아오기, 나타나기(fade in) 등의 애니메이션을 적용하여 페이지의 흥미를 높입니다.
모바일 편집 기능의 주요 내용
모바일 편집은 디자인 모드의 모니터 모형 아이콘을 클릭하여 접근할 수 있습니다. 모바일 편집 모드에서는 PC 버전과 별도로 섹션을 추가하고 수정할 수 있으며, 눈 모양 아이콘으로 섹션 숨김 기능을 사용할 수 있습니다.
메인 페이지 모바일 편집 시 상단 설정, 로고 크기 조정, 메뉴 간격 조정 등을 통해 사용자 경험을 개선합니다. 모바일에서는 상품 배열을 두 개로 변경하고, PC 버전에 있던 세럼 부분을 추가하여 내용을 보완합니다. 슬라이드 기능을 활용하여 제한된 공간에서 더 많은 상품 정보를 효과적으로 보여줄 수 있습니다.
