공공기관 웹사이트 반응형이 PC First 구조인 이유

PC First인 이유

 

공공기관 웹사이트가 PC First 구조로 설계되는 이유 분석. 접근성, 인증, 레거시 유지보수 관점에서 반응형 전략 정리.

 

 

왜 공공기관 사이트는 아직도 PC First일까?

최근 프로젝트를 진행하며
여러 공공기관 사이트의 CSS 구조를 분석해봤습니다.

 

의외로 많은 사이트가
Mobile First가 아닌 PC First 구조로 되어 있었습니다.

 

왜일까요?

 

단순히 “구식이라서”는 아닙니다.

 

---

1. 인증 및 보안 모듈이 PC 환경 기준

공공기관은

• 공동인증서
• 행정 시스템 연계
• 내부 업무 시스템

등이 PC 환경 기준으로 설계되어 있습니다.

 

즉,

주 사용 환경이 여전히 데스크톱 중심입니다.

 

그래서 기본 CSS가 PC 레이아웃이고,
모바일은 보조 레이어로 처리합니다.

 

2. 접근성 검사 기준이 PC 화면 중심

웹 접근성 인증 과정에서
검사는 대부분 PC 환경에서 진행됩니다.

• 키보드 포커스
• 스크린리더 동작
• 대체 텍스트 확인

이 모든 테스트가
PC 해상도 기반으로 이루어지는 경우가 많습니다.

결과적으로
기본 레이아웃이 PC 중심으로 설계됩니다.

 

3. 레거시 유지보수 문제

공공기관 프로젝트는
대부분 SI 기반으로 진행됩니다.

• 이전 프로젝트 소스 유지
• 다년간 누적된 CSS
• 여러 업체가 이어받은 구조

이 환경에서는 기존 PC First 구조를 유지하는 것이 가장 안전합니다.

 

min-width로 전환하면 전면 리팩토링이 필요합니다.

 

현실적으로 어렵습니다.

 

4. 실제 구조 특징

공공기관 사이트를 보면 보통 이런 형태입니다.

/* CSS */

/* 기본: PC */
.container { width: 1200px; }

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

@media (max-width: 768px) {
  /* 모바일 */
}

 

기본값이 PC 고정폭입니다.

그리고 점점 줄이는 방식.

전형적인 PC First 구조입니다.

 

5. 그렇다면 PC First는 나쁜 걸까?

아닙니다.

다만 문제는
min-width와 max-width를 섞어 쓰는 순간입니다.

/* CSS */
@media (max-width: 1024px)
@media (min-width: 768px)

 

이런 혼합 구조는
유지보수 난이도를 급격히 높입니다.

 

공공기관 고도화에서

가장 먼저 해야 할 일은 기준 통일 입니다.

---

실무적으로 어떻게 접근해야 할까?

1. 신규 고도화 프로젝트라면

• PC 기준 디자인이라면 → max-width 유지
• 구조 개편이라면 → 명확한 전략 수립 후 전환

2. 기존 유지보수라면

• 기존 전략을 따르는 것이 안전
• 미디어쿼리 기준부터 파악

---

정리

공공기관 반응형이 PC First인 이유는

1. PC 중심 업무 환경
2. 접근성 검사 구조
3. 레거시 누적
4. 유지보수 안정성

때문입니다.

 

트렌드보다 현실 구조가 우선되는 영역입니다.