TIL_12월19일(목)

 

📅 TIL - 2024.12.19

주제: 자유주제(토스) - Webflow 애니메이션 및 텍스트 크기 조정 학습

---

1. 오늘 학습한 내용

1. Webflow에서 텍스트 크기 조정 방법
   • Webflow에서 텍스트 크기를 줄이거나 키우는 방법을 배우며, Scroll Actions와 Interactions 기능을 활용하는 법을 익혔습니다.
   • 무료 계정에서는 Size와 Scale을 활용해 간접적으로 텍스트 크기를 조정하는 것이 유효하다는 점을 확인했습니다.
2. Keyframe 설정의 중요성
   • Webflow의 애니메이션은 두 개 이상의 Keyframe(시작과 끝)을 설정해야 올바르게 작동한다는 것을 배웠습니다.
   • Keyframe 간의 간격과 값을 적절히 설정하여 부드러운 애니메이션 효과를 구현했습니다.
3. 텍스트 크기와 위치 조정
   • 텍스트 크기를 줄이면서 위치를 변경하는 애니메이션을 구현했습니다.
   • 주요 기능:
     • Move: 텍스트 위치 조정 (Y값에 음수(-)를 적용하여 위로 이동).
     • Size: 텍스트 상자의 크기 조정.
     • Scale: 텍스트 전체 크기 축소.
4. 무료 계정의 제약 극복
   • Webflow 무료 계정에서는 일부 기능이 제한적이므로, 창의적으로 Scroll Animation과 기본 Transition을 활용하여 원하는 효과를 얻었습니다.

오늘 작업에서 가장 먼저 맞닥뜨린 문제는 메인 페이지의 3D 모션 영상 품질이었습니다. 영상 사이즈와 규격을 맞춰 삽입했지만, 실제 결과물은 기대했던 품질과 달랐습니다. 무료 계정에서 작업하다 보니, Webflow가 자동으로 파일 크기를 압축하며 품질을 낮춘 것이 아닌가 싶었습니다.

특히, 영상이 너무 고해상도일 경우 결과물이 깨지는 현상이 발생했는데, 이를 방지하기 위해 적정 해상도를 찾으며 반복 테스트를 진행했습니다. 최종적으로 동전 3D 모션이 작지 않게, 그리고 최대한 깨지지 않는 품질로 표현되도록 수정 작업을 완료했습니다.

 

텍스트 모션 작업은 이번 프로젝트에서 가장 큰 도전이었습니다. 무료 계정으로는 텍스트 크기(Size) 애니메이션을 직접 구현하기 어려운 상황이었습니다. 고민 끝에 피그마(Figma)를 활용해 텍스트를 SVG로 제작한 뒤, 이미지를 삽입해 사이즈를 조정하는 방법으로 문제를 해결했습니다.

해결 과정:

• SVG를 이미지로 변환하여 Webflow에 업로드.
• 텍스트 크기를 자유롭게 조정하며 원하는 애니메이션 효과를 구현.

 

 

서브 텍스트 모션은 비교적 쉽게 해결됐지만, 첫 번째 텍스트의 Move 및 Size 조정 시 다시 여러 수정이 필요했습니다. Keyframe 간격과 애니메이션 속도를 미세 조정하며 최적의 결과를 얻었습니다. 시간이 많이 걸렸지만, 하나씩 꼼꼼히 조정한 끝에 깔끔하게 완성되었습니다.

2. 학습 과정에서 해결한 문제

• 문제 1: Move 경고 메시지 발생
  • "You need two Move actions on the Div Block 24 element to animate it."라는 경고를 해결하기 위해 Keyframe을 추가하고, Keyframe 간격을 넓혀 부드러운 동작을 구현했습니다.
• 문제 2: 텍스트 크기가 자연스럽게 줄어들지 않음
  • Scale 애니메이션을 활용하여 텍스트 크기를 부드럽게 줄이는 방법을 적용했습니다.
• 문제 3: Hover와 Scroll 트리거의 차이
  • Hover는 마우스가 특정 요소 위에 있을 때만 작동하지만, Scroll Actions는 사용자의 스크롤에 따라 애니메이션을 실행할 수 있음을 확인했습니다.

---

3

느낀 점 및 다음 목표

• 무료 계정에서 기능 제약이 많았지만, 대안을 찾고 문제를 해결하며 만족스러운 결과를 얻었습니다.
• Webflow에서 영상과 텍스트 품질을 최적화하는 데 시간과 노력이 필요하다는 점을 배웠습니다.
• 다음 작업에서는 Webflow 유료 계정을 활용하거나 더 많은 SVG 및 외부 도구를 활용해 효율적으로 진행하고 싶습니다.

토스를 주제로 선정하며 어려워 보이는 인터렉션을 구현해보며 다양한 기능들을 알게 되어서 좋았습니다.

다만 기간안에 모든걸 다하기에는 너무 욕심인것 같아 페이지 길이는 적당히 진행하고 CMS와 카드 마우스 호버시 인터렉션 주는것 까지(시간이 된다면)내일까지 빠르게 잘 완성해 보려고 합니다.

 

웹사이트 제작하다 보니 벌써 새벽 12시가 지났는데, 오늘도 정말 집중해서 잘 몰입한것 같습니다.

내일까지 체력만 잘 버텨주기를 ㅠㅠ!! 화이틩....🍀✨