Metropolitan Childcare Support Portal
UI 디자인HTML/CSS/JS퍼블리싱프론트엔드AI 협업 워크플로우
Context
The official portal for a metropolitan-government childcare support agency — a public-sector site where residents find care services and education providers, and where the center's own staff publish content. A separate PM owned the backend; I owned the entire front-end.
Problem
The client's requirements were scattered across spreadsheets, HWP documents and slide decks, and some of them contradicted each other. Building straight from those documents guarantees a 'this isn't what we asked for' conversation at delivery.
Decisions
Nothing got finalised in the UI before it was reconciled with the source documents
Any task that needed checking against the client's original xlsx, pptx or hwpx files had to record the reconciliation in the changelog instead of proceeding on assumption. Locking something in on the front-end first is the most expensive thing to undo.
Two concept directions, each in desktop and mobile
Public-sector projects have several decision makers. One concept invites unlimited revisions; two concepts force a choice. Presenting the mobile layout alongside the desktop one prevented the structure from collapsing on small screens after approval.
Gave the AI agents a rulebook before giving them the codebase
To gain speed from AI assistance without losing quality, I put an explicit working-rules document (CLAUDE.md / AGENTS.md) at the project root covering naming, CSS variables, responsive breakpoints and prohibited patterns — including the rule that when the docs and the code disagree, the code wins and the docs get corrected.
Made 'don't guess' an enforced rule
Any task requiring reconciliation with the client's original files had to record the reconciliation result in the changelog instead of assuming. Unconfirmed items are labelled as assumptions rather than stated as fact.
What I owned
- UI design (desktop + mobile)
- Markup
- The entire front-end
- Front-end working standards
- Project documentation
Actual deliverables
- Homepage concepts A and B — desktop and mobile
- Complete front-end implementation
- Front-end working-rules document (CLAUDE.md / AGENTS.md)
- Five living project docs (design-rules, implementation, todo, changelog, AGENTS)
Honestly — what I didn't get done
The backend and the PM role weren't mine. I didn't get automated tests onto this front-end and QA was manual — I am adding test coverage on EXITO Seller, which is in progress now.
If you need this kind of work
Describe the thing you're currently stuck on. I'll reply by first separating what I can take on from what I can't.