📄 [개발 일지 #3] 공유 기능 추가 및 랜딩 이미지 (OG Image & i18n)

테스트 결과가 아무리 정확해도, 다른 사람에게 보여줄 수 없다면 그저 낭비일 뿐이죠.

3일차 개발은 테스트의 꽃인 바이럴(Viral) 요소 구현에 집중했습니다. 단순히 링크를 던지는 것을 넘어, 링크를 마주하는 순간 클릭을 자극하는 동적 OG 이미지와 다국어 시스템을 구축한 과정을 공유합니다!

1. 동적 미리보기 이미지 (Dynamic Open Graph)

카톡방에 링크를 올렸는데 공용 로고만 덩그러니 있으면 재미없겠죠? 사용자의 결과값에 따라 실시간으로 생성되는 썸네일을 구현했습니다.

이 사진은 다음번에 기록할 카카오톡 API를 사용한 카카오톡 공유 기능입니다!

 

이미지는 결과값의 "이름"과 "MBTI"를 비추며, '림월드'를 모르는 사람들에게도 흥미를 심어 주도록 만들었습니다. 결과 확인하기 창을 통해 더 상세한 특성까지 볼 수 있죠!

• 기술 스택: Next.js ImageResponse (@vercel/og)
• 구현 로직:
  1. 결과 페이지 URL에 쿼리 파라미터(?name=홍길동&trait=방화광) 주입.
  2. 크롤러(카카오, X 등)가 URL 접근 시 Edge Function이 요청을 가로챔.
  3. JSX/Tailwind 기반 레이아웃에 실시간 데이터를 바인딩하여 PNG 이미지로 렌더링.

typescript
// app/api/og/route.tsx (Simplified)
export async function GET(request: Request) {
    const { searchParams } = new URL(request.url);
    const name = searchParams.get('name');
    const mbti = searchParams.get('mbti');
    
    return new ImageResponse(
        (
            <div style={{ background: '#111', color: '#fff' }}>
                <h1>{name}님의 정착민 유형</h1>
                <div style={{ fontSize: 60 }}>{mbti}</div>
            </div>
        ),
        { width: 1200, height: 630 }
    );
}

 

 

2. 공유 버튼 삼총사 (카카오톡, X(트위터), 디스코드)

한국 시장 필수인 Kakao SDK와 글로벌 타겟의 X(Twitter), 범용적인 디스코드 그리고 범용 클립보드 복사 기능을 연동했습니다.

• 발생한 문제들: Next.js 환경에서 window.Kakao 객체 참조 시, 스크립트 로드 전 호출되어 발생하는 undefined 에러. 최대한 외부적인 요소를 통제 후 코딩 툴에 문제 해결을 요구해야 문제들이 해결됩니다.
• 해결 과정: next/script의 onLoad 전략과 커스텀 훅을 통해 SDK 초기화 상태를 엄격히 관리했습니다. (자세한 해결 과정은 5일차에 더 깊게 다룰 예정입니다.)

이젠 실제로 동작하는 공유 버튼!

3. 글로벌 확장 - 영어 지원 (i18n 기초 공사)

 

림월드는 전 세계 유저가 즐기는 갓-겜입니다. 한국어에만 가두기 아쉬워 국제화(i18n) 엔진을 올렸습니다.

• 데이터 저장: 기존 단일 JSON 구조를 언어별(ko, en)로 파편화하여 관리.
• 언어: useLanguage() 훅을 도입. 단순히 텍스트만 치환하는 것이 아니라, MBTI 계산 로직에 투입되는 데이터 소스 자체를 실시간으로 스위칭합니다.

 

4. 마치며 :

 

"테스트 - 결과 확인 - 공유"로 이어지는 핵심 루프는 완성되었습니다. 하지만 아직 결과 페이지의 '백스토리'가 림월드 특유의 맛을 살리지 못하고 있었습니다. 어린 시절과 성년 시절이 각자 3개의 경우의 수 밖에 없었고, 그것마저 별로 연관된 느낌이 아니었습니다. 단순 텍스트였던 백스토리를 게임 내 데이터 수준으로 고도화 및 질문 가짓수 대폭 추가 및 알고리즘 정교화를 이뤄내야 하죠.

그리고 이것이 개편 후 이미지입니다!

 

4일차에는 정착민의 인생을 결정짓는 백스토리 개편 이야기로 돌아오겠습니다! 감사합니다.