리뷰 사진 시리즈의 세 번째 글이다. 첫 글에서는 사진 확대에 걸리는 1.7초 중 1.3초가 애니메이션이라는 것을 쟀고, 둘째 글에서는 효과를 무엇으로 비교할지 배포 전에 정해 두었다. 이번 글은 배포 후 약 일주일치 GA4 데이터로 효과를 분석한 결과다. 결론 사진이 빨리 보이게 되자 사진을 보는 횟수가 약 20% 늘었다. 구매율에 나쁜 영...

앞 글에서 리뷰 사진을 탭해서 크게 보기까지 실제 사용자 기준 p50 1.7초가 걸리고, 그중 1.3초가 애니메이션이라는 것을 찾았다. 이 과제의 기준은 세 단계였다. 대부분의 사용자가 지금 어떤 경험을 하는지 숫자로 잰다. 확대에 걸리는 시간을 지금보다 50% 줄인다. (가능하면) 매출에 미친 효과를 잰다. 이 글은 개선을 배포하기...

쇼핑몰의 상품 상세 페이지(스마트폰)에는 리뷰 목록이 있고, 리뷰에 붙은 사진을 탭하면 크게 볼 수 있다. 그런데 탭하고 나서 사진이 뜨기까지 로딩 스피너가 한동안 돈다. 리뷰는 구매를 정할 때 많이 보는 정보라서, 팀은 “리뷰 사진 확대를 빠르게 해서 고객의 구매 결정을 방해하지 않는다”를 과제로 잡았다. 기준은 두 단계였다. 대부분의 사용자...

My 도수 화면을 옮긴 글에서, 사용자에게 공개하는 일은 마지막 단계의 “CloudFront 경로 전환” 하나로 정해진다고 적었다. 화면과 API 연동은 7~8월에 이미 운영 환경에 배포했지만, 사용자는 그동안 계속 기존 PHP 화면을 보고 있었다. 그 경로 전환을 두 번 했다. 날짜 전환한 경로 ...

CloudFront 캐시 글에서 리뷰어 프로필 이미지를 바꿔도 이전 이미지가 계속 보이던 문제를 다뤘다. 그때는 기존 쇼핑몰(PHP) 화면이었고, CloudFront 캐시 키에 v를 넣어서 해결했다. 그 뒤 같은 화면을 Next.js로 옮겼다(프로필 편집 API 연동, 실데이터 연결). 그런데 Next.js 화면에서 같은 증상이 또 나왔다. 아이콘을...

공통 컴포넌트 글에서 만든 리뷰어 프로필 화면은 고정 목업(reviewerReviewsMock)을 보여 주고 있었다. 이번에는 실제 API에 연결했다. 요구 사항은 두 줄이었다. 로그인한 상태에서 자기 프로필만 볼 수 있다 API로 가져온 내용을 보여 준다 목업을 실데이터로 바꾸는 일은 “가짜 값을 진짜 값으로 갈아 끼우는 것”쯤으로 생...

회사 서비스에서 리뷰어 프로필 이미지를 바꿔도 이전 이미지가 계속 보이는 문제가 있었다. 이미지 URL에 ?v= 파라미터를 붙여서 캐시를 피하도록 만들어 두었는데, 왜 동작하지 않았는지 정리해 둔다. 문제 상황 프로필 편집 화면에서 이미지를 변경하면 업로드는 성공한다 (API 응답 204) 그런데 화면에는 변경 전 이미지가 그대로 표시된다...

앞 글에서 리뷰어 프로필 편집 화면을 모양까지만 만들었다. 이번에는 실제로 저장되게 했다. 바꿀 수 있는 건 닉네임과 프로필 아이콘(이미지) 두 가지다. 요구 사항은 두 줄이었다. 리뷰어 정보를 수정할 수 있다 자기 리뷰어 정보만 수정할 수 있다 저장 버튼 하나를 붙이는 일이었는데, 리뷰를 거치며 생각보다 많은 걸 배웠다. 닉네임 20자...

My 도수 화면에 이어, 마이페이지의 리뷰어 프로필 화면을 PHP 쇼핑몰에서 Next.js로 옮겼다. 내가 쓴 리뷰 목록을 보는 화면과, 닉네임·아이콘을 바꾸는 편집 화면이다. 리뷰 데이터를 다루는 백엔드는 이미 PHP에서 떨어져 나와 있었고, 화면만 남아 있었다. 그런데 쇼핑몰에는 리뷰어의 리뷰를 보여 주는 화면이 하나 더 있다. 상품 상세에서 리...

회사 쇼핑몰은 오래된 PHP 애플리케이션(EC-CUBE 기반) 위에서 돌아가고, 화면을 하나씩 Next.js로 옮기는 중이다. 마이페이지 첫 화면처럼 이미 옮긴 화면도 있다. Next.js 연수를 마치고 처음 맡은 실무가 마이페이지의 My 도수 화면을 옮기는 일이었다. 사용자가 왼쪽·오른쪽 렌즈 도수를 등록해 두면, 상품을 살 때 도수가 자동으로 선...