[MOBILE-008][중급] 카메라와 위치 권한 안전하게 다루기
페이지 정보
본문
[이번 수업]
모바일 앱이 카메라와 위치를 쓰기 전에 지켜야 할 권한 흐름과 개인정보 최소화 원칙을 배웁니다. 브라우저 예제로 필요한 순간만 요청하고 거부도 정상 결과로 처리합니다.
[선수지식]
HTML 버튼, JavaScript 함수와 `async/await`, 브라우저 개발자 도구를 알면 좋습니다.
[학습목표]
1. 권한 요청 시점과 사용 목적을 설명한다.
2. 허용·거부·철회 상태를 모두 처리한다.
3. 위치와 카메라 데이터를 필요한 범위와 시간만 사용한다.
[핵심개념]
권한은 운영체제나 브라우저가 민감한 기능 접근을 중개하는 장치입니다. 앱을 켜자마자 여러 권한을 묻지 말고, 사용자가 ‘현재 위치 찾기’처럼 기능을 선택한 순간에 이유를 알 수 있게 요청합니다. 거부하면 앱 전체를 막지 말고 주소 직접 입력 같은 대안을 제공해야 합니다. 권한은 나중에 설정에서 철회될 수 있으므로 사용할 때마다 현재 결과를 확인합니다.
최소 권한은 목적에 필요한 범위만 받는 원칙입니다. 한 번 위치를 확인하면 되는 기능은 지속적인 백그라운드 위치를 요구하지 않습니다. 정밀 위치가 필요 없다면 대략적인 위치로 충분한지 먼저 검토합니다. 수집 전 목적과 보관 기간을 정하고, 필요가 끝난 위치·사진은 저장하거나 전송하지 않습니다. 권한 허용은 무제한 수집 동의가 아닙니다.
[따라하기]
다음을 `index.html`로 저장합니다. 실제 좌표나 영상은 화면에 남기거나 서버로 보내지 않습니다.
```html
<!doctype html>
<meta charset="utf-8">
<button id="location">현재 위치 한 번 확인</button>
<button id="camera">카메라 3초 확인</button>
<p id="status">아직 요청하지 않음</p>
<script>
const status = document.querySelector("#status");
document.querySelector("#location").onclick = () => {
navigator.geolocation.getCurrentPosition(
position => {
const meters = Math.round(position.coords.accuracy);
status.textContent = `위치 허용: 정확도 약 ${meters}m`;
},
error => status.textContent = `위치 사용 안 함: ${error.message}`,
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }
);
};
document.querySelector("#camera").onclick = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true, audio: false
});
status.textContent = "카메라 허용: 3초 후 사용 종료";
setTimeout(() => {
stream.getTracks().forEach(track => track.stop());
status.textContent = "카메라 사용 종료";
}, 3000);
} catch (error) {
status.textContent = `카메라 사용 안 함: ${error.name}`;
}
};
</script>
```
Windows는 파일이 있는 폴더에서 `py -m http.server 8000`, macOS와 Linux는 `python3 -m http.server 8000`을 실행한 뒤 `http://localhost:8000`을 엽니다. 버튼을 누르면 브라우저 권한 창이 나타납니다. 허용하면 위치 정확도 또는 카메라 종료 메시지가, 거부하면 ‘사용 안 함’ 메시지가 예상 결과입니다. 브라우저·장치 정책에 따라 기능을 지원하지 않을 수도 있습니다.
[흔한 실수]
앱 시작과 동시에 권한을 묻거나, 카메라와 위치를 한꺼번에 요청하거나, 거부 뒤 계속 재요청하면 신뢰를 잃습니다. 카메라 스트림을 사용한 뒤 `track.stop()`을 호출하지 않으면 표시등과 장치 사용이 계속될 수 있습니다. 위치 값을 로그에 그대로 남기는 것도 피하세요.
[보안 주의]
본인 소유의 로컬·격리 환경에서만 실습하세요. 실제 배포에서는 HTTPS를 사용하고, 사진·위치의 전송과 저장이 필요하다면 별도의 서버 인증·권한, 암호화, 보관 기한, 삭제 절차를 마련합니다. 오류 메시지나 분석 로그에도 실제 좌표와 사진 식별정보를 넣지 마세요.
[직접 해볼 과제]
‘권한 없이 계속하기’ 버튼을 추가해 상태를 ‘주소를 직접 입력하세요’로 바꾸세요. 카메라 사용 중에는 버튼을 비활성화하고 3초 뒤 다시 활성화해 중복 요청도 막아 보세요.
[확인문제]
1. 권한을 앱 시작 직후보다 기능 사용 순간에 요청해야 하는 이유는 무엇인가요?
2. 한 번만 위치를 쓰는 기능에 백그라운드 권한이 과한 이유는 무엇인가요?
3. 카메라 사용이 끝난 뒤 모든 트랙을 중지해야 하는 이유는 무엇인가요?
[다음 학습]
다음은 IOT-008에서 실시간 운영체제와 작업 마감시간을 다룹니다.
[공식 참고 자료]
- 웹 위치정보 표준: https://www.w3.org/TR/geolocation/
- 웹 카메라·미디어 표준: https://www.w3.org/TR/mediacapture-streams/
- 안전한 로컬 주소 표준: https://www.w3.org/TR/secure-contexts/#localhost
- Android 런타임 권한 공식 문서: https://developer.android.com/training/permissions/requesting
모바일 앱이 카메라와 위치를 쓰기 전에 지켜야 할 권한 흐름과 개인정보 최소화 원칙을 배웁니다. 브라우저 예제로 필요한 순간만 요청하고 거부도 정상 결과로 처리합니다.
[선수지식]
HTML 버튼, JavaScript 함수와 `async/await`, 브라우저 개발자 도구를 알면 좋습니다.
[학습목표]
1. 권한 요청 시점과 사용 목적을 설명한다.
2. 허용·거부·철회 상태를 모두 처리한다.
3. 위치와 카메라 데이터를 필요한 범위와 시간만 사용한다.
[핵심개념]
권한은 운영체제나 브라우저가 민감한 기능 접근을 중개하는 장치입니다. 앱을 켜자마자 여러 권한을 묻지 말고, 사용자가 ‘현재 위치 찾기’처럼 기능을 선택한 순간에 이유를 알 수 있게 요청합니다. 거부하면 앱 전체를 막지 말고 주소 직접 입력 같은 대안을 제공해야 합니다. 권한은 나중에 설정에서 철회될 수 있으므로 사용할 때마다 현재 결과를 확인합니다.
최소 권한은 목적에 필요한 범위만 받는 원칙입니다. 한 번 위치를 확인하면 되는 기능은 지속적인 백그라운드 위치를 요구하지 않습니다. 정밀 위치가 필요 없다면 대략적인 위치로 충분한지 먼저 검토합니다. 수집 전 목적과 보관 기간을 정하고, 필요가 끝난 위치·사진은 저장하거나 전송하지 않습니다. 권한 허용은 무제한 수집 동의가 아닙니다.
[따라하기]
다음을 `index.html`로 저장합니다. 실제 좌표나 영상은 화면에 남기거나 서버로 보내지 않습니다.
```html
<!doctype html>
<meta charset="utf-8">
<button id="location">현재 위치 한 번 확인</button>
<button id="camera">카메라 3초 확인</button>
<p id="status">아직 요청하지 않음</p>
<script>
const status = document.querySelector("#status");
document.querySelector("#location").onclick = () => {
navigator.geolocation.getCurrentPosition(
position => {
const meters = Math.round(position.coords.accuracy);
status.textContent = `위치 허용: 정확도 약 ${meters}m`;
},
error => status.textContent = `위치 사용 안 함: ${error.message}`,
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }
);
};
document.querySelector("#camera").onclick = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true, audio: false
});
status.textContent = "카메라 허용: 3초 후 사용 종료";
setTimeout(() => {
stream.getTracks().forEach(track => track.stop());
status.textContent = "카메라 사용 종료";
}, 3000);
} catch (error) {
status.textContent = `카메라 사용 안 함: ${error.name}`;
}
};
</script>
```
Windows는 파일이 있는 폴더에서 `py -m http.server 8000`, macOS와 Linux는 `python3 -m http.server 8000`을 실행한 뒤 `http://localhost:8000`을 엽니다. 버튼을 누르면 브라우저 권한 창이 나타납니다. 허용하면 위치 정확도 또는 카메라 종료 메시지가, 거부하면 ‘사용 안 함’ 메시지가 예상 결과입니다. 브라우저·장치 정책에 따라 기능을 지원하지 않을 수도 있습니다.
[흔한 실수]
앱 시작과 동시에 권한을 묻거나, 카메라와 위치를 한꺼번에 요청하거나, 거부 뒤 계속 재요청하면 신뢰를 잃습니다. 카메라 스트림을 사용한 뒤 `track.stop()`을 호출하지 않으면 표시등과 장치 사용이 계속될 수 있습니다. 위치 값을 로그에 그대로 남기는 것도 피하세요.
[보안 주의]
본인 소유의 로컬·격리 환경에서만 실습하세요. 실제 배포에서는 HTTPS를 사용하고, 사진·위치의 전송과 저장이 필요하다면 별도의 서버 인증·권한, 암호화, 보관 기한, 삭제 절차를 마련합니다. 오류 메시지나 분석 로그에도 실제 좌표와 사진 식별정보를 넣지 마세요.
[직접 해볼 과제]
‘권한 없이 계속하기’ 버튼을 추가해 상태를 ‘주소를 직접 입력하세요’로 바꾸세요. 카메라 사용 중에는 버튼을 비활성화하고 3초 뒤 다시 활성화해 중복 요청도 막아 보세요.
[확인문제]
1. 권한을 앱 시작 직후보다 기능 사용 순간에 요청해야 하는 이유는 무엇인가요?
2. 한 번만 위치를 쓰는 기능에 백그라운드 권한이 과한 이유는 무엇인가요?
3. 카메라 사용이 끝난 뒤 모든 트랙을 중지해야 하는 이유는 무엇인가요?
[다음 학습]
다음은 IOT-008에서 실시간 운영체제와 작업 마감시간을 다룹니다.
[공식 참고 자료]
- 웹 위치정보 표준: https://www.w3.org/TR/geolocation/
- 웹 카메라·미디어 표준: https://www.w3.org/TR/mediacapture-streams/
- 안전한 로컬 주소 표준: https://www.w3.org/TR/secure-contexts/#localhost
- Android 런타임 권한 공식 문서: https://developer.android.com/training/permissions/requesting
- 이전글[IOT-008][중급] 정해진 시간 안에 작업 끝내기 26.09.03
- 다음글[SWE-008][중급] 프로그램 경계를 알맞게 나누기 26.09.03
댓글목록
등록된 댓글이 없습니다.