01 와이어 프레임 그리기(아이디어 얻기)
독서 커뮤니티를 소개하는 반응형 랜딩 페이지를 위한 3가지 와이어프레임을 제작하세요 . 히어로 섹션, 가치 제안, 기능 카드, 사용자 후기, 가격 블록을 포함하세요.
02 디자인 시스템 만들기
색상, 간격, 타이포그래피, 그림자에 대한 토큰을 사용하여 최소한의 디자인 시스템을 구축하세요.브랜드 개성은 '차분함, 신뢰감, 모던함'입니다. HEX, HSL, 토큰 이름을 제공하고 , 시스템에 맞는 재사용 가능한 컴포넌트 5개를 제안바랍니다.
03 접근성 테스트 하기
이 UI에 대한 접근성 검사를 수행하세요. 색상 대비, 터치
대상 크기, 텍스트 계층 구조, 대체 텍스트 품질, 키보드 탐색 및
WCAG 2.2 준수 여부를 확인하세요. 수정 사항을 예시와 함께 제시하세요.
작업중인 UI 이미지를 붙여넣기 하고 테스트 해보세요.
04 UI이미지 코드로 만들기
이 UI 스크린샷을 시맨틱하고 반응형 HTML + CSS로 변환하세요.
모바일 우선 접근 방식을 사용하고, 색상에 CSS 변수를 활용하며, WCAG
AA 대비를 유지하세요. 그런 다음 React 프로젝트에 통합하는 방법을 설명바람.
작업중인 UI 이미지를 붙여넣기 하고 테스트 해보세요.