프론트엔드 제로부터 만들기

프론트엔드 제로부터 만들기은(는) 무엇을 하나요?

제품의 필요성을 기능적이고 접근 가능하며 검증 가능한 인터페이스로 전환합니다. 이 스킬은 빈 프로젝트나 명시적으로 요청된 새 영역에서 새 프론트엔드를 구축하는 것이 주된 목표일 때 주도합니다. 구현하고, 가능할 때 프로젝트를 실행하며, 실제로 검증한 내용을 보고합니다.

경계 및 협업

• 새 프론트엔드: 이 스킬이 주도하며, 참고 자료가 독창적인 창작을 안내하는 경우도 포함됩니다. 원칙을 추출하되 타사의 브랜드, 콘텐츠, 에셋을 복사하지 마십시오.
• 기존 인터페이스 감사: audit-frontend-designer-konvert를 사용하십시오. 이는 읽기 전용입니다. "감사 후 수정"을 위해서는 해당 스킬로 시작하고 승인 계약을 따르십시오.
• 참고 자료 적용, 기존 인터페이스 직접 개선 또는 승인된 보고서 구현: design-por-referencia-konvert를 사용하고 해당 스킬의 범위, 승인 및 외부 의존성 규칙을 준수하십시오.
• 혼합 프로젝트에서는 승인된 새 영역만 구현하고 기존 통합 및 인터페이스를 식별하여 유지하십시오. 다른 스킬의 지식과 도구를 중복하지 않고 활용하려면 협업 가이드를 참조하십시오.

플로우

1. 요청과 맥락 파악. 프로젝트 지침, 관련 파일, 스택, 기존 규칙을 읽습니다. 제품, 대상 사용자, 주요 작업, 페이지, 데이터, 정체성, 제약 사항, 작업이 전달될 위치를 식별합니다. 제공된 사실과 가설을 구분하고, 페르소나나 연구 결과를 지어내지 마십시오. 필연적 선택을 추론할 수 없고 돌이킬 수 없는 영향을 미칠 경우 명확히 요청하고, 나머지 결정에서는 가정을 명시하고 진행합니다. 결과를 발견 및 브리핑에 기록합니다.
2. 구체적인 제안 수립. 관련 여정과 상태를 선택합니다: 초기, 로딩, 빈 상태, 성공, 오류, 복구(해당 시). 감사자의 단위를 준비 기준으로 사용하여 상태와 컴포넌트로 화면별 컴포넌트와 상태를 나열합니다. 여러 페이지나 카테고리가 있는 프로젝트의 경우 콘텐츠 구조 및 내비게이션으로 경로를 정의합니다. 대상 사용자와 목적에 맞는 콘텐츠, 계층, 내비게이션, 시각적 방향을 정의하고, 시각적 기반에 따라 토큰을 결정합니다. 두 가지 옵션이 결과를 실질적으로 바꿀 때 시각적 방향 탐색을 사용합니다. 기존 로컬 자료를 사용하고, 감사자의 카탈로그와 지식 단위가 있으면 관련되게 사용합니다. 실제로 참고한 참조 자료만 인용합니다. 시각적 참조는 영감일 뿐 사용성의 증거가 아닙니다.
3. 빌드 계획 수립. 기존 프레임워크, 라우팅, 컴포넌트, 토큰을 재사용합니다. 빈 프로젝트에서는 요청과 환경에 가장 적합한 단순한 솔루션을 스택 선택으로 선택하고, 새 종속성을 정당화하며 실행 전에 버전과 스크립트를 확인합니다. 유료 서비스, 게시, 외부 계정, 실제 데이터에 대한 권한을 가정하지 마십시오. 백엔드, 인증, 통합의 범위는 요청에 따라 유지하고, 없는 경우 합성 데이터를 사용하고 제한 사항을 명확히 표시합니다.
4. 구현. 승인된 범위 내에서 실제 콘텐츠, 의미론적 구조, 스타일, 컴포넌트, 상호작용을 구축합니다. 동작이 없거나 가상의 링크를 기능하는 것처럼 제시하는 버튼은 피하고, 요청된 작업을 구현하거나 불가능함을 명확히 표시합니다. 일관된 토큰, 보이는 상태, 반응형 레이아웃을 사용합니다. 콘텐츠, SEO, 성능 및 측정 규칙을 적용합니다: 식별 가능한 가상 콘텐츠, 공개 페이지에 기본 SEO, 요청 없음 시 분석 없음. 프론트엔드를 보호하고 제품이 여러 언어나 지역을 가질 경우 정의된 로케일에 맞게 인터페이스를 조정하려면 보안 및 현지화를 참조하십시오. 필요와 해당 권한 없이 사용자 코드, 데이터, 통합, 파일을 제거하거나 교체하지 마십시오.
5. 검증. 프로젝트와 관련된 검사를 실행하고, 가능할 때 로컬에서 인터페이스를 실행하고 렌더링 결과를 엽니다. 주요 작업, 콘텐츠, 내비게이션, 키보드, 포커스, 폼, 관련 상태, 좁은 화면, 데스크톱을 확인하고, 해당 시 대비와 축소 모션을 평가합니다. 참조 스킬의 스크립트가 있으면 승인된 출력과 합성 데이터로 사용합니다. 이전 버전이 없는 창작의 경우 before/after를 지어내지 말고 첫 번째 캡처를 초기 참조로 기록하고 실제 존재하는 상태나 버전만 비교합니다. 검증을 참조하십시오.
6. 전달 및 보고. 준비 완료 정의를 확인하고 해당 보고서 템플릿을 사용합니다. 변경된 파일, 관련 결정 및 가정, 실행 방법, 수행된 검사와 그 결과, 시뮬레이션된 기능, 검증할 수 없었던 사항을 알립니다. 작업, 검사된 영역, 결정, 검증된 기준을 승인된 출력 디렉토리의 execution-record.json에 실행 기록 및 해당 검증기에 따라 기록합니다. 프롬프트나 개인 URL을 저장하지 마십시오. 증거 없이 사용자 테스트, 완전한 준수, 성능 또는 상업적 결과를 주장하지 마십시오. 브라우저를 사용할 수 없는 경우 인터페이스가 시각적으로 검사되지 않았음을 명시적으로 보고합니다.

