익스터널 링크(External Link)

1. 정의(핵심 개념)

익스터널 링크(External Link)는 사용자가 현재 보고 있는 앱 또는 도메인의 내부 페이지가 아니라 다른 도메인/외부 자원(웹 페이지, 외부 서비스, 외부 앱 등) 으로 이동하도록 하는 하이퍼링크를 말한다.

모바일 컨텍스트에서는 이 이동이 앱 내부 웹뷰(WebView 등) 에서 열릴 것인지, 또는 디바이스의 기본 브라우저(Chrome/Safari) 로 이관될 것인지에 따라 UX와 보안/추적 요구사항이 크게 달라진다.

예: 앱의 이벤트 배너 → 외부 이벤트 페이지, 앱 내 ‘문의하기’ → 외부 헬프센터 도메인, 앱의 상품 클릭 → 제휴사 결제 페이지 등

---

2. 익스터널 링크의 종류(모바일 관점)

• 외부 HTTP/HTTPS 링크: 다른 도메인(www.example.com)으로의 일반 페이지 이동
• 프로토콜 링크: mailto:, tel:, sms: 등 기기 기능 호출
• 파일/문서 링크: PDF, 외부 리포트 등 (대체 뷰어로 열림)
• 타사 서비스 링크: SNS, YouTube, 카페 등 외부 플랫폼
• 앱 외부 실행 링크: 다른 앱(예: 카카오톡, YouTube 앱)으로 전환되는 링크(앱-투-앱)
• 딥링크(Deep Link)와의 구분: 딥링크는 흔히 같은 도메인 또는 앱 내부의 특정 화면(혹은 설치/미설치 후 특정 화면)으로 연결하는 링크를 의미. 익스터널 링크는 “앱 바깥의 리소스”로 연결되는 경우를 가리키는 용어로 구분될 수 있음

---

3. 모바일에서의 동작 방식(열리는 방식별 차이)

3.1 In-App WebView (앱 내부 웹뷰)

• 장점: 앱을 떠나지 않음 → 컨텍스트 유지, 커스텀 UI/툴바 제공 가능
• 단점: 보안·세션·성능 이슈, 브라우저 기능 일부 미제공

3.2 Custom Tab / SFSafariViewController (Chrome Custom Tabs / SFSafariViewController)

• 장점: 외부 브라우저 수준의 보안·성능 + 앱 UI와의 일정한 통합 가능
• 단점: WebView보다 제어 적음, 세션·쿠키 동기화 조건 차이

3.3 External Browser (시스템 브라우저로 이동)

• 장점: 브라우저 기능(북마크, 확장 등) 사용가능, 최상의 호환성
• 단점: 앱 이탈(사용자 흐름 끊김)

3.4 앱 전환(앱-투-앱)
앱 URL 스킴/앱 링크를 사용해 외부 앱을 실행. 앱 미설치 시 스토어로 유도하는 로직 필요

기획 시 “어떤 방식으로 열 것인가”는 UX·보안·추적 세 가지 기준으로 결정해야 한다.

---

4. 기획적 활용 목적 / 사용 시나리오

• 마케팅/프로모션: 캠페인 페이지, 외부 랜딩페이지 연결
• 결제/제휴: PG사의 외부 결제창 연동
• 정책/법적 고지: PDF/외부 문서(약관, 개인정보 처리방침)
• 외부 콘텐츠 임베드: 유튜브, 블로그, 파트너 기사 등
• 고객지원: 외부 헬프센터, 상담 채널 (예: 외부 CRM)
• 인증/SSO: 제3자 인증(예: OAuth flow)이 외부 도메인 전환을 필요로 하는 경우

---

5. UX(사용자 경험) 설계 원칙

5.1 흐름 단절 최소화

• 외부 링크는 사용자 여정의 목적과 맥락을 고려해 최소화한다.
• 외부 이동이 불가피하면 명확한 사전 고지(“외부 페이지로 이동합니다”)와 복귀 방법(닫기/뒤로) 을 제시

5.2 열림 방식의 일관성

