릴리즈 노트 v1.1.0

Jump to bottom

SungHyun Do edited this page Jan 17, 2025 · 2 revisions

2주차 릴리즈 노트

프론트엔드

성능 최적화와 사용자 경험 개선에 맞추어 진행하였습니다. 주요 변경 사항은 컴포넌트 로직 개선, 성능 지표 향상, UX 업데이트입니다.

컴포넌트 로직 개선

문제 상황

하나의 컴포넌트에 UI와 비지니스 로직이 길게 작성되어 있어 가독성이 낮음
하위 컴포넌트에 데이터를 전달할 때 여러 개의 컴포넌트를 거쳐 데이터 추적이 어렵고, 가독성 낮고, 디버깅에 큰 어려움을 겪음

개선 사항

비즈니스 로직은 커스텀 훅으로 작성하여 분리
props drilling을 해결하기 위해 Context API를 사용

결과

비즈니스 로직과 UI 로직을 분리하여 가독성이 크게 향상되었고, 코드 리뷰 및 협업에 용이해짐
데이터 전달 구조 단순화: Context API를 사용하여 props drillilng 문제 해결, 데이터 전달 경로가 단순화되어 디버깅 및 코드 이해도 상승
유지 보수성 향상
- 코드 별 책임이 분리되어 있어 유지보수성에 용이함

Lighthouse 성능개선

문제 상황

초기 로드 시간이 길어 사용자 첫 화면 표시까지 대기 시간 증가
- LCP 시간이 2.3s로 데스크톱 LCP 점수 해석에 따르면 2.4s초과인 경우 느림 으로 구분 됨
SEO 점수가 낮아 검색 엔진 최적화 부족
메인페이지 진입 시 모든 페이지의 정보를 한번에 불러와 초기 네트워크 요청량이 많은 현상이 있음.

개선 사항

LCP 문제는 Render Delay 때문인데, 이는 글꼴 로딩 시간 때문에 발생함
- 기존 font 용량이 커서 로딩 시간이 큼(290ms)
- 서브셋 font로 변경하여 로딩 시간 감축(약 30ms)
- CRD를 줄이기 위해 preload 방식으로 폰트 로딩 변경하여 폰트를 병렬적으로 불러옴
검색 엔진 최적화를 위해 robots.txt 파일 추가
서비스 설명 및 Open Graph 메타 태그 추가
lazy import를 적용하여 현재 렌더링되지 않은 페이지의 정보를 분리하여 초기 네트워크 요청량 감소.

결과

LCP 시간 2.3s에서 0.8s로 개선
Performance 점수 82점에서 98점으로 개선
SEO 점수 82점에서 100점으로 개선
메인 페이지 진입 시 기존에는 153건의 네트워크 요청과 7.7MB의 리소스 요청을 85건의 네트워크 요청과 4.6MB의 리소스 요청으로 감소

UX 개선 - 스켈레톤 UI 및 로딩 최적화

문제 사항

모든 페이지에서 동일한 로딩 화면을 표시하여 사용자가 실제 컨텐츠의 구조를 예측하기 어려움.
빠른 네트워크 환경에서 스켈레톤 적용 시 스켈레톤을 보여주고 컨텐츠를 보여주기 때문에 깜박임(flash) 현상 발생. 이는 시각적으로 불편함을 초래.

개선 사항

페이지 별 스켈레톤 UI 구현
- 실제 컨텐츠의 레이아웃과 구조를 미리 보여주는 플레이스홀더 디자인 적용
- 주요 페이지별 특성을 반영한 맞춤 스켈레톤 디자인 적용
지연 스켈레톤 기능 적용
- 사용자의 네트워크 환경에 따라 스켈레톤 표시를 해주는 지연 스켈레톤을 적용

결과

스켈레톤 페이지 적용으로 인해 사용자의 페이지 구조 예측성이 향상
지연 스켈레톤 적용으로 flash 현상을 줄여 사용자 경험이 향상
네트워크 환경에 따른 최적화된 로딩 경험 제공

백엔드

코드 리팩토링 위주로 진행했습니다. 빈약한 도메인 모델과 높은 결합도를 가진 어플리케이션 서비스를 도메인 서비스로 분리했습니다.

안티패턴인 트랜잭션 스크립트 패턴을 도메인 패턴으로 변경

문제 상황

리팩토링을 할 경우, 코드의 결합성이 높아서 유지 보수 비용이 증가하는 문제

개선 사항

빈약한 도메인 모델을 확장성이 있는 모델로 변환
Application Service와 Domain Service 분리

결과

비즈니스 로직이 분리되어서 결합도를 낮춤으로 유지 보수에 적합한 코드로 변경