[Project] Team Project 11일차

우기·2023년 5월 30일
0
post-thumbnail

📒 오늘의 TIL

1️⃣ 반응형 디자인

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 그런데 이번에 반응형 디자인을 진행하면서 예상치 못하게 지도나 달력과 같은 외부 라이브러리가 일부 화면에는 나타나지 않거나, 예상과 다르게 표시되는 문제가 발생했다.

  • 라이브러리의 호환성 문제로 일부 외부 라이브러리는 반응형 디자인에 적합하게 개발되지 않았을 수 있어서 특정 화면 크기 또는 스타일 변경에 대한 지원이 제한적일 수 있다는 글을 보았다. 하지만 우리는 전혀 나오지 않는 것이 아니라 가끔은 나오고 가끔은 나오지 않는다. 따라서 호환성 문제가 아닌 것 같다.

  • 아마 내 생각에 초기화 및 설정 단계에서 발생하는 문제일 것같다. 외부 라이브러리를 사용할 때 초기화나 설정 과정에서 오류가 발생할 수 있으며, 이는 라이브러리의 사용 방법에 대한 이해와 정확한 설정이 필요할 수 있다.

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

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

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

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

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

🧑‍💻 궁금한 점

  • 반응형 디자인 과정에서 외부 라이브러리가 일부 화면에는 나타나지 않거나, 예상과 다르게 표시되는 문제

✍ 알게된 점

  • 반응형 디자인을 하면서 주의해야 할 사항
  • 반응형 디자인에서 vw (Viewport Width)를 사용하는 이유
  • 이벤트 리스너 등록

💫 느낀점

  • 바쁘다 바빠
profile
개발 블로그

0개의 댓글