접근성이란?
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. 기대효과
[1219 테킷] Box sizing, Position, Inset (0) | 2023.12.20 |
---|---|
[1218 테킷] 미디어 쿼리, 마진 (0) | 2023.12.19 |
[1214 테킷] CSS :: Flex 정복하기 (0) | 2023.12.14 |
[1213 테킷] (0) | 2023.12.14 |
[테킷 1211] CSS (1) | 2023.12.11 |