반응형

공공기관 고도화 실전 9

SCSS와 CSS가 함께 쓰인 프로젝트 정리 방법

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

공공기관 고도화 실전: 여러개 사이트 병행할 때 반드시 먼저 할 일

공공기관 고도화 실전: 시작 전에 반드시 해야 할 5가지공공기관 고도화 프로젝트는“디자인 나오면 코딩 시작”이 아니다.시작 전에 구조를 정리하지 않으면프로젝트 중반부터 무너진다.실제 실무 기준으로 정리한다. 1. 기존 구조부터 해부하라고도화인데기존 구조를 안 보면 100% 문제 난다.확인해야 할 것:CSS / SCSS 혼용 여부공통 include 방식레이아웃 고정폭인지 유동폭인지v2 / v3 병행 폴더 존재 여부중복 컴포넌트 존재 여부>> 기존 공통 파일을 먼저 정리해야 한다. 2. 반응형 전략을 통일하라공공기관은 대부분 PC First 구조다.확인할 것:min-width / max-width 혼재 여부실제 브레이크포인트 값1024 / 768 기준 적용 방식접근성 대응 방식전략 통일 없이 작업하면파일마..

고도화 프로젝트 시작 전 체크리스트

고도화 프로젝트는“디자인 나오면 작업 시작”이 아니다. 시작 전에 무엇을 확인하느냐에 따라야근 여부가 결정된다. 이번 글은실제 공공기관 고도화 기준으로 정리한 체크리스트다. 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. 접근성 기준✔..

반응형