패스트캠퍼스 환급챌린지 34일차 : AI 시대, UX/UI부터 프로덕트 디자인까지 한 번에 끝내는 초격차 패키지 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

---

1. 학습 인증샷 4장 이상 포함

1. 오늘자 날짜 + 공부 시작 시각이 보이는 사진 1장
2. 오늘자 날짜 + 공부 종료 시각이 보이는 사진 1장

3. 1개 클립 수강 인증 사진 1장 (강의 화면 내용은 보이지 않도록 / 목록 캡처 추천)
4. 학습 인증샷 1장 이상 (예: 필기, 작업물, Before/After 등)

 

 

2.학습 후기 700자 이상 (공백 제외)

오늘 배운 핵심 내용을 정리하고, 흥미로웠던 부분과 이를 내 업무에 어떻게 적용할 수 있을지 함께 기록해 주세요.

 
 오늘은 접근성과 인터랙션에 대해서 배웠습니다. 먼저 접근성에 대한 개념은 단순히 장애인을 돕는 기능이아니고 모든 사용자를 대상으로 제품 사용이 원할하게 이용할 수 있도록 보장하는 것을 뜻합니다. 포괄적 대상, 상황적 제약포함, 배리어 프리, 보편적설계로 나뉘어지는데요. 포괄적 대상에선 고령자, 어린이, 비숙련자 등을 고려합니다. 상황적 제약에선 팔이 부러지거나 비교적 최근에 나온 흔들리는 버스에서 멀미나는 사람들을 위해서 만들어진 '차량 모션큐' 등 을 말합니다. 배리어 프리는 서비스 이용을 방해하는 물리적 기술적 장벽을 제거하는 거고 보편적인 설계는 별도의 버전없이 모두가 사용할 수 있도록 설계하는 철학이라고 합니다.

이러한 접근성을 구축하기 위해서는 5단계로 나뉩니다. 1단계는 기획 및 분석인데요. WCAG 2.1 AA등급이 있는데 이 웹접근성 목표 수준에 맞게 설정을 해야합니다. 색맹 사용자나 상황적 제약에 있는 사람들을 대상으로 고려해야되고 기존 제품의 접근성 현황을 전수 조사해야된다고 합니다. 2단계는 디자인인데요. 주로 컬러를 가장 신경을 많이 쓴다고 합니다. 텍스트와 배경의 명도 대비를 4.5:1이상으로 유지해야됩니다. 색맹 사용자를 위해 색상만으로 정보를 구분하지 않는다고 하네요. 레이아웃은 일관되게 구조를 설계해야하고 포커스 순서를 논리적으로 배치해야된다고 합니다. 멀티미디어에서는 동영상 부분에선 자막을 이미지에는 텍스트가 들어갈 공간을 마련해야 된다고 하네요. 녹내장이나 백내장이 있으신 분들을 고려한 접근성을 구축해야된다는 것입니다. 3단계로는 개발이었는데요. 시맨틱 마크업을 통해 버튼이면 <button> 이런식으로 의미에 맞는 HTML 태그를 사용해야된다고합니다. 키보드 접근성을 고려하여 마우스 없이도 키보드만으로도 모든 기능을 사용할 수 있게도 구현해야된다고 합니다. 4단계로는 테스트입니다. 맥북에 보시면 voiceover라는 기능이있는데 직접 켜고 감고 사용을 해봅니다. 키보드 탭키를 누르면 이동이 가능한지 등 사용자테스트를 통해 사용성을 검증합니다. 마지막으로 5단계는 유지보수를하며 지속적으로 모니터링을 해야된다고 합니다. 

 

그리고 제가 가장 관심있었던 부분은 인터랙션 부분이었는데요. 매번 피그마로 프로토타입을 할때 팀원들의 이해를 더 원할하게 하기위해 필요한 작업인데 매번 간단한 인터랙션만 활용해서 개인적인 아쉬움이 있었습니다. 해당 인터랙션 부분은 google material design 3를 보고 설명해주셨습니다. 제스처 foundation부분에선 double tap, tap, long press, scroll and pan, swipe, predictive back, drag, pick up and move, pinch, compund gestures 등이 있었습니다. input부분에선 마우스, 트랙패트, 피지컬 키보드 등 각각 상황에 맞는 인터랙션등이있었습니다. 그 중에서 햅틱이라는 개념이 좀 모호했지만 진동이라는 것을 알게 되었네요. 그 이후에도 컴포넌트 구성 시 정말 중요한 States 상태값들에 대해서 다시 한번 정리할 수 있었습니다. Enabled, Disabled, Hover, Focused, Dragged chip 등 제가 몰랐던 상태값들도 있어서 이번 기회에 배우게되어 다행입니다. 

 

오늘 내용은 제가 해왔던 프로젝트에서도 많이 중요하게 생각하던 부분이라 더 와닿았었습니다. google material design 3 가이드를 보고 컴포넌트, 인터랙션, 레이아웃 등 방대한 개념들을 숙지하여 타 직군과의 원할한 소통을 하도록 노력하겠습니다. 가이드를 참고를 거의 안했었는데 제가 놓치고있던 개념들이 많다는 걸 이번 강의를 통해 깨닫게 되어 많이 부족하다는 걸 깨닫게 되었습니다. 

---

https://fastcampus.info/4oKQD6b

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스