피그마10 풀투리프레시 디자인 (트리거 거리, 햅틱 피드백, 결과 카피) 트리거 거리(Pull Distance)를 80px에서 60px로 줄였더니 풀투리프레시 사용률이 11%에서 27%로 뛰었습니다. 처음 이 수치를 확인했을 때 솔직히 반신반의했습니다. 고작 20px 차이가 이렇게 큰 행동 변화를 만든다는 게 직관적으로 와닿지 않았거든요. 그런데 반복 검증할수록 결과는 같았고, 이후 외주 4건에서 같은 파라미터를 표준화하면서 이 수치가 단순한 우연이 아니라는 확신이 생겼습니다.트리거 거리풀투리프레시에서 가장 먼저 건드려야 할 건 트리거 거리입니다. 트리거 거리(Pull Distance)란 사용자가 화면을 아래로 당겼을 때 리프레시가 실제로 실행되기 시작하는 임계 지점까지의 픽셀 거리를 말합니다. 이 거리가 너무 길면 사용자가 "아, 이게 되는 기능이구나"라는 걸 인지하기 전에.. 2026. 6. 5. 칩 컴포넌트 설계 (변형 구조, 단축 옵션, 도메인 최적화) 예약 시스템 외주를 맡았을 때 처음 맞닥뜨린 문제는 캘린더 입력이 아니었습니다. 정작 발목을 잡은 건 칩 컴포넌트였습니다. 첫 사용자 성공률이 64%에 머물렀고, 원인을 파고들수록 칩 설계 방식이 UX 전체에 얼마나 깊이 연결돼 있는지 실감했습니다. 컴포넌트 하나를 어떻게 만드느냐가 결국 전환율 숫자를 바꿉니다.칩 컴포넌트의 변형 구조, 왜 셋으로 나뉘는가처음 피그마에서 칩 컴포넌트를 설계할 때 저도 의아했던 부분이 있습니다. 액션 칩(Action Chip), 초이스 칩(Choice Chip), 필터 칩(Filter Chip)이 시각적으로는 동일한 형태를 가지는데 왜 굳이 세 가지로 분리하느냐는 것이었습니다.여기서 칩 컴포넌트란 사용자가 정보를 입력하거나, 선택을 내리거나, 콘텐츠를 필터링하거나, 특정 .. 2026. 6. 4. 피그마 3D 캐러셀 (스마트 애니메이트, 자동재생, 마스킹) 직전 외주에서 메인 비주얼 캐러셀의 자동재생을 끈 것만으로 CTA 클릭률이 14%에서 22%로 뛰었습니다. 솔직히 이건 저도 예상 밖이었습니다. 그 경험 이후로 캐러셀을 설계할 때 완전히 다른 기준으로 접근하게 됐고, 피그마에서 3D 캐러셀을 구현하는 방법도 다시 들여다보게 됐습니다.스마트 애니메이트로 3D 전환 효과 만들기피그마에서 3D 캐러셀의 핵심은 스마트 애니메이트(Smart Animate)입니다. 스마트 애니메이트란 두 프레임 사이에서 동일한 레이어 이름을 가진 요소를 자동으로 감지해 위치·크기·불투명도 변화를 부드럽게 연결해주는 피그마 전용 트랜지션 방식입니다. 일반 디졸브나 슬라이드 전환과는 달리, 요소 하나하나가 마치 실제로 이동하는 것처럼 보이기 때문에 3D 회전 효과를 낼 때 특히 효과.. 2026. 5. 3. 피그마 프로토타이핑 (온클릭, 오버레이, 스마트애니메이트) 기획서를 열심히 써서 넘겼는데 회의실에서 돌아오는 말이 "이게 정확히 어떻게 동작하는 건가요?"였던 경험, 한 번쯤 있으실 겁니다. 저도 그랬습니다. 텍스트로 설명하는 데 한계를 느끼고 피그마 프로토타이핑을 제대로 파고들기 시작했는데, 막상 써보니 알려진 것과 다른 점도 있었고, 예상보다 강력한 부분도 있었습니다.말로 설명하던 시절과 프로토타입이 바꾼 것피그마 프로토타이핑은 디자인한 화면을 실제로 작동하는 것처럼 인터랙티브하게 연결해 테스트할 수 있는 기능입니다. UI 설계 단계에서 개발 전에 이해관계자와 소통하거나 사용성을 검증하는 데 활용됩니다.일반적으로 프로토타이핑 툴은 복잡하고 진입 장벽이 높다고 알려져 있지만, 제가 직접 써봤는데 피그마는 그렇지 않았습니다. 프로토타입 모드에서 요소를 선택하고 .. 2026. 4. 15. 피그마 오토 레이아웃 (패딩, Fill Container, 반응형) 텍스트 하나 바꿨을 뿐인데, 버튼 크기가 틀어지고 카드 레이아웃이 무너진 경험이 있으신가요? 저는 그 상황을 수십 번 반복하다가 오토 레이아웃을 제대로 배웠습니다. 배우고 나서 든 첫 번째 생각은 "왜 이걸 이제야 알았지"였습니다. 피그마 오토 레이아웃이 실무에서 어떻게 작동하는지, 직접 겪어보니 무엇이 달라지는지 솔직하게 풀어보겠습니다.패딩과 갭, 이 두 가지가 레이아웃의 전부다오토 레이아웃(Auto Layout)을 처음 켰을 때 패널에 낯선 숫자들이 쭉 나열돼 있어서 당황했던 기억이 납니다. 그런데 막상 뜯어보면 개념은 단순합니다. 오토 레이아웃의 핵심을 구성하는 요소는 딱 두 가지입니다.첫 번째는 패딩(Padding)입니다. 패딩이란 프레임의 테두리와 내부 콘텐츠 사이의 여백을 말합니다. 상하좌우 .. 2026. 4. 13. 피그마 Dev Mode (핸드오프, 인스펙트 패널, 협업 효율) 디자이너가 개발자에게 '이 간격 몇 픽셀이에요?' 같은 질문을 받는 게 당연한 일이라고 생각하셨나요? 저도 한때 그랬습니다. 그런데 Figma Dev Mode를 쓰고 나서 그 질문이 거의 사라졌습니다. 핸드오프 방식을 바꾸는 것만으로 피드백 루프가 2주에서 3일로 줄었고, 하루에 서너 번씩 오던 슬랙 메시지도 뚝 끊겼습니다.핸드오프, 문서로 하던 시절이 있었습니다핸드오프(Handoff)란 완성된 디자인 시안을 개발자에게 넘기는 과정을 의미합니다. 스포츠에서 공을 동료에게 전달하는 행위에서 유래한 용어로, 소프트웨어 개발에서는 디자이너가 개발자에게 구현 가능한 형태의 정보를 전달하는 일 전체를 뜻합니다.저는 프리랜서 초기에 Zeplin을 사용하면서 이 과정을 손으로 직접 했습니다. 화면마다 색상 값, 폰트.. 2026. 4. 11. 이전 1 2 다음
