ux dev

영역을 초과하는 텍스트가 발생하면 말줄임표(...)로 더 많은 텍스트가 있음을 사용자에게 알려 주는 것은 일반적인 UX 디자인 패턴 중 하나입니다. CSS에서는 'text-elipsis'와 같은 값을 통해 지정이 가능한데, 피그마에서도 이를 구현할 수 있습니다.  텍스트가 특정 영역을 초과했을 경우에는 해당 텍스트 레이어의 모드를 'Fixed size'로 변경해 주어야 합니다. 텍스트가 컨테이너 안에 배치되는 형식을 취해야 하기 때문입니다. 너비 설정은 고정값으로 해도 되지만, 컴포넌트 안에서 이용되는 경우 'Fill Container'로 설정하여 유동적으로 너비가 설정되게 하는 것이 더 좋을 수 있습니다. 이렇게 값을 설정하면 텍스트가 자동으로 줄바꿈이 되는 상태가 된 것을 확인할 수 있습니다. 이후에..

피그마에서 컴포넌트를 생성할 때 여러개의 레이어를 한번에 컴포넌트로 생성해야 할 때가 있습니다. 보통 우클릭이나 단축키로 컴포넌트 생성이 가능하지만, 일괄로 레이어를 컴포넌트로 생성하는 방식은 우클릭이나 별도 단축키로 지원되지 않습니다. 한번에 여러 컴포넌트를 생성하는 방법은 여러 레이어를 선택한 상황에서, 상단 피그마의 컴포넌트 메뉴의 옵션 메뉴를 통해 선택이 가능합니다. 상세한 버튼의 위치와 이름은 아래 이미지를 참고해 주시기 바랍니다(피그마 상단 메뉴바 컴포넌트 메뉴 아이콘의 'Create multiple components' 메뉴 선택).

포토샵에서 피그마 파일로의 변환은 어도비에서 지원하는 공식 기능은 없습니다. 크게 두 가지 방법이 있는데, 컨버터를 이용하는 방법과 수동으로 옮기는 방법입니다. 2023년 07월 기준으로 PSD를 FIG 파일로 변환하는 작업을 시도해 본 결과, 제가 갖게 된 결론은 '불가능'이다이긴 합니다. 다음 그 방법에 대해 소개해 드리고, 결과가 어떠한가에 대한 내용도 텍스트로 간략히 덧붙여 봅니다. 포토샵 파일이 벡터 위주로 레이어 관리가 잘 된 경우에 아래 컨버팅이 유효할 수 있으나, 범용적으로 활용성이 높다고 볼 수는 없습니다. 쉽게 말해 불가능하다고 생각하는 것이 더 좋다는 결론을 다시 한 번 말씀드리며, 관련 내용 전달을 드립니다. 1. Magicul 컨버터 사용 Magicul 컨버터 이 컨버터는 유료입니..

피그마 오토 레이아웃(auto layout)의 핵심 기능 중 하나는 자식 요소들의 배치 방법을 packed(고정 여백으로 나열) 또는 space between(여백을 자동으로 나열) 등 유동적으로 변경할 수 있다는 점이며, 이 기능은 스페이싱 모드(spacing mode)라는 이름을 갖고 있습니다. CSS의 flex 레이아웃 모델을 참고한 이 기능은 여러 엘리먼트를 배치하는 과정을 자동화시켜 주기에 매우 큰 생산성 향상 효과를 선사해 줍니다. 다만 마우스만을 통해 제어하기에는 더보기 레이어팝업을 확인한 후 적용해야 한다는 점에서 다소 사용성이 떨어지는 측면이 있습니다. 피그마는 약간의 작업속도라도 단축시키기를 원하는 사용자들을 만족시키기 위해 스페이싱 모드에 대한 단축키 또한 지원을 합니다. 오토 레이아..

2022년 4월 기준으로 맥OS 버전의 피그마 데스크탑 앱에서 트랙패드를 통한 줌인, 줌아웃 인터랙션(핀치줌, Pinch zoom)이 작동하지 않는 이슈가 발견됐습니다. 해당 이슈는 연초부터 보고되기 시작됐으며, 피그마 공식 커뮤니티에에서도 화제가 됐습니다. 글을 작성하는 4월 24일 기준으로, 현재 피그마의 공식적인 답변은 다음과 같습니다. 피그마는 MacOS의 버그 현상으로 피그마 앱과는 무관하다는 의견을 냈네요. 피그마가 대처법을 강구하고 있는 사이에 불편을 겪고 있는 사용자들이 해당 스레드에 자신들이 발견한 대처법을 공유하고 있습니다. 그 중 유효해 보이는 대처법 중 일부를 공유하오니, 혹시 해당 버그로 인해서 불편을 겪고 계신 분이라면, 활용해서 효율성을 제고해 보시기 바랍니다. 알아 둬야 할 ..

