DDODDO LAB

(고도화 실전: 레거시 정리 루틴)고도화 프로젝트를 들어가면 흔히 이런 상태다.어떤 사이트는 SCSS어떤 사이트는 CSS공통은 여기저기서 불러오고파일명/경로 규칙도 제각각이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.정리는 코딩 전에 해야 한다. 1. 먼저 “목표”를 정하자 (중요)혼재 프로젝트 정리는 2가지 선택지 중 하나다.A. 완전 통합(추천: 신규/대규모 개편)모든 스타일을 SCSS로 통일구조 재설계 가능초기 비용 ↑ / 유지보수 효율 ↑B. 병행 운영(추천: 고도화/기간 촉박)기존 CSS 유지신규(v2/v3/v4 등)만 SCSS로 구성리스크 ↓ / 속도 ↑공공기관 고도화는 대부분 B가 현실적이야.2. “현재 상태”를 30분 안에 지도 그리기체크어디가 SCSS인지 / 어디..

공공기관 웹사이트가 PC First 구조로 설계되는 이유 분석. 접근성, 인증, 레거시 유지보수 관점에서 반응형 전략 정리. 왜 공공기관 사이트는 아직도 PC First일까?최근 프로젝트를 진행하며여러 공공기관 사이트의 CSS 구조를 분석해봤습니다. 의외로 많은 사이트가Mobile First가 아닌 PC First 구조로 되어 있었습니다. 왜일까요? 단순히 “구식이라서”는 아닙니다. 1. 인증 및 보안 모듈이 PC 환경 기준공공기관은공동인증서행정 시스템 연계내부 업무 시스템등이 PC 환경 기준으로 설계되어 있습니다. 즉,주 사용 환경이 여전히 데스크톱 중심입니다. 그래서 기본 CSS가 PC 레이아웃이고,모바일은 보조 레이어로 처리합니다. 2. 접근성 검사 기준이 PC 화면 중심웹 접근성 인증 과정에서..

고도화 프로젝트는“디자인 나오면 작업 시작”이 아니다. 시작 전에 무엇을 확인하느냐에 따라야근 여부가 결정된다. 이번 글은실제 공공기관 고도화 기준으로 정리한 체크리스트다. 1. 구조 체크✔ 기존 소스 분석CSS / SCSS 혼용 여부공통 파일 경로 구조v2, v3 등 병행 폴더 존재 여부GNB / Footer 공통 include 방식레이아웃 고정폭 or 유동폭이걸 안 보면나중에 “왜 여기만 다르지?” 지옥 시작. 2. 반응형 전략 확인✔ PC First인지 Mobile First인지미디어쿼리 기준 확인min-width vs max-width 혼재 여부브레이크포인트 개수1024 / 768 / 640 등 실제 적용값공공기관은 대부분 PC First 구조.시작 전에 전략 통일해야 한다. 3. 접근성 기준✔..