포켓미니의 '패션 피버' 이벤트 재현 (Figma 디자인과 웹 페이지 개발)

포켓미니 구글 플레이스토어 링크 : https://play.google.com/store/apps/details?id=kr.cocone.minime

 

지난 25년 12월 25일부터 2주 간, Figma를 활용한 서비스 디자인과 웹 페이지 UI 구현을 진행했다.

아직은 API 연동 전이기에... 이후 ERD 및 API 설계를 마무리하고 조금 수정을 해야 할 것 같다.

 

혼자였다면 조금 막막했을 텐데, 대학 동기가 UI 구현을 도와줘서 조금은 수월하게 끝낸 것 같다.

(계절 끝나고 또 도와줘 친구야...)

 

어쨌든 큰 산을 하나 무사히 넘은 기념으로, 그간 고민했던 개발 배경부터 Figma 디자인 과정, 그리고 웹 페이지 구현까지 가볍게 기록해 보려고 한다.

 

 

①  개발 배경

 

포켓미니는 '꾸미기' 게임으로, 2015년 서비스를 시작해 작년에 출시 10주년을 맞이했다. 한때 어깨를 나란히 했던 '라인 플레이'나 '아이러브 니키' 같은 게임들이 아쉽게도 서비스 종료 소식을 전한 가운데, 포켓미니의 행보는 다소 독보적이라고 볼 수 있다.

 

그러나 포켓미니도 순탄하게 10주년을 맞이한 것은 아니다. 포켓미니는 일본 본 서버를 중심으로 한국과 글로벌(영어) 서버가 운영되었으나, 글로벌 서버는 2017년에 일찍이 서비스 종료를 했었다. 한국 서버 역시 2022년부터 이벤트가 급감하며 2024년까지 긴 암흑기를 겪어야 했다. (필자도 23년부터 25년 10월까지 게임에 접속하지 않았다.) 최근에서야 포켓미니의 동생 게임인 '포켓트윈'이 서비스 오픈을 하면서, 포켓미니에도 '럭키 도넛', '프리마켓', '럭키백', '마법항아리' 등 유저들이 염원하던 이벤트들이 열리면서, 떠났던 유저들이 복귀하고 있다.

 

 

그럼에도 유저들이 가장 염원했던, 그리고 이제는 반쯤 포기 상태에 접어선 이벤트가 하나 있다. 바로, '패션 피버'이다.

 

'패션 피버'는 특정 주제에 맞춰 미니를 꾸미고, 유저 투표를 통해 랭킹을 매기는 이벤트로, 꾸미기 게임의 정체성을 가장 잘 보여주는 콘텐츠이다. 유저들은 이 이벤트를 통해 자신이 수집한 아이템들을 다양한 조합으로 뽐내며, 그동안 모은 아이템의 활용도를 극대화할 수 있다는 점에서 인기가 높았다. 하지만 안타깝게도 2018년 4월을 마지막으로 공식적으로 열리지 않고 있다.

 

지금은 '포미듀스 (포켓미니 + 프로듀스 101)'의 줄임말인 '폼듀'라는 명칭으로, 유저가 직접 주제 선정부터, 채점, 시상까지 진행하며 게임 내에서 독특한 커뮤니티 문화를 형성해 나가고 있다. 운영측의 공백을 유저들의 열정으로 채우고 있는 셈이다. 물론 '폼듀'가 유저들의 갈증을 달래주고는 있지만, 구조적인 아쉬움은 여전하다. 주최자의 주관이 개입될 수밖에 없는 채점 방식, 그리고 소수 인원만 혜택을 받는 운영 방식 때문이다. 게임 내 커뮤니티나 네이버 공식 카페를 거점으로 삼다 보니 대규모 인원이 공정하게 참여하는 시스템을 갖추기에는 현실적인 벽이 존재한다.

 

그렇다고 폼듀에 단점만 존재하는 것은 아니다. 오히려 보상의 수준은 공식 이벤트 시절보다 압도적으로 높아졌다. 과거 공식 '패션 피버'의 최고 보상이 일반 '슈레(슈퍼 레어)' 아이템이었다면, 현재 유저들이 주최하는 폼듀에서는 과금 유저 전용인 'VIP 슈레' 심지어 희귀성으로 인해 가치가 몇 배로 뛴 '고가치 희귀템'들이 상품으로 등장하고 있다. 보상을 받는 인원은 줄었을지 몰라도, 당첨 시 얻게 되는 이득이 상상 이상으로 커진 것이 유저들에게는 거대한 메리트로 작용하고 있다.

 

 

