[1205 테킷] 웹 접근성

접근성이란?

Accessbility

Universal Design - 누구나 이용할 수 있는 디자인

Inclusive Design, Design for all

다양한 사용자를 포괄할 수 있는 것.

 

웹접근성

장애인, 고령자들이 이용하기 좋은 웹사이트 제작. 

넷플릭스의 자막같은.

서비스를 제공하는 사람으로서 꼭 전하고 싶었던 운영철학

WCAG : Web Content Accessibility Guidelines

 

Wai-Aria: 웹페이지의 접근성을 향상시키는 방법

규칙

1. <div class="~~~" role="menu">

이렇듯, role를 넣어준다. 

 

<피그마 특강>

 

색상조합

 

<형태조합>

다 크고 넓은 것보다 안정적으로 조합하는 것. 보다 쉐입의 느낌이 들게끔

크게 나타낼 것과 작게 나타낼 것을 구분하는 것. 그렇다면 훨씬 더 가독성이 생길 수 있다. 

 

<강조와 비강조>

메인(primary color) 60

서브(secondary color) 30

나머지(accent color) 10

 

피그마를 배우는 이유?

1. 나 빼고 다 할 줄 안다.

2. 프로젝트

3. 디자이너의 의도를 파악할 수 있다.

 

특강의 목표

1. 당당하게 흝어보기 

2. 당당하게 수정하기

3. 당당하게 요청하기

4. 당당하게 만들기

=> 당당하게 개발하기

'U를 그린다'라는 표현보다 'UI를 설계한다'라는 표현을 많이 사용한다. 그림을 그리고 언치는 작업이 아니다. 알고 디벨롭하는 게 좋은 디자이너가 되는 길이다. 

 

프론트엔드 개발자의 길

1. 복잡성 낮추기 (코드와 커뮤니케이션)

2. 테스트 코드 구현

3. 코드 문서화 작업

4. 일관된 UX/UI 구현

 

 

왜 커뮤니케이션이 어려울까?

[개발자]

1. 통일성 없는 개발 언어

2. 기준 없는 그룹핑

3. 중복된 컴포넌트 생성

4. 새로운 프로젝트

 

[디자이너]

1. 비슷한 듯 다른 색상

2. 기준 없는 소수점

3. 중복된 디자인 다른 수치

4. 상태가 없는 디자인 (요즘은 피그마를 통해 구조를 짜서 제공해준다.)

:hove, :disable, :active

이런 상황을 고려해서 제공해줘야 한다. 마우스 올리면 색깔 어떻게 돼요? 클릭하면 어떻게 돼요? 활성화는 어떻게 해요?

5. 새로운 프로젝트

 

금기어

1. 디자이너 -> 개발자 : 제가 아는 개발자는 된다는데요?

2. 개발자 -> 디자이너 : 좀 더 귀여운 빨간색은 없나요? (애매한 요청) / 뭔가 좀 아쉬운데..?

 

기획자 -> 디자이너 -> 프론트엔드 개발자 -> 고객

애니메이션, 기능구현을 통해 고객과 가장 접하기 쉬움. CSS 단 한 줄이라도 꼼꼼하게 짤 의무가 있다. 

 

디자인 시스템

체계적인 방법으로 디자인 자산(assets)을 관리 운용

 

프로토타입 - 시제품 

베이직 프로토타입 - 기본적인 워크 플로우

어스벤스드 프로토타입- 구체적인 워크플로우 (약간 종민님이 하는 일인듯)

 

<피그마 작동법>

만약 view모드로 들어갔을 때 '/'이거를 누르면 말풍선으로 글을 남길 수 있다. 

줌인 줌아웃 | 컨트롤 + 스크롤

단축키 N : 포커스 1개 1개를 맞춰서 확인할 수 있음 

뒤로가기는 쉬프트 N

쉬프트로 도형 클릭

커맨드 + r = 이름 바꾸기 

[] 대괄호 누르면 앞으로 갔다 뒤로 갔다함 

커맨드 + p 누르면 검색이 떠서 찾아볼 수 있다. 

ㄴ 키보드 검색하면 단축키 모임이 나온다. 그래서 단축키를 죽어라 외울 필요가 없다. 

 

그룹창에 컨트롤을 누르고 대상을 찍으면 그 안에 있는 세세한 asset을 클릭할 수 있다. 

하위요소를 잡고 쉬프트 엔터를 누르면 상위 요소로 올라간다

component : 굉장히 작은 버튼 한 개, 큰 해더가 될 수 있음. 재사용성을 고려해서 제작하는 것. (이것이 설계의 관점으로 바라보는 것.)



컴포넌트 - 보라색을 보면, 아 이건 컴포넌트구나. 

컴포넌트로 만들걸 가지고, 복제를 하면 인스턴스라고 불린다. 

그래서 컴포넌트를 수정하면 인스턴스가 모두 바뀐다.

꽉 차있으면 컴포넌트임. 근데 대체로 컴포넌트는 사용하지 않고, 인스턴스를 사용한다. 컴포넌트 페이지를 따로 만든다. *실제 메인 컴포넌트는 디자인 요소로 사용되지 않음.

쉬프트 에이

이미지 엑스포트 할 때 

ttf보다 otf가 더욱 정교하다 - 

이미지 복사해서 도형 내에 붙여 넣기 

컨트롤 + G

프레임 그룹 ) 커멘드 + 옵션 + G - 포지션 렐러티브와 앱솔루트 같은 느낌

일반적으로 프레임 그룹을 많이 이용해요 ! 

 

쉽프트 + D - 디자인&개발 모드

 

 

Pascal Case

Button - 자바스크립트에서는 대체로 파스칼 케이스로 쓴다.

리액트에서는 무조건 컴포넌트 이름이 대문자로 적혀있다. 다 정해져 있다. 

camelCase

 

autolay-out : sift + a

png는 jpeg보다 용량이 월등하게 크기 때문에 대체로 export는 jpeg를 권장

보통은 2배수로 추출한다. 

 

 

 

1. 개발자 시선 디자인

2. UI설계가 중요한 이유

3. 디자인 시스템이란?

4. 피그마

5. 기대효과