❤️ 소개
안녕하세요! 17기 Figma에 참여하고 있는 경원입니다.
저는 교육 업종 인하우스 마케터로 재직 중인데요.
회사에서 쓰는 랜딩 페이지가 주로 단일 이미지 형태로 되어 있어, 반응형 페이지를 만들 수 있으면 좋겠다는 생각에 이번 스터디에 참여하게 되었습니다 😃
📝 진행 방법
스터디장님께서 공지문에 넣어주신 사전 영상을 시청하면서 figma make를 미리 실습해보았습니다. (본업 상호명이 공개되면 좀 그래서 모자이크 처리했습니다 😉)
피그마에서 프레임에 작업해둔 것이 있어 프레임을 복사해 프롬프트에 붙여넣고 '스크롤 타이밍에 따른 반응형 웹페이지로 제작하고 싶습니다. 텍스트와 도형 요소에 애니메이션을 적용해주세요'라고 입력했습니다.
🧪 결과와 배운 점
가장 큰 목적이었던 '스크롤 타이밍에 따른 애니메이션' 은 잘 구현되었습니다.
아쉬웠던 점은 텍스트 밑에 깔아두었던 도형의 배열이 깨지면서 가독성이 하락했다는 점이었습니다.
처음 수정 요청을 할 때는 '다시 정돈해주세요' 정도로만 입력했었는데요.
그래도 여전히 텍스트와 도형의 배치가 맞지 않는 부분이 있어, 두 번째 요청할 때는 '파란 rectangle 요소'라고 정확히 지시해보았습니다.
그 결과 최상단의 이 부분 빼고는 텍스트와 도형의 정렬이 완전히 일치하게 됐습니다. (회색 박스는 제가 모자이크한 부분이에요🌟)
물론 폰트가 깨지는 등 디테일한 요소들이 다소 아쉽긴 하지만....
그 동안 고민했던 반응형 페이지를 만들 수 있는 방법이 생긴 것 같아 앞으로의 스터디가 기대됩니다!
💡 도움 받은 글
글은 아니지만, 첫 번째 스터디 시간에 '피그마 오토 레이아웃'을 사용하면 figma make 에 요소들을 그대로 옮겨올 수 있다는 피드백을 들어서 오토 레이아웃을 더 공부해보려고 합니다 😃