반응형 웹앱을 제작하고 있는데

Question

작업을 하다보니까 css 미디어 쿼리를 쓸 때도 있고
vuex 에서 window width를 저장해놓고 사이즈가 감지되면 v-if-else로
필요한 컴포넌트를 불러오는 방식을 동시에 쓰고 있습니다.

레이아웃이 크게 변하지 않는 부분은 미디어 쿼리로 해결하고
너무 크게 변하는 부분은 v-if-else로 렌더링하고 있는데요
서서히 프로젝트가 커짐에 따라서 이게 나중에 유지보수가 가능할지 두렵네요

처음부터 PC/Mobile를 나눠서 따로 만들었어야 했나 싶다가도
막상 또 그렇게 나누자니 레이아웃이 크게 안 바뀌는 부분도 제법 많아서 혼란에 빠졌습니다.

이와 관련해서 조언을 얻을 수 있을지 궁금합니다.

captain · Answer

안녕하세요, 반응형 웹 앱을 직접 구현하시려면 모바일 웹을 PC 웹에 대응할 수 있는 형태인 Mobile First 전략을 추천드립니다. 스타일은 아무래도 템플릿 단의 if, else 형태보다는 미디어쿼리 적용으로 자연스럽게 접근하시는 게 좋을 것 같습니다. 말씀하신 방향으로 진행하시면 이후에 유지보수가 어려울 것 같아요. Mobile First는 아래 글 참고해 보시면 좋을 것 같아요. https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/