프로젝트 진행시 모바일 마크업을 따로하지 않고 초기화로 작업하려 했는데 너무 오류가 발생...
(min-width: 767px) and (max-width: 1023px)1. 애니메이션 초기화 방식
✅ 장점
유지보수 용이성: 동일한 마크업을 사용하므로 수정할 때 코드 중복을 피할 수 있어 유지 보수가 쉬워집니다.
파일 크기 절감: 마크업을 하나로 통일하면 불필요한 HTML이 추가되지 않아 전체 파일 크기가 줄어듭니다.
변경 관리 간소화: 한 개의 마크업에 반응형 CSS와 애니메이션 초기화 설정을 추가하면, 특정 디바이스에서 동작 방식을 쉽게 수정할 수 있습니다.
✅ 단점
복잡한 조건 설정: 특정 해상도별로 애니메이션 초기화를 세밀하게 설정해야 하므로 코드가 복잡해질 수 있습니다.
성능 이슈: 반응형에서 매번 애니메이션을 초기화하거나 다시 설정하는 과정에서 성능에 영향을 줄 수 있습니다.
-> 초기화 방식을 사용하면, 불필요한 애니메이션 코드가 항상 포함되기 때문에, 모바일 디바이스에서 실행하지 않는 코드를 계속 로드하게 되는 부담이 있습니다.
👀이 방식이 적합한 경우
- 간단한 애니메이션을 포함하거나, 애니메이션의 복잡도가 낮아 디바이스별 초기화가 쉬운 경우
- HTML 구조를 동일하게 유지해야 할 필요가 있는 경우
2. 모바일용 마크업 별도 제작
✅ 장점
유연한 디자인 적용: 모바일에 최적화된 구조를 별도로 만들 수 있어, 디바이스에 맞는 애니메이션과 레이아웃을 쉽게 구현할 수 있습니다.
더 나은 성능: 디바이스에 맞게 마크업을 최적화하여 불필요한 요소를 로드하지 않게 할 수 있습니다.
✅ 단점
유지 보수 어려움: 동일한 콘텐츠를 여러 개의 마크업에 구현하게 되어 수정할 때 두 곳 이상을 모두 수정해야 하는 번거로움이 있습니다.
코드 중복: 모바일용과 데스크탑용으로 분리된 HTML 코드가 추가되어 코드가 복잡해질 수 있습니다.
👀이 방식이 적합한 경우
- 데스크탑과 모바일 레이아웃이 많이 다르거나, 애니메이션이 복잡하여 해상도에 따른 조건을 따로 설정하는 것이 더 효율적인 경우
- 마크업 자체가 해상도별로 크게 달라질 필요가 있는 경우
결론
초기화
-> 간단한 애니메이션과 비슷한 레이아웃을 유지하는 경우, 유지보수
별도의 마크업(모바일)
-> 디바이스별로 전혀 다른 애니메이션 효과나 레이아웃을 적용해야 하는 경우, 최적화
🤔 일단 시안을 보고 마크업을 pc,모바일로 따로 마크업을 따로할지 보고 결정해야할것 같다!
이번 시안은 pc에서는 고정 모바일에서는 세로스크롤이라 따로 마크업이 좋다!
