본문 바로가기
피그마(Figma) 오토 레이아웃 스페이싱 모드(spacing mode) 단축키로 빠르게 변경하기 (packed vs space between) 피그마 오토 레이아웃(auto layout)의 핵심 기능 중 하나는 자식 요소들의 배치 방법을 packed(고정 여백으로 나열) 또는 space between(여백을 자동으로 나열) 등 유동적으로 변경할 수 있다는 점이며, 이 기능은 스페이싱 모드(spacing mode)라는 이름을 갖고 있습니다. CSS의 flex 레이아웃 모델을 참고한 이 기능은 여러 엘리먼트를 배치하는 과정을 자동화시켜 주기에 매우 큰 생산성 향상 효과를 선사해 줍니다. 다만 마우스만을 통해 제어하기에는 더보기 레이어팝업을 확인한 후 적용해야 한다는 점에서 다소 사용성이 떨어지는 측면이 있습니다. 피그마는 약간의 작업속도라도 단축시키기를 원하는 사용자들을 만족시키기 위해 스페이싱 모드에 대한 단축키 또한 지원을 합니다. 오토 레이아..
[VSCode] 따옴표와 대괄호 등의 자동닫힘 해제하기 VSCode가 제공하는 편의성 중 하나로 따옴표(")나 대괄호([, ])등의 특수문자를 활용한 코딩 시에 내부 요소를 포함하는 요소라고 인식하여 자동으로 닫힘 구조로 자동완성이 생성됩니다. 그러나 때에 따라 이같은 설정이 오히려 불편하게 느껴질 수도 있습니다. VSCode 한정으로 자동으로 생성되는 자동닫힘 요소들을 비활성화하는 방법은 다음과 같이 매우 간단합니다.
포토샵 글리프 대체 팝업 안 뜨게 하기 (글자 팝업) 이런 끔찍한 기능을 누가 만들었는지 모르겠지만, 포토샵에서 텍스트를 입력하다 보면 자체적으로 대체 문자가 있는 글자를 인식해서 대체 문자로 변경할 것인지를 질의하는 팝업이 생성되곤 합니다. 작업 흐름이 깨지는 것도 모자라, 생성 빈도수가 매우 높기 때문에 전체 작업 효율에도 지대한 악영향을 줍니다. 환경설정의 값을 변경해 해당 팝업이 생성되는 것을 중단시킬 수 있습니다. 영어 버전의 경우 Enable Type layer glyph alternates를, 한글 버전의 경우에는 ‘문자 레이어 글리프 대체 활성화'라는 옵션을 비활성화하면 됩니다. 이런 끔찍한 기능을 만든 어도비는 반성 좀 하기 바랍니다.
피그마(Figma)에서 트랙패드 줌(핀치줌, Pinch zoom)이 안 되는 문제 2022년 4월 기준으로 맥OS 버전의 피그마 데스크탑 앱에서 트랙패드를 통한 줌인, 줌아웃 인터랙션(핀치줌, Pinch zoom)이 작동하지 않는 이슈가 발견됐습니다. 해당 이슈는 연초부터 보고되기 시작됐으며, 피그마 공식 커뮤니티에에서도 화제가 됐습니다. 글을 작성하는 4월 24일 기준으로, 현재 피그마의 공식적인 답변은 다음과 같습니다. 피그마는 MacOS의 버그 현상으로 피그마 앱과는 무관하다는 의견을 냈네요. 피그마가 대처법을 강구하고 있는 사이에 불편을 겪고 있는 사용자들이 해당 스레드에 자신들이 발견한 대처법을 공유하고 있습니다. 그 중 유효해 보이는 대처법 중 일부를 공유하오니, 혹시 해당 버그로 인해서 불편을 겪고 계신 분이라면, 활용해서 효율성을 제고해 보시기 바랍니다. 알아 둬야 할 ..
내부망 PC(오프라인)에서 최신 버전 크롬 다운로드 및 설치하기 크롬 기본 인스톨러는 인터넷에 연결되어 있을 때에만 정상설치가 됩니다. 내부망 PC와 같이 오프라인 환경에서 크롬 설치가 필요한 경우에는 크롬에서 별도로 제공하는 스탠드얼론(Stand Alone) 버전의 인스톨러를 운영체제에 맞게 선택하여 설치파일을 다운받은 후, 해당 파일을 대상 PC로 옮겨 설치하시면 됩니다. 크롬 오프라인 버전 설치 파일 사이트 오프라인 설치를 위해서는 스탠드얼론 다운로드 페이지 접속이 필요합니다. 기존 다운로드 사이트와 똑같아 보이지만, 다운로드 받을 때에 다른 파일이 받아집니다. 또한 최신버전의 크롬으로 다운로드가 진행됩니다. 해당 설치파일 다운로드 후 설치희망 PC에 설치파일을 옮겨 설치를 진행하시면 됩니다. 크롬 스탠드얼론 설치파일: https://www.google.com/..
[CSS] ::placeholder로 텍스트인풋 플레이스홀더 폰트 크기 & 색 바꾸기 텍스트인풋의 폰트 스타일을 변경하려면 이전에는 각 vendor별 prefix를 활용한 속성을 별도로 정의해 주어야 했습니다. CSS의 새로운 기능으로 ::placeholder라는 슈도선택자(pseudo selector)가 존재하며, 해당 선택자를 활용해 쉽게 텍스트필드의 스타일을 변경할 수 있습니다. 해당 선택자는 IE에서는 사용 불가하며, 대부분의 모던 브라우저에서 정상적을로 활용할 수 있습니다. 다른 브라우저와의 호환성을 추가 확보하기 위해서는 autoprefixer 등의 CSS 처리기 또는 라이브러리를 활용하면 좋을 것으로 보입니다. input::placeholder { color: red; font-size: 1.2em; font-style: italic; } 참고자료 MDN 문서 (::place..
[CSS] IE 대응을 위해 flex-basis에 width & max-width 함께 넣기 (2022년 03월 16일 수정) IE 대응 관련 내용 추가 IE11(IE: Internet Explorer, 인터넷 익스플로러)은 여전히 국내 많은 조직에서 호환성을 맞춰야 하는 브라우저입니다. 다행히도 flexbox는 부분적이지만 IE11에서 사용이 가능합니다. 일부 기능들이 사용이 불가능하거나, 깨져서 표현되지만 일부 기능의 경우 다른 CSS 속성을 함께 기재함으로써 깨지는 현상을 해소할 수도 있습니다. 이 포스트에서는 flex-basis를 사용할 때 IE11에서도 정상적으로 표현이 가능한 방법에 대해 알아보고자 합니다. 1. flex-basis: 0는 width: 100%(채울 때) 또는 width: auto(랩핑할 때)를 함께 삽입 flex-grow를 활용하여 flex-basis를 0으로 할당함..
[CSS] flex-basis로 줄바꿈 방지 flex 레이아웃 만들기 [2022-03-08 내용추가] flex의 1개 값만 입력하는 단축 형태로 속성을 부여하는 경우 flex-basis가 자동으로 0으로 할당되기 때문에 별도 속성 추가정의 없이 줄바꿈 현상을 방지할 수 있습니다. /* One value, unitless number: flex-grow flex-basis is then equal to 0. */ flex: 2; 문제상황 row 방향의 flex 박스를 생성한 상황에서, wrap을 걸어 놓고 flex 요소의 크기가 고정되어 있을 때 다른 flex 요소의 콘텐츠 길이가 길어지면 줄바꿈이 자동으로 생성됩니다. wrap을 걸지 않으면 줄바꿈이 생기지 않겠지만 그런 경우면 고정시켜 놨던 flex 요소의 크기가 변합니다. 크기가 고정된 flex 요소의 크기를 유지하되 ..