학습 목표
- 사용자 기기에 전달한 코드를 완전한 비밀로 만들 수는 없습니다.
- 핵심 비밀과 권한은 서버와 저장소 접근 정책으로 보호합니다.
- 실습의 완료 조건과 실패 시 회복 방법을 직접 확인합니다.
사전 지식
Git과 GitHub로 변경 기록 남기기에서 기본 용어를 먼저 확인하세요. 예시는 기존 운영 서비스를 자동으로 바꾸는 설정이 아니라 별도 연습 화면·프로젝트에 적용하는 출발점입니다.
개념 이해
브라우저에서 실행하는 코드는 사용자의 기기로 전달됩니다. 난독화만으로 숨기려 하기보다 서버에 남겨야 하는 로직과 저장소 접근 권한을 분리하는 것이 출발점입니다.
브라우저 코드와 서버 코드의 경계
HTML·CSS·브라우저 JavaScript와 네트워크 응답은 사용자가 확인할 수 있습니다. 축소·난독화는 읽기 어렵게 할 뿐 비밀 저장이나 권한 검사를 대신하지 않습니다. 가격 결정·관리자 권한·비밀키·독점적인 서버 처리 로직은 신뢰할 수 있는 서버에 둡니다.
비공개 저장소도 최소 권한으로
공개 저장소가 아니어도 초대된 사람과 앱이 코드를 읽을 수 있습니다. 개인 계정 공유 대신 개별 권한을 주고 작업이 끝나면 접근을 회수합니다. 외부 앱·CI·AI 도구에 저장소를 연결할 때 필요한 저장소와 권한만 선택하고 조직의 데이터 처리 정책을 확인합니다.
배포 산출물과 소스맵
소스맵은 압축된 오류 위치를 원본으로 연결하는 파일입니다. 운영에서 공개 배포할지, 오류 추적 서비스에 비공개 업로드할지 정책을 정합니다. 소스맵을 숨겨도 브라우저 코드가 비밀이 되지는 않습니다. 서버 전용 파일과 환경 파일이 정적 폴더에 들어가지 않게 합니다.
복제 방어와 법적 표시를 분리
라이선스·저작권·계약은 사용 허용 범위를 알리지만 기술적 복사를 완전히 차단하지는 않습니다. 핵심 데이터와 기능은 API 인증·요청 제한으로 보호합니다. 사용자에게 전달할 필요가 없는 전체 데이터나 내부 필드를 응답에서 제거하는 것이 코드 난독화보다 먼저입니다.
실제 사용 사례
브라우저의 버튼에서 isAdmin을 바꾸는 것만으로 관리자 API를 실행할 수 없어야 합니다. 버튼 표시를 조작해도 서버가 토큰과 역할을 검증하고 필요한 필드만 반환해야 합니다.
단계별 실습
- 파일을 공개 클라이언트·서버 전용·자격 증명·운영 문서로 분류하세요.
- 네트워크 응답과 정적 폴더에서 불필요한 내부 정보가 나오는지 확인하세요.
- 저장소 멤버와 연결 앱의 접근 범위를 검토하세요.
- 소스맵·오류 추적·라이선스 배포 정책을 정하세요.
- 비로그인·타인 계정으로 서버 핵심 기능이 차단되는지 연습 환경에서 확인하세요.
코드와 프롬프트
아래 예시는 프로젝트 설계·검토 문서에 적용하는 예시입니다. 이벤트·서버 검증·운영 설정 전체를 대신하지 않습니다. 기존 코드와 설치 버전을 먼저 확인하세요.
공개 가능: 화면 컴포넌트, 공개 문구, 공개 데이터
서버 전용: 권한 판정, 외부 API 비밀키, 비공개 데이터 조회
별도 비밀 저장: 서비스 계정, 서명 키, 운영 토큰
배포 점검: public 폴더·응답 필드·소스맵·서버 로그대괄호를 실제 상황으로 바꿔 요청하세요. 비밀 값과 개인정보 원문은 넣지 마세요.
[프로젝트]에서 브라우저에 전달되는 코드와 서버 전용 영역을 구분해줘. 난독화를 보안으로 간주하지 말고 비밀키·권한 검사·응답 필드·정적 산출물·저장소 접근 권한을 점검해줘. 실제 비밀 값은 출력하지 마.자주 발생하는 문제와 해결
| 문제 | 해결과 확인 |
|---|---|
| 환경변수라 브라우저에 안 보인다고 생각한다 | 번들에 포함되는 공개 접두어와 서버 전용 값을 분리합니다. |
| 저장소를 비공개로 바꾸면 노출이 해결됐다고 생각한다 | 이미 복제된 코드와 유출 키는 회수되지 않으므로 키 폐기와 영향 확인이 필요합니다. |
핵심 요약
- 사용자 기기에 전달한 코드를 완전한 비밀로 만들 수는 없습니다.
- 핵심 비밀과 권한은 서버와 저장소 접근 정책으로 보호합니다.
완료 확인
참고자료
확인 기준일: 2026-10-20. 기능·제품 요금·법령은 변경될 수 있으므로 적용 시 공식 문서와 현재 시행일·설치 버전을 다시 확인하세요.