ux dev

접근성 준수를 위해 스크린리더용 텍스트 엘리먼트를 별도로 만드는 방법에 대해 소개하고자 합니다. 테일윈드 등 대부분 UI 프레임워크는 기본적으로 내장하고 있는 내용이지만, 별도의 코드를 통해 구현하고 싶은 경우 활용할 수 있습니다.HTML이 텍스트는 스크린 리더용입니다.CSS.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}설명position: absolute;: 요소를 절대 위치시켜 문서 흐름에서 제거합니다.width: 1px; 및 height: 1px;: 요소를 거의 눈에 띄지 않는 ..

웹 접근성 준수를 위해서는 동영상 컨텐츠에 대한 자막 제공이 필수적으로 이뤄져야 합니다. 수기로 자막을 쓰는 것도 방법일 수는 있지만, 시간이 많이 걸리는 작업이기에 자동으로 자막을 생성해 주는 방법을 알아 보고자 합니다.유튜브를 통해 한글 자막 자동으로 생성하기자막을 생성해 주는 프로그램은 여러가지 있지만, 대부분 영어 중심의 텍스트 추출에 초점을 두고, 한글과 같은 언어와는 호환성이 떨어지는 편입니다. 한글 언어에 대한 자동 자막 추출을 지원하는 프로그램 중 가장 좋은 것은 유튜브 스튜디오입니다. 다음은 유튜브 스튜디오를 통해 한글 영상의 자막을 추출하는 방법을 설명하고자 합니다.영상을 업로드한 후 자막 생성 후 다운로드방법은 간단합니다. 우선 당연하게도 유튜브 계정이 있어야 하며, 유튜브 프로필 버..

2. 자막 제공멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.1) 멀티미디어자막 또는 대본 또는 수화를 제공한다.2) 사용자가 업로드하는 멀티미디어대체 콘텐츠를 제공할 수 있도록 안내하고 툴을 제공한다.3) 음성이 나오지 않는 멀티미디어청각적으로도 인식이 가능하도록 원고 등의 대체 콘텐츠를 제공한다.

사용자 JavaScript 및 CSS 확장 프로그램으로 코드 커스텀웹 페이지에서 맞춤 JavaScript 및 CSS를 통해 브라우징 경험을 향상시키고 싶으신가요? "User JavaScript and CSS" Chrome 확장 프로그램은 광범위한 맞춤 설정 기능을 제공하는 매우 유용한 도구입니다. 이 다재다능한 확장 프로그램과 그 이점에 대해 소개합니다.UI 개발을 하다 보면 원본 소스가 없더라도 기존에 개발된 웹페이지의 JS와 CSS를 변경해야 하는 상황이 발생합니다. 관련하여 많은 크롬 확장 프로그램들이 있지만, 그 중에 User Javascript & CSS라는 프로그램을 소개 드립니다. 개인적으로 여지껏 나왔던 도구 중에 가장 높은 완성도와 활용도를 지니고 있다고 하며, 원한다면 클라우드 저장소 ..

적절한 대체 텍스트 제공텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 합니다.1. alt 제공, , 의 alt에는 적절한 대체 텍스트를 제공해야 합니다.오류 사례해결 방안2. IR 기법특수문자, 기호 포함, 조직도, 차트 등 복잡한 콘텐츠의 경우 숨김 처리로 대체 텍스트를 제공해야 합니다.오류 사례해결 방안메뉴오류 사례해결 방안이미지형3. 의미 없는 이미지장식 또는 꾸밈 목적 등의 의미 없는 이미지는 대체 텍스트를 제공하지 않아야 합니다.오류 사례해결 방안4. 이모티콘 이미지이모티콘의 의미를 파악할 수 있도록 적절한 대체 텍스트를 제공해야 합니다.오류 사례해결 방안5. QR코드 이미지해당 링크를 알 수 있도록 대체 텍스트를 제공해야 합니다.오류 사례해결 방안6. 썸네일..

