NeoMind

NeoMind

Make Digimon Great Again.

Hits

[프로젝트] 픽키

업데이트:

픽키

실행 화면

프로젝트 개요

픽키는 공개된 수치 데이터를 바탕으로 두 후보를 비교하거나, 여러 카드를 올바른 순서로 맞히는 데이터 퀴즈 플랫폼입니다.

초기 버전은 네이버 검색량 중심의 학부 팀 프로젝트로 시작했지만, v1.0.0 이후 웹/백엔드/앱을 사실상 다시 만들다시피 손보며 현재는 공식 게임 + 유저 제작 게임 + 모바일 앱이 함께 돌아가는 웹 우선 게임 플랫폼으로 운영하고 있습니다.

웹사이트

어플리케이션

  • 배포: 플레이 스토어
  • 현재 상태: (2026-04-09 기준) 최신 앱 버전 2.0.1
  • 메모: 한동안 초기 웹뷰 확장판 성격에 머물렀던 앱을 2026년에 다시 정비해, Compose + MVVM 기반 WebView 셸로 되살렸습니다. 서버 환경별 빌드 변형, 로그인 세션 유지, 닉네임 기억, 시스템 바/안전영역 대응까지 포함해 모바일 접점을 다시 다듬은 상태입니다.

프로젝트 개발 정보

  • 초기 개발 기간: 2018.09.28. ~ 2018.12.11. (학부 팀 프로젝트)
  • 웹 버전 이력: v1.0.0(2020-09-03) → 최신 릴리즈 태그 v2.8.8(2026-04-08)
  • 앱 버전 이력: v1.3.4 → v2.0.1
  • 개발 인원: 초기 3인, 현재 웹/백엔드/앱 리빌드 및 운영 1인
  • 역할: 서비스 기획, 프론트엔드/백엔드/앱 구현, 데이터셋 게임 설계, 운영 개선, QA/배포

개발 내용

  • 레거시 LAMP/PHP 구조를 Next.js 15 + Fastify 5 + Prisma 6 기반 모노레포로 전환
  • 검색량 단일 게임에서 벗어나 조회수, 구독자수, 주식, 코인, 인구, 픽시브, 스팀 등 멀티 데이터셋 비교 게임 허브로 리빌드
  • 공식 게임뿐 아니라 유저 제작 게임(UGC)의 생성, 공개, 플레이, 리더보드 흐름을 정비해 하나의 플랫폼 경험으로 통합
  • 비교 모드 외에 순서맞추기 모드를 추가하고, 모바일 드래그/롱프레스 입력, 결과 전환, 시도 횟수 기반 흐름을 집중적으로 다듬음
  • 결과 카드, 점수 분포, 리더보드, 댓글, 공유 흐름을 반복 개선해 한 판 플레이 후 다시 도전하게 만드는 루프 강화
  • 공개 상세/플레이/리더보드 랜딩을 정리하고 구조화 데이터/메타 정보를 보강해 검색과 공유로 들어온 사용자가 바로 게임까지 이어지도록 개선
  • 앱도 다시 손봐 Compose + MVVM 기반 WebView 셸, 환경별 빌드 변형, 세션 유지, 모바일 시스템 UI 대응, 앱 전용 분석 이벤트까지 재정비
  • AI 바이브 코딩 기반 핫픽스/리팩터링 사이클로 제품 완성도와 업데이트 속도를 동시에 끌어올림

실행 및 개발 환경

웹/서버

개발 O/S
 Windows 10, Linux Ubuntu 19.04 -> Windows 11
네트워크 호스트
 squarenet.kr(Linux)2 -> Google Cloud Platform(Linux Ubuntu 19.04) -> Cloudflare + Vercel + Railway
실행 플랫폼
 IE와 윈도우용 Safari를 제외한 웹 브라우저 -> 최신 웹 브라우저(PC/모바일)
프레임워크
 LAMP Stack(Linux + Apache + MySQL + PHP) -> Next.js 15 + Fastify 5 + Prisma 6
개발 언어
 PHP, Javascript, CSS, HTML, MySQL -> TypeScript(React/Node) 중심
데이터 저장소
 MySQL -> PostgreSQL, Redis
