Mosin112/프로토타입 빌드

4단계 · 클릭 가능한 프로토타입

프로토타입을 통해 이해관계자는 엔지니어링이 시작되기 전에 행동 트리를 느낄 수 있습니다. 이는 계약(contract)의 시연이지 디자인 명세가 아닙니다: 해피 패스뿐만 아니라 오류 및 에지 케이스를 포함한 모든 분기를 보여주어야 합니다.

먼저 다음을 읽으십시오: work/<item>/03-trees/의 승인된 트리들, 컨셉, context/product.md 및 context/writing-style.md. 아래 구조의 참조 구현으로 ../../examples/price-alerts/04-prototype/index.html(이 스킬 기준 상대 경로)를 사용하십시오.

요구 사항

1. 하나의 독립형 파일: work/<item>/04-prototype/index.html. 모든 CSS와 JS를 인라인하십시오. 빌드 단계나 외부 요청은 없어야 하며(선택적 웹 폰트 제외), 그래야 디스크에서 열거나 티켓에 첨부 또는 링크로 게시할 수 있습니다.

2. 화면: 각각의 고유 상태는 data-screen="<id>" 속성을 가진 요소입니다. 한 번에 하나만 표시됩니다. 실제 제품처럼 프로토타입 자체의 버튼을 통해 탐색이 이루어집니다.

3. 시나리오 컨트롤: 제품 UI와 명확히 분리된 사이드 패널에 트리의 모든 while 상태와 if 조건(인증됨/인증되지 않음, 한도 도달, 알림 꺼짐, 가격 변동 시뮬레이션...)에 대한 토글이 있습니다. 토글을 변경하면 제품 UI의 동작이 변경되어 모든 분기에 접근할 수 있어야 합니다.

4. 커버리지 맵: 모든 트리의 모든 then 및 and 라인을 해당 라인을 시연하는 화면에 매핑하는 <script type="application/json" id="tree-coverage"> 블록:

   {
     "trees": {
       "functional/price-alert-creation": [
         { "line": "then the alert is saved as active", "screen": "alerts" },
         { "line": "and the alert's direction is set to above or below the current price", "screen": "alerts" }
       ],
       "functional/price-alert-trigger": [
         { "line": "then no further notification is sent", "screen": null, "reason": "Not visible: absence of a notification" }
       ]
     }
   }
   

   screen: null은 오직 reason(백엔드 전용 또는 "아무 일도 일어나지 않음" 결과)이 있는 경우에만 허용됩니다.

5. 가시적인 커버리지 패널: 커버리지 맵을 사이드 패널에 트리 라인의 체크리스트로 렌더링합니다. 라인을 클릭하면 올바른 시나리오가 설정된 상태로 해당 화면으로 이동합니다. 이는 프로토타입을 검토 도구로 만듭니다.

6. 현실적인 카피: 트리의 정확한 메시지를 사용하십시오. 샘플 데이터는 샘플 데이터로 표시하십시오.

7. 브랜드: context/product.md의 디자인 토큰을 따르십시오. 그렇지 않으면 중립적이고 접근성 있는 스타일을 사용하십시오. 전화 너비에서 작동합니다. 키보드 포커스가 표시되어야 합니다.

검사

python3 .pm-harness/pm_check.py prototype work/<item>/03-trees work/<item>/04-prototype/index.html을 실행하십시오. 트리 라인이 커버리지 맵에서 누락되었거나 존재하지 않는 화면을 가리키면 실패합니다. 통과할 때까지 수정하십시오.

게이트

프로토타입의 Journey 트리와 PM이 선택하는 모든 분기를 PM과 함께 살펴보십시오. 피드백을 수집하십시오. 피드백이 행동을 변경하는 경우 먼저 트리를 업데이트하고, 트리 검사를 다시 실행한 다음 프로토타입을 업데이트하십시오. PM이 승인하면 01-idea.md에 stage: prototype을 설정하고 /pm-harness:create-eng-tickets을 제안하십시오. PM의 팀이 최종 디자인에 Figma를 사용하는 경우, 디자이너가 가져가야 할 화면을 알려주십시오.