본문 바로가기

UX 개발

[MacOS] 맥OS 스테이지 매니저(Stage Manager) 애니메이션 없애기 스테이지 매니저 기능은 유용하게 맥의 어플리케이션을 관리하고, 멀티태스킹을 진행할 수 있게 해 줍니다. 다만 애플리케이션 전환 시 애니메이션이 다소 시각적으로 혼잡하게 느껴질 때가 있습니다. 그런 경우 애니메이션을 제거함으로써, 불편을 최소화할 수 있습니다. 설정 방법은 ‘시스템 환경설정 > 접근성 > 디스플레이 > 애니메이션 축소’ 옵션을 설정하면 됩니다. 다만 이 경우 스테이지 매니저 뿐 아니라 맥OS 전체 및 ‘애니메이션 최소화’ 접근성 환경을 지원하는 어플리케이션 전부에 적용되므로 유의가 필요합니다. 스테이지 매니저의 애니메이션만 제거하는 방법은 2023년 11월 기준으로 없습니다.
[접근성] 이미지 대체텍스트(Alt Text) 노가다 없이 자동 입력하기 접근성 대응을 위한 웹 개발 중에는 대체텍스트 기입의 필요로 인한 시간 소요가 많아질 때가 있습니다. 크롬의 '구글 렌즈'를 통해 해당 업무를 부분적으로 자동화할 수 있는 방법을 소개합니다. 구글 렌즈는 모바일 앱으로 이용되는 경우가 많은데, 데스크톱 환경에서도 크롬을 활용해서 해당 기능의 이용이 가능합니다. 사용법은 웹상의 이미지를 '오른쪽 버튼 클릭'하여 '컨텍스트 메뉴'를 활성화한 후, 'Search Image with Google(구글 이미지 검색)' 기능을 실행하면 됩니다. 크롬 버전에 따라 해당 기능이 비활성화되어 있을 수 있는데 2023년 10월 기준 최신 버전 크롬에서는 정상적으로 작동하는 것을 확인했습니다. 그럼 아래와 같이 크롬 우측에 구글렌즈 패널이 추가된 것을 확인할 수 있습니다. ..
플렉스박스에 말 줄임표(text-overflow: ellipsis) 삽입하기 플렉스박스로 구성된 텍스트 콘테이너는 기본적으로 'text-overflow: ellipisis'로 구현되는 '말 줄임표'를 넣을 수가 없습니다. 하지만 플렉스박스의 하위 자식 요소를 텍스트를 담는 컨테이너로 활용하는 경우 '말 줄임표'를 삽입할 수 있습니다. 플렉스박스가 갖는 기능적 특성으로 보이며, 말 줄임표의 활용이 필요한 경우에는 자식 요소를 텍스트 컨테이너로 활용하는 방식으로 코드를 구성하시기 바랍니다. See the Pen Text ellipsis with Flexbox by siimplelab (@siimplelab) on CodePen.
특정 비율 유지하는 div 만들기 (padding 활용, IE11 호환) CSS 모던 스펙 중 하나인 'aspect ratio'는 특정 엘리먼트의 비율을 특정 값으로 유지할 수 있게 해 줍니다. 다만 IE11 등 하위 버전의 브라우저에서는 사용할 수 없는 단점이 있습니다. 'padding'을 활용해 이와 비슷한 비율을 유지하는 기능을 구현할 수 있습니다. 이는 IE11 등의 하위 브라우저에서도 구현이 가능합니다. CSS 랜더링 방식을 일종의 해킹하여 구현한 이 방식은 하위 브라우저를 호환하기 위한 작업 외에도 필요한 경우 특정 비율을 유지하도록 하는 스타일을 구현하는 용도로 활용이 가능합니다. 비율 유지가 주로 많이 쓰이는 용도는 썸네일의 비율을 유지시키는 데에 사용됩니다. 이 때에는 또 하나의 모던 스펙 중 하나인 'object-fit'을 하위 브라우저 대응하여 구현하는 데..
forEach() IE 11 호환 오류 문제 대응하기 ‘forEach()’는 IE 11에 ‘fully supported’ 되는 메소드로 기재가 되어 있습니다. 다만 ‘querySelectorAll’로 여러 요소를 선택하는 경우 정상적으로 작동을 하지 않습니다. 그 이유는 ‘querySelectorAll’은 ‘NodeList’를 반환하며, ES5에서 ‘forEach()’는 ‘Array’에만 작동하도록 되어 있기 때문입니다. ‘NodeList’는 ES6부터 적용 대상으로 포함이 됩니다. 이 이슈는 ‘babel’로 ‘IE 11’을 타겟으로 잡고 트랜스파일링을 진행해도 수정이 되지 않습니다. ‘NodeList’ 등 배열이 아닌 요소를 대상으로 ‘forEach()’를 적용하기 위해서는 해당 요소들을 배열화하여 활용해 줘야 합니다. var alltable = docu..
웹페이지에서 focus(포커스)가 어디에 있는지 확인하기 tabindex 를 활용하거나, 포커스의 이동 경로를 설정하는 등의 스크립트를 실행한 경우, 현재 포커스가 어디에 가 있는지 확인하기가 어려울 때가 있습니다. 이럴 때에 브라우저 콘솔창을 통해 간단하게 현재 포커스가 어디 있는지 확인할 수 있습니다. 크롬 또는 개발자 도구를 지원하는 브라우저를 실행한 후 개발자 도구에 들어가 콘솔창에 다음과 커맨드를 통해 현재 포커스의 위치 확인이 가능합니다. console.log(document.activeElement); 포커스의 위치 확인 용도 뿐 아니라 필요한 경우 DOM 또는 스타일을 제어하는 자바스크립트 코드 생성 시에도 활용이 될 수 있을 것으로 보입니다.
tabindex를 ‘0’과 ‘1’만 사용해야 하는 이유와 관련 이슈 탭인덱스는 포커서블하지 않은 요소에 포커스가 갈 수 있도록 해 주거나, 포커서블한 요소에 포커스가 가지 않도록 하는 역할을 합니다. 다만 해당 요소는 스크린리딩을 하는 시스템에 따라 잘못된 순서의 탭 포커싱을 유발할 수 있으므로, 가급적 사용을 지양하는 것이 좋습니다. 또한 사용을 하더라도 ‘0’, ‘1’만 사용되는 것이 권장됨을 MDN 문서를 통해 확인할 수 있습니다. tabIndex 순서 변경의 이슈의 경우, 첫번째 포커스를 받도록 하는 요소가 아닌 요소를 대상으로 첫번째 포커스를 tabIndex를 통해 할당할 경우 정상적으로 포커스가 할당되지 않는 이슈가 있습니다. 해당 상황은 하단 코드 예제를 통해 확인할 수 있습니다. 스펙상으로는 1 이상의 숫자를 순차적으로 할당하여 포커스가 이동하는 순서를 정..
CSS Flex 요소에 text ellipsis (말 줄임표) 적용하기 텍스트가 컨테이너 영역을 초과했을 때 스크롤이 생성되거나 영역을 뚫고 나가지 않고, 말 줄임표로 생략처리할 수 있는 CSS 속성은 text-overflow: ellipsis 입니다. overflow: hidden , white-space: nowrap 을 함께 쓰면 특정 텍스트 포함 요소가 콘테이너 박스 영역을 초과할 정도의 길이를 가진 경우에 자주 활용이 되며 특히 한국 웹사이트에서 자주 활용됩니다. 다만 flexbox 레이아웃모델을 통해 구현된 텍스트 요소의 경우 일반 block 이나 inline 레이아웃모델과 달리 말 줄임표 삽입이, 같은 방법으로 적용되지 않습니다. flex 요소에 말 줄임표를 넣기 위해서는, 약간의 추가적인 CSS 조정이 필요합니다. 부모 flex 요소 자체에는 말 줄임표를 넣을..
외주/과외 문의

티스토리툴바