※ 이번 레시피는 고객님의 소중한 의견을 바탕으로 제작되었습니다.
눈에 확! 꽂히는 웹사이트, 쉽게 만드는 디자인 꿀팁을 공개합니다. 바로 아임웹 디자인모드의 [본문 섹션 고정] 기능을 사용하는 건데요. 이 기능을 활용해 웹사이트를 구성하면 마우스 스크롤을 통해 특정 섹션이 브라우저 화면을 벗어나더라도 상단에 고정되는 효과를 줄 수 있죠.
이번 아임웹 레시피에서는 자연적인 소재를 활용해 감각적인 제품을 선보이는 브랜드 <베지터블 플라워 스튜디오>의 사례를 통해 본문 섹션 고정법을 알아보려 합니다. 이 브랜드는 웹사이트 페이지를 스크롤 했을 때, 상단에 고정된 심볼과 뒷배경 이미지가 딱 들어맞도록 하여 브랜드 로고를 더욱 재치 있게 보여주고 있는데요.
베지터블 플라워 스튜디오의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 방문자에게 고정적으로 보여주고 싶은 내용이 있으신 분
- 독특한 웹사이트 디자인으로 방문자의 눈길을 끌고 싶은 분
- 웹사이트에서 브랜드 아이덴티티를 더욱 잘 드러내고 싶은 분
STEP 1
디자인 모드에 접속 후 가장자리 마우스 우클릭, 빈 섹션 추가 후 [이미지]위젯을 추가해 주세요.
STEP 2
고정적으로 보여줄 이미지를 추가한 뒤, 메뉴에서 나와 가장자리 마우스 우클릭, [섹션 설정] 메뉴에서 ‘섹션 고정’을 체크해 주세요.
✋여기서 잠깐!
고정적으로 보여줄 이미지 배경이 ‘투명’이어야 합니다. remove.bg를 활용하면 무료로 이미지 배경을 지울 수 있어요!
STEP 3
고정된 이미지 뒤에 표시할 이미지를 원하는 만큼 추가해 주면 끝이에요!
STEP 4
하단에 [옵션] 항목에서 ‘원페이지 구성’을 체크하면 끝이에요!
TIP💡
이미지별로 애니메이션을 넣어 생동감을 더할 수 있어요. 마우스 우클릭 > [애니메이션] 메뉴를 클릭해 원하는 모션을 추가해 보세요.
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 주얼주얼
할인 혜택과 제품 카테고리 버튼을 고정적으로 표시하여, 방문자가 자연스럽게 제품을 구경하게끔 했어요.
🔎 로케이트서울
브랜드 로고와 함께 연상되는 이미지들을 보게끔 하여, 방문자에게 브랜드 아이덴티티를 감각적으로 느낄 수 있게끔 했어요.
✅ 본문 섹션 고정(이미지/텍스트 본문 상단 고정), 이런 용도로도 활용할 수 있어요!
- 방문자를 환영하는 메시지를 보여주기
- 방문자에게 알리고 싶은 정보를 강조하기 (ex. 슬로건, 이벤트/프로모션, 신제품 소식, 주의사항 등)
- 다른 페이지로 이동하는 장치로 활용하기 (ex. 클릭 시 회원가입 페이지로 이동 등)
이미 아임웹에서는 해당 기능이 담긴 <shituationcomedy> 템플릿을 무료로 제공하고 있다는 사실! 이 템플릿으로 나만의 홈페이지를 더욱 감각적으로 만들어 보는 건 어떨까요?
※ 레시피 사례로 소개한 베지터블 플라워 스튜디오를 비롯해, 주얼주얼, 로케이트서울은 아임웹과 함께 성장하는 브랜드입니다.
💌 평소 궁금했던 디자인 설정법이 있다면 알려주세요!
아임웹을 사용하거나, 고객사례를 보며 궁금했던 디자인 설정법이 있으셨다면 👉 여기에 남겨주세요. 보내주신 의견을 참고하여, 더욱 유익한 디자인 레시피를 들고 찾아올게요!
📖 오늘 내용과 연관된 아임웹 가이드
🔖 다른 레시피 보러가기
by 마케팅 소영
