Figmapedia
목록으로 돌아가기
UX/UI 디자인

웹/모바일 레이아웃 스크롤 처리

피그마 오픈카톡방2026. 3. 7.

질문사항

1200px 너비의 웹 레이아웃을 두 단으로 구성했는데, 320px 모바일 레이아웃으로 만들려니 스크롤이 너무 길어집니다. 이 경우 모바일 레이아웃을 어떻게 처리하는 것이 좋을까요?

답변

웹 레이아웃을 모바일로 전환할 때 스크롤이 길어지는 문제를 해결하기 위해 다음과 같은 방법을 고려해볼 수 있습니다:
  • 콘텐츠 간소화: 웹 버전에 포함된 보조 텍스트나 불필요한 정보를 제거하여 스크롤 길이를 줄입니다.
  • 컴포넌트 재구성: 특정 섹션(예: '검은 부분'으로 언급된 영역)을 바텀 시트(Bottom Sheet)와 같은 모바일 친화적인 UI 컴포넌트로 대체하여 공간 효율성을 높입니다.
  • 레퍼런스 탐색: 유사한 기능을 제공하는 쇼핑/예약 사이트 등 모바일 환경에 최적화된 레퍼런스들을 탐색하여 효과적인 레이아웃 및 인터랙션 방식을 참고합니다.