UI 연구소: UX 제안
UX 제안은 세 단계를 거칩니다:
- 목업 — 프로젝트 연구소 노트에 명시된 플랫폼에서 연구소 코드만 변경됩니다. 소유자가 옵션을 탭하여 살펴봅니다.
- 라운드 종료 — 라운드가 태깅되고
docs/ux-history/에 기록되며, 연구소 파일은 삭제됩니다. - 프로모션 — 소유자가 옵션을 선택하고 계획을 승인하면, 공유 로직과 (앱이 있는 경우) 다른 플랫폼과 함께 실제 화면이 됩니다.
프로젝트 연구소 노트
이 스킬은 프로세스입니다. 각 프로젝트의 구체적인 내용은 .claude/ui-lab.md 에 있습니다. 다른 것보다 먼저 이 파일을 읽으십시오. 다음을 제공합니다:
- 플랫폼: 이 머신에서 사용할 연구소 앱 (
uname -s), 앱 ID, 연구소 코드 위치 및 화면 여는 명령어; - 옵션 폴더: 플랫폼별 폴더와 패키지, 문자열 위치;
- 파일: 옵션 화면이 사용하는 테마 또는 색상, 프로모션 시 상태가 이동하는 위치;
- 샘플 데이터: 옵션이 데이터를 구성하는 소스;
- 가짜 데이터 및 엣지 케이스: 이 앱에서 표시할 수 없는 가짜 데이터와 확인해야 할 케이스;
- 스크린샷: 플랫폼별 스크린샷 촬영 방법;
- 프로모션: 대상 경로, 다른 플랫폼 처리, 업데이트할 문서 및 릴리스 빌드 명령어;
- 연구소 자체 작동 방식 (문서 링크).
노트가 이 스킬과 다른 경우 노트가 우선합니다. 프로젝트에 .claude/ui-lab.md가 없거나 아래 필요한 내용이 누락된 경우, 추측하지 말고 소유자에게 문의하고 답변을 노트에 추가하십시오.
1단계: 목업
현재 브랜치에서 ux/<screen> 브랜치로 작업하여 다른 머신이 라운드를 가져올 수 있도록 합니다. 작업 트리에 사용자가 커밋하지 않은 변경 사항이 있으면 전환하기 전에 물어보십시오.
옵션당 하나의 폴더
각 옵션은 자체 폴더(노트에 위치 명시)에 있으므로 단독으로 삭제, 복구 또는 프로모션할 수 있습니다. 화면 패키지 내에 위치하므로 프로모션 시 파일 이동이 됩니다.
| 파일 | 보유 내용 | 프로모션 시 |
|---|---|---|
<Screen>Option<B> | 화면, <Screen>Screen<B>(state, actions): 프로덕션 품질(노트에 따른 앱의 문자열 및 테마)이며 연구소 유형이 없음 | 앱으로 이동 |
<Screen>Option<B>State | 앱 로직이 아직 생성하지 않는 상태(생성할 형태로 구성) | 노트에 명시된 위치로 이동 |
<Screen>Option<B>Lab | 샘플 데이터, 가짜 동작, 아무것도 하지 않는 액션, 그리고 위에 가짜 데이터를 명시하는 LabOption 값 | 삭제 |
| 옵션의 문자열(앱이 문자열 리소스를 사용하는 경우, 이름 및 위치는 노트에 따름) | 옵션의 새 텍스트 | 앱 문자열로 이동 |
- 폴더(및 리소스가 폴더에 포함될 수 없는 경우 문자열 파일) 외에도 옵션은 한 줄을 추가합니다:
LabScreens의 화면 목록에 해당 항목 (<screen>OptionB,). - 폴더의 모든 항목은
private이며, 화면, 상태 및LabOption값을 제외하고, 이름에 옵션이 포함되어 있어 옵션 간 충돌이 없습니다. - 기존 앱 컴포넌트의 변경된 버전이 필요한 옵션은 자체 폴더에 자체 복사본을 사용합니다.
- 샘플 데이터는 노트에 명시된 소스에서 그대로 가져오며, 옵션이
Lab파일에 추가하는 내용을 더합니다. 노트에서 데이터가 실제라고 명시한 경우 텍스트를 임의로 만들지 마십시오.
단계
- 연구소에서 화면을 열고
current(현재 앱 화면)를 살펴보십시오. current이후에a,b,c옵션으로 2~3개의 뚜렷한 방향을 작성하고, 각각 변경 사항에 대한 한 줄 설명을 추가하십시오.- 각
LabOption값 위에 옵션이 가짜로 처리하는 항목을 나열하십시오: 앱 로직에 없는 데이터, 구축되지 않은 동작, 표시할 수 없는 가짜 데이터(노트에 이 앱의 일반적인 항목이 나열됨). - 노트에 나열된 엣지 케이스와 화면에 비정상적인 사항을 확인하십시오. 디자인을 변경하는 케이스는 자체 옵션이 됩니다 (
a-rtl,a-dark). - 빌드하고 각 옵션을 열어 스크린샷을 확인하십시오(명령어는 노트에 있음; android-emulator 스킬은 Android 기기를 다룹니다). 휴대폰에서 완전히 검은 스크린샷은 잠겨 있음을 의미합니다: 소유자에게 잠금 해제를 요청하십시오.
- 브랜치에 커밋하고 소유자에게 옵션 ID(
<screen> <option>), 각 옵션이 가짜로 처리하는 항목 및 기기를 알려주십시오.
소유자가 옵션 변경을 요청하면 변경 사항은 자체 폴더에 새 옵션이 됩니다(b 옆에 b2). 소유자가 제외한 옵션은 라운드가 종료될 때까지 유지되므로 라운드 태그에 모두 포함됩니다.
2단계: 라운드 종료
소유자가 옵션을 선택했거나 모두 거절한 경우:
- 모든 옵션이 여전히 포함된 상태에서 라운드의 마지막 커밋을 태깅하고 푸시하십시오:
git tag ux/<screen>/<yyyy-mm-dd> && git push origin ux/<screen>/<yyyy-mm-dd>. 태그는 브랜치가 사라진 후에도 코드에 접근할 수 있게 합니다. 같은 날 두 번째 라운드는-2를 받습니다. - 아래 형식으로
docs/ux-history/<screen>/<yyyy-mm-dd>-<topic>.md를 작성하고, 노트에 명시된 위치(예: 화면 문서)에서 링크하십시오. - 다른 옵션의 폴더, 문자열 파일 및
LabScreens줄을 삭제하십시오. 선택된 옵션은 3단계까지 유지됩니다. - 커밋하십시오. 모든 옵션이 거절된 경우 라운드는 여기서 종료됩니다: 브랜치를 병합(히스토리 파일이 유일한 지속 변경 사항)하거나 소유자가 원하는 대로 삭제하십시오.
# <Screen> — <topic> (<yyyy-mm-dd>, <platform>)
태그: `ux/<screen>/<yyyy-mm-dd>`
## 옵션
- **a — <name>**: <변경 사항>. *선택됨*, <commit>에서 프로모션됨.
- **b — <name>**: <변경 사항>. *거절됨*: <소유자의 사유(제공된 경우)>.
## 가짜로 처리한 항목
- b: <목업이 앱이 아직 할 수 없는 것을 보여준 내용>.
## 옵션 복구
git checkout ux/<screen>/<yyyy-mm-dd> -- <option folder> <strings files>
그런 다음 `<screen>Option<B>,`를 `LabScreens`에 추가하십시오.
태그 시점의 <사용한 컴포넌트 및 샘플 데이터>에 대해 빌드됨. 복구 후 컴파일 오류는 옵션의 복사본 및 샘플 데이터에 있습니다. 해당 위치에서 수정하십시오.
복구
소유자가 이전 옵션을 요청하면 히스토리 파일을 따르십시오: 태그에서 경로를 ux/<screen> 브랜치로 체크아웃하고, LabScreens 줄을 추가하고, 옵션 폴더 내에서 더 이상 컴파일되지 않는 부분을 수정한 후 엽니다. 그러면 새 라운드의 활성 옵션이 됩니다.
3단계: 프로모션
선택된 옵션으로 라운드가 종료되면 계획 모드로 전환(EnterPlanMode)하고 ExitPlanMode로 계획을 제시하십시오. 소유자가 버튼으로 승인합니다. 계획은 다음을 포함합니다:
- 이동할 파일과 대체할 화면;
- 각 가짜 항목 뒤의 로직 작업: 제안된 상태, 뷰 모델 또는 컨트롤러 변경 및 해당 테스트;
- 앱이 있는 경우 노트에 명시된 대로 다른 플랫폼;
- 노트에 명시된 업데이트할 문서.
승인 후 동일한 브랜치에서:
git mv로 옵션의 화면 파일을 앱(노트에 따른 대상)으로 이동하고, 기존 화면을 대체한 후 함수 또는 뷰에 화면 이름을 지정하십시오.- 옵션의 접두사나 테이블 없이 문자열을 앱 문자열로 이동하십시오.
- 상태를 노트에 명시된 위치로 이동하고, 앱 로직이 테스트와 함께 생성하도록 하고 액션을 연결하십시오.
- 복사된 컴포넌트를 원본으로 병합하고, 폴더의 나머지와
LabScreens줄을 삭제하십시오.LabScreens의 화면current를 프로모션된 화면으로 지정하십시오. - 노트의 명령어로 릴리스 빌드를 수행하십시오. 연구소 코드 참조가 있으면 컴파일에 실패합니다.
- 계획의 다른 플랫폼 및 문서 부분을 수행하고, 프로모션 커밋을 라운드 히스토리 파일에 추가하십시오.
브랜치 병합은 소유자의 결정에 따릅니다.