기존에 제작한 개인 포트폴리오 사이트를 리뉴얼한 퍼스널 브랜드 사이트입니다. 디자인을 새로 기획하면서 애니메이션 효과를 추가하고 페이지 렌더링 방식을 서버단으로 변경하면서 코드를 다시 작성해 제작했습니다. UI 기획단계에서는 Apple의 Human Interface Guideline을 반영하여 설계했습니다. 저의 페이지를 들어오는 사용자들에게 직관적이고 일관된 경험을 제공하고자 함이며 추후 저의 브랜드 명으로 제작된 서비스의 스토어 출시를 고려해 반영하게 되었습니다.

Plain React에서 NextJS로 변경하게 된 이유는 오직 서버사이드 렌더링을 위함입니다. 네바람 웹은 앞으로 거대해질 것입니다. CSR로 이루어지는 싱글페이지 웹에서 복잡한 애니메이션, 데이터 번들이 계속해서 추가된다면 사용자 경험에 영향이 갈 것이라 판단하여 렌더링 방식을 함께 변경하게 되었습니다.

스크롤/마우스 애니메이션, 모션 슬라이더, 다국어 라우팅 및 번역, 서버사이드 렌더링, 반응형 웹 스크린, PWA

초기 제작했던 페이지는 초기 렌더링(FCP)이 2.5초, 레이아웃 불안정(CLS) 지수가 0.6이었고 검색엔진 최적화(SEO) 지수가 68로 매우 낮아 노출 빈도에 취약한 상태였습니다. 성능을 올리기 위한 5개 성능 지표를 분석 후 개선 방법을 정리하여 적용했고, 사용 경험이 좋은 UI/UX를 제공하고자 대표 웹 사이트 3곳을 분석했습니다. 성능 측면에서 이미지 크기를 모두 30KB 이내로 2배 이상 압축하였고 크기와 비율을 고정해 레이아웃 변동 가능성을 차단했습니다. 또한 이미지 설명과 사이트맵, 페이지별 메타데이터를 추가했으며 GIF와 같은 큰 이미지에 대한 로딩 상황 피드백을 제공했습니다. 렌더링 측면에서 레이아웃을 서버 사이드에서 프리렌더링하도록 변경하여 페이지가 로드되는 시간을 단축했습니다. 사용 경험 측면에서 통일된 폰트와 구분된 크기, 한정된 색상 적용으로 일관된 시각 경험을 제공하여 혼란을 최소화했고 트랜지션을 활용해 사용자의 움직임에 따른 즉각적 피드백을 만들었습니다. 그 결과 5개 성능 지표의 평균 지수가 67에서 96으로 향상했고 FCP와 CLS, SEO를 각각 0.6초, 0.005, 100으로 개선할 수 있었습니다.

TypeScript React Next.js Redux-Toolkit i18next TailwindCSS

Vercel