실리콘 인터페이스 빌드
디자인 의도를 실제 동작하는 동작으로 전환합니다. 수정하기 전에 제품의 DESIGN.md, 프레임워크, 현재 UI, 컴포넌트, 에셋 및 콘텐츠를 검사하세요. 변경 사항을 요청된 범위 내로 유지하세요. 소규모 수정의 경우 기존 방향을 따르고, 주요 빌드에서 방향성이 부족할 경우 브리프로부터 간결한 잠정 방향을 수립하세요.
대표적인 조각 빌드
사용자, 작업, 주요 정보 및 다음 행동을 식별하세요. 제품의 대표 콘텐츠를 사용하고, 가상의 픽스처(fixture)와 프로토타입 동작에는 레이블을 붙이세요. 사용후기, 고객 로고, 측정값 또는 성공적인 통합 사례를 조작하지 마세요.
콘텐츠에 따라 구조를 선택하세요: 읽기에는 산문, 비교에는 행(row) 또는 테이블, 독립 객체에는 카드(Card)를 사용하세요. 웹사이트는 약속과 증거를 이해할 수 있게 해야 하며, 앱은 작업을 뒷받침하는 작업 내용과 상태를 노출해야 합니다. 시각 시스템을 적용하면서도 신뢰할 수 있는 컴포넌트의 의미론을 유지하세요.
스타일을 제품 전체에 퍼뜨리기 전에 하나의 완전한 플로우와 불리한 상태(adverse state)를 먼저 구현하세요. 관련된 로딩, 빈 상태, 오류, 사용 불가, 성공 피드백을 포함하세요. 복구 가능한 오류에는 유용한 입력을 유지하고, 사용 불가능한 동작을 설명하세요. 의미론적 컨트롤과 영구적인 레이블을 사용하세요.
일관된 타입, 색상 및 간격 역할을 수립하세요. 특정 정보나 정체성 목적에 맞는 에셋을 사용하고, 적절한 권리와 텍스트 대체 수단을 갖추세요. 중요한 콘텐츠는 장식적인 모션 및 오디오와 독립적으로 유지하세요.
첫 번째 화면을 넘어 작업, 불리한 상태, 그리고 범위 내에 있는 결과까지 선택한 방향을 이어가세요. 단어 선택, 시각적 관계 또는 행동에 제품별 세부 사항을 포함하세요. 컨텍스트를 유지하고, 컬렉션이 비어 있는 이유를 설명하며, 반복 작업을 효율적으로 유지하세요. 마무리, 광학 정렬, 크롭, 아이콘 두께, 단위, 피드백 작업은 별도의 장인 패스(craft pass)로 수행하세요. 단지 기억에 남는 순간을 만들기 위해 범위를 벗어난 기능을 추가하지 마세요.
결과 검사
가능한 경우 실제 구현체를 브라우저에서 엽니다. 좁은, 중간, 넓은 레이아웃, 콘텐츠 극단값, 지원되는 테마/언어를 검사하세요. 미세 조정 전에 넘침, 약한 계층 구조, 어색한 줄바꿈, 불완전한 상태를 수정하세요.
키보드 내비게이션, 포커스, 완전한 작업/복구 경로를 실행하세요. 관련 대비 쌍, 텍스트 확대, 축소된 모션 동작을 확인하세요. 뷰포트 크기 조정과 실제 브라우저 확대/축소, 입력 테스트와 스크린샷을 구분하세요. 변경 사항에 적합한 프로젝트 검사를 실행하고, 스타일 선택을 단순히 반복하는 테스트를 추가하지 마세요.
브라우저/런타임을 사용할 수 없는 경우, 유용한 소스 검사를 수행하고 렌더링된 동작이 확인되지 않았음을 명시적으로 보고하세요. UI가 올바르게 보인다는 주장으로 증거를 대체하지 마세요.
동작과 특성을 별도로 평가하세요. 결과를 구체적이고 일관성 있게 만드는 요소를 지적하고, 소개뿐만 아니라 내부도 검사하며, 반복적인 중단에 대해 반복 사용을 경험하세요. 패스된 빌드 또는 대비 검사는 이러한 디자인 질문에 답하지 않습니다. 감정 효과와 기억에 남는 정도는 실제 관찰 결과가 뒷받침하지 않는 한 가설로 취급하세요.
구현된 플로우, 변경된 표면, 사용 가능한 렌더링 증거, 수행된 검사 및 남은 제한 사항을 전달하세요. 관찰된 문제를 범위 내에서 계속 수정하여 플로우가 기준을 충족할 때까지 진행하세요.
선택적 심화: 실리콘 디자인 검토 체크리스트.