패키지 구조
 단일 웹앱 구조 -> npm workspaces 기반 웹/백엔드 모노레포
에디터 / IDE
 Notepad++, VS Code, VI -> VS Code, Android Studio

앱

개발 O/S
 Windows
실행 O/S
 Android
프레임워크
 Android SDK -> Android SDK + Jetpack Compose + MVVM + WebView
개발 언어
 Kotlin
빌드 변형
 단일 APK -> alpha/real flavor x debug/dev/cb/release 매트릭스
현재 상태
 웹뷰 보조 앱 -> 운영 중인 모바일 셸 앱으로 재정비
에디터 / IDE
 Android Studio

개발 후기 (초기 버전)

이 프로젝트는 학부 과제로 제출한 웹 게임으로, 방공무기 교전통제 프로그램과 애니북 놀이터를 개발하며 배운 노하우를 통해 팀장을 맡아 성공적으로 팀을 이끌 수 있었습니다.

개발을 하게 된 계기는 18년 7~8월, Higher Lower Game을 여러 유튜버와 스트리머들이 플레이 하는 것을 보며, ‘한국어 판이 있었으면 좋겠다’는 언급에 착안, 한국 문화와 한글 검색에 가장 최적화 된 네이버를 기반으로 개발을 결심하고, 2학기 학부 ‘웹 프로젝트’ 강의의 과제로 개발하게 되었습니다.

이 과정에서 팀장은 각자에게 어울리는 분야로 업무를 배분하여 분업화 시키고, 각자 개발하는 모듈끼리 원활하게 소통할 수 있도록 팀 내 표준을 만들고 각자 모듈에 대한 요구와 제약을 설계해야 함을 배웠습니다.

개발 과정 중, 사이트를 공유해 준 학부 친구(경쟁 팀)과 아래에서 언급할 스트리머 플레이 당시, XSS, SQL Injection, 패킷 변조, 자바스크립트 함수 강제 실행 등 다양한 방식으로 공격당했고, 해킹을 시도했던 친구와 인터넷의 도움을 받아 기본적인 해킹 방어 로직을 구현했습니다. 이 때 정말 네트워크 통신과 게임에서 보안이 얼마나 중요한지 깨달았고, 당시에는 귀찮았지만 돌이켜보면 값진 경험을 할 수 있었습니다.

아쉽게도, 완성 약 2주 전 더많이 더적게라는 한국 사이트3가 개설되면서 대부분의 유튜버와 스트리머가 이 사이트를 먼저 플레이 하여 검색 키워드 게임을 선점당했습니다. 하지만 네이버를 데이터의 출처로 삼는다는 차별점이 있었고, 아직 플레이 하지 않은 유튜버들에게 홍보하여 어느정도의 인지도를 확보할 수 있었습니다.

또한, ‘Higher Lower Game’과는 다르게 ‘더많이 더적게’의 경우 수신 데이터를 보면 검색어가 몇 회 검색 되었는가를 모두 알 수 있었는데, 픽키는 이부분을 보완하여 사용자가 키워드를 선택하기 전까지는 검색 횟수를 받아오지 않는 방법을 사용하여 수신 데이터를 이용한 버그 플레이를 방지하였습니다.

성공적으로 완성한 뒤에, 참여한 팀원 모두 A+를 받았고 ‘공혁준’, ‘따효니’, ‘옥냥이’ 등의 유명 유튜버·스트리머들에게 홍보하여 인기를 끌며 일반 게임 2020년 2월 21일 현재까지 4만번 정도 플레이 되어 정말 재미있게 프로젝트를 완료할 수 있었습니다.

1 공혁준과 따효니의 경우 플레이 영상을 유튜브에 업로드 하지 않아 영상이 남아있지 않습니다.

2 스퀘어넷의 서비스 중단으로 인해 서버 이전

3 Higher Lower Game에서 개발한 것이 아닌, 한국 내 다른 팀이 개발한 것으로 추정됩니다.

이런 주제는 어떠신가요?

회고와 구현 글을 함께 보면 프로젝트의 전체 맥락을 더 쉽게 이해할 수 있습니다.

댓글남기기

참고