작업 방식
Web Design Engineer는 페이지, 대시보드, 프로토타입, 슬라이드 덱, 시각화를 위한 브라우저 아티팩트 워크플로입니다. 모든 요청을 새 랜딩 페이지로 취급하지 않고, 먼저 아티팩트, 대상 사용자, 기존 작업 모드를 파악합니다. 제품 확장, 리디자인의 계약 보존, 시각적 방향 재구축은 서로 다른 작업이며 허용 범위도 다릅니다.
디자인 평가는 변형, 모션, 정보 밀도, 에셋 의존도, 브랜드 충실도라는 조정 가능한 다섯 가지 차원을 사용합니다. 이는 세부 구현에 앞서 선언된 시스템과 확인 가능한 초기 초안으로 이어집니다. 브랜드 작업에서는 색상 팔레트만이 아니라 실제 로고, 제품 사진, 인터페이스 캡처가 더 중요합니다. 또한 이 스킬은 가벼운 자체 점검과 실행 가능한 브라우저 수락 검증을 구분하며, 소스는 후자를 명시적인 QA 요청이 있을 때로 한정합니다.
예상 결과물
- HTML/CSS/JavaScript 또는 React 시각적 아티팩트
- 시각적 방향과 디자인 토큰 선택에 대한 문서화된 평가
- 확인 가능한 초기 초안, 이어서 완성된 상태와 인터랙션
브리프에서 검토까지
- 01기존 컨텍스트 읽기
제공된 소스 코드, 스크린샷, 브랜드 에셋, 제약 조건을 살펴보세요. 작업이 확장인지, 보존형 리디자인인지, 더 넓은 개편인지 분류합니다.
- 02디자인 계약 선언
시각적 방향, 대상 사용자, 밀도, 모션, 에셋을 설명한 다음 타이포그래피, 간격, 팔레트, 표면, 인터랙션 처리를 구체화합니다. 첫 코드를 작성하기 전에 사용자가 이 디자인 시스템을 승인할 때까지 기다립니다.
- 03확인 가능한 초안 보여주기
핵심 레이아웃과 정직한 플레이스홀더로 방향을 시험합니다. 모든 컴포넌트나 인터랙션 상태를 채우기 전에 이 초기 초안에 대한 별도 승인을 기다립니다.
- 04구축 및 검토
승인된 인터랙션과 상태를 완성합니다. 소스에 명시된 자체 점검을 수행하고, 브라우저 수락 검증이 요청되면 실제 뷰포트와 인터랙션 증거를 별도로 수집합니다.