FEConf 2021

Park.Dyel·2021년 11월 3일
0

Track A

A1, Do more, with less.

  • UI 개발의 일반적인 문제점
    • 해결책은? -> 디자인 시스템
  • 디자인 시스템
    1. 비주얼 언어: Gray50, Red50
    2. 컴포넌트
    3. 패턴: 컴포넌트 사용 규약
  • 디자인 시스템 도입 후 생기는 일반적인 문제
    1. 코드를 디자인에 일치시키는 어려움
      • 상정치 못한 상황(길이 가 긴 텍스트)
      • 답은 "framer" 였다.
      • 하지만 hand-off의 문제는 같았다.
      • 디자인 시스템 컴포넌트를 표기하고, 개발에 필요한 컴포넌트 정보를 제공해주는 자체 hand-off를 framer에 입혔다.
    2. 소통의 어려움
      • 색상 이름으로 소통/기능 이름으로 소통
    3. 엄격함과 유연함 사이의 어려움
      • Design System Coverage
  • 디자인 시스템, 그 다음은?
    • TDS -> DST
    • 프론트엔드 시스템 엔지니어링

A2, 모두를 위한 모바일웹: 접근성을 준수해서 스크린리더 UX 개선하기

  • Screen reader
    - Accessble Name
    - content: 텍스트 내용
    - author: aria-label, aria-labelledby, alt(\<img>)
    - author > contents
    • Role
      • 자식 요소의 Accessible Name을 모아서 contents로 사용
      • button
    • semantic tag
      • 암시적으로 role을 가지고 있음
        • Children Pressentational
          <div role=button>
            <span>span1</span>
            <span>span2</span>
            <span>span3</span>
          </div>
          					-> span1, span2, span3 버튼 -> 부모 자식에 role이 있기때문에 따른 해석
profile
ㄱH발자

0개의 댓글