이러한 상황 속에서 필자가 '패션 피버'를 웹 기반으로 재현해보고자 한 데에는 크게 두 가지 이유가 있었다.

 

첫째, 웹 기반 이벤트의 가능성을 확인했다.

지난 25년 12월 초, 공식 카페에서 한 유저가 Github.io 정적 웹사이트를 통해, 이벤트를 열어 큰 흥행을 거둔 적이 있었다. 이를 보며 웹 플랫폼이 가진 접근성이 유저들의 화력을 모으는 데 매우 효과적이라는 확신을 얻었다.

 

둘째, 7년이 공백을 채우는 '대규모 축제'에 대한 열망이다.

패션 피버가 중단된 지 어느덧 7년이 넘었다. 소수만 즐기는 이벤트를 넘어, 과거처럼 대규모 유저가 동시에 참여하고 즐길 수 있는 장을 다시 만드는 작업 자체가 매력적인 도전으로 다가왔다.

 

(사실, 이벤트를 핑계 삼아 우승 상품으로 내걸 VIP 아이템들을 마음껏 '현질'하고 싶었던 개인적인 욕망도 한몫했다.)

 

 

②  Figma 디자인

웹 페이지 개발의 가이드라인을 잡기 위해 먼저 Figma로 초안 디자인을 진행했다.

 

이번 프로젝트는 새로운 창작보다는 기존 패션 피버의 감성을 웹으로 완벽히 옮겨오는 '재현'에 초점을 맞추었기에 디자인 방향성은 명확했다. 다만, 모바일 게임의 사용자 경험(UX)을 웹에서도 이질감 없이 유지하는 것이 핵심이라고 할 수 있었다.

 

이를 위해 필자는 AppShell 방식을 채택했다. 웹이지만 모바일 앱의 사용성을 그대로 제공하기 위해 디자인의 기본 너비를 390px로 고정하고, 모바일 전용 UI로 설계했다. PC 브라우저에서도 화면 중앙에 레이아웃을 배치하여 유저들이 마치 실제 게임 앱을 사용하는 듯한 몰입감을 느낄 수 있도록 구성했다. 이러한 명확한 설계 기준 덕분에 큰 어려움 없이 기획의 토대를 완성할 수 있었다.

 

 

 

우선 로그인 페이지는 패션 피버 직전에 진행되었던 '럭키 도넛' 이벤트의 공지사항 디자인을 레퍼런스로 삼아 유저들에게 친숙한 시각적 경험을 제공하고자 했다. 또한, 과거 패션 피버 결과 화면에서 특별 세일가를 제시하던 안내창 UI를 재해석하여, '정보 제공 및 서비스 활용 동의' 창으로 변주해 보았다.

 

로그인 및 본인 인증 방식은 별도의 복잡한 가입 절차 없이, 게임 내 시스템을 활용해 보안과 유저 검증을 동시에 잡을 수 있도록 설계했다.

 

1. 미니 코드 입력: 유저가 웹페이지 로그인 화면에 자신의 '미니 코드'를 입력한다.

2. 친구 신청: 유저는 게임 내에서 미리 지정된 '패션 피버 운영용 부계정'으로 친구 신청을 보낸다.

3. 입장 코드 발급: 운영 부계정이 친구 신청을 확인하면, 해당 유저에게 1:1 메시지를 통해 무작위로 생성된 '입장 코드'를 발송한다.

4. 로그인 완료: 유저는 전달받은 코드를 웹에 입력하여 본인 인증을 마치고 이벤트를 즐길 수 있게 된다.

 

이 방식은 웹에서의 부정 접근을 원천 차단할 뿐만 아니라, 실제 포켓미니 유저임을 게임 내 시스템을 통해 직접 증명할 수 있는 확실한 방법이다.

 

 

 

홈 화면 역시 기존 패션 피버의 레이아웃을 충실히 계승하되, 실제 게임 아이템(뽑기 티켓) 지급이 불가능한 한계를 극복하기 위해 '공감 점수' 시스템을 새롭게 도입했다. 이 공감 점수는 단순한 기록용이 아니라, 최종 순위를 결정하는 [투표 + 공감 + 심사위원 + 랭킹 보정]이라는 4가지 핵심 지표 중 하나로 기능한다. 특히 유저들의 꾸준한 참여를 독려하기 위해 다음과 같은 차등 지급 로직을 UI에 녹여냈다.

 

