"서버 없이도 빠르게 웹페이지 배포하는 방법, 그리고 구글/카카오 간편 로그인 탈퇴 구현 후기까지!"
앱 출시 심사 준비 중, 갑자기 “웹 탈퇴 페이지가 별도로 필요하다”는 게 떠오름.
예전에 회사에서도 비슷한 이슈로 프론트엔드 팀이 급하게 처리하던 기억이 있었는데, 이번엔 그 역할을 내가 하게 됨..
프론트 프로젝트야 React + Vite로 빠르게 만들 수 있지만, 문제는 배포. 서버 띄워야 하나? SSL 인증서는 또 어떻게 하지...? 라는 고민이 시작됨.
그래서 찾아보니 아래의 방법으로 하면 해결 완.
✅ 정적 웹사이트는 S3
✅ SSL 인증은 CloudFront + ACM
✅ 도메인 연결은 Route 53
덕분에 별도 서버 없이도, 클라이언트만 있는 웹사이트를 바로 띄울 수 있었음.
AWS에 한 걸음 더 가까워졌달까? 😅
🔧 구성도 요약
| 역할 | 사용 기술 |
|---|---|
| 프론트엔드 앱 | React + TypeScript + Vite |
| 정적 파일 호스팅 | S3 Static Website Hosting |
| HTTPS + CDN | CloudFront + ACM (SSL 인증서) |
| 커스텀 도메인 연결 | Route 53 |
1️⃣ 웹 탈퇴 페이지 프론트 개발
구현한 기능:
- 간편 로그인 연동 (카카오 / 구글)
- 백엔드에 탈퇴 API 호출
a. access token 발급
b. user info 조회 -> oauth id 확인
c. 필사 탈퇴처리 로직
✔ 카카오 unlink 처리
카카오는 JavaScript SDK에서 Kakao.API.request({ url: '/v1/user/unlink' })를 호출하면 쉽게 연결을 끊을 수 있음. 그리고 해당 oauth ID로 탈퇴 요청 보내면 끝.
✔ 구글은 다소 복잡...
반면 구글은 https://oauth2.googleapis.com/revoke API를 호출해서 발급된 토큰을 무효화할 수 있지만, 계정 연결 해제는 사용자가 직접 해야 함. 😅
그래서 앱 약관에 소셜계정 연결해제는 직접 해야한다는 문구만 남기고, 실제 연결 끊는 기능은 제외함. 대부분의 앱도 그렇게 하고 있었음.
2️⃣ AWS 인프라 구성 및 배포
📁 S3 정적 웹사이트 설정
- S3 버킷을 생성하고
- "정적 웹사이트 호스팅" 옵션 활성화
- 기본 문서를
index.html로 지정
🛠 프론트 빌드 및 업로드
npm run build # vite 기준 빌드
aws s3 sync dist/ s3://${탈퇴 도메인}
(디자인 나오기 전 기능 테스트용 화면...개발자의 미감이란..)
🌍 CloudFront 연결
- 원본에 S3 버킷 연결
- Viewer Protocol Policy는
Redirect HTTP to HTTPS - ACM에서 인증서 발급받고 연결
- Route 53에서 도메인에 A 레코드 추가 (CloudFront 배포 도메인 alias)
3️⃣ 앱 소개 페이지는 Slash Page로
약관/소개 페이지는 Notion으로 할까 고민하다가 Slash Page라는 서비스를 알게 됨. 완전 신세계.
- 커스텀 도메인 연결 가능 (베타)
- 에디터가 노션처럼 편리함
- 디자인도 깔끔하게 뽑힘
그 외 아래와 같은 다양한 베타테스터 기능들이 있다.
잘 활용하면 별도의 사이트 구축없이 해당 서비스를 이용하면 될듯?
🪧 필사 앱도 곧 출시합니다!
현재 준비 중인 앱 소개는 home.fillsa.store에서 보실 수 있어요.
이 페이지는 Slash Page를 활용해 만들었고, 아직 구축 중이지만 곧 완성될 예정입니다.
6월 중순 출시 예정이니 많관부 🙌
