normm

출발점은 친구들과 이야기하던 이상형 월드컵 서비스 사업 아이디어였습니다. 검색 유입을 확보해 콘텐츠형 캐시카우로 만들 수 있지 않을까 생각했고, 기존 서비스 PIKU를 보면서 제작 경험과 공유 경험을 더 확장할 여지를 찾았습니다.

졸업작품에서는 사용자가 월드컵을 직접 만들고 다른 사용자가 플레이하는 UGC 서비스로 기획했습니다. 장기적으로는 제작자 팔로우와 친구 관계를 중심으로 콘텐츠를 탐색하는 SNS 기능도 검토했습니다.

하지만 졸업전시 일정 안에 그 비전을 모두 구현하는 것은 불가능했습니다. 그래서 제품이 성립하는 최소 핵심을 “월드컵을 만든다 → 플레이한다 → 결과와 통계를 본다”로 잡았습니다. 친구 관계나 Google 이미지 검색 같은 아이디어는 뒤로 미루고 이 흐름의 완성을 우선했습니다.

브랜드 이름과 로고, 모바일 중심 화면 디자인, 그래픽 애셋, 서비스 로직과 API까지 한 프로젝트 안에서 직접 다뤘습니다. React 프론트엔드와 WordPress Custom REST API를 연결하고, 카카오 로그인과 JWT 기반 사용자 흐름, 이미지 업로드, 토너먼트 상태와 통계를 구현했습니다.

기획한 사용자 흐름에 맞춰 디자인, 인증, 이미지 업로드, 토너먼트 상태와 통계를 연결했습니다. 생성부터 플레이와 결과 확인까지 실제로 사용할 수 있는 제품으로 완성했습니다.

`Making`, `Tournament`, `Statistic`을 최상위 페이지로 나누고 `apis`, `hook`, `redux`, `components`를 별도 계층으로 구성했습니다. 생성→플레이→결과의 각 단계에 필요한 화면과 상태 처리를 분리했습니다.

일반 사용자가 콘텐츠를 만들 수 있도록 후보 일괄 등록, 이름 수정과 이미지 교체를 제공했습니다. 등록된 콘텐츠가 다른 사용자의 플레이와 통계로 이어지도록 연결했습니다.

제작 UX에서 먼저 발견한 업로드 문제

기존 서비스의 한 장씩 이미지 추가하는 과정을 줄이기 위해 다중 이미지 선택과 Drag & Drop을 지원했습니다. 여러 파일을 순차 업로드하도록 제어해 후보 등록 상태가 뒤섞이지 않게 했습니다.

여러 후보 이미지를 한 번에 선택해 순차 등록하고, 업로드한 후보의 이름 수정과 이미지 교체·삭제까지 같은 만들기 화면에서 처리했습니다.

프론트엔드에서는 React 17, Redux, styled-components와 React Router를 사용했습니다. Backend는 WordPress와 PHP였고, 프론트가 `data.normm.me`의 REST API와 통신하는 구조였습니다. 이미지 업로드는 multipart/form-data, 인증은 Kakao Login과 JWT Bearer token을 사용했습니다.

브라우저에서 전송한 이미지는 WordPress API에 저장하고, 로그인한 사용자의 JWT로 요청을 인증했습니다. 토너먼트는 매치별 선택 결과를 서버에 갱신하며 다음 대진과 결과 화면으로 이어지게 했습니다.

후보 선택 후 승패 연출과 다음 매치 이동은 상태 변화와 setTimeout으로 순서를 맞췄습니다. 테스트와 반복 가능한 설계 규칙은 충분히 갖추지 못해, UI 흐름을 변경할 때 상태 전환과 대기 시간을 함께 확인해야 하는 한계가 남았습니다.

서비스는 실제로 공개됐지만, 졸업전시 이후 적극적인 홍보와 후속 운영을 거의 하지 않았습니다. 기능은 완성됐지만 사용자가 충분히 유입되지 않았고, 결과적으로 제품으로서의 성장까지 이어지지는 못했습니다.

전시에서 관람객이 접속해 플레이했으나 실제 사용자 생성 콘텐츠는 없었습니다. 초기 콘텐츠 공급과 지속적인 유입을 위한 운영은 진행하지 않았습니다.