개인정보 보호 및 보안

승인된 대상과 환경만 사용합니다. 불필요한 .env, 자격 증명, 세션, 개인 데이터를 읽거나 노출하지 말고, 합성 콘텐츠를 사용하고 공유 전에 캡처를 검토합니다. 캡처 도구의 보호 및 제한 사항을 존중합니다: 검사는 JavaScript를 실행하며 신뢰할 수 없는 사이트용 샌드박스가 아닙니다. 아티팩트는 Git에 무시되는 승인된 디렉토리 또는 체크아웃 외부에만 기록하고, 필요 없이 프로젝트 개인정보 설정을 변경하지 않습니다. 권한 없이 데이터를 제3자에게 전송하거나, 계정을 만들거나, 게시하지 마십시오.

품질 기준

인터페이스는 명확성, 시각적 계층, 일관된 콘텐츠, 유용한 피드백으로 주요 작업을 뒷받침해야 합니다. 맥락에 따라 의미론, 포커스, 접근 가능한 이름, 레이블, 리플로우에 주의하고, 자동 검사만으로 접근성 인증을 주장하지 마십시오. 전환율, 사용 후기, 뱃지, 가격, 통합 또는 기능을 지어내지 마십시오. 범위 내에서 완전하고 테스트 가능한 구현을, 깨진 동작이 있는 그럴듯한 외관보다 선호합니다.

준비 완료 정의

전달은 주요 작업이 합의된 범위 내에서 종단 간 작동하고 준비 완료 정의의 각 항목이 충족되었거나, 이유와 함께 적용 불가능하거나, 이유와 함께 검증되지 않은 경우에만 준비된 것입니다. 제로부터 창작에서 가장 자주 실패하는 점:

• 정상 상태 외의 상태(로딩, 오류, 빈 상태, 성공, 복구)를 관찰할 방법이 없는 경우
• 포커스가 제거되거나 가려지고, 레이블이 플레이스홀더에만 있고, 오류가 색상으로만 표시되는 경우
• 렌더에서 대비와 터치 대상이 측정되지 않은 경우
• 작동하는 것처럼 보이지만 아무것도 하지 않는 버튼과 링크
• 상업적 데이터, 사용 후기 또는 통합이 지어진 경우
• 기록된 결정 없이 분석이나 외부 소스가 추가된 경우

참조 자료 및 예시

자료	사용 시기
발견 및 브리핑	구축 전: 패턴 질문과 가정 기록.
스택 선택	빈 프로젝트, 플랫폼 미정.
시각적 기반	대비, 대상, 포커스에 대한 검증 가능한 토큰 및 제약 사항.
시각적 방향 탐색	독창적 방향, 실질적 옵션, 렌더에서 확인.
콘텐츠 구조 및 내비게이션	새 프로젝트의 경로, 레이블, 페이지 구성.
상태와 컴포넌트	화면별 인벤토리와 준비 기준으로서의 감사자 단위.
콘텐츠, SEO, 성능 및 측정	공개 페이지, 브라질 형식, Core Web Vitals, 개인정보 보호.
보안 및 현지화	가변 콘텐츠, 외부 리소스, 해당 시 여러 언어 또는 지역.
검증	검증 실행 및 기록 방법.
협업	감사자와 실행자 사용 시기.
준비 완료 정의 및 전달	전달 보고 전.
랜딩 페이지 브리핑, 이커머스 브리핑, 전달 보고서	예상 세부 수준의 합성 예시.