해상도 대응 CSS 2,230줄을 넣고 하루 만에 1,895줄을 지웠다

이 글은 2026년 9월에 당시 커밋 이력을 다시 보며 정리한 것입니다. 날짜는 작업한 날 기준입니다.

직짱건강은 스위그 3기에서 만든 팀 프로젝트입니다. 프런트 둘 중 제가 온보딩·로그인·마이페이지·설문·찜 화면을 맡았고, 시안은 1920px 폭 기준이었어요. 3월 중순까지는 그 폭에서만 보고 만들었습니다. 다른 해상도에서 어떻게 보이는지는 3월 18일 새벽에 처음 잡기 시작했습니다.

766b02f 2024-03-18 04:27 [24-03-17] 해상도 1차 확인 : 1920
b092dbd 2024-03-18 05:22 [24-03-17] 해상도 기초 틀 작성
4cd1a28 2024-03-18 16:42 [24-03-18] 해상도 변경 2차   (+2,230 / −146)
fdadf4c 2024-03-19 15:59 [24-03-19] 해상도 변경 3차   (+1,024 / −1,895)
b370bec 2024-03-22 21:55 [24-03-21] 해상도 1280 추가 진행 (+700 / −400)

첫 커밋은 제목이 "해상도 1차 확인"인데 바뀐 23개 파일 중 CSS는 6개뿐입니다. 그날 하던 다른 일이 같이 실린 거예요. 두 번째 커밋이 실제 시작입니다.

틀을 먼저 세우고 안을 복사해 채웠다

"기초 틀"은 말 그대로 빈 블록이었습니다. @media (min-width: 1600px) {}와 @media (min-width: 1200px) {}를 CSS 모듈 17개에 넣어 두고, 낮에 안을 채웠습니다. 채운 방식이 문제였어요. 기준 규칙에서 달라지는 값만 적은 게 아니라 규칙을 통째로 복사해 넣었습니다. 색·폰트·자간처럼 해상도와 상관없는 속성까지요. MySurveyList.module.css 한 파일이 589줄 늘었습니다.

Survey.module.css의 버튼 세 개를 세어 보면 이렇습니다.

블록	`width: 124px`
기준 규칙	3
`@media (max-width: 768px)`	3
`@media (min-width: 1600px)`	3
`@media (min-width: 1200px)`	3

같은 값이 네 벌. 폭이 달라져도 버튼 폭은 124px 그대로인데, 블록마다 다시 적었습니다. 스타일 폴더 전체가 3,017줄에서 5,101줄이 됐어요.

이튿날, 달라지는 속성만 남기고 구간으로 다시 짰다

3월 19일에 25개 파일을 다시 짰습니다. 왜 하루 만에 뒤집었는지 커밋에는 없지만, 전날 diff는 값 하나를 바꾸려면 네 군데를 고쳐야 하는 구조를 보여 줍니다.

바뀐 건 두 가지입니다. 하나는 min-width로 겹치던 블록을 양끝이 닫힌 구간으로 바꾼 것. 다른 하나는 구간 안에 기준 규칙과 다른 속성만 남긴 것. MySurveyList.module.css의 같은 자리가 이렇게 됐습니다.

