어도비 XD: 모바일 터치 스크롤 구현 3가지 팁 (UX/UI 디자인)

어도비XD 터치스크롤 구현, 특히 모바일 프로토타입에선 진짜 필수죠. 스크롤이 자연스럽게 안 되면 사용자가 UX 테스트에서 혼란을 느끼게 돼요.

이 글에서는 XD에서 모바일 터치 기반의 세로 스크롤을 자연스럽게 구현하는 3가지 꿀팁을 알려드릴게요. 실제 UX/UI 디자이너들이 자주 쓰는 방법만 모았어요.

어도비 XD: 모바일 터치 스크롤 구현 3가지 팁 (UX/UI 디자인)

XD 스크롤 설정 3줄 요약

• 아트보드보다 긴 콘텐츠로 스크롤 영역 생성
• Viewport Height 설정 후 “스크롤 가능” 체크
• 고정된 요소는 'Fixed Position' 옵션으로 고정

XD에서 스크롤이 중요한 이유

모바일 UX는 스크롤 없이 설명할 수 없어요. 특히 피드, 리스트, 장바구니, 상세페이지 같은 레이아웃은 대부분 세로 스크롤 기반이에요. 어도비 XD에서 스크롤 인터랙션을 재현하지 않으면 실제 사용자 흐름 테스트가 무의미해질 수 있어요.

모바일 기준 Viewport 설정

XD에서 아트보드를 아이폰 13 기준으로 만든다면, 기본 뷰포트 높이는 약 844px이에요. 하지만 스크롤이 필요한 화면은 이보다 훨씬 길게 구성되죠. 콘텐츠가 1500px 이상인 경우가 대부분이에요.

스크롤 영역을 만들려면?

그냥 아트보드 늘려서는 안 되고, Viewport Height 옵션을 정확히 설정해야 스크롤 가능하게 돼요. 'Design Mode → Artboard 선택 → Viewport Height 입력' 순으로 설정합니다.

터치처럼 자연스러운 스크롤

XD는 데스크탑 프로그램이지만, 실제 모바일 터치감을 꽤 잘 구현해요. 미리보기(PREVIEW)에서 마우스로 스크롤 시켜보면 ‘터치’하는 듯한 느낌으로 움직이죠. 이게 바로 프로토타입 테스트에서 중요한 포인트예요.

XD 스크롤 구현 실패 예

많은 초보 디자이너들이 ‘왜 스크롤이 안 되지?’라고 물어요. 그건 대부분 아래 문제 때문이에요.

아트보드 높이만 늘림

콘텐츠는 길게 구성했지만, Viewport 설정을 하지 않으면 XD는 전체 콘텐츠를 하나의 프레임으로 간주해서 스크롤이 안 생겨요. Viewport Height를 800~1000px 내외로 반드시 고정해야 해요.

그룹화를 안 했거나 잘못함

스크롤 영역 안에 있는 요소들이 그룹화되지 않으면, 스크롤 할 때 레이아웃이 깨지거나 애니메이션이 꼬일 수 있어요. 반드시 스크롤 영역만 따로 그룹핑 해두는 게 좋아요.

Fixed Position 미설정

상단바, 하단 버튼처럼 스크롤돼도 화면에 고정돼야 할 UI가 있다면, Fixed Position When Scrolling 옵션을 활성화해야 해요. 안 그러면 UI가 스크롤과 함께 움직여 UX가 망가져요.

XD 스크롤 구현 vs 미구현 비교

항목	스크롤 구현	스크롤 미구현
사용자 테스트	자연스럽고 몰입도 높음	터치 UX 재현 어려움
UI 위치 테스트	Fixed UI 검증 가능	하단 버튼 테스트 불가
클라이언트 피드백	현실감 있어 설득력↑	동작 예상 어려움

스크롤이 안 되는 XD 프로토타입은, 말하자면 모형 핸드폰 같아요. 겉은 그럴싸한데 손에 쥐면 ‘가짜’ 느낌이 나죠. 완성도를 높이려면 반드시 스크롤 UX 구현이 필요해요.

 

CSS 가상 요소 선택자 (::before, ::after) 사용법: 10분 완벽 마스터 가이드

CSS 가상 요소 선택자 (::before, ::after) 사용법: 10분 완벽 마스터 가이드

스크롤 구현 예제 3가지

