광역자치단체 육아지원 포털
UI 디자인HTML/CSS/JS퍼블리싱프론트엔드AI 협업 워크플로우
맥락
광역자치단체 산하 육아지원 기관의 공식 포털. 도민이 돌봄 서비스와 교육기관을 찾고, 센터가 직접 콘텐츠를 운영해야 하는 공공 사이트입니다. 별도 PM이 백엔드를 맡았고, 저는 프론트엔드 전 범위를 담당했습니다.
문제
발주처의 요구사항은 엑셀·한글파일·PPT에 흩어져 있었고, 서로 어긋나는 부분이 있었습니다. 그대로 화면으로 옮기면 나중에 '요청한 것과 다르다'는 문제가 반드시 생깁니다.
내린 결정
요구사항 원본과 대조하기 전에는 화면을 확정하지 않았다
발주처 원본 파일(xlsx·pptx·hwpx)과 대조가 필요한 작업은 임의로 추측해 진행하지 않고, 대조 결과를 변경 기록에 남기는 것을 규칙으로 만들었습니다. 프론트에서 먼저 확정해 버리면 되돌리는 비용이 가장 큽니다.
시안을 A/B 두 갈래로, PC와 모바일 모두 그렸다
공공 사이트는 결정권자가 여러 명입니다. 한 안만 올리면 수정 요청이 무한히 붙지만, 두 안을 올리면 선택이 됩니다. 모바일 시안을 함께 낸 것은 승인 후 모바일에서 구조가 뒤집히는 사고를 막기 위해서입니다.
AI 에이전트에게 규칙 문서를 먼저 쥐여줬다
AI로 개발 속도를 올리되 품질이 무너지지 않도록, 프로젝트 루트에 작업 규칙(CLAUDE.md / AGENTS.md)을 두고 네이밍·CSS 변수·반응형 브레이크포인트·금지사항을 명문화했습니다. 문서와 코드가 어긋나면 코드를 신뢰하고 문서를 고치도록 규칙을 정했습니다.
추측으로 진행하지 않는 규칙을 명시했다
발주처 원본 파일과 대조가 필요한 작업은 임의 추측 대신 대조 결과를 변경 기록에 남기도록 했습니다. 확인되지 않은 내용은 '추정·미확인'으로 표기하고 단정하지 않습니다.
내가 맡은 범위
- UI 디자인 (PC·모바일)
- 퍼블리싱
- 프론트엔드 전 범위
- 프론트 작업 규칙 수립
- 프로젝트 문서 운영
실제 산출물
- 메인 시안 A안 / B안 — PC · 모바일 각각
- 프론트엔드 전체 구현
- 프론트 작업 규칙 문서 (CLAUDE.md / AGENTS.md)
- 운영 문서 5종 (design-rules · implementation · todo · changelog · AGENTS)
솔직하게 — 아직 못 한 것
백엔드와 PM은 제 역할이 아니었습니다. 이 프로젝트의 프론트에는 자동화 테스트를 넣지 못했고 QA는 수동으로 했습니다 — 별도 진행 중인 EXITO Seller 쪽에서는 테스트를 붙이고 있습니다.
이런 일이 필요하시면
지금 막힌 지점을 그대로 적어 보내주세요. 제가 할 수 있는 일과 없는 일을 먼저 구분해 답장드립니다.