@media screen and (max-width: 1919px) and (min-width: 1600px) {
    .mySurvey_text {
        font-size: 40px;
        line-height: 160%;
        letter-spacing: -0.8px;
        margin: 50px 25%;
    }

    .mySurvey_container {
        width: 1000px;
        height:max-content;
        min-height: 440px;
        margin: 0 19% 50px 15%;
    }

색과 테두리는 기준 규칙에 한 번만 있고, 구간에는 폭·여백·글자 크기만 있습니다. 1,895줄이 빠지고 1,024줄이 들어와서 4,219줄이 됐어요.

다만 이날의 구간 경계가 깔끔하지는 않았습니다. max-width: 1279px과 max-width: 1280px, max-width: 1260px이 파일마다 섞여 있었어요. 사흘 뒤 1280~~1599 구간 700줄을 추가하면서 (max-width: 1599px) and (min-width: 1280px)로 맞췄고, 지금 저장소에는 1600~~1919, 1280~1599, 1279 이하 세 구간과 1920 기준 규칙이 남아 있습니다. 4,552줄입니다.

태블릿에서만 안 되는 현상 — 숫자를 네 번 바꿨다

3월 22일 밤에 1280 구간을 올리고, 자정 넘어 "테블릿에서만 안되는 현상 체크"라는 커밋이 셋 이어집니다.

a5bbaa9 00:17  @media (max-width: 1600px) → (max-width: 1919px)
6abdc35 00:46  (max-width: 1919px) → (max-width: 1280px)
d7b6db8 01:21  (max-width: 1280px) → (max-width: 1024px)   (CommentItem 한 곳만)

이 셋이 건드린 건 CSS 모듈이 아니라 .tsx 안의 styled-components였습니다. 지도·검색·댓글 화면인데, 그 파일들은 팀원이 만든 것이고 저는 미디어 쿼리 숫자만 고쳤어요. 첫 커밋의 diff 한 조각입니다.

 const CommentMenu = styled.div`
     display: flex;
     align-items: center;
-    @media (max-width: 1600px) {
+    @media (max-width: 1919px) {
         display: block;
     }
 `;

한 시간 동안 max-width 값만 1600 → 1919 → 1280 → 1024로 옮겼습니다. 태블릿 폭에 실제로 닿은 건 세 번째예요. 어떤 기기에서 봤는지, 무엇이 안 됐는지는 커밋에 없습니다. 마지막 커밋은 댓글 항목 한 곳만 1024로 바꿔서, 지금도 .tsx 안에는 1024가 한 곳, 1280이 세 곳 남아 있습니다.

훅은 있었는데 쓰지 않았다

3월 4일에 react-responsive를 넣고 useIsMobile·useIsTablet·useIsDesktop·useCustomMobile 훅 넷을 만들어 뒀습니다. useMediaQuery 결과를 useState에 한 번 더 담아 돌려주는 열 줄짜리 함수들이에요. 이 파일을 만든 뒤 어느 화면에서도 import하지 않았습니다. 지금 저장소에서 검색해도 정의 파일 한 곳뿐이에요. 훅의 기준은 768·1024·1025인데 CSS 구간은 1280·1600·1920이라, 썼더라도 둘이 다른 화면을 봤을 겁니다.

검증

그날 확인한 것.

해상도를 바꿔 가며 화면을 눈으로 봤습니다. 어떤 해상도 목록이었는지는 남아 있지 않습니다.
태블릿 문제는 커밋 세 개로 고쳤다고 판단했는데, 근거는 커밋 제목뿐입니다.

이 글을 쓰며 확인한 것.

다섯 커밋의 시각·줄 수는 git log --shortstat, width: 124px 네 벌은 git show 4cd1a28:src/styles/Survey.module.css에서 셌습니다.
스타일 폴더 줄 수 3,017 → 5,101 → 4,219 → 4,366 → 4,552는 커밋마다 src/styles 전체를 wc -l로 더한 값입니다.
3월 22일 커밋 둘(b370bec·225f6c6)은 저자명만 다른 같은 diff라 한 건으로 셌습니다.
react-responsive 훅 사용처 0건은 현재 저장소 git grep 결과입니다.

남은 것 · 한계

복제 구조를 하루 만에 알아챈 건 다행이지만, 왜 처음에 복제로 갔는지는 커밋에 없습니다. 시안의 값을 그대로 옮기는 습관이 미디어 쿼리 안에서도 이어진 것으로 보입니다.
브레이크포인트가 CSS(1280·1600·1920)와 훅(768·1024·1025), styled-components(1024·1280) 세 곳에 따로 있습니다. 한 곳으로 모으지 않은 채 프로젝트가 끝났어요.
태블릿 문제의 원인을 재현 없이 숫자만 바꿔 맞췄습니다. 세 번째에 닿은 1024가 맞는 값이었는지도 확인 기록이 없습니다.
일곱 달 뒤 TripTune에서 같은 문제를 다시 만났습니다. 그때는 1920px 고정 폭을 100vw로 바꾸는 쪽으로 갔는데, 그것도 해결이 아니었어요. 시안 수치를 그대로 박는 습관이 두 프로젝트에 걸쳐 있었습니다.