[내배캠] UX/UI 사전캠프 데일리 미션 1주차-2

1. UI/UX 디자인 아티클 스터디

출처 : 알아두면 쓸모 있는 웹 접근성

✅ 핵심내용

1. 정보의 누락이나 왜곡을 방지하고 정보의 접근을 보장하는 것이 ‘웹 접근성’이라고 한다.
2. 웹 접근성은 모두가 평등하게 이용할 수 있는 웹 환경을 위해 꼭 필요한 요소이다.
3. 무슨 의미를 가진 구조(HTML)이며, 어떻게 보이는지(CSS), 어떤 동작(Javascript)을 하는지 어떤 환경이든, 어떤 브라우저에서든 일관된 화면을 출력하고 동작해야 한다.

✅ 얻은 인사이트, 알게 된 개념

[웹 접근성을 높이기 위해 체크해야 할 5가지]

1. 웹 표준

• 웹 표준은 W3C에서 정한 웹 구성 요소(HTML, CSS, Javascript)들의 공식 규격이다.
  엣지, 크롬, 사파리 등의 서로 다른 브라우저가 일관된 화면을 출력하거나 동작하기 위해서는 웹 표준을 지키는 것이 무엇보다도 중요하다. 웹 표준을 준수한다면 검색 엔진 최적화(SEO)에도 유리하다.

2. 시맨틱 마크업(Semantic Markup)

• 각 태그에 의미있는 이름을 붙여 작성하는 시맨틱 마크업을 통해 웹 접근성 보조 도구들이 정보의 구조나 계층을 이해할 때 문제가 없도록 해야한다.
• 웹을 개발할 때 생길 수 있는 변수나 콘텐츠를 유지∙보수할 때 생기는 여러 문제를 미리 방지할 수 있는 방법이다.

3. 대체 텍스트

• 이미지와 같은 미디어 요소에는 대체 텍스트를 사용해 눈이 보이지 않는 사람이나 이미지를 볼 수 없는 환경에 있는 사람에게 이미지의 의미나 용도를 인식할 수 있도록 해야한다. <이미지>, <인풋> 등의 태그에서는 ‘alt’ 속성을 사용한다.
• 링크로 이동할 때는 해당 링크를 기재해 목적지를 알 수 있게 한다.
• 문맥에 맞게 고려해서 간결하게 의미가 잘 전달될 수 있도록 작성하는 것이 좋다

4. 키보드 포커스(Keyboard Focus)

• 마우스를 사용하기 어려운 장애인이 키보드만으로도 콘텐츠와 기능에 접근할 수 있도록 키보드 포커스를 이용해 정보를 제공해야 한다.
• 키보드의 [tab]버튼을 이용해 웹상의 <a링크>, <인풋>, <셀렉트>, <버튼> 등과 같이 상호작용이 가능한 요소를 탐색하고 접근하는 것을 의미

5. 적절한 색상 대비

• 콘텐츠와 배경 색상 간의 명도 대비는 4:5:1 이상으로 저시력자도 콘텐츠를 이용할 수 있게 해야 한다.
• 명도 대비를 측정하기 위해서는 평가 도구를 이용하면 좋다. 디자인 시 명도 대비 확인 사이트나 피그마 플러그인(able, ally)등 접근하기 쉬운 도구를 활용해 명도 대비를 체크해야 한다.

마지막으로 접근성 평가 도구 목록을 공유한다.
W3C에서는 웹 표준 외에도 접근성을 평가할 수 있는 평가 도구 목록을 제공한다. 이곳에서 웹의 주소를 넣거나 코드 또는 html 파일을 업로드하여 웹 접근성을 준수하며 제작되었는지 확인할 수 있다.

---

2. UI/UX 디자이너 (Product Designer) JD 분석

* 참고 : 기업이 채용을 잘 하기 위한 JD 작성 9단계

[아임웹] Product Designer

[직무 소개]

• Product Designer는 목적조직인 스쿼드(Squad), 그리고 기능조직인 챕터(Chapter)에 속해있어요.
• 스쿼드는 담당 제품에 대한 오너십을 가지고 PO/엔지니어/디자이너가 하나의 팀으로 의사결정을 하는 구조에요.
• 챕터는 서로 담당하는 제품은 다를 수도 있지만, 같은 직군끼리 모여 기술적인 고민들을 함께 나눌 수 있는 구조에요.
• 서로의 핏을 맞춰보는 채용 과정을 통해 후보자께서 가지고 계신 강점과 경험을 최대한 고려하여 스쿼드(Sqaud)로 배정되고 있습니다.

[주요 업무]

• 다양한 유스 케이스(Use case)를 고려하여 사용자들이 아임웹 서비스에서 겪는 어려움 발견
• 사용자 입장에서 최적의 사용성을 고민하여 UX 설계 및 프로토타입 제작
• PO, 엔지니어와의 협업을 통해 개선된 디자인을 프로덕트에 반영

[자격 요건]