포토샵을 통해서 보통 진행하지만, 비트맵 이미지의 특정 영역을 제거하여 일명 누끼 따기라고 불리우는 특정 인물이나 사물만 남기고 나머지를 투명처리하는 작업은 꽤나 손이 많이 가는 일입니다. 포토샵을 켜면 더 정교하게 될 수도 있지만, 어느정도 간단한 수준에서의 배경 제거는 피그마의 플러그인을 통해서도 가능합니다. 특히 관련하여 무료이면서도 좋은 품질을 지니고 있는 플러그인도 많기 때문에 활용을 고려해 보는 것도 업무 효율성 차원에서 나쁘지 않을 것으로 보입니다. 소개하고자 하는 플러그인은 배경 제거 플러그인 중 신뢰도가 높은 편에 속하는 서비스로서 '아이콘8 백그라운드 리무버'라는 이름의 플러그인입니다. 아이콘8은 각종 디자인 리소스를 제공하는 서비스로도 유명한데, 피그마용 배경 제거 플러그인도 무료로 ..

1. 신기술로 기술 향상하기AI 및 머신 러닝 기본 학습: AI와 ML이 UXUI 디자인에 어떻게 사용되는지 이해하도록 설명, 튜토리얼 및 리소스를 제공할 수 있습니다.업계 트렌드 업데이트 유지: 최신 기사, 연구 논문 및 UXUI의 신기술에 대한 뉴스를 큐레이팅하고 요약해드릴 수 있습니다.2. GPT 및 AI 도구 활용콘텐츠 생성: 아이디어 생성, 블로그 게시물 작성, 포트폴리오 설명 개선 및 프로젝트의 매력적인 카피 작성에 도움을 줄 수 있습니다.코드 지원: CSS, HTML, JavaScript 코드 조각 작성 및 디버깅을 지원하고, 빠른 프로토타이핑 도구 및 방법에 대한 지침을 제공할 수 있습니다.3. 강력한 온라인 존재 구축포트폴리오 업데이트: 포트폴리오 구조화, 상세한 사례 연구 작성 및 디자..

여러 클래스를 요소에 추가하려면 classList.add 메서드에 여러 인수를 전달하면 됩니다. 각 인수는 추가하려는 클래스를 나타냅니다. 다음은 그 방법입니다:기본 방법Element.classList.add('container', 'class1', 'class2', 'class3');배열과 apply 활용여러 인수와 함께 classList.add를 사용하여 여러 클래스를 직접 추가합니다.apply 메서드를 사용하여 배열에서 클래스를 추가합니다.스프레드 연산자(...)를 사용하여 배열 요소를 개별 인수로 펼쳐 classList.add에 전달합니다.const classes = ['container', 'class1', 'class2', 'class3'];Element.classList.add.apply(t..

최근 몇 년간 많은 사람들이 웹사이트 제작에 뛰어들면서 손쉽게 웹사이트를 만들 수 있는 플랫폼에 대한 수요가 급증하고 있습니다. 이러한 수요를 충족시키기 위해 다양한 웹사이트 빌더들이 등장했으며, 그 중에서도 한국의 아임웹은 비교적 인지도가 높은 편입니다. 그러나 아임웹을 사용해본 사용자들 사이에서는 그 장점만큼이나 단점에 대한 불만이 꾸준히 제기되고 있습니다. 이번 포스트에서는 아임웹의 장단점을 분석하고, 왜 아임웹이 장기적이고 확장 가능한 웹사이트 구축에는 적합하지 않은지에 대해 알아보겠습니다. 뛰어난 디자인 품질과 손쉬운 웹사이트 개설 아임웹의 가장 큰 장점 중 하나는 쉽게 웹사이트를 개설할 수 있다는 점입니다. 웹사이트 제작 경험이 전무한 사람도 직관적인 인터페이스를 통해 몇 번의 클릭만으로 멋진..

See the Pen Simple Scroll Navigator by siimplelab (@siimplelab) on CodePen.코드 설명DOMContentLoaded 이벤트:DOMContentLoaded 이벤트는 초기 HTML 문서가 완전히 로드되고 파싱되었을 때 발생하며, 스타일 시트, 이미지, 하위 프레임의 로드를 기다리지 않습니다.document.addEventListener("DOMContentLoaded", ...)에 전달된 익명 함수는 DOM이 완전히 로드된 후에 내부 코드를 실행하도록 보장합니다.addClassOnScrollToSection 함수:이 함수는 특정 섹션이 보일 때 대상 요소에 클래스를 추가합니다.매개변수:sectionId: 모니터링할 섹션의 ID입니다.classNa..