[태그:] 오픈 그래프

작성자: 컴맹 집사

대표 이미지: 친구에게 초대 링크를 보내 두 왕국의 궁합을 보는 기능 (출처: 왕립 개집사협회 앱 2026년 9월 20일 버전 화면, 직접 캡처)

공유 버튼은 이미 만들었다. 문구와 링크가 카카오톡으로 잘 넘어갔다. 그런데 작위증을 만들고 나면 거기서 끝나 버렸다. 친구에게 보여 주고 “오” 한마디 듣고 나면 더 할 게 없었다. 앱이 친구에게서 친구로 퍼져 나갈 힘이 약했다.

받는 쪽에서 보니 또 다른 문제가 보였다. 카카오톡 대화방에서 링크 아래 붙는 미리보기 카드에 이미지 없이 앱 주소만 덩그러니 보였다.

지금까지는 보내는 사람만 생각했다. 이번에는 친구와 함께 즐기는 기능, 그리고 받는 사람이 무엇을 보는지까지 설계했다.

친구와 함께 할 수 있는 것: 두 왕국의 궁합

여러 아이디어를 놓고 비교한 끝에 친구 강아지와 궁합 보기를 골랐다. 세계관에 맞게 이름은 “두 왕국의 외교 관계”로 붙였다.

• 내 작위증 화면이나 첫 화면에서 “초대 링크 보내기”를 누른다.
• 친구가 링크를 열고 자기 왕국을 만들면, 그 자리에서 두 왕국의 외교 관계가 나온다.
• 관계는 두 집사의 유형 조합으로 정해진다. 간식 협상형 둘이 만나면 “간식 카르텔”, 과잉보호형과 왕실 기록형이 만나면 “완벽한 보안팀” 같은 식이다.

집사 유형이 일곱 가지라 조합은 같은 유형끼리를 포함해 28가지다. 28개의 관계 이름과 설명을 세계관 말투에 맞게 하나씩 썼다. “국경이 두 배로 넓어졌습니다. 폐하들도 신났습니다” 같은 문장을 쓰는 것이 가장 즐거웠다.

서버 없이 친구 정보를 전달하기

궁합을 보려면 친구의 휴대폰이 내 왕국 정보를 알아야 한다. 이 앱은 서버에 아무것도 저장하지 않으므로, 정보는 링크 자체에 담는다. AI는 URL 파라미터라는 방법을 알려 줬다. 주소 끝에 물음표(?)를 붙이고 그 뒤에 정보를 적는 방식이다.

앱주소/?ally=(폐하 이름과 집사 유형을 담은 짧은 글자)

• ? 뒤부터가 파라미터
• ally=: “동맹 왕국”이라는 뜻으로 붙인 이름
• 그 뒤의 글자: 폐하 이름과 집사 유형을 링크에 넣기 좋은 형태로 바꾼 것

이름에 한글이나 띄어쓰기가 들어가면 주소가 깨질 수 있어서, 링크에 넣을 때는 안전한 형태로 바꿔 넣고 앱에서 다시 풀었다.

앱이 열릴 때 주소에 이 정보가 있으면 첫 화면에 “○○ 폐하가 궁합을 보자고 초대했어요!”라는 안내가 뜬다. 그 아래에는 “먼저 내 왕국부터 만들어 볼까요? 다 만들면 바로 궁합을 확인할 수 있어요”라는 설명을 붙였다. 받는 사람이 무엇을 해야 하는지 바로 알 수 있게 한 것이다.

링크에 넣지 않은 것

• 사진은 넣지 않는다. 사진은 기기 밖으로 보내지 않는다는 원칙을 지킨다.
• 최소한만 넣는다. 폐하 이름과 집사 유형, 두 가지면 궁합을 볼 수 있다.
• 이상한 값은 무시한다. 주소를 직접 고쳐서 없는 유형을 넣을 수도 있으므로, 알아볼 수 없는 링크는 조용히 무시하고 평소 첫 화면을 보여 준다.

휴대폰 공유 창이 뜨지 않는 환경에서는 초대 링크를 복사해 주고, 복사도 막혀 있으면 주소를 직접 보여 줘서 길게 눌러 복사할 수 있게 했다. 이 경우들은 자동 테스트로도 확인했다.

카카오톡 미리보기 카드

카카오톡이나 문자에 링크를 보내면 제목, 설명, 이미지가 들어간 카드가 생긴다. 카드의 내용은 페이지에 적힌 정보에서 온다. 카카오톡은 링크를 공유할 때 페이지의 오픈 그래프 정보를 읽는다. 이 정보는 HTML 안에 og:title, og:description, og:image라는 이름으로 적어 둔다. (출처: Open Graph protocol)

오픈 그래프는 “이 페이지를 공유할 때 이렇게 보여 주세요”라고 적어 두는 명함 같은 것이다. 내 앱에는 이 명함이 없어서 카드가 비어 있었다.

index.html 윗부분에 명함을 적어 넣었다.

• og:title: 왕립 개집사협회 · 우리 집 강아지가 왕이라면?
• og:description: 우리 집 강아지의 왕국을 만들고 나만의 집사 작위증을 받아 보세요. 웹툰도 함께 즐길 수 있어요.
• og:image: 왕관을 쓴 두부와 집사 지우가 함께 웃고 있는 대표 그림 (가로 1200 × 세로 630 픽셀)

이미지는 가로로 긴 비율의 JPEG로 만들었다. 명함 속 주소는 전부 https://로 시작하는 전체 주소로 적어야 한다. 나중에 도메인을 바꾸면 명함의 주소도 함께 고쳐야 한다.

미리보기가 바로 안 바뀌는 문제

카카오톡은 한 번 읽은 미리보기 정보를 한동안 저장해 두고 재사용한다. 그래서 명함을 바꿔도 이미 공유된 적 있는 주소는 바로 반영되지 않을 수 있다. 카카오 개발자 사이트의 공유 디버거에서 저장된 정보를 새로 읽게 하면 된다. 명함을 바꾼 뒤에도 카드가 그대로라면 여기서 초기화한다.

바꾼 뒤의 흐름

이제 흐름이 이렇게 이어진다. 대화방에 두부와 지우가 웃고 있는 카드가 뜨고, 누르면 “○○ 폐하가 궁합을 보자고 초대했어요!”가 보이고, 왕국을 만들면 두 왕국의 외교 관계가 나온다. 그리고 그 친구가 또 다른 친구에게 초대 링크를 보낸다. 보내는 사람의 공유가 받는 사람의 참여로 이어지는 길이 생겼다.

여기까지가 앱을 재미있게 발전시키는 과정이었다. 기능이 늘어난 만큼 고칠 일도 늘었다. 다음 이야기는 AI가 만든 코드 속에 숨어 있던 오류를 처음으로 직접 찾아낸 날부터 시작된다.

---

이전 글: 메뉴가 늘어나 복잡해진 앱, 카드와 파일로 정리한 법
다음 글: 두 번째 판에서만 틀리는 버그? AI 코드 오류 찾은 이야기

처음부터 따라가기: 코딩 1도 모르는 집사가 강아지 때문에 앱을 만들게 된 사연