하이브리드 앱 개발 사례: 프로 스포츠 리그 공식 앱

01 / 04

경기 일정에서 티켓까지, 팬이 거듭 여는 정보의 배치

프로 스포츠 리그 공식 앱은 경기 일정, 경기 결과, 선수 정보, 뉴스, 티켓처럼 팬이 반복해서 확인하는 정보를 모바일 화면에 담습니다. 경기 영상 · 사진도 함께 보여 주고, 티켓은 예매부터 경기장 입장에 쓰는 모바일 티켓까지 앱 안에서 끝납니다. 읽는 콘텐츠 화면과 예매처럼 무언가를 하는 기능 화면이 한 앱에 섞여 있어, 탐색 흐름이 복잡해지지 않게 화면 단위로 문제를 조정했습니다. 1.0과 2.0 두 버전에 걸쳐 이 화면들의 개발에 참여했습니다.

02 / 04

웹으로 만든 화면이 앱 안에서 앱처럼 열리는 구조

하이브리드 앱은 웹으로 만든 화면을 앱이 감싸서 보여 주고, 웹에서 하기 어려운 일은 앱 기능을 불러 처리합니다. 웹 화면으로 들어가는 진입, 앱 기능 호출, 외부 링크 처리, 앱 안의 화면 전환이 한 흐름으로 이어지도록 구조를 정리했습니다. 웹에서 처리하기 어려운 기능은 앱에서 보완해, 사용자가 지금 보는 화면이 웹인지 앱인지 신경 쓰지 않아도 되게 했습니다.

03 / 04

링크 · 미디어 · 로딩 시점을 앱 안에서 다시 맞춘 웹 화면 처리

웹에서는 문제없던 링크 이동, 파일 · 미디어 표시, 화면 로딩 시점이 앱 안에서는 다르게 동작하는 경우가 있습니다. 이런 경우를 앱이 감싸는 쪽에서 하나씩 보완해, 웹 화면이 앱 안에서도 제대로 동작하게 했습니다. 웹과 앱 사이에서 데이터를 주고받고 기능을 부르는 흐름도 함께 정리해, 웹 화면의 상태 변화가 앱의 흐름과 어긋나지 않게 맞췄습니다.

04 / 04

문제가 웹 몫인지 앱 몫인지부터 가린 협업 기준

공식 앱은 기획, 웹, 앱 파트가 나뉜 상태에서 함께 만들었습니다. 화면에서 문제가 생기면 웹 구현에서 난 것인지, 앱이 감싸는 쪽에서 처리해야 하는 것인지부터 가린 뒤 요구사항과 수정 범위를 맞췄습니다. 원격으로 일하며 소통이 엇갈린 적도 있었지만, 그 과정에서 웹 화면 로딩, 웹과 앱의 연결, 웹과 앱의 책임 경계를 깊이 이해하게 됐습니다. 이 이해는 이후 웹 기반 고급 기능을 앱에 넣는 작업의 바탕이 됐습니다.

프로 스포츠 리그 공식 앱

경기 일정에서 티켓까지, 팬이 거듭 여는 정보의 배치

웹으로 만든 화면이 앱 안에서 앱처럼 열리는 구조

링크 · 미디어 · 로딩 시점을 앱 안에서 다시 맞춘 웹 화면 처리

문제가 웹 몫인지 앱 몫인지부터 가린 협업 기준

이 작업의 포인트

인사이트

GA4 client_storage: 'none'은 정말 쿠키를 막을까?

GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기

중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?

Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기