반응형
고도화 프로젝트는
“디자인 나오면 작업 시작”이 아니다.
시작 전에 무엇을 확인하느냐에 따라
야근 여부가 결정된다.
이번 글은
실제 공공기관 고도화 기준으로 정리한 체크리스트다.
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. 접근성 기준
✔ 필수 확인
- 대체 텍스트 정책
- aria 사용 여부
- 키보드 포커스 스타일
- 명도 대비
- 표 caption / summary 구조
고도화 프로젝트는
“디자인”보다 “검수 통과”가 중요하다.
4.공통 컴포넌트 정의
작업 전 반드시 정리해야 할 것:
- 버튼 스타일 가이드
- 테이블 기본 구조
- 폼 요소 스타일
- 모달 구조
- 브레드크럼
여러개 사이트라면
공통 템플릿 먼저 만든다.
5. 디자인 기준 확인
- 1920px 기준인지
- 폰트 단위(px 고정인지?)
- 여백 체계
- grid 시스템 사용 여부
- 이미지 고정/유동 판단
디자인 기준을 모르고 clamp부터 쓰면
나중에 재작업 확률 높다.
6. 일정 현실화
혼자 진행한다면:
- 페이지 수
- 공통화 가능한 영역
- 반복 구조
- 인증 일정
- QA 일정
고도화는 “디자인 끝나면 빨리”가 아니라
“공통화 먼저”가 답이다.
7. AI 자동화 적용 포인트 찾기
시작 전에 생각해볼 것:
- clamp 자동 계산
- 시맨틱 구조 정리
- 반복 테이블 생성
- 문서화 초안 생성
AI는 중간에 쓰는 게 아니라
처음부터 설계에 포함시켜야 한다.
최종 체크 요약
- 구조 파악
- 반응형 전략 통일
- 접근성 기준 확인
- 공통 컴포넌트 정의
- 디자인 체계 분석
- 일정 현실화
- 자동화 적용 설계
고도화 프로젝트는 코딩 실력이 아니라
시작 전에 얼마나 정리했는지
에서 승부가 난다.
반응형