[Project] Team Project 11일차

신재욱·2023년 5월 30일

📒 오늘의 TIL

1️⃣ 반응형 디자인

이번에는 PWA로 모바일 앱을 배포할 계획이다. 그래서 기존에 만들었던 페이지들을 모바일 사이즈에 맞게 미디어 쿼리를 적용했다. 미디어 쿼리를 사용하여 페이지들을 모바일 화면에 최적화했고, 사용자들이 휴대폰이나 태블릿에서도 원활한 사용 경험을 할 수 있도록 만들고 있다. 추가로, 반응형 디자인을 적용하여 다양한 화면 크기에 대응할 수 있도록 만들고 있다.

💡 반응형 디자인을 하면서 주의해야 할 사항

적절한 미디어 쿼리 사용 : 미디어 쿼리를 사용하여 각 디바이스의 화면 크기와 해상도에 맞게 스타일을 조정해야 합니다. 올바른 미디어 쿼리를 선택하고 적용하는 것이 중요하다.

이미지 및 미디어 최적화 : 다양한 디바이스에서 이미지와 미디어 요소가 적절하게 조정되도록 최적화해야 한다. 큰 이미지 파일은 로딩 시간을 늘리고 대역폭을 낭비할 수 있으므로, 작은 화면에는 작은 크기의 이미지를 사용하는 것이 좋다.

터치 대응 : 모바일 디바이스에서는 터치 인터페이스를 사용하므로, 버튼이나 링크와 같은 요소들이 터치 가능하도록 크기와 간격을 적절하게 조정해야 한다. 또한, 터치에 대한 피드백을 제공하는 애니메이션 또는 상태 변화를 고려할 수도 있다.

네비게이션 사용성 : 작은 화면에서는 공간이 제한되므로, 네비게이션 메뉴를 단순하고 쉽게 접근할 수 있는 방식으로 디자인해야 한다. 메뉴 아이템을 드롭다운 형태로 표시하거나, 메뉴 아이콘을 토글하여 메뉴를 펼치고 접을 수 있는 방식을 고려할 수 있다.

텍스트 가독성 : 작은 화면에서는 텍스트가 축소되어 가독성이 저하될 수 있다. 따라서 텍스트 크기와 줄 간격을 적절하게 설정하고, 긴 문장이나 단락을 줄여서 텍스트의 가독성을 향상시켜야 한다.

테스트와 디버깅 : 다양한 디바이스와 브라우저에서 웹사이트를 테스트하고 디버깅하는 것이 중요하다. 다양한 환경에서의 테스트를 통해 문제를 발견하고 수정할 수 있으며, 사용자들에게 일관된 경험을 제공할 수 있다.

💡 반응형 디자인에서 vw (Viewport Width)를 사용하는 이유

상대적인 단위 : vw는 뷰포트의 너비에 상대적으로 크기를 지정하는 단위다. 따라서 화면의 크기에 비례하여 요소의 크기를 조정할 수 있다. 이는 다양한 디바이스의 화면 크기에 유연하게 대응할 수 있도록 도와준다.

일관된 비율 유지 : vw를 사용하면 화면의 너비에 상대적으로 크기를 조정하기 때문에, 요소들 간에 일관된 비율을 유지할 수 있다. 이는 화면의 크기가 변할 때에도 디자인의 일관성을 유지할 수 있는 장점을 제공한다.

반응형 이미지 크기 조정 : vw를 사용하여 이미지의 크기를 조정하면, 이미지도 화면의 너비에 따라 자동으로 크기가 조정된다. 이를 통해 다양한 디바이스에서도 이미지가 적절하게 표시되고 로딩 시간을 최적화할 수 있다.

유연한 레이아웃 설계 : vw를 사용하여 요소들의 너비와 간격을 조정하면, 화면 크기에 따라 레이아웃이 자동으로 조정된다. 이는 유동적인 디자인을 가능하게 하여 다양한 디바이스에 대응할 수 있는 장점을 제공한다.

픽셀 독립성 : vw는 뷰포트의 너비에 상대적으로 크기를 조정하기 때문에, 픽셀 기반의 고정 크기보다는 더 유연한 크기 조정이 가능하다. 이는 픽셀 밀도가 다른 디바이스에서도 일관된 디자인을 유지할 수 있는 장점을 제공한다.

그런데 이번에 반응형 디자인을 진행하면서 예상치 못하게 지도나 달력과 같은 외부 라이브러리가 일부 화면에는 나타나지 않거나, 예상과 다르게 표시되는 문제가 발생했다.
라이브러리의 호환성 문제로 일부 외부 라이브러리는 반응형 디자인에 적합하게 개발되지 않았을 수 있어서 특정 화면 크기 또는 스타일 변경에 대한 지원이 제한적일 수 있다는 글을 보았다. 하지만 우리는 전혀 나오지 않는 것이 아니라 가끔은 나오고 가끔은 나오지 않는다. 따라서 호환성 문제가 아닌 것 같다.
아마 내 생각에 초기화 및 설정 단계에서 발생하는 문제일 것같다. 외부 라이브러리를 사용할 때 초기화나 설정 과정에서 오류가 발생할 수 있으며, 이는 라이브러리의 사용 방법에 대한 이해와 정확한 설정이 필요할 수 있다.

이벤트 리스너 등록
외부 라이브러리가 비동기적으로 로드되거나 초기화되는 경우, 해당 이벤트나 콜백 함수를 적절하게 등록하여 초기화가 완료된 후에 작업을 수행하도록 만들 수 있다.

// 예시: 외부 라이브러리 초기화 후 작업 수행
function initializeLibrary() {
  // 라이브러리 초기화 작업 수행

  // 초기화 완료 후 작업 수행
  performActions();
}

// 작업 수행 함수
function performActions() {
  // 초기화 완료 후 수행할 작업
}

// 문서 로드 후 라이브러리 초기화 호출
window.addEventListener('DOMContentLoaded', () => {
  initializeLibrary();
});