◆  참여 구간 설정: 최소 30회 투표 시점부터 점수가 활성화된다.

◆  차등 보상: 100회 투표까지 투표 횟수에 비례하여 점수를 차등 지급하여, 유저들이 목표 의식을 가지고 투표에 참여할 수 있도록 설계했다.

 

비록 직접적인 아이템 보상은 없지만, 자신의 투표 활동이 최종 랭킹에 실질적인 영향력을 미치도록 설계함으로써 이벤트의 공정성과 참여의 밀도를 동시에 높이고자 했다.

 

 

 

코디 제출 화면은 게임 내에서 직접 미니를 꾸미는 기존 방식 대신, 유저가 게임 내 코디를 스크린샷으로 찍어 업로드하는 방식으로 설계했다. 특히 제출 및 보상 로직에는 유저들의 참여 동기를 높이기 위한 세심한 기획을 더했다.

 

◆  다양성 확보 (최대 4개 코디): 유저 한 명당 최대 4개의 코디를 제출할 수 있게 하여, 투표 시 더욱 다채롭고 풍성한 패션들을 확인할 수 있도록 유도했다.

◆  보상 문턱 완화 (최고 순위 기준): 4개를 제출하더라도 보상은 유저당 가장 높은 순위를 기록한 코디 하나만을 기준으로 지급된다. 이는 모든 슬롯을 채워야 한다는 부담감을 줄여주는 동시에, 특정 소수가 상품을 독점하는 것을 방지하여 최대한 많은 유저가 혜택을 누릴 수 있도록 하기 위함이다.

 

결과적으로, 유저는 자신의 개성을 마음껏 뽐낼 수 있고, 커뮤니티는 풍부한 볼거리를 얻으며, 운영 측면에서는 보상의 공정한 분배까지 실현할 수 있는 구조를 구축하고자 했다.

 

 

 

투표 화면은 상하로 배치된 두 코디 중 하나를 선택하는 기존 패션 피버의 디자인과 로직을 그대로 채택했다. 유저들에게 가장 익숙한 UI를 제공하여 별도의 적응 없이도 직관적으로 투표를 즐길 수 있도록 디자인했다.

 

 

 

마지막으로 결과 화면은 유저가 자신의 성적을 직관적으로 확인하고, 전체 순위의 투명성을 느낄 수 있도록 디자인했다. 자신의 최고 랭킹뿐만 아니라 제출한 모든 패션의 개별 순위, 그리고 상위권 랭킹을 확인할 수 있다.

 

이번 프로젝트의 핵심인 최종 점수 산정 방식은 다음과 같이 설계했다.

◆  기본 점수: 투표 점수(4.0) + 공감 점수(0.5) + 심사위원 점수(0.5) = 총 5.0점 만점

◆  하트 레이팅 기반 보상: 선물을 지급하는 기준은 기존 패션 피버의 관례를 그대로 따랐다. 특정 '하트 레이팅' 이상을 기록한 유저들에게 상품을 제공함으로써, 원작을 즐기던 유저들이 느꼈던 성취감과 기준을 웹에서도 동일하게 경험할 수 있도록 설계했다.

◆  랭킹 보정 점수 도입: 다만, 한정된 수량의 선물을 더욱 공정하게 배분하기 위해 최종 단계에서 '랭킹 보정 점수'를 추가했다.

 

자칫 생소할 수 있는 '랭킹 보정 점수'에 대해 유저들이 의문을 갖지 않도록, 상세한 설명을 담은 안내창 UI를 함께 배치했다. 이를 통해 점수 산정 방식의 투명성을 높이고, 모든 유저가 납득할 수 있는 공정한 축제의 장을 만들고자 디자인적인 배려를 더했다.

 

 

③   웹 페이지 구현

디자인 기획을 마친 후, 본격적인 웹 페이지 개발은 Next.js 프레임워크를 기반으로 진행했다. 이 단계부터는 대학 동기가 개발을 도와주어 더욱 효율적으로 작업을 이어갈 수 있었다.

 

협업의 효율을 높이기 위해 가장 먼저 신경 쓴 부분은 Prettier (Code Formatter) 설정이었다.

 

◆  가독성 향상: TSX 요소의 계층 구조를 명확히 시각화하여 코드 가독성을 높였다.

◆  일관성 유지: GitHub를 통한 버전 관리 시, 작업자 간 코드 스타일 차이로 발생하는 불필요한 변경 내역(Diff)을 최소화하여 실제 로직 변화에만 집중할 수 있는 환경을 만들었다.

 

 