피그마에서는 강제(faux) 이탤릭체 설정을 할 수 없음 포토샵이나 CSS에서 강제적으로 폰트를 기울이는 faux 방식의 bold, italic체 설정은 피그마에서 할 수 없습니다. 폰트에 포함되어 있는 것이 아니라면 강제 이탤릭체를 주는 것은 폰트를 왜곡해서 사용하는 것과 다름이 없기 때문에, 이탤릭체를 제공하는 폰트에 대해서만 기울기를 주고서 사용하는 것이 권장됩니다. 이탤릭체 폰트가 포함된 폰트를 쓰거난 skew로 개체를 변형 권장되는 방법은 이탤릭체를 제공하는 폰트 패밀리를 함께 사용하는 것입니다. 이탤릭체가 포함된 폰트인 경우 폰트 style이나 서체 종류 선택하는 상황에서 italic을 선택할 수 있습니다. 폰트가 제공되지 않는 상황에서 디자인적인 이유로 폰트에 기울기를 주어야 하는 상황인 경..

피그마 첨부 이미지의 크기 제한은 4096 픽셀 피그마는 클라우드 기반으로 구동되는 웹 기반의 프로그램입니다. 모든 작업 내용이 클라우드에 기록되기 때문에 대용량 파일을 첨부하는 것은 클라우드 서버 환경에 큰 부담을 줄 수 있습니다. 그런 이유로 피그마는 첨부 이미지 삽입 시의 이미지 크기를 제한하고 있습니다. 구체적으로 4096 픽셀이 넘어가는 이미지에 대해서는 첨부 시에 자동으로 리사이징 처리를 하여 피그마에 첨부되도록 설정이 되어 있습니다. 대형 이미지를 첨부하려고 하면 피그마가 자동으로 토스트팝업을 통한 안내를 주면서 이미지를 리사이징합니다. 이러한 제약에서 벗어나기 위해서는 대형 이미지를 짤라서 넣거나, 이미지 품질을 좀 포기하더라도 해상도를 줄여서 삽입하는 방법이 있습니다. 이러한 제약사항을 ..

피그마 데스크탑앱에서 컬러가 다르게 export 되거나, 작업 환경 상에서 다르게 표시되는 상황이 발생하곤 합니다. 이는 데스크탑앱이 사용중인 컴퓨터의 color space를 그대로 상속받아 사용하기 때문에 발생하는 문제입니다. 문제를 정확히 이해하기 위해서는 color space를 비롯한 디지털색상 관련 추가 리서치가 필요할 것으로 보입니다. 이 포스트에서는 색상이 다르게 보이는 문제해결에 우선순위를 두도록 하고, color space를 비롯한 보다 세부적인 디지털색상 관련 지식은 관련 링크를 포스트 하단에 배치하는 것으로 대체하고자 합니다. 피그마는 기본적으로 sRGB 컬러 스페이스를 사용한다고 합니다. 그렇기에 웹브라우저로 접속시에는 sRGB color space로 표시가 되며, 이는 가장 일반적인..

피그마는 기본적으로 디지털에서 픽셀 단위로 표현되는 디스플레이에 초점을 두고 제작된 디자인 프로그램입니다. 하지만 동시에 벡터 프로그램이라는 특성을 지니고 있습니다. 벡터 그래픽이 픽셀 단위로 표현될 때 이해가 필요한 부분이 바로 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀입니다. 간략하게 이 개념들에 대해 알아 보고 피그마에서 이들을 활용할 수 있는 방법에 대해 알아 보겠습니다. 피그마의 뷰 설정픽셀 그리드, 픽셀 스냅, 서브 픽셀 등의 개념과 관련된 항목들은 피그마의 '뷰' 메뉴에서 확인할 수 있습니다. 메인 인터페이스의 우측 상단에 있는 뷰의 퍼센테이지를 나타내는 드롭다운 버튼이 '뷰' 메뉴의 주요 메뉴들을 모아 놓은 버튼이기도 합니다.   픽셀 그리드줌 레벨을 일정 레벨 이상으로 확대하면 나타나는..

마우스로 디자인 요소의 값을 쉽게 변경할 수 있는 방법을 소개드리고자 합니다. 크게 드래그하는 방법과 스크롤로 변경하는 방법이 있습니다. 본 인터랙션은 대부분의 수치로 표시되는 항목들에 대해서 적용이 가능합니다. 수치를 일일이 기입하는 것에 비해서 작업 효율을 크게 높여줄 수 있는 부분이기에 피그마를 쓰시는 분들은 참고하시기 바랍니다. 1. 마우스 클릭 후 드래그로 수치 변경하기 변경하고자 하는 수치를 나타내는 항목의 아이콘 쪽에 마우스 커서를 올리면 마우스 커서가 '좌우 화살표'로 변경되는 것을 확인할 수 있습니다. 이 때 마우스를 오른쪽으로 드래그하면 값이 감소하고, 오른쪽으로 드래그하면 값이 증가합니다. 값을 더 높이거나 낮추기 위해서 화면 밖으로 마우스를 드래그하더라도 계속해서 값이 유지된 채로 ..