Product UI

프로젝트마다 다른 기술 스택과 브랜드 표현을 보존하면서, 동일한 레이아웃 책임과 정보 계층으로 제품 화면을 구현한다. 특정 프레임워크, UI 라이브러리, import 경로, 폴더 구조를 가정하지 않는다.

1. 프로젝트 탐색

구현 전에 다음을 실제 파일에서 확인한다.

• package.json, 실행·빌드·테스트 명령, React/Next.js/Vite와 TypeScript 사용 여부
• 라우팅 파일, 전역 스타일, CSS 변수, 디자인 토큰
• components, ui, shared와 유사한 디렉터리 및 기존 페이지
• 설치된 UI·아이콘·스타일링 라이브러리
• 가까운 기존 화면의 컨테이너 폭, 여백, 타이포그래피, 상태 처리

기존 패턴이 반복되는 규칙인지 한 화면의 우연한 값인지 비교한다. 앱 소스가 여러 개면 수정 대상부터 확인한다.

2. 화면 계약 결정

구현 전에 다음을 짧게 정리한다.