• 5년 이상의 프로덕트 디자인 경험이 있는 분
• 상황에 맞는 UX 설계 및 프로토타이핑으로 아이디어를 빠르게 구체화 시키고 커뮤니케이션하실 수 있는 분
• 기획부터 출시, 운영, 개선까지의 제품의 이터레이션 (Lifecycle) 경험이 있는 분
• 사용자 니즈를 정성적 또는 정량적 데이터를 기반으로 분석하고, 이를 근거로 문제를 정의하고 솔루션을 도출한 경험이 있는 분

[우대사항]

• B2B SaaS 혹은 프로덕트 어드민에 대한 이해가 있는 분
• 백오피스 디자인 경험이 있는 분
• 사용자 인터뷰를 통해 문제를 파악하여 고객의 문제를 해결해 본 경험이 있는 분
• 디자인 시스템에 대한 경험과 이해도를 보유하신 분

[미리캔버스] Product Designer

[직무 소개]

• 누구나 쉽고 간편하게 디자인을 만들고 커뮤니케이션 할 수 있는 서비스를 제공하고 싶어요.
• 웹브라우저만으로 디자인을 편리하게 제작할 수 있는 다양한 편집 기능을 제공하고 있어요.
• 디자인 작업 시 필요한 수많은 리소스들을 주기적으로 업데이트하고 있어요. (폰트, 템플릿, 사진, 일러스트 등)
• 기업형 고객을 위한 서비스(B2B)와 협업 기능이 추가된 유료화 서비스(PRO)를 성공적으로 런칭하였어요.
• 꾸준한 사용성 개선을 진행하며 동영상 제작, 글로벌 진출, 앱 서비스 런칭 등 새로운 서비스도 계속 만들어갈 예정이에요.
• 2023년 1분기부터, 국내 시장에서의 성장을 기반으로 세계 시장으로 진출할 예정이에요.
• 미리캔버스의 성공을 위한 제품과 경험을 설계해 주세요.

[주요 업무]

• 문제 발견-정의-개발-전달까지 미리캔버스의 프로덕트 디자인 업무를 담당합니다.
• 인터뷰, 프리토타이핑, UT 등 다양한 방법으로 고객 접점에서 사용자의 경험 개선을 위한 조사 및 분석을 담당합니다.
• PM, 데이터 분석팀과 함께 데이터 분석, UX 리서치, 시장 조사 등을 통해 문제를 발견하고 정의합니다.
• 리서치 결과 보고서, 상세 정책, UX Flow, Flow Chart, GUI 등을 작성합니다.
• PM, 개발자 등 동료와 함께 상하좌우 적극적인 소통 및 의사결정을 이끕니다.
• 프리토타이핑, 디자인씽킹, 애자일, 린스타트업 기반으로 문제를 해결합니다.
• 역량에 따라 프로덕트 디자이너의 채용, 훈련, 코칭 등 리더십 역할을 담당합니다.

[자격 요건]

• 인터뷰, 프리토타이핑, UT 등 UX 리서치 경험이 풍부하신 분
• 사용자 관점 및 비즈니스 이해를 통한 요구사항 분석, UX 설계, UI 디자인 경험이 풍부하신 분
• 복잡한 정책 및 비즈니스 로직을 정의하고 PM, 개발자와 적극적으로 커뮤니케이션해 본 경험이 풍부하신 분
• 플로우차트 등을 활용하여 논리적, 기획적 사고로 문제를 해결이 가능하신 분
• 데이터 기반의 분석적 사고 및 문제 해결 능력이 있으신 분
• HTML/CSS 및 반응형 서비스에 대한 이해가 있으신 분
• 만 2년 이상의 프로덕트 디자이너 경력

[우대사항]

• 성공했거나 급성장 중인 프로덕트, 서비스에서 관련 업무를 진행하신 분
• Figma를 통한 디자인 경험이 풍부하신 분
• 창업 혹은 스타트업에서 주도적으로 업무를 수행한 경험이 풍부하신 분
• 온라인 디자인&프레젠테이션 제작 툴에 대한 비전을 가지고 계신 분
• UX Writing 가이드라인 구축 혹은 디자인 시스템 구축 경험이 풍부하신 분
• 프로덕트 디자이너의 채용, 훈련, 코칭이 가능한 리더십 역량이 있으신 분 (경력 만 4년 이상)

공통적으로 언급하는 역량

• 리서치 결과 보고서, 상세 정책, UX Flow, Flow Chart, GUI 등을 작성
• 사용자 관점 및 비즈니스 이해를 통한 요구사항 분석, UX 설계, UI 디자인 경험이 풍부하신 분

3. UX/UI 디자이너가 하는 일은 무엇인지, 어떤 사람인지 나의 생각 한 줄 정의

• 디자인과 동시에 기획, 분석, 설계 역량을 메인으로 하는 것 같다.
• 같은 의미이나, 디자인 중점인지 분석이 중점인지에 따라 다른 것 같은데 포트폴리오를 만들때 두 가지 요소를 다양하게 활용한 작업을 많이 넣으면 좋을 것 같다.