또한, 기획 단계에서 정했던 AppShell 방식을 구현하기 위해 작성한 globals.css의 설정은 다음과 같다.

:root {
  --background: #fafafa; /* white */
  --foreground: #0c0c0c; /* black */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0c0c0c;
  }

  html {
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  font-family: var(--font-BMJUA); /* 공용 폰트 적용 */
}

html {
  scrollbar-gutter: stable; /* 스크롤바 생성 시 화면 밀림 방지 */
}

html,
body {
  width: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
}

main {
  margin: 0 auto; /* 중앙 배치 */

  width: 100%;
  max-width: 425px; /* 모바일 전용 뷰포트 고정 */
  min-width: 320px;
  min-height: 100dvh; /* 모바일 브라우저 주소창 높이 대응 */

  background-color: #fafafa;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  line-height: 1;
}

 

 

코드의 품질뿐만 아니라 실제 웹 페이지의 성능을 극대화하기 위해 Next.js가 제공하는 강력한 최적화 기능들을 적극적으로 도입했다.

 

1. <Link> 컴포넌트를 통한 즉각적인 페이지 전환

일반적인 <a> 태그 대신 Next.js의 <Link> 컴포넌트를 사용했다. 이는 사용자가 링크를 클릭하기 전, 백그라운드에서 미리 데이터를 로드하는 프리페칭(Prefetching) 기능을 활용하기 위함이다. 사용자가 클릭하는 시점에는 이미 브라우저에 다음 페이지를 렌더링할 데이터가 준비되어 있기에, 이를 활용해 마치 페이지 이동이 즉각적으로 일어나는 듯한 쾌적한 사용자 경험을 제공하고자 했다.

 

2. <Image> 컴포넌트를 통한 고성능 이미지 관리

◆  시각적 안정성 확보 (Visual Stability): 이미지가 로드될 때 화면이 아래로 덜컥거리며 밀리는 레이아웃 시프트(Layout Shift) 현상을 자동으로 방지하여 안정적인 UI를 유지할 수 있다.

◆  지능적 로딩 (Lazy Loading): 브라우저의 네이티브 '레이지 로딩' 기능을 활용해, 이미지가 실제 화면(Viewport)에 들어올 때만 로드하도록 설정하여 초기 페이지 로딩 속도를 개선할 수 있다.

 

3. 서버 컴포넌트 중심 설계

Next.js의 앱 라우터(App Router) 구조가 가진 이점을 극대화하기 위해, layout.tsx를 중심으로 가능한 한 많은 컴포넌트를 서버 컴포넌트로 유지하며 구현했다. (물론 현재 구조에 완벽하지 않은 부분이 있을 수 있으나, 지속적인 학습을 통해 완성도를 높이고 최적화해 나갈 예정이다.)
◆   성능 최적화: 브라우저로 전송되는 자바스크립트 번들 크기를 획기적으로 줄여, 초기 페이지 로딩 속도와 런타임 성능을 동시에 높일 수 있다.

 

 

개발 효율을 극대화하고 코드의 가독성을 높이기 위해, 라이브러리는 Mantine UI를 적극적으로 채택했다.

◆  레이아웃과 가독성: Mantine에서 제공하는 Flex, Group, Stack과 같은 레이아웃 컴포넌트들을 활용했다. 덕분에 복잡한 CSS 속성 없이도 TSX 내부에서 구조를 직관적으로 파악할 수 있었고, 전반적인 코드의 가독성이 크게 향상되었다.

◆  복잡한 기능 구현의 간소화: MultiSelect, Switch, Rating 등 웹 페이지에 필요한 다채로운 입력 요소들을 Mantine 컴포넌트로 해결했다. 특히 사진 업로드를 위한 FileInput이나 기간 설정을 위한 DateInput 등 구현이 까다로운 컴포넌트들을 안정적으로 도입함으로써, 개발 시간을 획기적으로 줄일 수 있었다.

 

이러한 UI 라이브러리의 활용은 동기와의 협업 과정에서 일관된 디자인 시스템을 유지하는 데에도 큰 도움이 되었다.

 

 

마지막으로 아래는 웹 페이지 개발을 마치고, 로그인 화면과 코디 제출 화면의 실제 동작을 담은 GIF이다. 

 

 

이제 이 뼈대 위에 데이터를 생생하게 불어넣을 ERD 및 API 설계, 그리고 대망의 실서비스 운영기로 다음 포스팅에서 찾아뵙겠다. 

긴 글 읽어주셔서 감사합니다!!