딥 링크와 URL 탐색
Flutter 앱에서 딥 링크와 URL 기반 탐색을 처리해 외부 링크와 웹 URL 표시줄이 사용자를 올바른 화면으로 안내하도록 하는 방법을 학습해 보세요.
딥 링크와 URL 탐색은(는) CoddyKit의 무료 Flutter Mobile Development 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Flutter Mobile Development 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.
딥 링크가 중요한 이유
딥 링크를 사용하면 이메일, 알림, 브라우저 URL과 같은 외부 소스가 홈 페이지가 아닌 앱 내부의 특정 화면을 열 수 있습니다.
- 공유된 콘텐츠의 사용자 경험을 개선합니다.
- 마케팅 캠페인과 알림에 필수적입니다.
- Flutter 웹에서는 앱을 브라우저 URL 표시줄과 연결합니다.
이 기능을 깔끔하게 구현하기 위해 URL 기반 라우터를 사용합니다.
두 가지 딥 링크
일반적으로 다음 두 가지 형식이 있습니다.
- 사용자 지정 스킴 링크:
myapp://product/42 - 실제
https://URL을 사용하는 유니버설 링크 / 앱 링크
유니버설 링크는 앱이 설치되어 있지 않을 때 웹사이트로 대체 연결되므로 선호됩니다.
Router API 알아보기
Flutter의 Router API(Navigator 2.0)는 URL을 화면에 매핑합니다. go_router와 같은 패키지는 이를 사용하기 쉬운 선언적 API로 감쌉니다.
경로 패턴으로 경로를 정의하면 라우터가 들어오는 URL을 대신 분석합니다.
final router = GoRouter(
routes: [
GoRoute(path: '/', builder: (c, s) => HomeScreen()),
GoRoute(path: '/product/:id', builder: (c, s) => ProductScreen(s.pathParameters['id']!)),
],
);경로 매개변수
:id 세그먼트는 경로 매개변수입니다. 사용자가 /product/42를 열면 state.pathParameters['id']로 값을 읽습니다.
이렇게 딥 링크에 포함된 데이터를 화면으로 전달합니다.
GoRoute(
path: '/product/:id',
builder: (context, state) {
final id = state.pathParameters['id'];
return ProductScreen(productId: id!);
},
);쿼리 매개변수
선택적 값에는 쿼리 매개변수를 사용합니다. 예: /search?q=phones&sort=price
state.uri.queryParameters를 통해 값을 읽습니다.
GoRoute(
path: '/search',
builder: (context, state) {
final q = state.uri.queryParameters['q'] ?? '';
return SearchScreen(query: q);
},
);라우터 연결하기
앱이 내비게이션을 라우터에 위임하도록 MaterialApp 대신 MaterialApp.router를 사용합니다.
MaterialApp.router(
routerConfig: router,
title: 'My App',
);프로그래밍 방식으로 이동하기
코드에서 context.go()(스택 대체) 또는 context.push()(스택에 추가)를 사용해 계속 이동할 수 있습니다.
ElevatedButton(
onPressed: () => context.go('/product/42'),
child: const Text('Open product'),
);Android 구성
Android에서 실제 https 앱 링크를 사용하려면 autoVerify가 포함된 intent-filter를 AndroidManifest.xml에 추가하고 도메인에 assetlinks.json 파일을 호스팅해야 합니다.
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="myapp.com" />
</intent-filter>iOS 구성
iOS에서는 Xcode에서 Associated Domains를 구성하고 applinks:myapp.com을 추가한 다음, 도메인 루트에 apple-app-site-association 파일을 호스팅합니다.
<!-- Associated Domains entitlement -->
applinks:myapp.com알 수 없는 경로 처리하기
잘못되었거나 알 수 없는 딥 링크가 앱을 중단시키는 대신 친절한 404 화면을 표시하도록 항상 errorBuilder를 제공하세요.
GoRouter(
routes: [...],
errorBuilder: (context, state) => const NotFoundScreen(),
);리디렉션 및 보호
redirect 콜백을 사용해 경로를 보호할 수 있습니다. 예를 들어 인증되지 않은 사용자를 /profile에서 /login으로 보냅니다.
GoRouter(
redirect: (context, state) {
final loggedIn = auth.isLoggedIn;
if (!loggedIn && state.uri.path == '/profile') return '/login';
return null;
},
routes: [...],
);빠른 확인
/product/:id와 일치하는 딥 링크에서 id의 값을 어떻게 읽을까요?
복습
Flutter 앱에 딥 링크와 URL 내비게이션을 추가하는 방법을 배웠습니다.
- 사용자 지정 스킴과 유니버설 링크/앱 링크 비교
- Router API를 사용한 경로 및 쿼리 매개변수
- Android와 iOS의 네이티브 구성
- 오류 처리와 경로 보호
이제 외부 링크와 브라우저 URL 표시줄로 앱의 내비게이션을 제어할 수 있습니다.
AI 튜터와 함께 Dart을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 22
- 레슨
- 88
자주 묻는 질문
“딥 링크와 URL 탐색” 강의는 무료인가요?
네 — “딥 링크와 URL 탐색” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Flutter Mobile Development 강의 전체를 잠금 해제할 수 있습니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.
“딥 링크와 URL 탐색”에서 뭘 배우나요?
Flutter 앱에서 딥 링크와 URL 기반 탐색을 처리해 외부 링크와 웹 URL 표시줄이 사용자를 올바른 화면으로 안내하도록 하는 방법을 학습해 보세요. 브라우저에서 직접 실행하는 실습 코드로 Flutter Mobile Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Flutter Mobile Development을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Flutter Mobile Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“딥 링크와 URL 탐색” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Flutter Mobile Development 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Flutter Mobile Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 기본 페이지 탐색
- 이름이 지정된 경로 및 인수
- TabBars 및 서랍 메뉴
- 딥 링크와 URL 탐색