사주 AI 웹서비스 제작노트 - 8

사주 AI 웹서비스 제작노트 - 7

 
 
검색엔진최적화를 했는데
구글과 네이버 모두 잘나온다.

네이버 검색엔진 최적화

 
 
 
카카오톡 공유 아이콘을 추가하기로 했다.
그러려면 결과 공유페이지가 필요했다.
 
Kakao.Share.sendDefault 기능을 사용하여
커스텀 템플릿 제작했다.
결과물마다 고유한 resultId를 생성하여
링크에 담아 전송했음
OG(Open Graph) 태그 설정를 설정하여
Next.js서버 컴포넌트의 generateMetadata를
활용해 카톡 공유 시 사용자별 맞춤 미리보기(제목, 설명)가 뜨도록 설정했음.

카카오톡 공유 화면

삽질을 꽤 했는데 코드 문제는 아니었고

Kakao Developers

카카오디벨로퍼에서 앱을 추가할 때 
앱 대표 도메인 주소를 넣고
플랫폼 키 > JavaScript SDK도메인에도
웹사이트도메인을 등록해야한다.

카카오디벨로퍼 앱 기본 정보

카카오디벨로퍼 JS SDK도메인

 
그리고 마지막으로 앱 > 제품링크관리에서
웹도메인을 꼭 넣어줘야함 😭😭😭
이거 못찾아서 생각보다 꽤 걸렸다. 바보임

카카오디벨로퍼 제품링크관리 웹도메인 등록

 
 
별도 결과 상세페이지가 필요했는데 
로그인 기능이 없는 서비스 특성상,
사용자가 브라우저를 닫으면
결과를 다시 볼 수 없는 문제가 발생됨
사주 분석 완료시 즉시 DB에 데이터를 저장하고,
고유ID를 발급받음
이 ID를 기반으로 /result/[id] 형태의 동적 페이지를 생성해 영구링크를 구현
DB 무한 축적을 방지하기 위해 안내문구를 넣기로 함

나만을 위한 인생 전략 리포트, 잊지 말고 간직하세요! 본 페이지는 30일간만 유지됩니다.

하단의 PDF 저장 기능을 이용해 나만의 사주 가이드를 소장해 보세요. 🥭

카카오톡 공유와 결과페이지 제작

 
카톡내부 브라우저에서는 보안정책상
window.print()가 작동하지 않아
PDF저장이 불가능 했다.
userAgent를 감지해 카톡 사용자에게는 외부 브라우저(사파리/크롬)이용 권장 배너를 노출시킴
PDF버튼 클릭시, 카톡 환경이면 링크 복사후
외부 브라우저에서 실행하라는 안내 팝업과 함께
클립보드 복사를 자동으로 실행함
사용자가 외부 브러우저로 넘어왔을 때만
PDF저장 버튼이 활성화하도록 분기처리 하였다.

카톡내 pdf버튼 처리

 
참고로 웹에서는 다크테마지만 PDF로 저장하면
검은배경이 너무 뚝 끊겨서 
인쇄시 배경은 화이트, 글자는 어두운색으로 반전 시켰다.
Tailwind의 print: 를 사용함
 
생년월일을 직접 받지 않고 천간지지(간지)만 받아도
개인정보인가? 에 대해 생각해봤는데
간지 조합은 특정 시점과 1:1 매칭되어
역추적이 가능하므로, 
개인정보처리방침을 만드는게 맞다 생각이 들어 추가하였다. (스레드에 글올렸다가 만들라해서 알아봄 ㅎ)
개인정보포털에서 템플릿을 다운 받을 수 있다.

개인정보 포털

개인정보 처리방침 작성지침(2025.4

12.60MB