고정된 크기의 이미지가 표시 경로보다 큰 경우 페이지가 스크롤됩니다. 모든 이미지에 max-width를 100%로 지정하는 것이 좋습니다. 이렇게 하면 이미지가 사용 가능한 공간에 맞게 축소되며 초기 크기를 초과하여 늘어나지 않습니다. 콘텐츠 크기가 표시 영역에 맞지 않음 Lighthouse 감사를 사용하면 콘텐츠 오버플로 감지 프로세스를 자동화할 수 있습니다. 메타 표시 영역 태그로 모바일 사이트를 개발할 때는 지정된 표시 영역에 맞지 않는 페이지 콘텐츠가 실수로 생성되는 경우가 많습니다. 예를 들어 뷰포트보다 넓게 표시된 이미지는 가로 스크롤을 일으킬 수 있습니다.
뷰포트 설정
화면 크기에 따라 높이와 너비가 달라지도록 아래 create variable을 클릭해 width와 height를 만듭니다. 바뀌는 화면 해상도에 따라 높이도 유동적으로 바뀔 수 있도록 전체 헤더, 콘텐츠 영역 그리고 푸터를 선택하여 오토레이아웃을 적용합니다. 오늘날 인터넷 사용자 그룹 중에는 상당한 수의 기본 사용자가 있습니다. 이들은 웹사이트 탐색에 대한 강한 수요를 갖고 있으며 웹사이트 탐색은 시작하는 편리한 방법을 제공할 수 있습니다.
웹 사이트 예시를 들기 위해 프레임의 크기를 여러 기기의 화면 크기 별로 만들었습니다. 데스크톱(1440px), 태블릿(744px), 모바일 크기(393px)의 프레임을 만들었습니다. 로컬 변수는 디자인 시스템 내에서 반복적으로 사용되는 속성들을 한곳에서 관리할 수 있게 해주는 기능입니다. 색상, 텍스트 스타일, 간격 등을 로컬 변수로 정의해두면, 디자인의 일관성을 유지하고 빠르게 수정할 수 있다는 장점이 있습니다. 미디어 쿼리를 사용하여 모바일, 태블릿, 노트북, 데스크탑 등에서 디자인이 깨지지 않게끔 설정할 수 있다. 또한 구글과 같은 검색 엔진은 모바일 친화적인 웹사이트를 검색 결과에서 우선적으로 노출시키고 있다.
반응형 디자인 – 미디어 쿼리 사용법
Google은 링크 미리보기 라는 새로운 기능을 개발 중입니다 이를 통해 웹페이지를 열 가치가 있는지 여부를 더 쉽게 결정할 수 있습니다. 이전에는 Google Chrome에서 탭 위로 마우스를 가져가면 링크 미리보기가 표시되었습니다. 반응형 웹디자인을 제대로 적용하면 다양한 기기에서 사용자 경험을 향상시킬 수 있으며, SEO 최적화에도 긍정적인 영향을 줍니다. 위에서 소개한 실수들을 피하고, 올바른 해결책을 적용하면 더욱 효과적이고 유지보수하기 쉬운 웹사이트를 만들 수 있습니다.
격자는 디자인 요소들의 상대적 위치를 가늠할 수 있도록모눈 종이처럼 가로, 세로로 그어진 줄들을 의미합니다. 모눈 종이처럼촘촘하지는 주소모음 않지만 적절한 간격으로 들여쓰기 하고, 줄 맞춤 할 수 있도록고민해서 만들어진 것들도 있습니다. 이런 격자 판 위에서의 디자인도 격자판 전체의 크기가 고정되어 있기 때문에 고정형 판짜기로 이어집니다. 유동격자는 각 격자 선들을 절대위치가 아닌 상대위치로 기술하는 것입니다. 가령격자 판의 크기가 1140px 이고, 570px 위치에 있는 격자 선에 뭔가를배치한다면, 570px 대신에 50% 라는 표현을 사용한다는 뜻입니다.
- 마지막으로, 사용성을 평가할 때 한 가지에만 집중하는 것은 위험하다.
- 모두 사용자가 유연한 그리드를 만들려고 한다고 가정하고 더 쉬운 방법을 제공합니다.
- 사용자가 어떤 화면에서도 편리하고 효율적으로 웹사이트를 이용하도록 돕는 것이 목표입니다.
- 고객님의 PC가 악성코드에 감염될 경우 시스템성능 저하,개인정보 유출등의 피해를 입을 수 있으니 주의하시기 바랍니다.