Feat(client,landing): lotti변경 및 전송시 메타데이터 추가#144
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthroughapps/client와 apps/landing의 index.html에 파비콘 경로와 SEO/Open Graph 메타 태그가 추가·수정되었고, apps/landing의 로띠 애니메이션 자산(2_bookmark.json)이 새 구성으로 교체되었습니다. 타이틀과 본문 구조는 변경되지 않았습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10–15 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/landing/src/assets/2_bookmark.json (6)
2-2: 레이어/에셋 이름 인코딩(모지바케) 문제
"nm": "ë��ë�©..."처럼 UTF-8이 깨진 문자열이 다수 보입니다. 유지보수성과 검색성 저하 요인입니다. 원본 한글명을 정상 UTF-8로 저장하거나 영문/ASCII로 통일해 주세요.
72-105: 마스크가 적용된 래스터 이미지 성능 점검
hasMask: true인 이미지 레이어에 경계 박스 마스크가 붙어 있습니다. iOS/Safari에서 마스크+PNG는 CPU 사용량과 배터리 소모가 커질 수 있습니다. 스크롤 구간 재생 시 프레임 드랍 가능성 점검 부탁드립니다. 가능하면 벡터화/패스 마스크 단순화 또는 캔버스 렌더러 사용 고려 바랍니다.
266-296: 대용량 base64 PNG 임베딩(4개) → 외부 파일화 및 캐시 권장현재 이미지(IDs 3–6)가 data URI로 내장되어 JSON이 수백 KB~MB 수준으로 비대합니다. 초기 페인트/전송 비용과 메모리 압박이 커집니다. 아래와 같이 외부 파일로 분리하고,
u(경로 프리픽스)+p(파일명)로 참조하는 구성을 권장합니다.- "id": "3", - "e": 1, - "w": 246, - "h": 246, - "p": "data:image/png;base64,....", - "u": "" + "id": "3", + "e": 1, + "w": 246, + "h": 246, + "p": "img_3.png", + "u": "assets/lottie/"
- 빌드 측면: 파일 분리 시 HTTP 캐싱/압축(Gzip/Brotli) 이점 확보, 재다운로드 최소화.
- 운영 측면:
<link rel="preload">또는 lazy import로 초기 TTI/TBT 영향 완화.
111-113: 총 길이(4s @30fps) 확인 및 리듀스드 모션 대응
fr:30,op:120로 약 4초입니다. 랜딩 히어로 반복 재생 시 사용성 이슈가 있을 수 있으니:
- prefers-reduced-motion 일 때 정지/정적 포스터 제공
- in-view 시에만 재생(IntersectionObserver) 및 1회 재생 후 정지
를 권장합니다.
55-71: 레이어 정규화 및 불필요 속성 제거
sa:0,o:100등 기본값이 반복됩니다. Lottie 최적화 시 불필요 키 제거로 용량을 줄일 수 있습니다. LottieFiles Optimizer/bodymovin 설정에서 압축 레벨을 높여 재내보내기 고려 바랍니다.
118-141: 중첩 프리컴프 구조 점검자산
id:"1"→레이어→다시refId:"2"로 프리컴프 중첩이 깊습니다. 재사용이 아니라면 플랫닝(Pre-render/flatten)으로 런타임 계산량을 줄일 수 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/client/public/link_Thumbnail.pngis excluded by!**/*.pngapps/landing/public/link_Thumbnail.pngis excluded by!**/*.png
📒 Files selected for processing (3)
apps/client/index.html(1 hunks)apps/landing/index.html(1 hunks)apps/landing/src/assets/2_bookmark.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (8)
apps/landing/index.html (2)
5-5: 파비콘 경로 변경 확인 완료favicon 경로가 상대 경로에서 절대 경로로 올바르게 변경되었습니다.
7-26: 메타데이터 추가로 SEO 개선Open Graph 및 일반 메타 태그들이 적절히 추가되어 소셜 미디어 공유 시 미리보기가 개선될 것입니다. 한국어 설명문과 함께 웹사이트의 브랜딩이 일관되게 적용되었습니다.
apps/client/index.html (2)
5-5: 파비콘 경로 일관성 확보landing 앱과 동일하게 favicon 경로가 절대 경로로 통일되어 일관성이 확보되었습니다.
7-26: 중복 메타데이터 확인 필요apps/client/index.html과 apps/landing/index.html에 메타 태그(설명, Open Graph 등)가 완전히 동일하게 중복되어 있습니다 — 동일한 브랜딩/SEO 설정 적용이 의도된 것인지 확인하고, 의도하지 않으면 공통 템플릿으로 추출하거나 한 곳으로 통합하세요.
apps/landing/src/assets/2_bookmark.json (4)
259-264: 에셋 인덱스/의존성 검증레이어들이
refId:"5"등 특정 에셋에 의존합니다. After Effects에서의 리네임/정렬 과정에서 깨진 참조가 없는지(특히 삭제된 프레임 범위) 최종 산출물 플레이 확인 부탁드립니다.
1-7: 메타 정보(도구 버전) 기록은 좋습니다
meta.g에 툴킷 버전을 남긴 점은 재현 가능성에 도움이 됩니다. 해당 버전으로만 재익스포트해야 동일 바이너리를 보장하므로 도구 버전도 README/디자인 핸드오프에 명시해 두면 좋겠습니다.
109-109: 검증 필요 — Lottie JSON(v: 5.7.0)과 런타임 호환성 확인apps/landing/src/assets/2_bookmark.json의 "v"는 5.7.0이며, apps/landing/package.json에 lottie-react 의존성이 존재합니다. 런타임(lottie-web 또는 @lottiefiles/lottie-player) 버전을 확인해 호환성(특히 마스크/이미지 처리 차이)을 검증하세요.
- apps/landing/package.json에서 lottie-react 버전 및 해당 패키지의 peerDependencies 확인.
- 루트 락파일(pnpm-lock.yaml / yarn.lock / package-lock.json)에서 실제 설치된 lottie-web 또는 @lottiefiles/lottie-player 버전 확인.
- 코드에서 import 'lottie-react' / import 'lottie-web' /
<lottie-player>사용 위치(apps/landing/src/** 등)를 찾아 런타임 로드 방식을 확인.- 문제 의심 시 현재 런타임으로 해당 JSON을 렌더링해 마스크·이미지 동작을 직접 검증.
11-15: sr, st, op, ip 값 검증 필요
– Lottie spec에서 sr(Time Stretch)은 숫자형이며 음수로 설정 시 AE에서 레이어를 역재생(reverse)하기도 합니다 (sr 타입은 number) (lottiefiles.github.io)
– st(시작 프레임), ip(인 포인트), op(아웃 포인트) 설정이 zero-length가 되거나 컴포지션 전체 프레임 수를 벗어나지 않는지 확인 필요 (lottiefiles.github.io)
의도된 타임 리매핑이라면 디자인 노트/샘플 플레이어 스크린샷 공유 부탁드립니다.
1 participant
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit
Style
Chores