화면 크기에 맞게 최적화! 텍스트 위젯 활용법🪪 | 1분 디자인 레시피

2023. 11. 03

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


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

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


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


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


📌이런 분이라면 특히 주목해 주세요!

  • 웹사이트에 모바일 유입이 많으신 분
  • 깔끔해 보이는 페이지 레이아웃을 원하시는 분
  • 이미지, 텍스트가 혼합된 콘텐츠를 가독성 있게 보여주고 싶은 분




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


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

💡TIP

  • 박스 모서리를 둥글게 만들고 싶다면?
    • [텍스트 설정] > ‘라운딩’ 설정

  • 배경 이미지 위에 반투명한 색을 입히고 싶다면?
    • [텍스트 설정] - ‘배경색’의 투명도 옵션

  • 폰트를 바꾸고 싶다면?
    • 디자인 모드 우측 상단 ‘톱니바퀴’ 버튼 클릭 > ‘텍스트’ 옵션에서 원하는 폰트로 변경
    • *폰트 적용 시 모든 페이지에 공통으로 적용되니 주의하세요!


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


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

💡TIP
모바일에서 이미지를 최대 크기로 보여주고 싶다면, 에디터에서 이미지 가장자리를 드래그하여 사이즈를 최대로 키워 주세요!




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


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

 

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



텍스트 위젯(반응형 박스 만들기), 이런 용도로도 활용할 수 있어요!

  • 카드뉴스 형태의 콘텐츠 만들기 (ex. 2022 잘.자.란 연말결산)
  • 콘텐츠를 앨범형으로 모아 보여주기 (ex. 뉴스레터, 블로그, 강의 콘텐츠 등)
  • 클릭 시 다른 페이지로 이동하는 버튼으로 사용하기



오늘 소개드린 기능으로 정보를 더욱 가독성 있게 전달할 수 있다는 사실! 방문자가 원하는 콘텐츠를 쉽게 전달해, 브랜드에 대해 좋은 인상을 심어주자구요🤓


레시피 사례로 소개한 지트울퉁불퉁 팩토리는 아임웹과 함께 성장하는 브랜드입니다.


💌 평소 궁금했던 디자인 설정법이 있다면 알려주세요!

아임웹을 사용하거나, 고객사례를 보며 궁금했던 디자인 설정법이 있으셨다면 👉 여기에 남겨주세요. 보내주신 의견을 참고하여, 더욱 유익한 디자인 레시피를 들고 찾아올게요!




📖 오늘 내용과 연관된 아임웹 가이드



🔖 다른 레시피 보러가기




by 마케팅 소영