Search

카톡으로 베짱이한테 질문하기

날짜
2024/07/06
작성자
태그
Series
--
완료

카카오톡으로 질문을 받게 된 의식의 흐름

퇴근하고 보니 이런 문의글이 와있었다. (케이스 워크를 끝내고 오니 새로운 케이스가?)
우리 블로그는 우측 하단의 채널톡 모양을 클릭해서 질문을 할 수 있는데, 질문이 자주 들어오는게 아니다보니 알람을 확인하지 못하는 경우가 많고, 보통 이렇게 문의를 시작하는 경우에 금방 답변을 받지 못해서 페이지를 나가고 시간이 지나면 세션이 종료되어 사용자가 이전 채팅을 이어갈 수 없다.
불-편하다 불-편해
곧 베짱이로 바뀔 짤1
그러다가 이런 생각이 들었다.
개인 블로그는 채널톡에서 카카오톡 오픈프로필로 바꿨는데, 고장난 베짱이도 카톡으로 바꾸면 안 되나? 라고 생각했지만 다음과 같은 허들이 있었다.
고장난 베짱이는 둘이 운영하는데, 오픈프로필은 공동운영이 불가능하다.
채널톡 버튼을 통해서모든 포스팅에서 바로 질문 스레드를 시작할 수 있는게 꽤 장점이다.
그래서 채널톡 기능을 주섬주섬 찾아보다가 봇이 날리는 첫 메시지를 커스텀하는 기능을 찾았다.
각자 서로 오픈 프로필을 만들고…
흔한 베짱이들의 대화
우측 하단 채널톡 버튼을 누르면 각자의 오픈 프로필로 이동할 수 있는 버튼도 만들었다. 둘 중에 하나 클릭하고 들어오겠지?
근데 URL도 너무 별로고 2개로 나눠진게 또 불편해서 URL 하나를 클릭하면 둘 중 한 명의 오픈 프로필로 리다이렉트 해주는 기능을 구현하고 싶었다.
그러려면… 원래 고장난 베짱이 블로그 도메인 err-bzz.oopy.io는 우리 소유가 아니라 oopy 서비스의 서브도메인을 임시로 사용하는거라서 제어권한이 없고, 우리만의 도메인이 필요했다.
연 14달러? 흠.. 고민하다가 oopy 비용을 내가 내고 있기 때문에 베짱이1 보고 도메인은 당신이 사라고 종용했다.
그렇게 최종 결정된 도메인은 403bzz.com 아마 이 포스팅이 올라간 시점에선 이미 블로그 주소도 변경됐을 것이다.

도메인 설정

도메인 하나에 접속하면 두 명의 카톡 오픈 프로필 중 하나로 랜덤하게 이동하게 설정해보자.
구현 방법은 다양하겠지만 나는 이렇게 구현했다.
S3 Bucket 내부의 정적 웹페이지에 둘 중 한 명의 오픈 프로필로 리다이렉트 하도록 HTML 페이지 구성
Route53에 A 레코드 생성해서 대상으로 S3 Bucket 지정
이제 구성 방법을 순서대로 확인해보자
1.
우선 S3 Bucket 이름은 A 레코드로 지정할 도메인 이름과 동일하게 설정해야한다. 그렇지 않으면 404 Not Found (Message: The specified bucket does not exist)를 보게될 것이다. 우리는 403bzz라서 404는 취급하지 않는다.
2.
S3 Bucket의 퍼블릭 액세스를 허용하도록 설정한다. (차단 설정을 모두 해제)
3.
페이지를 랜덤으로 리다이렉트하는 HTML 파일을 코딩한다. 요즘같은 AI 시대 트렌드는 역시 HTML 코딩
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Redirecting...</title> <script type="text/javascript"> window.onload = function() { var urls = ["https://open.kakao.com/o/sJD8ldBg", "https://open.kakao.com/o/subHndBg"]; var randomUrl = urls[Math.floor(Math.random() * urls.length)]; window.location.href = randomUrl; }; </script> </head> <body> <p>Redirecting to a random site...</p> </body> </html>
HTML
복사
4.
해당 파일을 S3에 업로드한다.
5.
정적 웹페이지 호스팅을 설정하자 버킷 → 속성 → 맨 아래로 내려가면 ‘정적 웹사이트 호스팅’ 설정이 있다.
6.
가볍게 오픈프로필로 연결만 해주기 때문에, 별다른 설정 없이 인덱스 문서만 지정해도 된다.
7.
설정이 완료되면 다음과 같은 모습을 볼 수 있다.
8.
아직 끝이 아니다. 해당 파일에 아무나 접근하는 것을 허용하기 위해서는 추가 설정이 필요하다. 권한 → 버킷 정책 → 편집으로 이동한다.
9.
다음과 같이 내 정적 웹 호스팅용 Bucket에 모든 사람이 s3:GetOjbect를 할 수 있도록 설정한다.
{ "Version": "2012-10-17", "Statement": [ { "Sid": "403bzz", "Principal": "*", "Effect": "Allow", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::support.403bzz.com/kakaotalk.html" ] } ] }
HTML
복사
10.
그 다음 아까 정적 웹 호스팅 설정으로 생성된 버킷 웹 사이트 엔드포인트에 접근하면 이제는 접속이 가능한 것을 확인할 수 있다.
11.
마지막으로 못생긴 URL을 내가 구매한 403bzz.com 도메인과 연결해주기만 하면 된다. 도메인 구매한 사이트가 AWS가 아니라면 알아서 해당 사이트가 지원하는 콘솔에서 A 레코드를 추가하자!
12.
완성!!!!
편-안
곧 베짱이로 바뀔 짤2