공공기관 고도화에서 브레이크포인트(1024px·768px) 통일하는 방법

브레이크포인트  1024 / 768 구조 실전 적용 가이드

공공기관 고도화 프로젝트를 들어가면
가장 먼저 마주치는 혼란이 있다.

“브레이크포인트가 제각각이다.”

 

어떤 페이지는 1200,
어떤 곳은 1024,
어떤 파일은 768,
심지어 min/max가 섞여 있다.

 

이 상태에서 작업을 시작하면
프로젝트 중반부터 유지보수가 무너진다.

고도화의 핵심은 통일이다.

 

 

 

 

1. 왜 공공기관은 1024 / 768이 많은가?

대부분 구조는 이렇게 되어 있다.

• PC 기준: 1024px 이상
• 태블릿: 768px ~ 1023px
• 모바일: 768px 이하

이유는 단순하다.

• 과거 PC 해상도 기준이 1024 중심
• 행정 업무는 PC 사용 비율 높음
• 접근성 인증 기준 대응
• 내부 행정망 해상도 환경 고려

즉, 모바일 퍼스트라기보다
PC 안정성 중심 구조다.

 

2. 브레이크포인트가 섞이면 생기는 문제

❌ 1. 페이지마다 레이아웃이 다름

❌ 2. 공통 컴포넌트 깨짐

❌ 3. QA에서 화면별 이슈 발생

❌ 4. 유지보수 시 수정 범위 확대

특히 9개 사이트 병행 고도화에서는
통일이 생명이다.

 

3. 실전 통일 전략

STEP 1. “현재 기준” 먼저 분석

확인할 것:

• min-width 사용? max-width 사용?
• 실제 적용 px 값은?
• 공통 CSS에 미디어쿼리 존재 여부
• JS 반응형 분기 코드 존재 여부

DevTools에서 실제 적용 구간을 확인해야 한다.

 

STEP 2. 하나의 기준으로 고정

권장 기준 (공공기관 PC First 프로젝트)

/* CSS */

/* PC 기본 */
@media (max-width: 1024px) {}

/* 태블릿 */
@media (max-width: 768px) {}

 

또는

/* CSS */

/* 모바일 우선 */
@media (min-width: 768px) {}
@media (min-width: 1024px) {}

중요한 건
👉 “섞지 않는 것”

 

 

4. PC First vs Mobile First 선택 기준

PC First가 유리한 경우

• 기존이 max-width 구조
• 관리자 화면 중심
• 내부 업무 시스템
• 접근성 인증 기준 유지 필요

Mobile First가 유리한 경우

• 완전 신규 레이아웃
• 대국민 서비스 중심
• 퍼포먼스 최적화 필요

고도화는 대부분
기존 전략 유지 + 구조 정리가 안전하다.

 

5. 브레이크포인트 통일 시 체크리스트

• 공통 CSS에 미디어쿼리 정리
• 페이지 전용 CSS 수정
• JS resize 조건 통일
• clamp 계산 기준 통일
• 테스트 기기 기준 명확화

 

6. 실무 팁: 숫자는 적을수록 좋다

브레이크포인트는 많을수록 좋은 게 아니다.

추천:

• 1024
• 768

이 2개만으로도 충분하다.

과도한 분기는 유지보수 리스크다.

 

7. ChatGPT 활용 포인트

분석용 프롬프트

아래 CSS에서 사용된 미디어쿼리를 정리해줘.
중복되는 구간과 통일 가능한 브레이크포인트를 제안해줘.

 

통일 설계 요청 프롬프트

기존 max-width 구조를 유지하면서
1024/768 기준으로 통일하는 리팩토링 방안을 제시해줘.

 

---

정리

공공기관 고도화에서
브레이크포인트는 “디자인 값”이 아니라

프로젝트 안정성의 기준점

이다.

 

통일하지 않으면
중반부터 수정 지옥이 시작된다.

 

고도화는 새로 만드는 게 아니라
흐름을 정리하는 작업이다.