웹디자인2 Figma 패럴랙스 (스크롤애니메이션, 모바일최적화, GSAP) 랜딩 페이지에 패럴랙스 효과를 넣었다가 모바일 사용자에게 "화면이 어지럽다"는 피드백을 받아본 적 있으신가요? 저는 있습니다. 브랜드 랜딩 외주에서 데스크톱과 모바일에 동일한 강도로 효과를 적용했다가 5명에게서 같은 말을 들었습니다. 그 경험이 지금 이 글을 쓰게 만든 출발점입니다.Figma 안에서 패럴랙스를 시뮬레이션한다는 것혹시 디자이너로 일하면서 "이 효과를 개발자한테 어떻게 설명하지?"라고 막막했던 순간이 있으셨나요? 패럴랙스(parallax) 효과는 특히 그렇습니다. 패럴랙스란 스크롤할 때 전경과 배경 레이어가 서로 다른 속도로 움직이면서 원근감과 공간감을 만들어 내는 기법입니다. 말로 설명하면 쉽지만, 실제 느낌을 전달하기는 어렵습니다.Figma의 스마트 애니메이트(Smart Animate) .. 2026. 5. 6. 반응형 디자인 (브레이크포인트, 모바일 퍼스트, 하이브리드) 반응형 디자인은 "그냥 화면 크기에 맞게 줄이는 것"이 아닙니다. 브레이크포인트를 어디에 두느냐에 따라 같은 레이아웃이 완성작이 되기도 하고, 쓸 수 없는 화면이 되기도 합니다. 저도 처음엔 이 차이를 몰랐고, B2B SaaS 대시보드 프로젝트에서 혹독하게 배웠습니다.브레이크포인트를 잘못 잡으면 생기는 일일반적으로 반응형 디자인은 "퍼센트로 유동적으로 줄어드는 것"이라고 알려져 있습니다. 맞는 말이지만 절반만 맞습니다. 제 경험상 이건 좀 다릅니다. 퍼센트 기반으로 비율을 유지하며 축소되다가, 특정 해상도 구간에 진입하는 순간 레이아웃 자체가 전환되어야 합니다. 그 전환점이 바로 브레이크포인트(Breakpoint)입니다. 여기서 브레이크포인트란 화면 너비가 특정 수치에 도달했을 때 CSS 미디어 쿼리(M.. 2026. 4. 11. 이전 1 다음
