문제를 발견하고

끝까지 만드는

최윤성입니다

필터링 속도 5s → 2.5s 개선

Remix action 함수는 form 내 모든 필드 변경을 일괄 처리합니다. 필터 조건을 hidden input으로 관리하던 구조에서, 조건이 바뀔 때마다 검색 로직이 의도치 않게 중복 실행되는 문제가 있었습니다. sessionStorage에 이전 검색 상태를 캐싱해 중복 실행을 차단하고, 필터링 응답 속도를 5초에서 2.5초로 단축했습니다.

컴포넌트-서버 간 통신 구조 정립

자식 컴포넌트에서 action 없이 Prisma와 직접 통신해야 하는 케이스가 있었습니다. Remix routes에 경량 API 파일을 분리하고 axios로 요청을 라우팅하는 패턴을 정립해, 컴포넌트 구조를 손상시키지 않고 서버 접근 문제를 해결했습니다.

Storybook 기반 컴포넌트 설계 패턴 구축

앱과 관리 웹을 동시에 개발하면서 동일한 UI 요소가 두 플랫폼에 걸쳐 반복 사용되는 상황이 많았습니다. Storybook을 도입해 버튼, 인풋, 카드 등 핵심 컴포넌트를 독립적으로 개발하고 각 상태(기본·비활성·에러 등)를 Story로 정의했습니다. 이를 통해 컴포넌트의 재사용 범위를 명확히 하고, 디자이너·개발자 간 UI 기준을 문서 형태로 공유할 수 있는 환경을 만들었습니다. 개발 중 발생하는 스타일 회귀도 Storybook에서 시각적으로 바로 확인할 수 있어 QA 부담이 줄었습니다.

인터랙티브 트리 구조 키오스크 템플릿 설계

납품마다 유사한 구조를 처음부터 다시 구현하는 비효율을 해소하기 위해 재사용 가능한 공통 템플릿을 설계했습니다. 화면 중앙에는 AI 휴먼 영상이 재생되며 사용자에게 안내 멘트를 제공하고, 사용자가 항목을 누르면 트리 구조로 분기가 생성되어 각 섹션으로 전환되는 방식입니다. 분기 구조는 JSON 설정만으로 노드와 연결 관계를 정의할 수 있도록 설계해, 고객사별 메뉴 구성이 달라지더라도 템플릿 코드 수정 없이 설정만으로 대응할 수 있게 했습니다. 한국어·영어 전환 역시 JSON에 언어별 텍스트를 정의하면 UI 전체에 즉시 반영되는 구조로, 별도 코드 수정 없이 다국어를 지원했습니다.

태블릿·모바일 반응형 대응

키오스크 UI는 고정 해상도 환경을 전제했지만, 고객 시연 현장에서 태블릿이나 스마트폰으로도 동작해야 하는 요구가 있었습니다. 뷰포트 크기에 따라 레이아웃과 터치 인터랙션이 자연스럽게 조정되도록 반응형 처리를 적용해, 별도 기기를 준비하지 않고도 현장에서 실기기 시연이 가능해졌습니다.

이벤트 추첨 시스템 재설계

기존 로직은 이전에 당첨된 이력이 있는 사용자를 추첨 대상에서 제외하는 방식이었습니다. 이 때문에 당첨 확률이 구매 이력에 따라 달라지는 공정성 문제가 있었고, 반복 구매 사용자일수록 오히려 불이익을 받는 역설적인 구조였습니다. 모든 티켓 구매자를 동등한 조건으로 포함하는 랜덤 추첨 시스템으로 재설계해 공정성을 확보했습니다.

추첨 명단 엑셀 업로드 자동화

기존에는 추첨 대상 명단을 관리자가 백엔드 시스템에 직접 수작업으로 입력해야 했습니다. 엑셀 파일을 업로드하면 데이터를 파싱해 백엔드 서버에 자동으로 전송하는 기능을 구현해, 명단 등록 과정에서 발생하던 수동 작업과 입력 오류를 줄였습니다. 기존에 하루 이틀씩 소요되던 이벤트 명단 관리 작업이 한 시간 안에 완료될 수 있게 되었고, 야구 플랫폼 관계자로부터 직접 긍정적인 피드백을 받았습니다.

멤버십 회원가입 자동화

기존에는 관리자가 백엔드 시스템에 멤버십 코드를 직접 입력한 뒤 사용자에게 전달하는 수동 방식으로 운영됐습니다. 백엔드에서 코드를 자동 생성·발급하는 로직으로 전환해, 관리자 개입 없이 가입 시 코드가 자동 발송되도록 개선했습니다.