※ 이번 레시피는 고객님의 소중한 의견을 바탕으로 제작되었습니다.
웹사이트를 모바일로 둘러보는 사용자가 만약 불편을 느낀다면, 이들 중 최대 90%가 이탈할 수 있다는 것을 알고 계신가요? 이탈을 방지하기 위해서는 고객이 손쉽게 정보를 찾을 수 있도록 웹사이트를 구성해야 하는데요.
아임웹 사용자라면 아임웹의 그리드 시스템과 함께 디자인모드의 [텍스트] 위젯을 활용하여 모바일 친화적인 웹사이트를 더욱 쉽게 제작할 수 있다는 사실!
이번 아임웹 레시피에서는 모든 게이머를 연결하는 소셜 플랫폼 <지트>의 사례를 통해 [텍스트] 위젯으로 어떤 화면 크기에도 유연하게 변하는 '반응형 박스(flexbox)'를 제작하는 법을 알아보려 합니다. 이 브랜드는 반응형 박스 안에 이미지와 텍스트를 한데 담아 어떤 화면 크기에서든 정보를 읽기 쉽게 보여주고 있는데요.
지트의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 웹사이트에 모바일 유입이 많으신 분
- 깔끔해 보이는 페이지 레이아웃을 원하시는 분
- 이미지, 텍스트가 혼합된 콘텐츠를 가독성 있게 보여주고 싶은 분
STEP 1
아임웹 디자인 모드에 접속 후 가장자리 마우스 우클릭, 빈 섹션 추가 후 [텍스트] 위젯을 추가해 주세요.
STEP 2
[텍스트] 위젯에 마우스 우클릭, [텍스트 설정]으로 들어가 배경, 레이아웃 등을 설정해 주세요.
TIP💡
- 박스 모서리를 둥글게 만들고 싶다면? ▶ [텍스트 설정] > ‘라운딩’ 설정
- 배경 이미지 위에 반투명한 색을 입히고 싶다면 ▶ [텍스트 설정] - ‘배경색’의 투명도 옵션
- 폰트를 바꾸고 싶다면? ▶ 디자인 모드 우측 상단 ‘톱니바퀴’ 버튼 클릭 > ‘텍스트’ 옵션에서 원하는 폰트로 변경 (*폰트 적용 시 모든 페이지에 공통으로 적용되니 주의하세요!)
STEP 3
메뉴에서 나와, 설정한 [텍스트] 위젯 더블클릭, 에디터를 이용해 텍스트, 이미지 등을 원하는 만큼 추가해 배치하면 끝이에요!
STEP 4
하단에 [옵션] 항목에서 ‘원페이지 구성’을 체크하면 끝이에요!
TIP💡
모바일에서 이미지를 최대 크기로 보여주고 싶다면, 에디터에서 이미지 가장자리를 드래그하여 사이즈를 최대로 키워 주세요!
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 울퉁불퉁 팩토리
제품 이미지와 함께 브랜드 비전이 담긴 텍스트를 보여주어, 방문자에게 첫인상을 더욱 매력적으로 전달 했어요.
🔎 아임웹 (🔗아임웹 채용)
텍스트와 연관된 그래픽을 함께 보여주어, 방문자가 정보를 쉽고 빠르게 이해할 수 있도록 했어요.
✅ 텍스트 위젯(반응형 박스 만들기), 이런 용도로도 활용할 수 있어요!
- 카드뉴스 형태의 콘텐츠 만들기 (ex. 2022 잘.자.란 연말결산)
- 콘텐츠를 앨범형으로 모아 보여주기 (ex. 뉴스레터, 블로그, 강의 콘텐츠 등)
- 클릭 시 다른 페이지로 이동하는 버튼으로 사용하기
오늘 소개드린 기능으로 정보를 더욱 가독성 있게 전달할 수 있다는 사실! 방문자가 원하는 콘텐츠를 쉽게 전달해, 브랜드에 대해 좋은 인상을 심어주자구요🤓
※ 레시피 사례로 소개한 지트를 비롯해, 울퉁불퉁 팩토리는 아임웹과 함께 성장하는 브랜드입니다.
💌 평소 궁금했던 디자인 설정법이 있다면 알려주세요!
아임웹을 사용하거나, 고객사례를 보며 궁금했던 디자인 설정법이 있으셨다면 👉 여기에 남겨주세요. 보내주신 의견을 참고하여, 더욱 유익한 디자인 레시피를 들고 찾아올게요!
📖 오늘 내용과 연관된 아임웹 가이드
🔖 다른 레시피 보러가기
by 마케팅 소영
