figma12 Figma 패럴랙스 (스크롤애니메이션, 모바일최적화, GSAP) 랜딩 페이지에 패럴랙스 효과를 넣었다가 모바일 사용자에게 "화면이 어지럽다"는 피드백을 받아본 적 있으신가요? 저는 있습니다. 브랜드 랜딩 외주에서 데스크톱과 모바일에 동일한 강도로 효과를 적용했다가 5명에게서 같은 말을 들었습니다. 그 경험이 지금 이 글을 쓰게 만든 출발점입니다.Figma 안에서 패럴랙스를 시뮬레이션한다는 것혹시 디자이너로 일하면서 "이 효과를 개발자한테 어떻게 설명하지?"라고 막막했던 순간이 있으셨나요? 패럴랙스(parallax) 효과는 특히 그렇습니다. 패럴랙스란 스크롤할 때 전경과 배경 레이어가 서로 다른 속도로 움직이면서 원근감과 공간감을 만들어 내는 기법입니다. 말로 설명하면 쉽지만, 실제 느낌을 전달하기는 어렵습니다.Figma의 스마트 애니메이트(Smart Animate) .. 2026. 5. 6. 다이얼로그 설계 (의사결정 트리, 보텀시트, 컴포넌트) 편집 화면을 모달로 띄웠더니 "옆 데이터를 봐야 하는데 가린다"는 컴플레인이 들어온 적 있으신가요. 저도 SaaS 대시보드 외주에서 똑같이 당했습니다. 그 경험이 계기가 되어 다이얼로그 설계 기준을 처음부터 다시 정리하게 됐고, 지금은 외주 5건에 같은 가이드를 재사용 중입니다.의사결정 트리: 모달을 열기 전에 먼저 물어야 할 것모달을 열기 전에 스스로에게 딱 하나만 물어보면 됩니다. "사용자가 이 작업을 하면서 뒤에 있는 화면을 참조해야 하는가?" 이 질문에 '예'가 나오면 모달은 이미 틀린 선택입니다.저는 이걸 직접 겪고 나서야 깨달았습니다. 상세 편집 화면을 모달로 구성했을 때 편집 완료율이 64%에 머물렀는데, 사이드 패널로 바꾼 후 79%까지 올랐습니다. 15%포인트 차이가 단순히 컴포넌트 하나.. 2026. 5. 6. UI 모션 디자인 (이징 함수, 타이밍, spring 물리) 디자이너라면 한 번쯤 클라이언트에게 "좀 더 부드럽게 해주세요"라는 말을 들어봤을 겁니다. 저도 5년 차 프리랜서로 일하면서 이 한마디 앞에서 막막했던 적이 한두 번이 아니었습니다. '부드러움'은 감각이 아니라 수치입니다. 이징 함수와 타이밍 구간을 제대로 이해하고 나서야 저는 그 막막함에서 벗어났습니다.이징 함수, 숫자로 부드러움을 만드는 법일반적으로 모션 디자인에서 200ms 안팎의 트랜지션이면 충분하다고 알려져 있습니다. 저도 그렇게 믿고 핀테크 모바일 앱 외주를 진행했었는데, 실제 사용자 테스트 결과는 생각과 달랐습니다.디폴트로 적용해둔 linear 200ms 트랜지션을 ease-out 280ms로 바꿨을 뿐인데, NPS(Net Promoter Score)가 6점에서 8점으로 올랐습니다. NPS란.. 2026. 5. 2. 마이크로 인터랙션 (타이밍, 스마트애니메이트, 디자인토큰) 버튼을 눌렀는데 아무 반응이 없는 것 같아서 한 번 더 누른 경험, 다들 있으실 겁니다. 저도 결제 플로우를 담당하면서 딱 그 문제를 마주했습니다. 중복 결제 이슈가 주 12건씩 접수되던 시절 얘기입니다. 원인을 파고들수록 결론은 하나였습니다. 버튼이 눌렸다는 신호를 사용자가 인지하지 못했던 것입니다. 마이크로 인터랙션은 그래서 존재합니다.왜 지금 타이밍 설계가 다시 화두인가마이크로 인터랙션(Micro Interaction)이란 사용자의 단일 행동에 반응하는 아주 작은 단위의 피드백 애니메이션을 말합니다. 좋아요 버튼이 채워지거나, 토글이 넘어가거나, FAQ 항목이 펼쳐지는 것처럼 0.1초 남짓한 움직임입니다.일반적으로 이런 작업은 구현 난이도가 낮다고 보는 시각도 있는데, 제가 직접 써봤는데 실상은 완.. 2026. 4. 25. 디자인 토큰 (토큰 구조, 네이밍 컨벤션, 자동화 파이프라인) 버튼 하나의 컬러를 바꾸는 데 이틀이 걸렸습니다. 수동으로 화면 수십 개를 뒤지고, 개발자에게 헥스코드를 일일이 붙여 넣어서 전달하던 시절 얘기입니다. 디자인 토큰을 도입하고 나서야 그게 얼마나 비효율적인 구조였는지 실감했습니다. 이 글은 그 경험을 바탕으로, 토큰 구조 설계부터 네이밍 컨벤션, 자동화 파이프라인까지 실무에서 어떻게 작동하는지 풀어봤습니다.손으로 하나씩 고치던 시절, 토큰 구조가 바꾼 것디자인 시스템을 도입하기 전 저는 프리랜서 UI/UX 디자이너로 B2B SaaS 프로젝트를 진행하고 있었습니다. 당시의 작업 방식은 단순했지만 끔찍했습니다. 디자인 수정이 생기면 Figma에서 화면별로 일일이 컬러를 찾아 바꿔야 했고, 개발자에게 넘길 때는 "#1A1A2E입니다"처럼 헥스코드를 직접 전달했.. 2026. 4. 10. 와이어프레임 실무 (Figma 활용, 로우피델리티, 프로토타입 제작) 솔직히 저는 처음 프리랜서로 일하면서 클라이언트에게 바로 고화질 목업을 보여줬다가 크게 낭패를 본 적이 있습니다. 디자인 방향이 완전히 틀어져서 처음부터 다시 작업해야 했거든요. 그때 와이어프레임의 중요성을 뼈저리게 깨달았습니다. 일반적으로 와이어프레임은 시간 낭비라고 생각하는 분들도 있는데, 제 경험상 이 단계를 건너뛰면 오히려 전체 프로젝트 기간이 두 배로 늘어났습니다. 지금부터 실무에서 와이어프레임을 어떻게 활용하는지, 특히 Figma를 사용한 구체적인 작업 과정을 공유하겠습니다.와이어프레임의 개념과 실무 적용 가치와이어프레임(Wireframe)이란 웹사이트나 앱의 레이아웃과 구조를 시각화한 기본 설계도를 의미합니다. 쉽게 말해 건축 도면처럼 버튼, 텍스트, 이미지, 내비게이션 메뉴가 화면 어디에 .. 2026. 3. 28. 이전 1 2 다음
