04 · LG Travel+
로딩 3분을 10초로 줄인 핵심 구조 재구축
LG webOS TV에서 특정 여행지와 관련된 정보를 제공하는 TV 애플리케이션
- 기간
- 2025.07 ~ 2026.01
- 팀
- 4인 개발
- 역할
- 요구사항 분석 · 프론트엔드 아키텍처 · 상태 관리 · 공통 컴포넌트 개발
- 기술
- React · TypeScript · webOS · SCSS · Redux Toolkit · Laravel · Jenkins
Background
- 성능 문제로 일부 TV에서 정상 이용이 불가능했습니다.
- 결합도가 높은 코드로 인해 하나의 수정이 다른 오류를 발생시켰습니다.
- 디자인 요구와 TV 하드웨어 성능 사이의 충돌이 있었습니다.
- 촉박한 일정 내에 성능이 개선된 리뉴얼 버전 개발이 필요했습니다.
- 백엔드는 타 개발자가 진행하던 것을 인수받아 API와 데이터 모델을 완성해야 했습니다.
Role & Users
담당 범위
- 요구사항 분석
- 프론트엔드 아키텍처
- 상태 관리
- 공통 컴포넌트 개발
- 성능 최적화
- 백엔드 개발
- 데이터베이스 추가 설계
- 배포
- 팀원 관리
- 일정 관리
- 고객사 커뮤니케이션
- QA 이슈 분석과 수정
사용자
- LG webOS TV 사용자
Key Challenge
부분 수정 대신 핵심 구조 재구성
문제
기존 버전은 성능 문제로 QA 검증조차 어려웠고, TV 하드웨어와 일정 모두 여유가 없었습니다.
접근
- 영향이 큰 화면부터 우선순위를 정해 핵심 구조를 재구성했습니다.
- 런타임 스타일 생성 비용과 포커스 처리 구조를 재검토했습니다.
Loading 3 min → 10 sec
Challenge 2
디자인과 하드웨어 제약 조율
문제
디자인 표현을 그대로 구현하면 저사양 TV에서 성능이 저하됐습니다.
디자인 완성도와 실제 사용 가능성 사이의 충돌이 있었습니다.
접근
- 성능 문제가 발생하는 기술적 이유를 설명했습니다.
- 디자인 의도를 유지하면서 구현 가능한 대안을 여러 개 제시했습니다.
- 기획 및 디자인 부서와 대안 수준을 합의했습니다.
사용성과 시각적 완성도를 함께 고려한 결과물을 적용했습니다.
Key Decision
포커스 시스템 재구성
기존 TV 포커스 라이브러리를 Enact 기반 방식으로 변경했습니다.
webOS의 기본 포커스 환경과 호환되는 방식을 채택했습니다.
기존 코드를 유지하는 대신 안정성을 위해 핵심 구조를 재구성했습니다.
Focus Architecture 전환
기존 포커스 라이브러리
성능·호환성 문제
Enact 기반 방식 검토
webOS 기본 포커스 환경과 호환
핵심 구조 재구성
부분 수정 대신 안정성 우선
Decision 2
성능 병목 컴포넌트에 SCSS 적용
성능 병목이 큰 컴포넌트에 styled-components 대신 SCSS를 적용했습니다.
런타임 스타일 생성 비용을 줄이는 것이 목적이었습니다.
Decision 3
인수한 백엔드의 완성 전략
기존 코드의 구조를 먼저 분석하고, 결손된 API를 목록화해 우선순위를 정했습니다.
외부 API 연동과 MySQL 데이터 모델을 완성한 뒤, Jenkins 기반 CI/CD를 구축해 배포를 안정화했습니다.
Backend Takeover
구조 분석
기존 코드·데이터 흐름 파악
결손 API 목록화
우선순위 결정
연동·모델 완성
외부 API + MySQL 모델
CI/CD 구축
Jenkins 배포 자동화
Outcome
- 일부 화면 로딩 시간
- 약 3분 → 약 10초개발 당시 측정
- 리뉴얼 개발 기간
- 약 1개월기존 버전이 약 3개월 동안 구현한 범위 확보
- LG 내부 QA
- 검증 가능한 수준으로 안정화
정리
- 디자인 요구와 TV 하드웨어 제약 사이의 대안을 제시해 합의를 이끌었습니다.
Reflection
스타일 시스템 혼용
- styled-components와 SCSS를 함께 사용했습니다.
- 다시 구현한다면 TV 성능 환경을 고려해 SCSS 중심으로 통일하고 싶습니다.
테스트 환경
- 일정 제약으로 충분한 기기와 조건에서 테스트하지 못했습니다.
- 다시 진행한다면 초기부터 기기별 성능 테스트 매트릭스를 구성하고 싶습니다.