※ 이번 레시피는 고객님의 소중한 의견을 바탕으로 제작되었습니다.

웹사이트를 모바일로 둘러보는 사용자가 만약 불편을 느낀다면, 이들 중 최대 90%가 이탈할 수 있다는 것을 알고 계신가요? 이탈을 방지하기 위해서는 고객이 손쉽게 정보를 찾을 수 있도록 웹사이트를 구성해야 하는데요.

아임웹 사용자라면 아임웹의 그리드 시스템과 함께 디자인모드의 [텍스트] 위젯을 활용하여 모바일 친화적인 웹사이트를 더욱 쉽게 제작할 수 있다는 사실!

이번 아임웹 레시피에서는 모든 게이머를 연결하는 소셜 플랫폼 <지트>의 사례를 통해 [텍스트] 위젯으로 어떤 화면 크기에도 유연하게 변하는 '반응형 박스(flexbox)'를 제작하는 법을 알아보려 합니다. 이 브랜드는 반응형 박스 안에 이미지와 텍스트를 한데 담아 어떤 화면 크기에서든 정보를 읽기 쉽게 보여주고 있는데요.

지트의 레시피, 지금 알아볼까요?👩‍🍳

STEP 1
아임웹 디자인 모드에 접속 후 가장자리 마우스 우클릭, 빈 섹션 추가 후 [텍스트] 위젯을 추가해 주세요.

STEP 2
[텍스트] 위젯에 마우스 우클릭, [텍스트 설정]으로 들어가 배경, 레이아웃 등을 설정해 주세요.

STEP 3
메뉴에서 나와, 설정한 [텍스트] 위젯 더블클릭, 에디터를 이용해 텍스트, 이미지 등을 원하는 만큼 추가해 배치하면 끝이에요!

STEP 4
하단에 [옵션] 항목에서 ‘원페이지 구성’을 체크하면 끝이에요! 

다른 브랜드들은 이 기능을 어떻게 활용했을까요?

🔎 울퉁불퉁 팩토리
제품 이미지와 함께 브랜드 비전이 담긴 텍스트를 보여주어, 방문자에게 첫인상을 더욱 매력적으로 전달 했어요.

 

🔎 아임웹 (🔗아임웹 채용)
텍스트와 연관된 그래픽을 함께 보여주어, 방문자가 정보를 쉽고 빠르게 이해할 수 있도록 했어요.

우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!

아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