XD에서 자주 쓰이는 터치 스크롤 UI 예제를 실제 구성 흐름대로 소개해볼게요. 실무에서 가장 많이 쓰는 조합 중심으로 구성했습니다.

예시 1. 쇼핑몰 상품 리스트

상품 목록이 길게 나열되는 화면에서는 뷰포트보다 콘텐츠 높이를 길게 설정한 후, 전체를 그룹으로 묶고 Viewport Height를 800~900px 정도로 설정해요. 상단 헤더는 별도로 만들고 ‘Fixed’ 설정으로 고정시키면 UX 완성도 급상승!

예시 2. 상세페이지 구성

제품 설명이나 후기, 이미지 등 다양한 요소가 쌓이는 상세페이지에서는 각 섹션마다 고정 간격을 설정하고, 스크롤 흐름이 부드럽도록 구성해요. 이때 섹션 간 60px 이상 여백을 주면 실제 모바일처럼 자연스럽게 보여요.

예시 3. 채팅 인터페이스

채팅 UI는 하단 입력창이 항상 고정돼 있어야 해요. 메시지는 스크롤되지만 입력창은 따라가지 않도록 ‘Fixed Position’ 체크 필수입니다. 미리보기에서 테스트하면서 margin-bottom이나 padding도 꼭 확인해야 해요.

실무 디자이너들이 자주 하는 실수

1. Scroll Group 설정 안함

2025년 기준 최신 XD에서는 Scroll Group 설정을 직접 해야 할 때가 있어요. 콘텐츠가 많은 영역은 반드시 해당 그룹을 만들어줘야 예상대로 동작합니다.

2. Scroll Direction 오류

가로 스크롤인데 세로로 설정하거나, 반대로 세팅하는 경우도 많아요. ‘Vertical’과 ‘Horizontal’은 확실히 구분해서 적용해야 해요.

3. Fixed 요소 위치가 어긋남

스티키 헤더, 고정 버튼이 화면을 기준으로 위치하는 게 아니라 그룹 안의 상대 위치로 설정돼버리는 경우도 많아요. 이럴 땐 ‘Fixed’ 체크 후 다시 위치를 눈으로 조정해주면 돼요.

4. Scroll Preview 안 되는 현상

XD 미리보기에서 스크롤이 작동하지 않으면 대개 그룹화 또는 Viewport Height 설정을 빼먹은 경우예요. 아트보드 선택 후 확인 필수!

5. Preview 모드와 Share 링크 차이

내 PC에선 잘 되는데 공유하면 동작이 이상한 경우? XD 미리보기와 Share 링크 사이의 동작 차이일 수 있어요. 특히 마우스 휠 기반 스크롤은 Share 링크에서는 반응이 늦을 수 있으니 검수할 땐 항상 Share로 확인하세요.

터치 UX 완성도를 높이는 포인트

• 화면 전환 없이도 긴 페이지 구성
• 플로팅 버튼, 고정 메뉴와 함께 구현
• 피드백 테스트 시 몰입감 확보
• 실제 디바이스처럼 Preview 경험 가능

CSS white-space: div 줄바꿈 방지 완벽 가이드 7단계 (코드 포함)

CSS white-space: div 줄바꿈 방지 완벽 가이드 7단계 (코드 포함)

FAQ 5가지

Q. XD에서 스크롤이 안 되는 이유는?

아트보드 Viewport Height가 설정되지 않았거나, 콘텐츠 그룹이 Scroll 설정 안 되어 있어서예요. 이 두 가지를 꼭 확인하세요.

Q. 가로 스크롤도 가능한가요?

가능합니다. Scroll Group → Horizontal을 선택하면 가로 스크롤도 구현돼요. 슬라이더나 태그 리스트 UI 등에 좋아요.

Q. 고정된 버튼이 스크롤에 따라 움직여요

‘Fixed Position When Scrolling’ 옵션을 체크하지 않아서 그래요. 해당 요소를 선택하고 오른쪽 패널에서 설정해 주세요.

Q. 모바일에서만 자연스러운가요?

데스크탑에서도 Preview 가능하지만, 모바일 디바이스에서 테스트하면 터치 감각이 더 자연스럽게 느껴져요. Share 링크로 스마트폰에서 열어보세요.

Q. 뷰포트와 콘텐츠 높이는 다르게 설정해야 하나요?

네. 예: Viewport는 844px, 콘텐츠는 1600px 정도로 설정해야 스크롤이 생깁니다. 아트보드 전체 길이만 늘려선 작동 안 해요.