control-ui-e2e로 OpenClaw 화면 변경을 상태별로 검증
機械翻訳 / Machine-translated
機械翻訳 / Machine-translated
원문 기사: control-ui-e2eでOpenClaw画面の変更を状態別に検証（cccskills）
스킬 페이지: control-ui-e2e
이 기사의 결론
control-ui-e2e는 OpenClaw Control UI를 다루는 개발자를 위한 스킬입니다.
도입하면 화면 변경을 상태별 갤러리와 실제 브라우저 동작 테스트로 확인할 수 있습니다.
변경 전후 이미지나 사용자 코멘트도 남길 수 있는 구조입니다.
이하에서는 요청 시 무엇이 반환되는지, 설치 방법, 사용 시 전제 조건과 주의사항을 순서대로 소개합니다.
화면을 변경한 후 한 마디 요청하면, 에이전트가 상태별 표시 예시를 나열한 갤러리를 만들고 변경 전후 이미지를 남깁니다.
요청 문구는 예를 들어 다음과 같습니다.
채팅 화면 입력란의 레이아웃을 변경했습니다.
일반·로딩 중·빈 화면·오류 상태를 나열한 갤러리를 만들고, 변경 전후 이미지도 남겨 주세요.
에이전트는 먼저 외관 확인 절차를 정리한 첨부 자료를 읽습니다.
그런 다음, 일반·로딩 중·빈 화면·오류 각 상태를 나열한 HTML 갤러리를 만드는 흐름입니다.
각 표시 예시에는 코멘트를 달 수 있으며, 저장 및 내보내기도 가능합니다.
외관이 바뀌는 수정이므로, 변경 전과 변경 후의 스크린샷을 찍고 내용을 확인한 뒤 남깁니다.
리포트, 스크린샷, 트레이스(조작 기록), 동영상은 시도마다 만드는 폴더에 함께 저장되는 구조입니다.
최종 보고에서는 확인된 결과와 실패, 아직 시도하지 않은 상태가 나뉘어 표시됩니다.
control-ui-e2e는 화면 변경을 외관과 동작 양면에서 확인하고 증거를 남기는 것까지 담당하는 스킬입니다.
OpenClaw 리포지터리 openclaw/openclaw에 포함된, Control UI 개발자용 스킬입니다.
요청 내용에 따라 읽는 절차는 다음과 같이 나뉩니다.
| 요청 내용 | 스킬이 수행하는 것 |
|---|---|
| 대규모 레이아웃 변경, 여러 상태의 디자인 확인 | 상태별 스트레스 테스트용 갤러리를 만든다 |
| 외관 변경, 스크린샷, 동영상 | 확인된 변경 전후 이미지를 남긴다 |
| 화면이 느리거나 반응이 나쁠 때 | Chrome 트레이스를 수집하여 조작 성능을 조사한다 |
| 실행 및 판단 기록이 필요할 때 | Run Inspector 기록을 가져온다 |
여러 상태를 가진 화면이나 컴포넌트를 변경할 때 사용하는 것이 표시 예시를 나열한 갤러리입니다.
구체적인 표시를 보면서 의견을 모을 수 있어 디자인 리뷰 자료로 활용됩니다.
문구나 아이콘만의 소규모 변경이라면 해당 부분에 한정된 확인으로 충분합니다.
채팅 전송처럼 통신과 화면 표시를 함께 확인하고 싶은 경우에는, Vitest와 Playwright로 동작하는 실제 브라우저 테스트를 사용합니다.
Gateway의 응답을 모의하여, 화면 시작부터 통신, 조작 후 표시까지를 전체 흐름으로 검증하는 구조입니다.
부족한 응답이 있으면 기존 테스트 보조 코드의 설정을 확장하여 보완합니다.
테스트 진행 방식은 다음 4단계입니다.
각 단계에는 완료 조건이 있으며, 확인된 결과에는 반드시 눈으로 확인할 수 있는 증거가 첨부됩니다.
예상치 못한 동작이 발생하면 제품 측 또는 테스트 데이터 측에서 원인을 해소한 후 재실행하는 흐름입니다.
성공한 시도도 실패한 시도도 삭제하지 않고 남깁니다.
이전 증거를 덮어쓰지 않으며, 공유 저장 위치를 일괄 삭제하지도 않습니다.
따라서 나중에 "어느 시도에서 무슨 일이 있었는지"를 추적할 수 있습니다.
설치에 필요한 것은 명령어 한 줄뿐입니다.
npx skills add에서는 Claude Code나 Codex 등 설치할 대상 에이전트를 선택할 수 있습니다.
npx skills add https://github.com/openclaw/openclaw --skill control-ui-e2e
에이전트에게 맡기는 경우, 다음 문구를 그대로 전송하세요.
次の Agent Skill をインストールしてください。
https://github.com/openclaw/openclaw/tree/main/.agents/skills/control-ui-e2e
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/control-ui-e2e/、Codex なら ~/.agents/skills/control-ui-e2e/ に配置してください。
저장 위치는 다음과 같습니다.
| 에이전트 | 모든 프로젝트에서 사용 | 특정 프로젝트에서만 사용 |
|---|---|---|
| Claude Code | ~/.claude/skills/ | 프로젝트의 .claude/skills/ |
| Codex | ~/.agents/skills/ | 프로젝트의 .agents/skills/ |
이 스킬은 OpenClaw 리포지터리 내의 .agents/skills/control-ui-e2e에 위치합니다.
리포지터리에서 작업할 때 사용하는 것을 전제로 한 스킬입니다.
요청은 한국어로 해도 됩니다.
대표적인 요청 3가지를 소개합니다.
이 설정 화면의 일반·빈 화면·오류 상태를 비교할 수 있는 갤러리를 만들어 줘
반환되는 것은 상태별 표시 예시를 나열한 HTML 갤러리입니다.
각 예시에 대한 코멘트는 저장할 수 있으며, 내보내어 리뷰 담당자에게 전달할 수 있습니다.
Gateway 응답을 모의하여, 채팅에서 메시지를 보낸 후의 화면을 테스트해 줘
모의 Gateway를 사용한 브라우저 테스트가 준비됩니다.
전송 조작 후의 화면 표시와 Gateway로의 요청을 이 테스트로 확인하는 형태입니다.
실패했을 때는 충족되지 않은 확인 항목이 기록에 남습니다.
레이아웃을 변경했으니 변경 전후 이미지를 남기고 보고해 줘
변경 전과 변경 후의 스크린샷을 찍어 확인하고, 시도별 폴더에 저장하는 흐름입니다.
보고에서는 확인된 결과와 미확인 상태가 나뉘어 기재됩니다.
특정 테스트만 로컬에서 실행하고 싶을 때는 리포지터리 루트에서 다음 명령어를 실행하세요.
node scripts/run-vitest.mjs run --config test/vitest/vitest.ui-e2e.config.ts --configLoader runner ui/src/e2e/chat-flow.messaging.e2e.test.ts
전제 조건으로 OpenClaw 개발 환경과 설치된 의존 패키지가 필요합니다.
스킬의 방침은 기존 설치를 사용하고, 다른 작업이 사용하는 설치를 손상시키지 않는 것입니다.
테스트 실행 위치는 리포지터리 내 테스트 방침에 따릅니다.
검증은 통상적으로 실제 인증 정보를 사용하지 않고 모의 데이터로 진행합니다.
실제 Gateway나 모델 제공 서비스의 인증 정보를 사용하려면 명시적인 허가가 필요합니다.
채팅 전송 대기나 첨부 파일과 관련된 일부 테스트 그룹은 별도 담당자가 관리합니다.
따라서 기록이 남는 방식을 확인한 후 결과를 주장합니다.
갤러리는 동작 테스트의 대체가 되지 않습니다.
외관 확인과 동작 확인은 각각 별도로 진행합니다.
생성된 이미지나 동영상은 원칙적으로 커밋하지 않습니다.
이 스킬은 OpenClaw Control UI의 테스트 보조 코드와 스크립트를 전제로 합니다.
다른 앱에서의 사용 방법은 기재되어 있지 않습니다.
라이선스는 MIT입니다.
설치 전에 SKILL.md와 첨부 파일의 내용을 한 번 읽어 보세요.
이하는 화면 확인 전후에 사용할 수 있는, 동일한 OpenClaw 개발용 스킬입니다.
agent-transcript는 에이전트의 작업 로그로부터 GitHub의 PR이나 이슈에 첨부할 기록을 만드는 스킬입니다.
화면 검증 결과를 PR에서 설명할 때 함께 사용할 수 있습니다.
autoreview는 공유 리뷰 절차로 코드를 확인합니다.
화면 변경을 제출하기 전의 코드 리뷰에 적합합니다.
openclaw-docker-e2e-authoring은 OpenClaw의 Docker 환경에서 일련의 동작을 확인하는 테스트를 만드는 스킬입니다.
화면 외부까지 포함하여 동작을 확인하고 싶을 때는 이 스킬과 구분하여 사용합니다.
이 스킬은 OpenClaw 개발 환경에 이미 설치된 의존 패키지를 사용합니다.
새로 설치하지 않고 기존 설치를 사용하는 방침입니다.
미리 리포지터리의 의존 패키지를 설치해 두세요.
필요하지 않습니다.
문구나 아이콘만의 소규모 변경이라면 해당 부분에 한정된 확인으로 충분합니다.
갤러리를 사용하는 것은 대규모 레이아웃 변경이나 여러 상태의 디자인 확인 시입니다.
이 스킬은 OpenClaw Control UI의 테스트 보조 코드와 테스트 설정을 전제로 작성되어 있습니다.
다른 앱에서의 사용 방법은 기재되어 있지 않습니다.
OpenClaw 리포지터리에서 사용하는 스킬로 생각해 주세요.
통상적으로는 모의 Gateway로 검증합니다.
실제 Gateway나 모델 제공 서비스의 인증 정보를 사용하는 검증에는 명시적인 허가가 필요합니다.
control-ui-e2e는 OpenClaw Control UI의 화면 변경을 상태별 갤러리와 모의 Gateway를 사용한 브라우저 테스트로 확인하는 스킬입니다.
변경 전후 이미지와 코멘트, 시도별 기록이 남기 때문에 리뷰에서 변경 내용을 제시하기 쉬워집니다.
OpenClaw 화면에 관여하는 분이 변경을 확인하고 공유하기 위한 도구로 사용할 수 있습니다.
자세한 내용은 cccskills 페이지를 참조하세요.
이 기사는 cccskills의 읽을거리 「control-ui-e2eでOpenClaw画面の変更を状態別に検証」의 전재입니다.
스킬의 상세 내용과 설치 방법은 cccskills의 control-ui-e2e 페이지에 있습니다.