• 동일한 유형의 링크는 항상 동일한 방식(웹뷰 vs 외부 브라우저)을 사용하도록 정책화
• 예: 모든 외부 마케팅 페이지는 인앱 브라우저로, 모든 결제는 외부 브라우저로

5.3 라벨링과 시그널

• 외부 링크임을 사용자에게 명확히 알릴 것(텍스트 표시, 외부 링크 아이콘, 사전 안내 문구)
• 외부 링크에 대한 UI 표준: 오른쪽 작은 외부 링크 아이콘(🔗 또는 ↗) + aria-label 등 접근성 보조

5.4 전환 피로·안전성 관리

• 외부로 이동할 때 “곧바로 돌아올 수 있다”는 신호 제공(닫기 버튼, 안내 메시지)
• 외부 페이지 로딩이 지연될 때 사용자 불안 해소를 위한 로딩 인디케이터/스켈레톤 적용

5.5 모바일 특화 고려사항
터치 영역, 화면 회전, 안전 영역(노치/홈 인디케이터) 고려
백버튼(안드로이드)·제스처 내비게이션 호환성 점검

---

6. 보안·프라이버시 고려사항 (필수)

• HTTPS 강제: 모든 외부 링크는 HTTPS 사용을 요구. (중간자 공격 방지)
• 도메인 화이트리스트: 운영 전 반드시 허가된 도메인만 허용하는 정책 필요(심사 절차 포함)
• 민감정보 URL 노출 금지: URL 쿼리스트링에 PII(개인식별정보)나 인증 토큰을 포함하지 않음. 절대 노출 금지
• 토큰 전달 방식: 인증/세션 정보 전달 시엔 URL 대신 POST나 서버사이드 토큰 교환(원타임 토큰)을 사용
• rel 보안 속성(웹): target="_blank" 사용 시 rel="noopener noreferrer" 권장(새 탭으로 열 때 보안/성능 보호)
• 콘텐츠 스니핑/클립보드 보호: 외부 페이지에서의 데이터 추출 위험 검토
• 웹뷰 보안 설정: JavaScript bridge 사용 시 허가된 메시지만 허용, file access·file:// 금지, mixed content 차단 등

---

7. 추적·측정(Analytics) 설계

• 클릭 이벤트 로깅: 앱 내에서 외부 링크 클릭을 이벤트로 기록(이벤트명, URL, 위치, 캠페인ID 등).
• UTM 파라미터: 마케팅 링크에 UTM 파라미터를 붙여 외부 방문을 분석 (예: ?utm_source=app&utm_medium=banner&utm_campaign=spring_sale)
• 리파러/레퍼런스 보존: 웹뷰/커스텀 탭이 referrer를 보존하는지 확인, 일부 환경에서 referrer가 제거될 수 있음
• 중간 리디렉션(서버사이드 트래킹): click → 우리의 트래킹 서버(로그 저장) → 최종 외부 URL 리다이렉트 패턴으로 정교한 추적 가능
• 딥링크/Deferred Link 연계: 외부에서 앱으로 복귀해야 하는 경우(예: 프로모션 링크 클릭 후 앱 설치 → 특정 화면으로 유도) 딥링크/디퍼드 딥링크 전략 필요
• 데이터 보존·개인정보관리: 클릭 로그에 PII 저장 제한, 보관 기간 정책 준수(GDPR/국내법)

---

8. 구현 패턴(개발 관점 요약)

8.1 단순 인앱 웹뷰 오픈
장점: 컨트롤 가능, UI 일관성
단점: 보안·세션 문제(예: 동일 도메인 인증 불가)

8.2 Chrome Custom Tab / SFSafariViewController 사용
장점: 보안성·성능 우수, 쿠키·세션 브라우저 기반 공유
권장: 외부 인증/결제 페이지 연결 시 우선 고려

8.3 External Browser 호출 (Intent/UIApplication)
장점: 브라우저 기능 완전 사용 가능

UX: 앱 이탈 우려 — 사전 안내 필요
서버사이드 Redirect
클릭 → 자사 서버(추적/검증) → 외부 URL. 토큰/UTM 삽입, 안전성 검증, 로깅 가능

