window.location.href 를 이용한 메시지 앱 연동

1. 서론

 웹, 앱이 둘다 되는 하이브리드 앱을 개발 중에 나의 앱과 메시지 앱을 연동하는 동시에 나의 앱에서 복사된 메시지를 메시지 앱에 붙여넣기를 해야하는 상황이 발생했다.

=> 한마디로 버튼 클릭하면 자동으로 문자 전송 전 상황까지 자동으로 해 달라는 뜻.

 

2. 본론

메시지 앱과 연동하기 위해서 검색해봤고, 아래와 같은 코드로 연동이 가능했다.

// 나머지 코드
window.location.href = `sms:${Phone}?body=${message}`;
// 나머지 코드

문제 발생

 처음에는 Message를 바로 body 쪽에 넣어봤는데, 모든 줄바꿈과 공백이 사라진 채 메시지가 입력되는 문제가 발생!!

=> window.location.href를 사용하여 SMS 메시지를 보내는 기능을 구현할 때, 줄바꿈과 공백을 유지하려면 URL 인코딩을 해야 한다고 한다.

 

수정된 코드 예시

// 전화번호와 메시지 정의
const phone = "010-1234-5678"; // 여기에 실제 전화번호를 입력하세요
const message = `안녕하세요!
이 메시지는 줄바꿈과 공백이 유지되어야 합니다.`;

// 메시지 URL 인코딩
const encodedMessage = encodeURIComponent(message);

// SMS 앱 열기
window.location.href = `sms:${phone}?body=${encodedMessage}`;

 

이렇게 코드를 작성하면 줄바꿈과 공백이 유지된 채 메시지앱에 입력된다.

 

추가 참고 사항

 

• encodeURIComponent()를 사용하여 message 문자열을 URL 인코딩합니다. 이 함수는 공백을 %20으로, 줄바꿈을 %0A로 변환하여 URL 내에서 제대로 처리할 수 있게 만듬.
• 인코딩된 메시지를 sms: URL 스킴에 포함시켜 window.location.href를 사용해 SMS 앱을 연다.

 

3. 결론

메시지 앱과 연동할 경우에는 encodeURIComponent() 메서드를 이용해서 한번 더 인코딩 해주어야, 공백과 줄바꿈이 유지된다.