60 lines (48 loc) · 2.29 KB

UI 피드백 루프 운영 문서

비개발자가 “이 화면 좀 더 예쁘게”, “카드가 어색해”, “Figma랑 다르게 보여”처럼 자연어로 말해도 Codex가 안정적으로 UI를 수정하도록 만든 루프입니다.

루프

요청 해석
관련 문서와 현재 코드 확인
필요한 경우 엣지케이스 질문
구현 계획 작성
계획 리뷰
리뷰 반영
구현
코드/UI 리뷰
리뷰 반영
타입체크와 화면 검증
결과 요약

비개발자 요청 예시

홈 화면 추천 카드가 좀 답답해 보여.
Figma 느낌은 유지하되 더 깔끔하게 정리해줘.
자연어 요청이니까 먼저 의도를 정리하고,
계획 -> 계획 리뷰 -> 반영 -> 구현 -> 코드리뷰 -> 코드리뷰 반영 순서로 진행해줘.

리캡 공유 화면을 SNS에 올리고 싶은 느낌으로 더 예쁘게 만들어줘.
문구, 카드 배치, 버튼 상태까지 같이 봐줘.
웹에서 확인 가능한 부분은 확인하고, 안 되는 건 이유를 알려줘.

계획 리뷰 체크리스트

어떤 화면과 컴포넌트를 바꾸는지 명확한가?
사용자 입장에서 무엇이 좋아지는지 설명되는가?
기존 기획 문서와 충돌하지 않는가?
로딩, 빈 상태, 에러 상태를 놓치지 않았는가?
웹에서 native module import 오류가 날 가능성이 없는가?
Figma 또는 기존 UI 패턴과 어긋나는 새 스타일을 만들지 않는가?
검증 방법이 명확한가?

코드/UI 리뷰 체크리스트

텍스트가 작은 화면에서 잘리지 않는가?
버튼과 카드의 터치 영역이 충분한가?
로딩/비활성/실패 상태가 시각적으로 구분되는가?
데이터가 없을 때 화면이 비어 보이지 않는가?
상태 로직이 UI 컴포넌트 안에 과하게 섞이지 않았는가?
src/mock-server와 API facade의 타입 계약을 깨지 않았는가?
npm run typecheck와 git diff --check를 통과했는가?

Codex에게 시킬 때 추천 문장

이 UI 수정은 비개발자 피드백 루프로 진행해줘.
자연어 요청을 먼저 구체적인 UI 목표로 번역하고,
계획 -> 계획 리뷰 -> 계획 반영 -> 구현 -> 코드/UI 리뷰 -> 리뷰 반영 -> 검증 순서로 해줘.