PostMessage / JS Bridge
앱 ↔ 웹 간 통신 필요 시 사용. 메시지 포맷·검증·원천 화이트리스트 필수

앱-투-앱(앱 호출)

• 앱 스킴(예: kakao://...) 또는 앱 링크(Android App Links / iOS Universal Links) 사용
• 미설치 시 스토어 유도 로직 필요

---

9. 예외 처리·페일오버 설계

• 네트워크 실패: 오프라인일 때 클릭 시 안내 팝업(“네트워크 연결을 확인해주세요”) 및 재시도 버튼 제공
• 차단/접근 불가: 외부 도메인이 방화벽 등으로 차단되면 대체 페이지(간단 안내 페이지) 제공
• 인증 실패/타임아웃: 외부 인증 흐름에서 실패하면 명확한 오류 메시지와 재시도 또는 고객센터 연결 유도
• 앱 미설치(앱-투-앱): 앱 호출 시 미설치면 스토어로 이동하는 흐름 + 설치 후 복귀 전략 필요(딥링크/디퍼드 딥링크)
• 악성 링크 감지: 운영 중 들어온 외부 링크에 대해 주기적인 스캔/검토 로직 필요

---

10. 접근성(Accessibility) 고려

• 링크 텍스트(레이블)는 명확하게: “외부 사이트(회사명)로 이동” 같이 목적 설명 포함
• 외부 링크 아이콘과 스크린리더용 설명(aria-label) 제공
• 링크 버튼은 충분한 터치 영역(최소 44×44pt 권장) 확보
• 색 대비 기준 준수(시각적 구분이 어려운 사용자 대비)

---

11. 내부 정책(제품 운영 기준 제안)

• 도메인 화이트리스트 프로세스: 신규 외부 링크 등록 시 담당자(마케팅/보안/운영)의 검토·승인 필수
• 링크 메타데이터 표준: 목적, 캠페인ID, 소유팀, 열림 방식, 추적 파라미터, 승인 날짜 등 기록
• 보안 검증 항목: HTTPS, HSTS 지원 여부, 콘텐츠 스니핑 위험, 광고 스크립트 포함 여부 확인
• 로그 보관 및 모니터링: 클릭 로그(익명화)를 중앙집중형 로그로 보관, 이상 징후 알림 설정

---

12. QA & 테스트 체크리스트 (배포 전 필수)

• 링크 도메인 화이트리스트 여부 확인
• HTTPS 적용 및 인증서 유효성 확인
• 열림 방식(In-app / CustomTab / External) 동작 검증 (안드로이드/iOS)
• 백버튼/닫기/복귀 동작 정상 작동 확인
• UTM/트래킹 파라미터 정상 전달 확인(개발자 콘솔 또는 GA)
• 모바일 네트워크(3G/4G/5G/Wi-Fi) 환경 테스트
• 세션/인증(로그인 상태)에서의 행동 확인(로그인 유지/로그아웃 상황)
• 악성 스크립트/권한 오버리치 확인 (웹뷰 환경에서 JS bridge 안전성)
• 접근성(스크린리더, 키보드 내비게이션) 테스트
• 실패 시 대체 메시지/재시도 기능 동작 확인

---

13. 요약(핵심 포인트)

1. 익스터널 링크는 ‘앱 바깥’으로 사용자를 이동시키므로 UX 단절·보안·추적 문제를 반드시 고려해야 한다.
2. 열림 방식(In-app WebView / Custom Tab / External Browser / App-TO-App) 을 서비스 목적에 맞게 규칙화하고 일관성 있게 적용하라.
3. 보안(HTTPS, 도메인 화이트리스트, PII 차단) 은 필수이며, URL에 민감정보를 노출하면 안 된다.
4. 트래킹(UTM, 서버사이드 리다이렉트, 클릭 로그) 을 설계해 마케팅/운영 인사이트로 연결하라.
5. 내부 정책·QA 체크리스트·스펙 템플릿을 만들어 외부 링크 도입 절차를 표준화하라.