해당 글은 "나는 테토 개발자일까 에겐 개발자일까?" 개발자 유형 테스트 프로젝트의 회고글입니다.
인스타그램 스토리를 하나씩 넘기다가 재밌는 밈을 보게되었다.
바로 현대 오토에버 공식계정에서 올라온 테토 개발자 빙고였는데
현대오토에버 공식계정과도 재밌게 얘기하고 해당 빙고를 다른 개발자 친구들과 얘기하며 웃고 떠들었었다. 그러던 중 한 친구와 단순 빙고에서 끝나는 것이 아니라 이를 유형테스트와 같은 형식으로 만들어서 사람들이 자기의 유형을 테스트하고 다른 사람에게 쉽게 공유 할 수 있도록 만들면 많은 사람들이 쓸 것 같다는 얘기가 나왔고, 추진력이 강한 나는 바로 사람을 모으기 시작했다.
나는 총 두명의 사람을 모았다. 약 1년간 외주도 같이 받고 사이드 프로젝트도 같이 진행했던 디자이너 송윤지님과 1년 반 동안 함께 서비스 출시도 하고 함께 성장했던 개발자 조용준님을 모아 해당 서비스를 만들기로 했다.
나는 바로 링크드인을 켜서 해당 빙고를 처음 기획하신 이우빈님에게 우리 서비스의 기획을 전달드렸고, 우빈님은 흔쾌히 사용해도 좋다고 말씀해주셨다.
하지만 우리는 테토남 에겐남 유행이 점점 끝나가는 것을 느꼈고 과감한 선택을 했다. "각자 하루안에 본인의 역할을 끝내자." 우리는 그 순간부터 열심히 달리기 시작했다.
윤지님께서는 하루만에 서비스 UI의 방향성과 모든 캐릭터의 디자인을 끝내주셨다.
와이어프레임 기반으로 짧게 방향성을 회의 한 뒤 스타일을 굳히고 24시간 안에 모든 캐릭터와 페이지에 대한 디자인이 나왔다.
디자인이 완성되고, 바로 개발에 돌입했다. Seo 최적화, 이미지 렌더링 최적화를 위해 Next.js를 베이스로 서버리스 아키텍처를 선택했다. 약 3시간만에 메인 페이지와 유형을 선택하는 페이지, 공유페이지의 디자인을 구현하는 것이 모두 끝났고, 유저 이탈률을 줄이고 신규 유저 확보를 위해 질문 랜덤화 시스템, 가중치 기반 점수 계산, 결과 공유 및 결과 이미지 저장, 이미지 렌더링 최적화를 포함한 모든 기능의 개발이 12시간 안에 끝났다.
배포를 마친 뒤 본격적으로 마케팅을 시작했다.
개발자를 대상으로 한 서비스이기에 개발자들이 모여있는 곳에 홍보를 하고자했다. 각종 기술 커뮤니티, 카카오톡 채팅방, 링크드인, 에브리타임 등에 테스트 링크를 공유했고 자발적으로 테스트 결과를 공유해주시는 분들이 많았다. 대학 친구들의 도움으로 에브리타임 핫 게시판 1위를 할 수 있었고, 개발자 인스타그램을 운영하시는 터틀넥 연구소님과 스레드를 운영하시는 클래스비누님이 감사하게도 우리의 서비스를 홍보해주시는것을 도와주셨다.
많은 사람들이 이용할 것이라고 예상은 했지만 예상한 것 보다 엄청 많이 들어와주셨고, 배포 6시간 만에 테스트 완료자 1,000명 달성, 클라우드플레어 기준 16만 트래픽과 3,000명의 사용자를 얻었다. 또한 개발자 커뮤니티의 파급력을 제대로 체감할 수 있었다.
유입 소스별 분석으로는, 특히 개발 관련 인플루언서나 개인 계정에서의 공유로 인스타그램 유입이 많았다. 또한 에브리타임에서 HOT 게시물을 차지해 많은 트래픽을 발생시켰다. 구글 검색으로 들어오신 분은 어떻게 들어오신걸까..
난 우리 서비스의 성공 비결을 크게 3가지로 확신한다.
우리는 모든 사용자가 같은 질문을 받고 같은 결과를 받는 테스트보단 모든 사용자가 다 다른 경험을 할 수 있는 테스트를 만들고 싶었고 그로인해 두가지 기술을 생각했다.
개발자의 성향을 정확히 파악하기 위해 6개 핵심 특성을 정의했다.
각 특성마다 5개씩, 총 30개의 질문을 생성했다.
각 질문은 개발 현장에서 일어날 수 있는 행동을 반영했다.
새로운 프레임워크가 출시되어 화제가 될 때 나는?
A) 바로 공식 문서를 읽고 토이 프로젝트를 만들어본다 (테토 가중치)
B) 다른 개발자들의 후기와 경험담을 충분히 읽어본 후 신중히 결정한다 (에겐 가중치)
모든 답변은 테토(도전적, 즉시 행동) 또는 에겐(신중함, 검증 중시) 성향에 가중치를 부여하여 최종 결과로 나타내게 된다.
30개 문항을 모두 보여주면 너무 길어져 유저 이탈이 생길 것이라고 예상했고, 테스트 완료율을 높이기 위해 각 특성별로 2개씩 랜덤 선택해 총 12개 문항만 제시했다. 이렇게 되면 부담 없는 테스트 시간을 만들 수 있고 재시도 시에 매번 다른 문항이 나타나기에 사용자의 재미 요소까지 챙길 수 있었다.
해당 로직의 적용 결과 활성 사용자당 평균 세션 시간이 1분 29초로 나타났다. 또한 방문자 3,000명 중 1,800번의 테스트 완료가 기록되었고, 일부 중복이 포함될 수 있지만 60%의 완료율을 달성했다.
우리는 우리가 홍보한 곳에서만 사람들이 유입되는 것이 아닌 우리의 서비스를 사용한 사람이 우리의 서비스에서 만족을 느끼고 자연스럽게 자기 주위 사람들에게 공유하는 구조를 만들고싶었다. 그래서 우린
위 3가지를 구현해야했고, 개인 데이터를 서버에 저장하지 않으면서 구현하고자 했다.
SSR + Edge Runtime
핵심 아이디어는 테스트 로직은 클라이언트에서, 공유만 서버에서 처리하는 것이다.
테스트는 모든 과정이 서버에 요청 없이 클라이언트에서 진행되고 진행의 결과를 모두 세션에 저장해 공유 혹은 이미지 저장을 할 때 해당 세션값을 기준으로 결과가 포함된 이미지와 공유링크를 만들 수 있었다.
클라이언트 사이드 - 테스트 로직 처리
// 테스트 완료 후 결과 저장
sessionStorage.setItem('testResult', JSON.stringify(result));
sessionStorage.setItem('testNickname', nickname);
// 공유 URL 생성
const shareUrl = `https://codedna.info/s/${type}/${gender}?nickname=${encodeURIComponent(nickname)}`;
서버 사이드 - 동적 메타데이터 생성
export const runtime = 'edge'; // Edge Runtime 사용
export async function generateMetadata(props: Props): Promise<Metadata> {
// URL에서 동적으로 데이터 추출
const { type, gender } = params;
const nickname = searchParams.nickname ?
decodeURIComponent(searchParams.nickname) : '친구';
// 매 요청마다 개인화된 메타데이터 생성
const title = `${nickname}님의 개발 성향은? ${resultDetails.title}!`;
return {
title,
openGraph: {
title,
description: `${nickname}님은 ${resultDetails.title} 개발자입니다.`,
images: [resultDetails.images[gender][0]]
}
};
}
우리는 다음과 같은 총 3가지에서의 이점을 보고 Edge Runtime 사용을 결정했다.
최종 결과
4개의 정적 페이지로 모든 사용자의 개인화된 공유 결과창을 표시 할 수 있도록 했다.
URL 구조: /s/[type]/[gender]?nickname=[닉네임]
- /s/teto/male?nickname=홍길동
- /s/teto/female?nickname=김영희
- /s/egen/male?nickname=박철수
- /s/egen/female?nickname=이순희
각 URL은 동일한 UI를 사용하지만 닉네임에 따라 다른 메타데이터와 콘텐츠를 생성한다.
이러한 커스텀 공유 기능을 만드니 많은 사용자분들이 직접 우리의 서비스를 공유해주시기 시작했다.
한 카톡방에서도 한분이 자신의 결과를 공유해주시니 다른 모든분들도 자신의 결과를 공유해주시기 시작했고 디스코드에서도 개인 인스타그램이나 스레드로 퍼가주시는 정말 감사한분들이 많았다.
물론 난 가장 중요한 것은 빠른 실행이라고 생각한다. 만들까? 라는 생각이 들었을 때 바로 기획하고 사람을 모으고 주저하지 않고 바로 개발 후 배포를 해 사람을 모았기에 유행이 끝나기 전에 서비스를 공개 할 수 있었고 성공 할 수 있었다고 생각한다. 비록 우리가 유행을 주도한 것도, 완벽한 서비스를 기획하여 만든 것도 아니지만 우리의 온전한 힘으로 기획, 디자인, 개발, 홍보를 하여 단기간의 많은 트래픽과 유저를 모은 이 경험이 나는 정말 값지다고 생각한다.
다시 한 번 저희 서비스를 즐겁게 이용해 주시고 많은 도움을 주신 모든 분들께 진심으로 감사드립니다.
우와 🥳